Challenge Summary
Welcome to OptionsHouse - Customer Service Responsive Redesign Challenge! This challenge is focused on creating design concepts and redesigning a customer service Account Summary screen. We are looking to build this with the NEW Salesforce Lightning Design System!
This will be a fun challenge with a FAST turnaround.
Good luck on this challenge!!
Round 1
Submit your initial designs for Checkpoint Feedback
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note 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 designs with all Checkpoint Feedback implemented.
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Details:
This challenge will focus on design concepts utilizing the NEW Salesforce Lightning Design System to design a customer service account summary screen. We’ve supplied you with an initial design/ wireframe of the screen. This initial design has all of the required information that NEEDS to remain, but everything is open to your ideas and being redesigned. This is a responsive design challenge, and we want to see your desktop and mobile designs. Show us what is the best UX for these screen.
Lightning Design System:
The new Salesforce Lightning Design System is brand new and being officially released this week. We are looking to get a head start on this exciting new feature of Salesforce and WOW the client. Please make sure you familiarize yourself with the Lightning Design System.
- Make sure you look at the Design section and Components because this is a new system there is not a UI kit available, so you will need to redesign any components used.
Design Size:
- Desktop: 1024px wide (height can expand with content)
- iPhone: 640px width (height can expand to fit content)
Included Assets:
- Font: Lighting System Design has Salesforce Sans font. Please install and use this in your designs
- Icons: The lightning Design System has an extensive list of .svg icons. We’ve included these as part of the challenge. Use these how you see fit.
- Please find fonts and icons in lighting design system here: https://www.lightningdesignsystem.com/resources/downloads/
(The first "Design System ZIP" link has the font and the Icons download is under the "Icons" section)
- Background information: Below are some links that might be useful. This also has examples of designs using the new design system.
- - https://medium.com/salesforce-ux/the-lightning-design-system-is-the-next-generation-of-living-style-guides-9addc769c317
- - http://www.fastcodesign.com/3050284/3-good-ideas-in-the-long-overdue-redesign-of-salesforce
- Wireframe/ Initial Design: This is the screen that you will be redesigning. Use this for content ONLY. DO NOT just color this in. We want to see your ideas and concepts. Redesign this.
Required Screens:
1) Account Summary Screen (desktop and mobile versions):
- Use the wireframe/ initial design as your guide.
- We want your to REDESIGN this. DO NOT just color in the boxes. We want to see your ideas and concepts on what would be the best UX and UI for this
- Make sure you are using the Lightning Design System: Components, Fonts, Colors, Icons, etc. Ask questions in the forum if anything is unclear around this.
- Make sure you are including all of the content and data included in the wireframe/ initial designs. This is VERY IMPORTANT.
2) Interactions and States (desktop and mobile versions):
- Show us any interactions or user states for you concepts and designs. We want to see how your ideas work from a UX and UI perspective
- If your breaks out content onto different screens or popups we want to see those and how they function.
Branding:
- Use the Lightning Design System design assets, UI, fonts, colors, icons, etc. as your guide
Target Audience:
- Customer Service Representatives
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as a responsive application
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x768px 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.
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.