Challenge Summary
Welcome to "UNI - Sales iPad app Design Challenge - Part 1", the first in a series of challenges we will run in order to build this large sales 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.
At the end of this challenge, we expect to have creative ideas; interactions and design storyboards that will help us solidify a strong framework for the remaining challenges.
Round 1
Submit your initial screen for Checkpoint feedback
1) Login (iPad Landscape)
2) Dashboard A Screen (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) Login (iPad Landscape)
2) Dashboard A (iPad Landscape)
3) Dashboard B - Secondary Option View (iPad Landscape)
4) Dashboard C - Modal View (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 the initial framework of the larger application - starting with the dashboard and menu bar. The winning concept will be used to drive the subsequent challenges. The goal of this challenge is to take the required content and create a user interface that is intuitive, easy to use and incorporates some natural iPad interactions (flick or swipe to slide in/out main menu, etc).
Design Guidelines:
Please make sure you follow below design requirements…
- Please use brand approved colors & fonts. Find brand resources in the forums.
- Stock photography is allowed but not required. If used, it should be in the login screen…
- Design for iPad Retina, in landscape orientation - Your design should be exactly 2048px x 1536px, at 72dpi
- Please do drop your designs into a white iPad frame in the PNG versions for client review. (there should be no native iPad status bar across the top)
- We had provided a wireframe to help you get started with your screens - please DO NOT COPY..
While only a few screens are required, participants are encouraged to submit additional screens (or notes) in order to illustrate their ideas about alternate states, suggest unique interactions and animations, etc. The client would love to see some ideas around how to help the user focus on content - for example: maybe if the user touches a section title, the other sections are faded / blurred / less important.
Touch Target Sizes:
Any touch target (element the user will touch in order to trigger some change) must meet or exceed Apple standards. The touch target must be a minimum height of 88px and a minimum width of 88px in size.
Menu Notes:
- The client would like menu items to appear as icons, rather than text. If you are not comfortable designing icons, don’t let this stop you from competing! You can design the menu bar itself and just use placeholders to indicate where icons should be added; we will run a separate challenge for icons if we do not get what we need in this challenge.
- The list of required menu items can be found in the forum attachments.
Notification Count Elements:
Notice that three (3) of the menu items must have a notification count element associated with them (mail, notifications and leads). This element must accommodate up to 3 digit numeric values (use “299” for mail count, please). Note: Notifications counts are only meant to indicate the number of new items within their respective sections (leads, notifications, and mail) and are NOT separate touch targets from their icons. In the closed state, a single notification count will still be visible (sum of all 3 notification counts)
- Show your menu as closed (collapsed state) for ONE of your dashboard screens and closed for the rest of the dashboard screens. No menu on login.
The client would like the menu to rest on the right side. It is important to note that in the resting state, the menu will show a single notification count element, which will disappear when the user opens the menu (see resource in forums). In it’s resting state, only a portion of the menu bar will show. The full menu will “slide” out from the left, when the user rests his finger on the bar and “slides” or “flicks” to the left. The same action - only towards the right - will collapse the menu back to it’s resting state.
Work to visually differentiate menu item groups.
- The client wants the menu items to be grouped logically, so the user can access items more quickly. The order of the menu items is shown in the provided WF screens and CANNOT BE CHANGED - however, you can decide how to best differentiate one menu growp from another. Groups should be visibly differentiated - whether it be through location (adding some space between groups), color, etc… however you see fit to make this work. There are two possible grouping solutions: the one shown in the wireframe OR the one shown in the related excel screenshot - you can choose which to use. The first menu item is the most important - if you can find a clean / subtle way to call that out visually, that is encouraged.
On one screen (any screen), show a submenu view.
- While most menu items are single click, a few of them contain submenu options. For this challenge, please show the following use case on one of your screens: User has tapped “add new (+)” in the menu and now sees three (3) secondary menu options: Account, Presentation, Quote.
Required Screens:
We need below screens to be designed for this challenge
1) Login Screen:
In this view, the user has launched the app and is confronted with the option to login.
- We would like you to submit an error state version; it will be great to have that!
Required content for this screen is:
1. Input for username (label within input / clears on focus)
2. Input for password (label within input / clears on focus)
3. Link for “having trouble?” (Where they can get help)
4. Login button
5. Client logo
The client’s logo and tagline should be a notable element on the screen.
2) Dashboard A Screen:
- The dashboard will consist of several “quick access” items (links) and informational elements that the user can use to get a “quick start” on his work day, when he launches the app. Each of these elements is also accessible from the menu.
- Each of the main elements (sales tools, leads, today, etc) should have some icon in the upper right corner which indicates that the user can tap to go to the full screen version.
- How can we arrange these section Sales Tools, Notifications, New Leads in dashboard..each of these has a menu item which on tap shows "Secondary" options (Dashboard B)
- If you use icons associated with elements on the dashboard, make sure that they are the same icons which are associated with each element in the menu bar (where applicable).
- The client would like to incorporate two important thumbnail sections in this screen, they are "Customer Promise and Core Values" - please see attached thumbnails.zip...feel free to use the content and please redesign them as per the style you are coming up with but we would like you to use similar colors from the existing thumbnails, so it helps users spot them!
- Each of the line item in an element are clickable (a line item is a unit of information shown in a document, record, statement shown on its own line)
- Note: line items will have related counts, in this case the count numbers are not separate clickable items (the entire row will be clickable).
- However, you may include as many screens as you need in order to illustrate your ideas.
Calendar Notes:
- User can navigate back / forth through days (but must go to the full calendar page in order to see week or month views)
- User can use the drop select to filter the events viewed.
- Where there is an event in calendar, a tap on the event in general will expend the event to show more info - tap again to close. Tap on icons for additional actions.
- Somewhere on the calendar element, there will be a link to view “today’s route” (OR) “AM route” & “PM Route”, (OR) “new route” - these options depends on the day. You can show any of these 3 options, but please allow room / consideration for ALL options to work logically in your design.
3) Dashboard B - Secondary Option View:
- From the main dashboard view, assume the user has tapped on “Collateral” that is shown in “Sales tools” section (please see attached design direction). The user is presented with the following secondary options: “Service systems collateral, Product Collateral, Segment Collateral, All Collaterals"
- The client would prefer that the secondary options are NOT presented in the style of a standard multilevel menu - i.e. not as secondary versions of the top level “collateral” element. They would like these secondary options to be large and accessible on the screen. You may choose to “dim” or “shade” (lighter or darker) the other content while this content is visible.
4) Dashboard C - Modal View:
We show a branded modal framework for any/all sales materials. In this view, the user has tapped on any sales material and a modal is launched. Because these will be cases where the user shows his iPad to a client, pleae be sure to:
- Hide ALL screen content behind the modal
- Show an “X” close icon in the upper right corner (any other thoughts are welcome)
- Include a branded “header” bar across the top of the modal, which contains the client’s logo and tagline
- You can leave the rest of the modal window blank.
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.