UI bugs on Homepage

# Bad UX , UI Bugs in Coding Blocks Part -1

## Home Page

#### Url : [Link](https://codingblocks.com/)

1. Banner

* Upon opening the homepage, we observe a banner showcasing the current offers running in the coding blocks followd by a navigation bar in expand mode. Well, when we try to close the banner the navbar is still in collapsed state (but banner working fine in [Online Coding Blocks](https://online.codingblocks.com/) , [Hackerblocks](https://hack.codingblocks.com/) pages).

Intial state : Fig 1 , End state : Fig 2

* Nav links are also not visible as it overlapping with carousel Images, compare Fig 1 and Fig 2 the nav links are visible in Fig 2 but not in Fig 1

Fig 1 :


Fig 2 :


Why to fix :

* This is a very good example for a bad UX.
* Homepage is the very first page that the user interacts with and this should be perfectly designed and developed or else this creates a very bad experience to the user.

Suggestion :

* Fix the banner or use modals, popups
* Use images with better backgrounds in carousel that makes the nav links visible

2. NavBar

* The Navbar is holding too much information and too many dropdowns menus

Fig 3 :


Why to fix :

* We are actually forcing the user to go through a lot information and this misguides his main purpose on visting our website.

* All links mentioned in dropdown menus of Live courses , Classroom courses are already represented in the form of cards in the same page and also in the footer so its gives a clumsy experience to the user.

Suggestion :

* Remove Dropdown menus of Live Courses , Classroom Courses etc
* Use simple navigation bar with the section names
* Use Smooth Scroll Navbar : As the data in the links is already represented in the form of cards below , have a navbar with the section names and upon clicking on section names it should scroll to those section showing all the courses

3. Team

* Text is not properly wrapped in founder's description and also in few other cards.

Fig 4 :


Why to fix :

* Everybody is interested in reading the story of founders, co-founders of the company.
* Facing readability issues in these cases need to be fixed (First card)

Suggestion :

* Add proper word spacing and justification
* Try to have a lightbox or modals to display the description or try to tell a short story in one paragraph

4. Maps

* Google Maps is not working

Fig 5 :


Why to Fix :

* Working contact details like user forms and google maps locations makes the company trustworthy and it creates reassurance relif to the user.

Suggestion :

* If something is on our webpage that should be working properly or else remove it.
* Simple buttons which redirects to the campus location also works fine as it's fulfilling the user needs.

5. Footer

* Too much information , Not properly aligned social icons , data repetation

Fig 6 :


Why to fix :

* I personally hate it as a daily visitor / user .
* I feel like all data in the footer is repeated i know footer gives the quick links to access data faster but you have those links or data all over the page or also in navigation.

Suggestions :

* If your are planning to provide same links in the navbar please replace this rich footer with a simple one
* We can totally remove the twitter feed in
* Properly align the social icons
* Plan for one that looks like a footer in [Online Coding Blocks](https://online.codingblocks.com/) page.

6. Section Headings Alignment

* I have observed all the section headings like Live Courses , Classroom Courses ,Team are aligned to center of the page but not for Numbers speak louder and What our students say sections

Why to Fix :

* Inconsistency is a very bad pratice in the UX , always title Typefaces , Fontsizes , Alignments should be same
* This can see seemed as minor bug but it will have huge impact on user experience.

Suggestion :

* Maintain consistency in Typefaces , Margins , Aligments , Sizes , Fontstyles atleast for the same kind of elements on the page

從首頁 URL 開始，參考連結的螢幕截圖，重現所回報的橫幅、導覽列、團隊文字、地圖、頁尾和區段標題問題。當列出的每個首頁問題都已解決，且頁面具備一致的導覽、版面配置、對齊方式和可正常運作的地圖內容時，工作即告完成。

由索引模型根據 Issue 內容生成。