Challenge Summary
Welcome to AZ - Ideation Website Responsive Design Concepts Challenge. In this challenge, we need your help in researching the reference ideation products and come up with features/pages that would be more apt for this website.
We are looking for your design expertise in coming up with design concepts for a website!
AZ is the codename of the challenge!
NOTE: We will be awarding checkpoint prize $150 to all best submissions
Round 1
Submit your initial designs for Checkpoint Feedback
1. Ideas Home (Desktop + Mobile)
2. Category Details (Desktop)
3. Idea Details (Desktop)
4. Search Results (Desktop)
5. Post an Idea (Desktop)
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note 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 designs with all Checkpoint Feedback implemented.
1. Ideas Home (Desktop + Mobile)
2. Category Details (Desktop + Mobile)
3. Idea Details (Desktop + Mobile)
4. Search Results (Desktop + Mobile)
5. Post an Idea (Desktop + Mobile)
6. Login (Desktop + Mobile)
7. Register (Desktop + Mobile)
8. User Dashboard (Desktop + Mobile)
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The Purpose of this challenge is to come up with a design for responsive web-based application that will help the customer is gathering ideas from its users. We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).
IMPORTANT!! Design Considerations:
- We are looking for you to come up with modern, flat designs!
- Please use a placeholder for the logo.
- We are looking forward, these designs will help in coming up with the HTML pages that this application needs to have.
- Show us how these pages you come up with will be linked together
- What should be the priority features.
- Suggest user pages flow and navigation.
- Think simple but effective solutions! Have fun creating this - let us know how you think it should work!
- It would be great if you can provide a Style Tile for reference for developers. Reference: http://styletil.es/
Design Size:
Please create your screens of size
- Desktop: 1200 px (width) and height as required.
- Mobile: 640 x 960 px
Apart from the above two screen sizes, please create screens with the standard breakpoints (i.e. we would like you to submit a single screen for size < 768px, screen for size ≥ 768px, screen for size ≥ 992px - see below bootstrap grid options) in mind and document the changes for each size (navigation, imagery, etc).
Reference:
http://www.iphoneresolution.com/
http://getbootstrap.com/css/#grid-options
Branding Guidelines:
Please follow the colors from Style-Reference.zip
- Note this is only a reference for colors and no other maintenance charges are included.
Ideation Reference:
Client likes the concept shown here: http://mystarbucksidea.force.com/
- This is a custom Ideas site - so use that as inspiration and please DO NOT COPY
Required Pages:
For this challenge, we would like to design below screens, as well as anything else you think is needed to convey your ideas.
Below are not just the features we are looking for, we would like you to do more research on the starbucks ideation platforms to find out more on what other features can be included in this application - this is a major requirement for this challenge.
1. Ideas Home:
- This page will show the list of ideas contributed by various users.
- What details should each of the idea contain?
- What should this page show “top voted ideas, show categories (within each category there will be many ideas - clicking on this takes user to category details page), Recent Ideas, Recently Commented Ideas”
- The client would like to group the ideas by categories and the categories by higher level categories (See the Starbucks example).
- User will have the ability to login/register with this site! (see below for more details on these pages)
List of Ideas:
- In this section, we show list of ideas - think on how we need to show them in your designs.
- What are the options that need to be shown for each of the idea (few lines of text, date when it was posted and by whom it was posted.. etc..)
- Feel free to include anything that seems appropriate (for ex: sorting, etc...)
Search:
- User will need the ability to search for ideas.
- Think on where it would be appropriate to have a search?
Leaderboard:
- We need to display a leaderboard with the user name, their total number of ideas submitted and voted so far!
- Come up with thoughts on how the leaderboard need to be shown?
- Based on the most voted idea, it will be promoted and move to implementation.
2. Category Details:
- This shows the ideas contributed by users under a “Category”
- We need to show an introduction of the category and list the ideas in this category.
- What other elements can be shared in this category details page? please do some research on the given reference/ideation application.
3. Idea Details:
- When a user selects an idea from any of the above pages, they arrive at this page - this page further shows details about the idea.
- This page shows the details about the idea, possibly shows description about the idea, date when it was posted and by whom was it posted.
- User will have option to Vote up/down and also will have the ability to Comment.
- What else do you think can be shown in this view?
4. Search Results:
- User will search for ideas from any page of the site.
- How do you think the search results need to be shown?
- What are the important details that need to be captured in this page?
- We are looking for your thoughts on how to design this page!
5. Post an Idea:
- User will have the ability to post an idea.
- What is the information that a user need to enter in order to post an idea? (Idea name, Idea description, idea category, etc..)
- Come up with a design that makes this process very simple!
- Note that a user need to log in before they can post an idea, if the user is not logged in then they need to prompted to login (show us in design on how this alert need to be shown?)
6. Login:
- User will need the ability to sign in to this application
- Minimum details that will be required are username and password
- Provide additional options [remember me, forgot password (please make sure to include this page as well), etc] that you think will help improve user experience.
7. Register:
- User will be able to register with the site.
- What are the details that will be required from the user? we should allow them to enter their desired username (need to make sure if its exists or not - how do you think this can be indicated?) and password!
- On submitting the registration form, what needs to be shown (confirmation/success screen? - please shown them in your designs)
8. User Dashboard:
- It would be a great feature to have a dashboard for the user.
- Show some simple statistics that describes their activity in a glance.
- We would like you to show the recent activities of the user.
- Show the list of ideas posted by them and any comments received for it
- To keep them going, we need to introduce the gamification concept (explore more on that) by showing their current position in the leaderboard and what is still required to reach top spots in the leaderboard!
- What else can be shown in this page?
Target Audience:
- All AZ Employees
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as a mobile application
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. We may ask you to update your design or graphics based on checkpoint feedback.
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.