Design top (above the fold) section of help centre front page
Requirements: Top section must include next well designed elements:
- (0) Don't think about logo, we will find a place for it later on, we have it already. Headline is "Customer Empowerment Centre";
- (1) Notification Line (page top narrow headline): "Password change doesn't work, because of .....some reasons" (this line would appear not always, only when there is general problem and support service wants to announce it to all customers);
- (2) Search Box (essential element, customers have to focus on it when land on this page)
- (3) POPular searches (below the search): "how to refund", "how to cancel", "can't login" etc... (example:http://support.twitter.com)
- (4) 4 major categories: "Troubleshooting", "Payments & Orders", "Accounts & Learning", "Products".
Note: If I divide the web front page into sections, the top section has to contain a search box and those 4 categories (needs to be visible above the fold).
Search bar and 4 categories are the most important elements on this section. When customer clicks on any of 4 categories, he/her will stay on the same page and related content will be extended/appeared down on the same page. Content supposes to not be heavy (it is just a list of topics related to category).
List of topics for "troubleshooting" category as an example:
- Cannot log in to my account
- Password Issues: Can't Change or login afterwards
- Didn't receive a program after purchase
- Cannot open my program
- Program disappeared from my account
- etc...
So, we are concerned about 2 actions with categories: on hover (intuitively shows that is clickable element) and on click (show selected state). Pay attention that when user clicks on category, it must be somehow highlighted in order to show that user under it right now. Customer has to have an opportunity to easily switch between categories at any time.
Requirements to design style: You can structure categories in different ways, not only horizontally if needed. Top section has to release stress from a customer. Think about background image here. It should be minimalistic, flat design, but at the same time creative and interesting, bright. Use 2015, 2016 design trends. Evoke positive emotions. Do not use the hackneyed options, like in above the fold in https://support.apple.com/ (simple ordinary background image with support team members). Find any extraordinary way to represent this top section. Show what will happen on hover and click with one of the categories. As a background image you can use nature, in order to release the stress, confident woman, kid and so on.
Background video can be used as an option.
See examples here (just for inspiration):
http://www.shutterstock.com/video/clip-16600531-stock-footage-mystic-foggy-sunset-forest-dolly-movement-toned-footage.html?src=rel/2618195:1/3p
http://www.shutterstock.com/video/clip-6253433-stock-footage-father-and-son-running-on-jetty.html?src=/DKXr1dN_8VVPP6uqHmi2-A:2:61/3p
http://www.shutterstock.com/video/clip-8017804-stock-footage-silhouette-of-forest-trees-at-sunset-mystical-light-beam-effect-background.html?src=rel/2618195:3
http://www.shutterstock.com/video/clip-5432333-stock-footage-aerial-shot-of-a-tropical-rainforest.html?src=/dNd9qSKxcjDm8k32dysgxQ:2:11/3p
http://www.shutterstock.com/video/clip-17119159-stock-footage-aerial-view-over-pines-tree-forest-of-a-mist-covered-whanganui-river-new-zealand.html?src=/dNd9qSKxcjDm8k32dysgxQ:2:29/3p
Thanks.