Challenge Summary
Welcome to Customer Knowledge Base - Responsive Design Concepts Challenge. In this challenge, we are looking forward to your design concepts for a Knowledge base website that acts a help center for providing information to all customers of the client.
Round 1
Submit your initial screens for Checkpoint feedback
1) Welcome Page (desktop + mobile)
2) Search Page (desktop + mobile)
Feel free to add any other additional screens which are necessary to explain your concept and flow
Notes.jpg: Any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all the required pages with all checkpoint feedback implemented.
Feel free to add any other additional screens which are necessary to explain your concept and flow
Notes.jpg: Any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Client of this project provides newspaper subscriptions and is looking for a responsive design for their customer knowledge base. The Knowledge website will be used to help customers and prospective customers to search a database of issues and help articles to deflect emails and phone calls to support.
IMPORTANT!! Design Considerations:
- Be a step by step process that is very intuitive to use
- Communicate to a wide group of customers to display status messages
- Simple and intuitive to use (look and feel of functionality is familiar to user)
- Easy to use across tablet, smartphones and browsers. Should be simple and not overwhelming
- We have attached reference wireframes for you to get started. These wireframes are not meant to drive layout or design. They only serve to establish page hierarchy, page content and outline the elements on the page. Be sure to come up with your own creative approach to display the information on each page.
- Feel free to use the logo in your designs from the style guide.
- Please follow the colors from the attached style guide.
- We need the below screen sizes:
- - Desktop “1600 as width and height as required.”
- - Mobile “320 X 480 px”
Design Content Scenarios:
For the Knowledge base, you can use the below examples within your designs
- How to apply for days to not deliver newspaper
- How to delete and re-install and app
- How can I change my billing date
- How do I update my payment details
- What is this product?
- What is this offer?
Required Pages:
We need the below pages for this challenge..
1) Welcome Page (1 knowledge_base_welcome_screen.png)
- This is the Landing page for all users.
- This page show introductory text explaining the purpose of the site.
- We need to show a question, “Are you a member?” with “Yes and No” buttons. This will enable filtering out of member specific data. How this can be shown in your designs?
- System status messages are needed in the page, where can this be shown?
2) Search Page (2 knowledge_base_search_screen.png)
This is Key page of customer experience.
- Narrow search results sidebar selections reflected in main search area
- Narrow search examples
My Subscription
- How can I change my billing date
- How do I update my payment details
Getting Started
- How to install the app
- What is this product?
- What is this offer?
- We need Live Chat button at bottom of screen - but this could also be a pop-up.
- Live Chat position on screen is intentional, so that a customer will have to scroll through potential answers before initiating chat.
- On clicking on the search results, user will either see a text results page or video results page, how can these be reflected in the search results?
3) Text Result Page (3 knowledge_base_text_result.png)
- Show us an example of Text based help article.
- We need to show more relevant information (links to relevant links, etc.) in this page.
- What other information can be shown here? Looking for your ideas!
4) Video Result Page (4 knowledge_base_video_result.png)
- Show us an example of Video based help article.
- We need to show more relevant information (links to relevant links, etc.) in this page.
- What other information can be shown here? Looking for your ideas!
References:
The following link is for a knowledge base that our client likes. You can use this as inspiration, but please be sure to include your own ideas.
http://bit.ly/1nohG
- Please DO NOT COPY from above reference.
Target:
Members of the public - both existing and potential customers.
Judging Criteria:
- Cleanliness of your graphics and design.
- How easy can the user view/browse data.
- Concepts for displaying the information in a unique/creative manner
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.