Challenge Summary
Welcome to "XUYU APP-O-Meter Mobile Storyboard Design Concepts Challenge". In this challenge we will be asking you to design the mobile user interface for an Activity Monitor App that is currently under development. You will be tasked with designing two in App screens – a home and a detail level screen. Data visualization should be the focus of this challenge. We are looking for clear, easy to understand visualizations of all screen elements. Uses of color, iconography, typography, etc. are all important aspects that should be considered when designing your layouts.
IMPORTANT!! We've got FAST timeline in this challenge (especially for the 2nd round), make sure to pay attention to the timeline!
Round 1
Initial Design for our client review :
01. Home/Summary screen
02. Detail screen for Steps or Weight (or both)
Feel free to add any other additional screens which are necessary to explain your concept or interactions.
Notes.jpg: Any comments about your design
Make sure all pages have correct flow! Use correct file numbering: (00, 01, 02, 03).
Round 2
All requirements along with client feedback applied :
01. Home/Summary screen
02. Detail screen for Steps or Weight (or both)
Feel free to add any other additional screens which are necessary to explain your concept or interactions.
Notes.jpg: Any comments about your design
Make sure all pages have correct flow! Use correct file numbering: (00, 01, 02, 03).
Overview
Design one summary/homepage screen and one detail screen for a mobile app called "xuyu™ app o meter". Easy-to-use blue tooth enabled collection includes an activity monitor, smart scale, sleep system, all powered by the xuyu™ app. The interactive system works together or independently to make reaching your health & wellness goals achievable and fun.
About the Challenge
This challenge seeks an intuitive visual design of the home/summary screen and one detail screen for an iPhone 6 iOS 8 app. Detailed wireframes, visual design styleguide, 2 personas and some general product info will be provided. We are looking for visual treatments of one home screen and one detailed screen. There are multiple versions of the wireframes for both the home and detail screens so you may design as many as you like, however the requirement is one home and one detail screen only. DO NOT COPY the provided wireframes exactly or just simply color them in. We are looking for you to build off of what we have provided to create a unique design for this APP. You may use the content and metrics from the wireframes for your designs.
Design Guidelines:
Please consider these while creating your concepts:
- We are looking for clean and innovative ways to represent the visualization of data.
- Give importance to the overall page layout and make sure the interactions are clear and cohesive for the user.
- Follow the brand guidelines that are provided.
Required Screens :
1) Home/Summary screen
- Visualize the 4 data modules for Steps, Distance, Calories and Weight. Make sure the main menu and the sync actions are represented at the top level. Show one module as complete. For instance, when the user has reached their daily steps goal, show what that looks like.
2) Detail screen for Steps or Weight (or both)
- Show the appropriate heading (Steps or Weight) as well as a back arrow at the top level. Make sure to show the current (Today) label and the current step count. Visualize the step history or the weight history data. Make sure to include a navigational element that lets the user toggle between daily, monthly and yearly views. You can use the wireframes as a guide, but feel free to explore other ways to visualize this data.
Application Work Flow Needed:
1) Workflow around Home/Summary screen
- Tapping on any of the four data modules will drive to the detail screen for the selected option. Modules include Steps, Distance, Calories and Weight (Consider screen transitions.)
2) Workflow around Detail screen for Steps or Weight (or both)
- Detail screens should include the user’s current data, as well as data history over time. A toggle system will allow users view data on a daily, weekly, yearly. (Explore different toggling methods and data visualizations.)
3) Workflow around Device Settings Menu
- Tapping the Menu icon will drive to a Settings menu allowing the user to select from a series of options. (Consider screen transitions).
4) Workflow around Sync Device
- Tapping the Sync icon will initiate a data sync between the app and the activity monitor. A sync will display three screen types:
a. Sync in Progress: an onscreen animation indicating that the sync is in progress
b. Successful Sync: The user is returned to the summary screen where both the date and data elements are updated (data visualizations could animate)
c. Unsuccessful Sync: An error message is returned. User is prompted to re-sync or return to home screen.
Target Device:
iPhone 6 Portrait (1080 x 1920px)
Target Audience:
Primary Consumer: FEMALE
30 – 55, Large House Hold with children,
+$75k income, College Education
Secondary Consumer: MALE
45+, 2+ House Hold
+$75k income, College Education
More detailed persona information is provided.
Download Attachment :
1. Fonts.zip, Fonts to be used in your design
2. Personas.pptx, APP Personas Powerpoint
3. xuyu Brand Guidelines.pdf, Brand Guidelines
4. Xuyu_UXConceptsTopCoder_wireframes.pdf, Wireframes
5. XUYU_Logo.ai, XUYU logo.
6. Images Photography (download links available in forum)
Judging Criteria
- Clean, Cohesive Design Layouts
- Data visualization is very important
- Design is on brand
Photography:
You may use the photography provided, but it is not required (download links available in forum).
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.