Challenge Summary
Welcome to the First CX Challenge! The CX is a "Customer Experience Design Challenge" that focuses on customer experiences and showcases the top design talent. The "CX - Car Tracker Customer Portal Responsive Design Concepts Challenge" will be run during the next 63 hours. At the end of the challenge we will take the presentation screens you create and share your collective creative talent!
We are very excited to provide this cool customer experience design opportunity to the Studio Community - a fun way to showcase your FAST!! design skills!
The NEW CX Challenge Series provides you with an opportunity to show digital leaders from some of the largest brands in the world just how good your user interface and customer experience design skills are. CX challenges are fast, fun, and have more chances for you to capture prize money.
Note: This is our 1st Customer experience (CX) Challenge! No previous experience in a CX challenge is needed to compete - jump in and give it a try! Make sure to follow the Challenge Forum and ask questions as things move very fast in a CX 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 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 as well as a few mobile screens for this challenge. We look forward to seeing your exploration of the customer experience!
Challenge Timeline and Rolling Checkpoint
- Challenge Starts : 6th August 2015 18.00 PM EDT
- Rolling Checkpoint will start : 11st August 2015 9.00 AM EDT
- Challenge Ends : 12nd August 2015 9.00 AM EDT
We are offering 8 Placements! Plus $50 Rolling Checkpoint prizes!
1) $1500
2) $1000
3) $500
4) $250
5) $250
6) $100
7) $100
8) $50
Rolling Checkpoint Review ($50)
- Trevor Gerring (tgerring) and Adam Morehead (adroc) will provide a design review if you submit your initial designs by 11st August 2015 9.00 AM EDT
- Within the hour we will start providing design feedback/guidance
- You must watch the forum for your feedback!
- All qualifying checkpoint submissions will win $50
Challenge Overview:
Car Tracker 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 Car Tracker 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, IM, 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!
Required Screens:
00. Presentation Screen - 1920x1080 (16:9 Ratio)
- This is the most important screen - make it look good! (like you are selling your design idea)
- Spend more time on your presentation screen as it is the first thing we will show the audience!
- Create a presentation screen of your mobile application!
- Place your designs within an iPhone & Laptop template! Showcase your submission
- This will be shown to the conference attendees
- Presentation Size = 1920x1080 (16:9 Ratio) - It must be this size!
01. Login Screen (Desktop and Mobile versions)
- User name and password login
- Option to login to either the USA site or the Canada site.
- Include forgot username/password user flow or options
- "Request Access to the Portal" functionality
02. Portal Home/ Dashboard (Desktop and Mobile versions)
- Logo and branding
- Logged in User profile information in header area (Links to My Profile)
- Global navigation
- Search functionality (Links to Knowledge screen with results)
- Ideas for Content Sections:
* List of current Cases
* Learn More: check out Articles and FAQs
* Training: browse catalog of training courses and materials. Stats around completed courses or certificates earned.
* Support: Contact a support rep. Should have the ability for text/sms, IM/chat, and Video messaging
* Join the Conversation: submit product ideas. Get help or help others.
- The ability to show notifications or Alerts for each section and/or on a global site level. What is the best user interaction for this functionality and content? What is a new modern and RESPONSIVE way to handle this? Show us your ideas.
03. My Profile Screen (Desktop and Mobile versions)
- List of profile information (Profile picture, name, email, phone, and email address)
- Ability to Change Password and Update Profile
- Email and Notification preferences. Categories could include: My Cases, My Ideas, My Questions
- List of Certifications earned and complete training courses.
04. Knowledge (Search Results) Screen
- Take a page like this Salesforce example and apply a better user experience for how to find, search, and read articles and knowledge.
- This is an example layout/wireframe (check CX_CarTracker_KnowledgeWireframes.pdf). Your designs should be BETTER than this!
- Consider showing an Article detail page. Take this sample page and apply a clean and simple Car Tracker brand approach to it.
- Having a robust and easy to use search functionality is very important.
05. Case Details Screen
- Take the same design approach that you’ve used for Knowledge and apply it to Cases.
- Cases are a way for community members to interact and collaborate on an open issues.
- Take this example layout/wireframe (check "CX_CarTracker_CaseDetailsWirefames.pdf") and make it BETTER. The content and structure should remain the same, but the overall design should change to match your design concepts.
- It's important to show "ask a question functionality" and collaboration threads on the case.
- Add functionality for starting a text/SMS, IM/Chat or Video message. Show what these different communication methods look like and how they function
- Include button to "View All Cases"
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)
Additional Design Requirements:
- Clean, user friendly, modern and visually stunning designs
- Make sure you are following the branding doc
- Global navigation should include:
* Home
* Learn More
* Q&A
* Training
* Ideas
* Support
Branding:
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.
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 at the moment, but with a focus on responsive design.
- Your designs should work across all devices.
- We are asking you to design 3 screens in mobile as well.
- Create your screens in the following size :
* Desktop: 1280px width
* Mobile: 640px width
Supporting Documents:
- Branding Document : Outline of fonts, colors, buttons, etc. (CarTracker Branding.pdf)
- LogoFile.eps
- Bootstrap Grid System
- Bootstrap UI Elements
- We have linked to a few designs/ wireframe examples in the Required Screen section. Use these as reference only. Your designs should be BETTER than what is shown! Use the examples for the content structure, not the overall design.
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:
We most likely will not have Final Fixes — Have fun!!
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.