Challenge Summary
With Cisco on Demand, companies can deliver a personalized, collaborative, and proactive support experience enriched by Cisco’s deep knowledge base. Users can collaborate on design, problem resolution, learning and more. Companies can add their own knowledge and solution repositories for optimal peer-to-peer community support. Our goal is a new unique mobile support experience that leverages Cisco on Demand capabilities to expedite problem resolution and reduce support costs.
About the Challenge:
Can you take community-centric support into the future? This challenge seeks the best mobile support UX design. Using Cisco on Demand capabilities as a functional map, and with the pre-built widgets as examples, we are challenging you to design a set of interactions for mobile to provide a compelling collaborative support interaction.
Round 1
Submit your initial screen for Checkpoint feedback
1) Dashboard
2) Search Screens
3) Search Results
4) Discussions
Feel free to add any other additional screens which are necessary to explain your concept.
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 page with all checkpoint feedback implemented.
1) Dashboard
2) Search Screens
3) Search Results
4) Discussions
5) Create a Question
Optional Bonus Screens:
6) Blog Summary and Details
Feel free to add any other additional screens which are necessary to explain your concept.
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)
Regarding the Rounds:
To be eligible for Round 1 prizes and design feedback, you must submit before the Checkpoint deadline.
- A day or two after the Checkpoint deadline, the contest holder will announce Round 1 winners and provide design feedback to those winners in the "Checkpoints" tab above.
- You must submit to Round 1 to be eligible to compete in Round 2. If your submission fails screening for a small mistake in Round 1, you may still be eligible to submit to Round 2.
- Every competitor with a passing Round 1 submission can submit to Round 2, even if they didn't win a Checkpoint prize.
- Learn more here.
For this challenge, you are required to create an enhanced mobile UI designs for a compelling mobile phone user experience. Please go through below user stories to understand the required screens.
Design Guidelines:
Please consider these while creating your designs.
- We are looking for fresh, innovative and modern design concepts.
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Feel free to use the logo and also follow the branding guidelines from the attached design direction document.
- We have allowed stock photos for this challenge, please follow the imagery style as given in design direction.
- We have provided design direction document to help you get started, please make sure you DO NOT COPY the given screens as it is...if you do, all submissions will look the similar.
- Think Simple and for this challenge, we need mobile screens of below sizes:
Android: 1280 x 768px
iPhone: 1136 x 640px
User Stories:
Read the user stories below to give you a better understanding of the user experience we want to explore in this design challenge.
1. Marie is a Network Engineer involved in building and fixing networks for her company. She is working on a configuration after a switch firmware upgrade and notices there are some missing configuration parameters in the new config file.
2. Marie seeks to know if the parameters are still valid and what the range of choices is to ensure compatibility. She logs into her mobile support app run by Cisco on Demand.
3. Her initial screen shows a summary of information about questions she has posted or contributed to. Some of the information includes a menu icon, a search box/icon, new updates (questions answered, followed, rated, endorsed), my questions, recent activity, and announcements. Each shows quantity and each is a link to detail views.
4. Marie sees she’s got some new items to review on the summary page but goes to search for help solutions regarding the configuration file issues.
5. She searches on “Cisco Nexus 7k Router config.ini” configuration files but doesn’t see an answer that corresponds to her needs so she creates a question.
6. After posting the question, Marie receives and views posts of a few responses and reviews too. She gives the first response a rating of 3 stars and replies. The second response Marie reviews is spot-on so she gives the response a 5 star rating and marks the answer as correct.
7. Marie is motivated based on this process to create a blog about configuration file parameters. The blog includes sections on additions, removals, and omissions.
Required Screens:
Please note that the required screens for this challenge below. Read the user stories to get a better understanding of the user experience that we want to explore in this design challenge.
1) Dashboard:
- Can see a few different designs for the Home Screen from the “list”-based-view something like a dashboard & summary view.
- The list view could be tab driven rather than "dashboard style” with drill-down.
- Homepage elements (other ideas are welcome – this list is the minimum):
1. Menu Element
2. Search Element
3. New Updates ("My Stuff/Things/Interests”- includes any questions this user has asked/updated, replied, followed or endorsed) section
4. Recent Activity Element (specific to this community – discussions, documents, announcements, etc.)
5. My Questions Element (those discussions specific to this user or his “company” group)
6. Announcements Element (date based items published to the entire community)
7. Chat (OPTIONAL)
8. Profile (OPTIONAL).
The list view could be tab driven rather than "dashboard style” with drill-down. - Open to a few different design approaches for the Home Screen from the “list”-based-view something like a dashboard & summary view.”
The elements can be badges/icons with summary numbers, or tabs with lists. Could optionally have each show a quantity; all should link to detail.
2) Search Screens:
- Show simple search UI with advanced search options for the global navigation search accessible from the top navigation bar.
- A user initiates the search by typing a key word and taps to view the search results.
3) Search Results:
- Show summary information including title, a question excerpt/summary, date, author, & status (open, closed, assigned) at a minimum – icons for status should be used instead of labels
- Title links to detail view.
- Results should include discussions, blogs, documents, video and download result examples with icons indicating what type of content it is
- Results filter including date, content type, rating, status, tags.
- Should incorporate pagination for lengthy result sets..how do you think this can be handled?
- Search detail should show items including title, author, author image, date,last ppdated [Date], full text, content type icon, rating/stars, share icon, reply button, bookmark button.
4) Discussions:
- Assume the user has seen a discussion in the search results and gets to this screen by tapping on it OR the user has tapped on a search result and clicks into the discussion on that search result to be taken to the discussions screen for that item
- Show detailed information including title, item details, date, author, & status (open, closed, assigned) at a minimum – icons plus labels should be used. Also include a Button for “Follow this Discussion”
- Button for “I have this problem too” – shows the number of people with the same problem
- Rating indicator – stars up to 5
- Status and status change UI (open, closed, assigned)
- Reply option with a field to include a response then submit & cancel buttons for that reply. Detail field must support basic formatting and UI for applying bold, underline, italic, bullets, and numbered lists.
- Show page scrolling for longer items
- Replies and threads in the discussion should be collapsible and expandable
- A button for marking a response/reply as correct “Mark Correct” should be included on the reply detail. Reply detail is an abbreviated view herein.
- Please display a scroll or paginate options to make it easy to browse quickly through a thread.
** The core concept of questions and answers is that they are thread-based like a discussion forum. It’s important within a discussion/question thread that navigation UI elements and detail views with the commands are carefully considered as it is the most critical user interaction.
5) Create a Question:
- Includes fields for “your question” title, detailed description, and tags
- Detail field must support basic formatting and UI for applying bold, underline, italic, bullets, and numbered lists.
- We need action buttons in this screen, probably a submit button and a cancel button (or a cancel gesture?)
- Add visual element to indicate “Add Attachment”
6) Blog Summary and Details:
- A user will have the ability to create a blog post which includes adding a title, tags and main blog post content
- We need a view that shows list of blog posts
- Tapping on any blog post should take the user to a full blog post view, how do you think it should look like?
- Blog Detail should show:
1. Title
2. Blog icon (content type indicator)
3. Date posted
4. Author image,
5. Author Name (linked to profile)
6. Share icon (to social)
7. Blog content (may include an image)
8. Star Rating
9. Average Rating
References:
- You may find the examples and overview videos very helpful
Target Audience:
Expected users of this mobile application are engineers/developers/architects who may not be at their desk but who must help resolve technical issues, contribute to community discussions, or other community actions.
Judging Criteria:
- Simplicity, usability, maximization of screen real-estate
- Completion of all screens and items
- Cleanliness of your graphics and design
- Your design should be possible to build and make sense as a mobile application across Android and iOS devices
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.