Challenge Summary
Welcome to the "CarTracker Portal Responsive Design Concepts Challenge!". The goal of this challenge is to design the best and most visually stunning responsive designs for a customer portal. This is a Salesforce driven portal so there are a few required screens that need to be designed around existing Salesforce functionality, but there is still opportunity to show us your creative ideas and designs. We have a good set of wireframes and guidelines to get you started, but we are looking for YOUR IDEAS and A+ design skills!
Round 1
01 Login, Forgot Username/ Password, Request Access
02 Dashboard/ Home
03 Knowledge Library
Round 2
01 Login, Forgot Username/ Password, Request Access
02 Dashboard/ Home
03 Knowledge Library
04 Knowledge Article
05 My Profile
Challenge Summary
The CarTracker Portal is a website and service that helps car dealers (the customer) connect their marketing and operations across both digital and physical environments. They do this through various and strategic marketing and sales initiatives and tools.
For this challenge we are focusing on the Customer Portal side of the CarTracker website. The Customer Portal allows the user to engage and learn from other members, ask questions, share ideas and view articles and resources. The Customer Portal also allows the user to open, monitor and collaborate on Cases or Issues.
There is also an extensive Support section that allows the user to get help via text/ SMS, live chat and video conferencing. At the end of this challenge, we are looking for the best UI/UX explorations and creativity within the brand based on the provided materials. We're looking forward to your design concepts!
Challenge Details
We are designing for responsive web using the Bootstrap framework. We've supplied you with downloads and resources to get you started using Bootstrap. The focus will be on desktop and mobile screens for this challenge. We look forward to seeing your exploration of the customer experience!
Example User Flow:
- User opens the app and lands on the login screen
- They login with their Username and Password
- They are taken to the Portal Homepage/ Dashboard
- The user searches for a article they are looking for in the Main Search bar on the screen.
- They hit Enter or "Search" and are taken to the Knowledge screen showing their search results. They click on an article to read more.
- A notification/ alert pops up for one of their Current Cases that needs their attention. (This alert also shows up on the Dashboard within the "Current Cases" section)
- Clicking on the alert takes them to the Case Details screen.
- The user needs some additional help so select the Video Message functionality to start a FaceTime or Skype style video conversation. (Show what this looks like and how it functions)
Screen Requirements
- We are looking for Desktop AND mobile version of the below screens. Make sure that you are designing the best experience for the mobile version. This DOES NOT mean just make the desktop designs smaller. Make sure buttons are tappable, text is readable, etc.
- We have just pointed out key areas of each screen. Make sure that you are looking at the wireframes and understand the user flow to make sure you are capturing and designing all of the required and expected functionality.
01. Login, Forgot Username/ Password, Request Access Screens
- USA vs. Canada Selection
- Username and password
- Forgot Username or Password Links
- Request Access Link
02 Dashboard/Home Screen
- Welcome greeting "Overlay/modal window" for first time users. there should be option to hide this overlay/modal window by providing "Never show again" checkbox.
- Knowledge Library :
--- New Articles/ Featured Articles. "View All" link goes to Knowledge Library
--- My Favorites (Shows most recent). "iew All" link goes to Knowledge Library and shows the "My Favorites" tab/ section
- Community Q&A
--- Shows Popular/ Most Recent. "View All" link goes to Community Q&A section
--- My Questions and any updates/ status. "View All" link goes to Community Q&A section and shows the "My Questions" tab/ section
- Ideas
--- Shows Recent/ Popular Ideas. "View All" link goes to Ideas Section
- Cases (Support)
--- My Support cases and status associated with those
03 Knowledge Library/ Articles Screen
- Search and filters: by rating, category (articles, FAQs, etc.), newest, most viewed, etc.
- Multiple views: grid vs. list view
- Multiple categories/ sections: Featured, Top Rated, FAQs, My Favorites
04 Knowledge Article Screen
- Article number and date
- Summary
- Solution group and product. Article type (could introduce color coding?). average Rating
- Add To Favorites Link
- Article content: text, inline images
- Attachments section
- Related Articles section (Grid View)
- Did article solve your issue? Yes or No
- Sidebar: Chat/ video chat features, Rating button/ functionality (Opens rating popup/ overlay)
05 My Profile Screen
- Update password
- user settings
Additional Design Requirements
- Clean, user friendly, modern and visually stunning designs
- Make sure you are following the branding doc
- Global navigation should include: Home/ Dashboard, Learn More/ Knowledge Library, Q&A, Training (Not included in this phase), Ideas, Support
Branding Guidelines
- The client has supplied a great branding document that extensively outlines, colors, fonts, buttons, UI elements and general styles. Please make sure you are follow this guide. This is VERY IMPORTANT! This MUST look like CarTracker
Bootstrap Framework
- The client is currently using Bootstrap as their backend framework and wants to stay with that.
- Please make sure your designs are using Bootstrap or can be coded using the Bootstrap framework
- We've supplied you with the Bootstrap grid system. Using this Grid System is VERY IMPORTANT it making sure your designs are compliant with Bootstrap.
- More information about Bootstrap
Screen Size Requirements:
- We are targeting desktop and mobile designs, with a focus on responsive design. Your designs should work across all devices.
- Desktop: 1280px width
- Mobile: 640px width
Supporting Documents:
- Branding Document: Outline of fonts, colors, buttons, etc.
- LogoFile.eps
- Bootstrap Grid System: Grid system and structure you should use for your PSD files
- Wireframes: Use these as input into the challenge. DO NOT just color in the wireframes. Your designs should be BETTER than what is shown. We want to see your unique AND original designs and ideas.
Target Audience
- Car dealers; franchise and independent owners.
Judging Criteria
- In order of importance, you will be judged on:
- How well does your design align with the objectives of the challenge.
- Creativity of your visualizations.
- Cleanliness of your graphics and design.
- Overall Design and User Experience.
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. Make sure you label your files correctly AND in order (01.png, 02.png, etc.). This is VERY IMPORTANT.
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, images (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.