Challenge Summary
Welcome to "UNI - Sales iPad App Design Challenge - Part 2", the second in a series of challenges we will run in order to build this large sales application. For this challenge, you will be using previous challenge files (attached) as a base and work on to create few more screens for this application
UNI Services is a service-focused leader of branded uniform and facility services programs in the United States. We are looking to design an iPad application that will enable/help our field sales representatives with their day-to-day tasks.
This challenge is focused on "graphic design" output and results.
Round 1
Submit your initial screen for Checkpoint feedback
1) Sales Tools (iPad Landscape)
2) Search Results (iPad Landscape)
Feel free to add any other additional screens that 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 required screens with all checkpoint feedback implemented.
1) Sales Tools (iPad Landscape)
2) Search Results (iPad Landscape)
3) Create Account Form (iPad Landscape)
4) Notifications (iPad Landscape)
5) Salesforce Chatter (iPad Landscape)
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)
In this challenge, we are looking for your creative ideas and design concepts in order to define standard / global screens, based on the winning designs from challenge #1. The goal of this challenge is to take the required content and create a user interface that is intuitive, easy to use and which fits seamlessly within the current design.
Design Requirements:
- Design for iPad Retina, in landscape orientation.
- Your design should be exactly 2048px x 1536px, at 72dpi, created within the provided PSD file, with logical naming and grouping of layers.
- Please use the provided “SubmissionBase.psd” as your source file.
- Please re-use existing styles (colors, shapes, sizes, layout, typography, etc) wherever possible!
- You are free to create any new UI elements but make sure they are in the existing look & feel..
Touch Target Sizes:
Any touch target (element the user will touch in order to trigger some change) must meet or exceed Apple standards. A touch target must be a minimum of EITHER 88px H / 44px W OR 44px Hl / 88px W.
Colors & Fonts:
- Follow the provided PSD color scheme. New colors should not be introduced and current color logic should be followed. For example, elements in red and blue are generally “touchable”, meaning that touching them will trigger something. Warm neutrals, dark greys and white are used for backgrounds, text, etc.
- Refer to the provide brand guidelines for correct fonts and hex values to use, rather than assuming the other files are correct. If there is any error on these in one of the challenges, we do not want the error to persist throughout all subsequent challenges, due to members not checking the brand files
Challenge Downloads:
- SubmissionBase.psd | Use this file for your design source file.
- Dashboard.psd | Use this file to grab and reuse existing elements.
- form-framework.png | Use this file as a concept reference for your “create new account” screen.
- Brand Resources | Use these files to double check that you are using the correct fonts and hex values.
- Approved Screens.pdf | Use this file to check for existing styles before you create new ones and/or existing typography / color etc usage so that your submission will be consistent with the existing screens.
- sf-chatter.psdp | Use this file to help you create the chatter screen more easily.
- WF screens | Use these files as the required content guide for all screens.
- modals-notes.png | This has some notes about modal windows
Required screens:
We need below screens for this challenge..
- Note for all the below screens, please keep the right sidebar (main navigation) intact..
1) Sales Tools:
- Use PNG #1 as the WF for this page. Refer to the existing screens in the PDF for the size and style of a sidebar element. Note that unlike the left sidebar in the PDF, the left sidebar in this screen cannot be collapsed / hidden from view, so no “|||” menu icon is required.
- The concept here if that selecting one of the categories at the top will change the materials results displayed at the bottom.
- You are free to do something different with the main content here, so long as the concept and required content is maintained. However do NOT put the categories into a drop select - the client wants all categories to be visible options on the screen at all times.
2) Search Results:
- Use PNG #2 as the WF for this page. Refer to the existing screens in the PDF for the size and style of a sidebar element. Note that unlike the left sidebar in the PDF, the left sidebar in this screen cannot be collapsed / hidden from view, so no “|||” menu icon is required.
- Please show that the user is in the middle of entering text in the search bar here (show cursor).
- You are free to do something different with the main content here, so long as the concept and required content is maintained.
3) Create Account Form:
- The style (and minimum height for form elements) should be based off of the drop select seen in the first screen of the PDF, where we see a handful of drop select elements.
- Use the form field examples shown in PNG #3A, but you do not have to lay them out as shown there. Please define a clear look & feel for each form element, as well as : Section labels and form field labels / content. Do NOT use all caps for anything other than buttons and section headers (red).
- Use the PNG #3B as your design framework for the modal this form is located in - Modal style has already been defined (see “Modal-design-concept.png”). The idea is that the bottom bar (which contains the cancel / submit buttons) is static and any scrolling content will scroll behind it. You are free to change the color of the bottom bar itself, but the rest of the framework should be matched.
4) Notifications:
- Use PNG #4 as the rough WF for this page. You are free to reimagine the layout / concept, so long as you maintain these ideas:
---- Each section header has a count indicator in the right hand corner (like in menu, when open)
---- There should be a visual difference between read vs unread items
5) Salesforce Chatter:
- Use PNG #5 as the WF for this page. Note that we have provided a chatter PSD file which contains the more complex elements, as we cannot alter anything except the blue items on these and the only change we can make is to change that blue color to match client brand colors.
Target Audience:
- Field Sales Representatives
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Does the screens capture all the above mentioned details?
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.