Spark Awake iOS Concept Design Challenge

Welcome to the Spark Awake iOS Concept Design Challenge!

We’re adding a new feature to this challenge that will allow you and the customer to collaborate a bit more on your checkpoint (round 1) design submissions. Once the checkpoint review phase starts, you’ll be eligible to participate in a back and forth dialog with the customer via messaging that is attached to each of your submission images. You’ll receive an email alert if and when the customer comments on your submission. Click the link in the email to view the feedback and reply if you would like to.

We’re excited to introduce a new Connect challenge, this time to create design concepts for an interesting application that interoperates with a wearable device (such as a FitBit) to engage the user to convert (take actions) through an easy-to-use experience. We provide you with the application concepts and the user flow for you to get creative with! We look forward to see design concepts on how this application will work, considering the best practices for an easy experience to the user.

Best of lucks.

Round 1

Submit your design for a Checkpoint feedback
1. Welcome
2. Login
3. Walkthrough
4. Navigation
5. Dashboard
6. Activity Details

- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Submit your final design plus feedback from checkpoint
1. Welcome
2. Login
3. Walkthrough
4. Navigation
5. Dashboard
6. Activity Details
7. Connections
8. Smart Alarm
9. Coffee Shops

- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

The main goal of this challenge is to come up with design concept for a genuine iOS application that uses heart-rate data collected from a wearable device over BT-LE (Bluetooth) and display the information in a creative method to the user, the app is to be used by both consumers and for business.

The information that we are gathering with the heart beats will be used to detect falling asleep behind the wheel or during other daily activities. For example, if a normal resting heart rate is around 65 beats per minute and falls to around 52 beats per minute (the heart rate when typically asleep), the device will ring/vibrate similarly to a phone call until it is disabled by the user.

Branding Guidelines
- Colors are open to suggestions. We prefer the use of shades of blue and white as main colors. Purple and greens as accent, with a good use of BOLD imagery.
- Design for iOS! Flat, depth and clear.
- There’s no logo. Use a placeholder or the application name.
- Fonts are open to creativity.

Design Concepts Goals
- Think simple but effective solutions! Consider the target audience, it shouldn’t be boring, instead it should be engaging and modern.
- Design should flow well from one page to the other, very clean in the transition and content layout, not too cluttered. It should be inviting, welcoming and warm.
- Avoid "childish" or "old-fashioned" looks. Think of apps like Instagram or Spotify.

Screen Size
- iPhone: 750px x 1334px.
- Design potrait orientation only.
- Make sure you create graphic in 'shape' format, so when resize for retina versions, graphic still look sharp!

Features and Suggested Screens
- In a concept design challenge we would like you to suggest features/screens that this app should incorporate.
- See userflow.png for reference on the initial flow.
- See references.zip overall for inspiration, don’t copy anything of this since they are existing apps in the market.
- Feel free to reorganize screens or split if necessary. It’s your show, run it!

1. Welcome
- Design a visual engaging introductory screen with an action button (GO):
Welcome!
Introducing the most advanced mobile app to ensure you never miss the important moments in life.
Press GO to begin your journey with us!

2. Login
- Design a login form with:
-- Name of the application “Beat Awake”.
-- Login input field.
-- Password input field.
-- Remember me option.
-- Forgot your password.
-- Social login alternate login options (Facebook and Google).
-- Sign up button.

3. Walkthrough
- This is where the user is prompted with the option to get a tour of the app that will highlight the main features (this should walk the user through the Dashboard page with a brief description pointing out its features, then go to the Activity Details, and briefly explain each button on the menu in what pushing that will take you to).
- Use the following content.
Highlight the Dashboard (pointing at the BPM number):
This number displays your real-time heart beats per minute. When your heart-rate falls too low, we will be sure to wake you up!

Highlight the Activity Overview:
This graph displays your heart-rate throughout the entire day, you also have the ability to see results from the past.

Highlight the three tick marks on the top left (or anywhere else you decide to place it):
This will allow you to navigate to different sections of the app, click next to check it out!

