Challenge Overview
With Cisco on Demand, companies can deliver a personalized, collaborative, and proactive support experience enriched by Cisco's deep knowledgebase. Users can collaborate on design, problem resolution, learning and more. Our goal is a new unique mobile support experience that leverages Cisco on Demand capabilities to expedite problem resolution and reduce support costs.
Apply your web development expertise to create a web-based clickable HTML prototype utilizing the provided storyboard & UI from a previous challenge to enable a mobile user to intuitively navigate and get support from an online community. Use Angular, Bootstrap, CSS, HTML, JavaScript, jQuery in this 2nd of a series of challenges to ultimately create a great mobile app.
This challenge is to create a working mobile-based HTML Prototype for the Cisco on Demand Mobile App based on the provided PSD Storyboard. The clickable prototype should be accessible from traditional mobile browsers, allowing movement among views and basic navigation, dynamically rendered on mobile devices of various sizes.
Possible future challenges for this Application: Mobile app development using code and available APIs and widgets.
Final Submission Guidelines
The following views are required for your prototype to be considered complete:
- Dashboard
- Menu
- Search Results
- Discussions
- Create a Question
For this challenge, you are required to create a clickable prototype (including CSS & Javascript code) for a compelling mobile device user experience. Please go through below user stories to understand the required views.
Please consider these while creating the prototype:
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Stock photos allowed for this challenge; please refer to the provided Storyboard
- Will assess how well code is segmented and organized, how close the implementation is to the Storyboard provided
User Stories:
Read the user stories below for a better understanding of the user experience desired in this prototype 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 configuration 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 Cisco on Demand mobile support app.
3. Her initial view is a Dashboard that 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 Dashboard view 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.
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 Prototype challenge.
0) Navigation (05_Navigation-Drawer.jpg)
- Left Navigation that slides out over the existing view when upper left hamburger menu icon is tapped
- Navigation Menu items: Home, Questions, Blogs, Documents, Announcements, Video, Chat, Help, and Settings
1) Dashboard (01-Dashboard.jpg, 02-Dashboard.jpg, 03-Dashboard.jpg, 04-Dashboard.jpg)
- The layout is an accordion-like vertical arrangement of the sections
- Each section has a notification icon based on the number of new notifications per section
- Homepage elements:
- Menu Element
- Search Element
- My Questions Element (those discussions specific to this user or his "company" group)
- My Interests ("My Stuff/Things/Interests" - includes any questions this user has asked/updated, replied, followed or endorsed) section
- Recent Actitivty Element (specific to this community - discussions, documents, announcements, etc.)
- Announcements Element (date-based items published to the entire community)
- All section items should link to corresponding item detail.
2) Search (06-Search.jpg, 07-Search-Advanced.jpg)
- Show simple search UI with advanced search options for global navigation search accessible from top navigation bar.
- A user initiates the search by typing a key word and taps to view the search results.
- Advanced Search includes "Sort by": Date Created, Rating, Author, Last Updated, Title; "Filter by": Type: Web, Document, Blog, Discussion, Knowledge Base; Date: Any, Today, Last 7, Last 30, Last 180 and "Minimum Rating": (1-5 stars)
3) Search Results (08-Search-Results.jpg)
- 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.
- Please incorporate scroll for lengthy result sets
- Search detail should show items including title, author, author image, date, last updated [Date], full text, content type icon, rating/stars, share icon, reply button, bookmark button.
- Examples of filtered Search Results in the Prototype if the user makes filtering/sorting choices in Advanced Search and Search Filters
- Search Filters (09-Search-Filters.jpg): same attributes as Advanced Search, slides from right side as an overlay when the upper right icon is tapped
4) Discussions (10-Detail-Discussion.jpg, 11-Detail-Discussion-More.jpg)
- Assume user has seen a discussion in the search results and gets to this view by tapping on it OR the user tapped on a search result and clicks into the discussion on that search result to be taken to the discussions view 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
- Heart icon to follow the discussion
- Rating indicator - stars up to 5
- Status
- 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 discussion response entry, please limit entry to 255 chars)
- Replies and threads in the discussion should be collapsible and expandable
- Replies designated as correct have a transluscent overlay indicating status when marked as such (12-Detail-Discussion-Pop.jpg)
- 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.
- Scroll down within main content to see discussion links below the fold
- ** 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.
4a) Discussion Reply (13-Details-Discussion-Reply.jpg)
- Pop-up layer over the discussion with a Rich-Text-like UI allowing formatted text (entry limited to 255 chars), cancel and submit links
5) Create a Question (14-Create-Question.jpg, 15-Create-Question-Filled.jpg)
- 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 view, a submit button and a cancel button
- Visual element to indicate "Add Attachment"
- Tags to indicate subject matter by user choice
- Icon indicators of attachments placed by user