Challenge Summary
Welcome to Ideation Mobile WebApp Design Challenge.
We need your help to come up with a UX solution for the mobile version of an Ideation application which helps users contributing with organizations development through the process of idea submission and review, overall. We are looking forward to engage users through a very simple yet useful process.
Best of luck.
1. Landing Page
2. Event Overview
3. Submit Idea
4. Browse Ideas
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1. Landing Page
2. Event Overview
3. Submit Idea
4. Browse Ideas
5. Read and Collaborate on Ideas
6. View personal ideas, statistics, and subscriptions
7. Theme-ability
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this competition is to come up with the look and feel of a web mobile site.
The main function of this mobile application is to support ideation to make incremental improvements within an organization or drive disruptive innovation. The mobile web application is an extension of the desktop application, designed for employees to submit, collaborate and manage ideation on the go. Ideation is the creative process of generating, developing, and communicating new ideas, where an idea is a written and / or visual description in response to a request for targeted innovation.
Sponsors/admins create a virtual /online Event on the desktop application (out of scope) to kickoff a campaign to capture ideas from contributors. The process to create an idea is similar to a social media post, except there is a form that you have to fill out. Now that people are familiar with social media collaboration / usability, we think it would be advantageous to maintain similar workflow and look and feel.
Documentation
- UserJourneyMap.pdf: contains journey maps with user stories.
- Screenshots.zip: contains the existing mobile and desktop versions of the responsive website.
Concept Design Goals
One of our main problems is that our current mobile implementation has a poor navigation and look and feel; we need a brand new mobile UX.
The new mobile user Interface design should incorporate the latest trends in mobile and / or social applications. Gestures and components such as swipes and cards are to be considered. Our client may have anywhere from 50 to 1000 ideas in one ideation Event.
The following criteria are a list of design goals for the mobile application:
- Use Material Design to create the digital experience (mandatory). Must use layout, patterns, components, icons and best practices dictated by the Material Design philosophy.
- Streamline navigation to add an idea and collaborate.
- Make UI visually engaging, enjoyable, intuitive, and fun to navigate.
- Create addictive environment that cultivates viral adoption.
- Design Add an Idea UX for speed and ease.
- Design intuitive portal and event navigation.
- Design UI components that enable the customization of themes that enable / present effective corporate branding. Design elements must correlate with themes such that when a theme is applied all UI components are considered for a coherent design.
- Minimize clicks and typing to accomplish tasks
Design wise, it should feel intuitive, fun, and easy, encouraging engaging. UX wise, employees should quickly submit an idea without training.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- Please suggest how to organize this content and group them into screens, we are looking forward to see your unique proposals, be bold. The following screens orders are just initial suggestions but we think content could be organized in a different way, go for it!
1. Landing Page
The mobile app UI must facilitate the intuitive navigation from the Portal to multiple Events and between other Portals. Upon login, the user has the option to navigate to one of multiple Events.
Possible option to swipe through Event descriptions from Portal View (currently we have the user tap on an Event and they see the entire event overview).
The Portal should display the following:
- Title at the top of the app (Clients brand the app with their own name).
- Subtitle that may have brief guidance.
- All Events that the user has the permission to access (card, list, or other engaging display).
- Event Image with Event name.
- Company logo and company branded name for Innovation Central.
2. Event Overview
The event overview information is designed to provide participants context with the highlights of the event. For a new participant it may provide the context and instructions for the event in the description. For returning participants it provides a few high level stats.
Could we have this slide out from the left, for quick access from the find an idea list?.
Display the following information:
- Event Hero image.
- Sponsor name.
- Close date.
- Event details.
- Event description.
- Event activity (# ideas, comment, visitors).
- Challenges (these are a way of categorization - challenging targeted areas)
-- Image.
-- Title.
-- Challenge description.
-- Navigate between multiple challenges .
3. Submit Idea
User should be able to fill information about the idea. The number of questions may vary from Event to Event.
User should be able to save ideas as a draft to revise and submit later.
Overall form fields include:
- Idea title.
- Idea Description.
- Area (multiple values – radio buttons).
- Select Challenge.
- Up to 15 Additional Questions:
-- There are 4 types of answers: short text, long text, radio button multiple choice (single or multiple value)
-- Mandatory or Optional choices
-- Show a few samples that cover all the available types of answers.
- Add tags to an idea.
- Attach files to ideas:
-- Provide visual representation of file with the ability to preview attachments: Video, audio, pdf, Office, etc.
-- Provide recognition that the action in completed (confirmation).
4. Browse Ideas
To find an idea the UI should display or access:
- List of all ideas in the event.
Then have the ability to Search, Sort, or Filter.
- Search ideas with keywords.
- Sort by:
-- Date submitted.
-- Author.
-- Comments.
-- 5 Star Vote count.
-- Promote / Demote (a form of voting)
- Filter by
-- My ideas (Should this be in the personal area?).
-- My Favorites (Should this be in the personal area?).
-- Challenge topics.
-- Similar ideas.
-- Areas.
-- Stage.
5. Read and Collaborate on Ideas
Once the idea is selected, the user will read the idea and maybe collaborate on an idea.
They will see the following information about the idea on the screen:
- Primary Author Profile picture (not on current mobile app) and a list of co-authors.
- Title.
- Author.
- Date Posted.
- Idea description.
- Area field.
- Challenge.
- Additional questions and their answers.
- Tags.
- Stage.
- Comments with hierarchy and attachments (nested comments - 1 level).
- Collaboration attributes including number of star votes, promote / demote, number of times the idea has been favorited by other participants (likes - hearts on desktop), the number of times that a participant has sent a link of this idea to another participant (Share).
Once the user has read the idea, they may want to collaborate from Read Idea page (without navigating to a new page). They should be able to do the following actions with minimal clicks:
- Add another idea.
- Comment on an idea.
-- Reply to a comments with hierarchy.
-- Add an attachment to a comment you are submitting.
- Mark idea as favorite.
- Be able to share idea /send a link.
- Follow or unfollow ideas.
- 5 star vote (Amazon style 5 Star voting)
- Apply credits to Promote / Demote.
-- Have the ability to add (promote) and remove (demote) credits, or add credits only.
-- Display a tool that accomplishes Promote Demote or Promote Only, with and without scores—optimized for mobile.
-- Display promote / demote Credits remaining (will only be displayed if the function is enabled on the desktop)
~ E.g. existing method, you can see promote/demote and available credits.
6. View personal ideas, statistics, and subscriptions
Personal Info
The Personal area is where the user can see personal stats, contributions, and we as read notifications.
Default/Opening View is what the user should see when they open up the personal space. The default information includes:
- # of Ideas Submitted.
- # of Comments Submitted.
- # of Votes cast.
- A list of the ideas the user has submitted in that event, the date submitted and their 5 Star rating.
Additionally, the user should have access to:
- Notifications – These are notifications that currently are sent through email via the desktop application. We would like these email notifications to also be sent to the mobile app.
- My Favorites - including Idea title, Author, Date Added, and the ability to remove the idea. (example from the desktop below)
- My 5 Star ratings – including Idea Title, Author, and My votes. (example from the desktop below).
- My Comments Submitted, posted date, and comment
- My followed ideas – list idea title, Author, and ability to stop following
- Create Subscriptions – create subscription by choosing area or challenge topic
7. Theme-ability
Desktop app will provide a mechanism to change the theme of the application (FYI).
Design needs to be theme-able, meaning that any other client could use this application for their organization by swapping the colors. Your default theme must use the provided branding colors (see branding section).
In addition, provide one extra screen of the landing page using a different set of colors, chosen by you, just to showcase how it would look assuming another branding is applied to the UI.
Branding Guidelines
- Use the following as main colors for the main theme: #2FBCEE #E76E34 #8CC63F #FEBE2C. You can combine with some shades out of them.
- Use a logo placeholder.
- Fonts open to suggestions.
- Follow Material Design philosophy.
- Keep things consistent. This means all graphic styles should work together.
References
Use this for reference only. DO NOT COPY anything.
- Workplace.
- Asana.
- Pinterest.
Screen Specifications
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com). Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Icons must follow material design icons.
- Make sure to declare all your assets properly or you might fail screening.
Target User
Idea contributors & collaborators. This application will facilitate innovation anytime, anywhere, providing users with the ability to quickly add an idea and / or collaborate with other users.
We support industries such as Energy, Transportation (air and ground vehicles), Insurance, Medical, Chemical, Food and Financial Services.
The mobile application may often be used by participants who never log onto the desktop version, and will only use it once or twice a year.
Their demographics range from blue collar to white collar workers/skill sets, office or field employees (flight attendants, luggage handlers, food handlers, hotel personnel, oil processing plants), 25 – 70 years of age, and varying levels of computer / mobile expertise. We expect that many ideas entered on mobile may be less complex (i.e. content, size or images) than those submitted on desktop.
Judging Criteria
- How well is the design optimized for entering an idea. How interesting and engaging is the idea entry process?
- Interpretation of the user experience.
- Is the application visually appealing?
- Is the application easy to use?
- Are mobile-first considerations appropriately applied to the design concept?
- Cleanliness of your graphics and design.
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, Illustrator or Sketch. Layers should be named and well organized.
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.
We need your help to come up with a UX solution for the mobile version of an Ideation application which helps users contributing with organizations development through the process of idea submission and review, overall. We are looking forward to engage users through a very simple yet useful process.
Best of luck.
Round 1
Submit your design for a checkpoint feedback.1. Landing Page
2. Event Overview
3. Submit Idea
4. Browse Ideas
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final design plus checkpoint feedback.1. Landing Page
2. Event Overview
3. Submit Idea
4. Browse Ideas
5. Read and Collaborate on Ideas
6. View personal ideas, statistics, and subscriptions
7. Theme-ability
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this competition is to come up with the look and feel of a web mobile site.
The main function of this mobile application is to support ideation to make incremental improvements within an organization or drive disruptive innovation. The mobile web application is an extension of the desktop application, designed for employees to submit, collaborate and manage ideation on the go. Ideation is the creative process of generating, developing, and communicating new ideas, where an idea is a written and / or visual description in response to a request for targeted innovation.
Sponsors/admins create a virtual /online Event on the desktop application (out of scope) to kickoff a campaign to capture ideas from contributors. The process to create an idea is similar to a social media post, except there is a form that you have to fill out. Now that people are familiar with social media collaboration / usability, we think it would be advantageous to maintain similar workflow and look and feel.
Documentation
- UserJourneyMap.pdf: contains journey maps with user stories.
- Screenshots.zip: contains the existing mobile and desktop versions of the responsive website.
Concept Design Goals
One of our main problems is that our current mobile implementation has a poor navigation and look and feel; we need a brand new mobile UX.
The new mobile user Interface design should incorporate the latest trends in mobile and / or social applications. Gestures and components such as swipes and cards are to be considered. Our client may have anywhere from 50 to 1000 ideas in one ideation Event.
The following criteria are a list of design goals for the mobile application:
- Use Material Design to create the digital experience (mandatory). Must use layout, patterns, components, icons and best practices dictated by the Material Design philosophy.
- Streamline navigation to add an idea and collaborate.
- Make UI visually engaging, enjoyable, intuitive, and fun to navigate.
- Create addictive environment that cultivates viral adoption.
- Design Add an Idea UX for speed and ease.
- Design intuitive portal and event navigation.
- Design UI components that enable the customization of themes that enable / present effective corporate branding. Design elements must correlate with themes such that when a theme is applied all UI components are considered for a coherent design.
- Minimize clicks and typing to accomplish tasks
Design wise, it should feel intuitive, fun, and easy, encouraging engaging. UX wise, employees should quickly submit an idea without training.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- Please suggest how to organize this content and group them into screens, we are looking forward to see your unique proposals, be bold. The following screens orders are just initial suggestions but we think content could be organized in a different way, go for it!
1. Landing Page
The mobile app UI must facilitate the intuitive navigation from the Portal to multiple Events and between other Portals. Upon login, the user has the option to navigate to one of multiple Events.
Possible option to swipe through Event descriptions from Portal View (currently we have the user tap on an Event and they see the entire event overview).
The Portal should display the following:
- Title at the top of the app (Clients brand the app with their own name).
- Subtitle that may have brief guidance.
- All Events that the user has the permission to access (card, list, or other engaging display).
- Event Image with Event name.
- Company logo and company branded name for Innovation Central.
2. Event Overview
The event overview information is designed to provide participants context with the highlights of the event. For a new participant it may provide the context and instructions for the event in the description. For returning participants it provides a few high level stats.
Could we have this slide out from the left, for quick access from the find an idea list?.
Display the following information:
- Event Hero image.
- Sponsor name.
- Close date.
- Event details.
- Event description.
- Event activity (# ideas, comment, visitors).
- Challenges (these are a way of categorization - challenging targeted areas)
-- Image.
-- Title.
-- Challenge description.
-- Navigate between multiple challenges .
3. Submit Idea
User should be able to fill information about the idea. The number of questions may vary from Event to Event.
User should be able to save ideas as a draft to revise and submit later.
Overall form fields include:
- Idea title.
- Idea Description.
- Area (multiple values – radio buttons).
- Select Challenge.
- Up to 15 Additional Questions:
-- There are 4 types of answers: short text, long text, radio button multiple choice (single or multiple value)
-- Mandatory or Optional choices
-- Show a few samples that cover all the available types of answers.
- Add tags to an idea.
- Attach files to ideas:
-- Provide visual representation of file with the ability to preview attachments: Video, audio, pdf, Office, etc.
-- Provide recognition that the action in completed (confirmation).
4. Browse Ideas
To find an idea the UI should display or access:
- List of all ideas in the event.
Then have the ability to Search, Sort, or Filter.
- Search ideas with keywords.
- Sort by:
-- Date submitted.
-- Author.
-- Comments.
-- 5 Star Vote count.
-- Promote / Demote (a form of voting)
- Filter by
-- My ideas (Should this be in the personal area?).
-- My Favorites (Should this be in the personal area?).
-- Challenge topics.
-- Similar ideas.
-- Areas.
-- Stage.
5. Read and Collaborate on Ideas
Once the idea is selected, the user will read the idea and maybe collaborate on an idea.
They will see the following information about the idea on the screen:
- Primary Author Profile picture (not on current mobile app) and a list of co-authors.
- Title.
- Author.
- Date Posted.
- Idea description.
- Area field.
- Challenge.
- Additional questions and their answers.
- Tags.
- Stage.
- Comments with hierarchy and attachments (nested comments - 1 level).
- Collaboration attributes including number of star votes, promote / demote, number of times the idea has been favorited by other participants (likes - hearts on desktop), the number of times that a participant has sent a link of this idea to another participant (Share).
Once the user has read the idea, they may want to collaborate from Read Idea page (without navigating to a new page). They should be able to do the following actions with minimal clicks:
- Add another idea.
- Comment on an idea.
-- Reply to a comments with hierarchy.
-- Add an attachment to a comment you are submitting.
- Mark idea as favorite.
- Be able to share idea /send a link.
- Follow or unfollow ideas.
- 5 star vote (Amazon style 5 Star voting)
- Apply credits to Promote / Demote.
-- Have the ability to add (promote) and remove (demote) credits, or add credits only.
-- Display a tool that accomplishes Promote Demote or Promote Only, with and without scores—optimized for mobile.
-- Display promote / demote Credits remaining (will only be displayed if the function is enabled on the desktop)
~ E.g. existing method, you can see promote/demote and available credits.
6. View personal ideas, statistics, and subscriptions
Personal Info
The Personal area is where the user can see personal stats, contributions, and we as read notifications.
Default/Opening View is what the user should see when they open up the personal space. The default information includes:
- # of Ideas Submitted.
- # of Comments Submitted.
- # of Votes cast.
- A list of the ideas the user has submitted in that event, the date submitted and their 5 Star rating.
Additionally, the user should have access to:
- Notifications – These are notifications that currently are sent through email via the desktop application. We would like these email notifications to also be sent to the mobile app.
- My Favorites - including Idea title, Author, Date Added, and the ability to remove the idea. (example from the desktop below)
- My 5 Star ratings – including Idea Title, Author, and My votes. (example from the desktop below).
- My Comments Submitted, posted date, and comment
- My followed ideas – list idea title, Author, and ability to stop following
- Create Subscriptions – create subscription by choosing area or challenge topic
7. Theme-ability
Desktop app will provide a mechanism to change the theme of the application (FYI).
Design needs to be theme-able, meaning that any other client could use this application for their organization by swapping the colors. Your default theme must use the provided branding colors (see branding section).
In addition, provide one extra screen of the landing page using a different set of colors, chosen by you, just to showcase how it would look assuming another branding is applied to the UI.
Branding Guidelines
- Use the following as main colors for the main theme: #2FBCEE #E76E34 #8CC63F #FEBE2C. You can combine with some shades out of them.
- Use a logo placeholder.
- Fonts open to suggestions.
- Follow Material Design philosophy.
- Keep things consistent. This means all graphic styles should work together.
References
Use this for reference only. DO NOT COPY anything.
- Workplace.
- Asana.
- Pinterest.
Screen Specifications
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com). Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Icons must follow material design icons.
- Make sure to declare all your assets properly or you might fail screening.
Target User
Idea contributors & collaborators. This application will facilitate innovation anytime, anywhere, providing users with the ability to quickly add an idea and / or collaborate with other users.
We support industries such as Energy, Transportation (air and ground vehicles), Insurance, Medical, Chemical, Food and Financial Services.
The mobile application may often be used by participants who never log onto the desktop version, and will only use it once or twice a year.
Their demographics range from blue collar to white collar workers/skill sets, office or field employees (flight attendants, luggage handlers, food handlers, hotel personnel, oil processing plants), 25 – 70 years of age, and varying levels of computer / mobile expertise. We expect that many ideas entered on mobile may be less complex (i.e. content, size or images) than those submitted on desktop.
Judging Criteria
- How well is the design optimized for entering an idea. How interesting and engaging is the idea entry process?
- Interpretation of the user experience.
- Is the application visually appealing?
- Is the application easy to use?
- Are mobile-first considerations appropriately applied to the design concept?
- Cleanliness of your graphics and design.
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, Illustrator or Sketch. Layers should be named and well organized.
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.