Highlight each word on the navigation bar with description off to side:
Connections - This feature allows you to connect with the people you care most about! Add connections to be able to view heart-rates of your family and friends.
Smart Alarm - Revolutionize starting your day with SmartAlarm. We only wake you up when your heart tells us to!
Coffee Shops - Need Caffeine? We’ve got you covered. By using your real-time location, we have found the closest coffee shops to help you get your fix!
Rest Zones - Sometimes we need a break. We have found the closest rest zones to your current location for you to relax.

4. Navigation
- See navigation.png for reference.
- The design a navigation bar or system that allows the user get to all of the pages. Besides the ones you find here please add “Rest Zones”, “Settings” and “Log out” as well.
- Overall notification mark. There is three tick marks (in reference) that should be displayed somehow on every page. This is the navigation that should be brought up (representing the amount of notifications) when that button is pushed allowing the user to navigate seamlessly through the app. If the app wanted to notify the user of falling asleep and what time it was around, it should be displayed in the dashboard.
- User profile picture (and name maybe) should be displayed either in the navigation or the dashboard (in a permanent position through the app navigation).

5. Dashboard
- See dashboard.png for reference.
- Users can see their current heart rate, and percentages for how awake they’ve been throughout the day.
- Users can see links to: Connections, Smart Alarm, Coffee Shops and Rest Zones.
- Live wave form of their current heart rate is also displayed on the screen, as well as a button on the bottom that leads to a more detailed overview (#6 Activity Details).
- Design a beating element that will match the current heart rate from the user with the number that represents that rate. This will be a button that leads to the details.
- When the user is falling asleep, if the app is open a pop-up should come up confirming the user is awake and the phone should vibrate until it is confirmed. If the phone is locked, the app should mimic a phone call that vibrates until the user acknowledges the device (pushes the lock button, or confirms based off a push notification sent from the app on the lockscreen).
- The circle around the BPM should display colors based off the percentage that the user is awake/asleep/snoozed in the 24 hour day.

6. Activity Details
- See activitydetails.png for reference. Use it as inspiration for the graphics and data only. Keep your design and navigability.
- When the user pushes the activity details button listed under the dashboard, the user has the ability to see a daily overview of their heart rate as well as see past weeks up to one month.
- The heart rate graph should be sectioned off into certain activities and highlighted on the graph (sleeping, exercising, driving) etc.

7. Connections
- User should be able to see his friends using the app.
- They see their friends overall overview and activity details page (like #6).
- User can search for friends.
- There should be a feature to add friends. Design/place the button but not the actual interaction.

8. Smart Alarm
- See smartalarm.png for reference.
- This screenshot is from a current app on the market. We want to use a very similar method, by allowing our users to pick what time they want to wake up with the 30 minute interval displayed on the bottom giving the range the alarm will go off in.
- Using the continuous heart monitoring, we want the app to wake the user when the heart rate is at the highest within that 30 minute interval. If the alarm is not sounded within the 30 minutes, it will be activated at the time that was originally set. This needs to be able to access the Bluetooth data from the FitBit in order to know when the heart rate is the highest and start vibrating with an alarm.
- The user should be able to select whatever tone they want for a ring tone.
- There should be a button/link to Smart Alarm Stats.

8.1. Smart Alarm Stats
- See smartalarmstats.png for reference.
- The user can view statistics of how they slept the night before (or any other time). This page will be able to indicate the hours of the night that the user was awake, asleep, and in deep sleep by the continuous measuring of the heart rate.
- Focus only in the graphic here in this reference, it’s the most important part.

9. Coffee Shops
- Coffee shops main job is to display coffee shops within a close proximity of the user. No need for filters, just straight and quick information about where can the user get coffee!
- There should be a list with the closest shops, showing how far it’s from the user and button to view itinerary.

9.1. Shop Itinerary
- User should see an itinerary information, a map (or any other method) with distance to arrive, route to destine, etc.


Important
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.

Target User
- Passionates of health metrics and wearable devices.
- Business professionals, truck drivers/those who drive long distances, college students, and individuals within the 18 - 50 year old age group.

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 mobile application.
- Creativity and ease-of-use is key to the success as it must be engaging to users.

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.