Challenge Summary
Welcome to Novus Driving Mobile Application Design Challenge! This challenge is a proof of concept challenge and the scope of it, it’s to come up with a mobile design application for a device that would help a driver find out more information about his car.
Challenge Objectives
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Project Background
Workflow
In this challenge we are looking to design an application that can give the user the ability to choose a device, see details about his vehicle as per the user stories. This is a native iOS application so make sure to follow the iOS guidelines.
User Story
Luke is a business man and the happy owner of a Ford F150 a Bertram boat. Luke has installed a Novus WiFi hotspot in his car so can connect his laptop, track his business trips, and when his going on road trips with his family, his children connect their phones and tablets to the hotspot too. In addition to his car, Luke has installed a Novus WiFi to his boat. This allows him and his guest to have WiFi access when they go to the lake. Luke has a daughter that drives a Ford Mondeo. Luke has installed a Novus OBD2 device on his daughter’s car so he can monitor her car’s health and make sure they won’t miss a maintenance. The app also gives him peace of mind by allowing him to see where his daughter is and if she drives safety. Moreover, his daughter can his daughter connects her phone to the WiFi hotspot to use Google Maps for navigation around town.
The Novus application supports these products:
Because of these devices, Luke is able to get access to Wifi and track each of his vehicles. The OBD2 device allows him to check: vehicle details, status, fuel consumption and trends, engine status, battery health and trends, upcoming maintenance date, and WiFi data usage. In addition he will also see a history of his trips and can use the application to navigate as well. While driving he can check the fuel stations on the road with related gas prices as well as any roadside assistance services.
In this challenge we are looking to design the user experience for Luke. The application will include the following pages:
Luke has acquired 1 Novus Device for his car and 1 Novus Lite Device for his boat so he can see details for each of them.
1. Login Page
For this page, we would like to see the following fields:
2. Main page
After logging in Luke can see a list with all of their devices. In general the user won’t see the exact device name when logging in, but he will see the image of the connected vehicle, so in this case an image of his car and and his boat with related names will be displayed. When a user selects a car or object the appropriate dashboard view is shown. The user can easily switch between their cars/objects and has the option to add a new device/vehicle.
3. Car Dashboard
As soon as Luke selects the Ford Mondeo car, the dashboard for it will appear.
The dashboard will include a map as well. The default view should have at least 1/3 of the screen allotted to the map and the rest of the screen is allotted to a pop-up drawer (see Google maps explore view).
The drawer will show the following information:
a) Information on the car: photo and name
b) State (drived/parked/offline): if it’s parked it should show the address
c) Fuel icon with level information:
d) Engine icon with engine health
e) Battery Health icon
g) Recall icon
h) Wifi icon
4. Boat Dashboard
When Luke selects the boat, he can see the following information in the drawer:
5. Fuel Consumption
When the user gets to this page he can see the current fuel level, as well as a trend of fuel consumption week over week along with fuel prices from gas stations near by.
He also has the option to order a fuel fill-up regardless of his location (the default location can be the user current location but that can be changed).
6. Battery Health Details
Once Luke taps into battery info from dashboard, he is taken to this screen which shows a trendline of the battery with a health readout (good versus bad). Usually an average of 11.6+ V is a healthy battery.
7. Maintenance Details
Tapping on the maintenance icon from the dashboard will show additional details:
8. Recall Details
On this page the user can see the recalls that are issued for that car (if any).
9. Wifi Details
Tapping on the Wifi icon from the dashboard will:
10.Trip History
This page would should a history of all the trips that were taken with start and end point.
11.Service Page
The user will see:
12. Add a New Device
From the main page, the user has the option to add a new device/ car. This can be a button/link, etc.
Form Factors
Branding Guidelines
Stockphoto and Icons
Stock photography and icons are allowed as per Topcoder rules
Target Audience
Customer of Novus who wish to simplify their car experience
Judging criteria
Marvel Prototypes
For this challenge you should submit your designs in Marvel. You can request one in the forums or email at keyla. blue1@gmail.com
Final Deliverables
Final Fixes
Challenge Objectives
- User interface design
- 12 screens
- iOS native application
Round 1
Submit your initial design for a Checkpoint Feedback:- Login
- Main Page
- Car Dashboard
- Boat Dashboard
- Fuel Consumption
- Maintenance Details
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design plus Checkpoint Updates:- Login
- Main Page
- Car Dashboard
- Boat Dashboard
- Fuel Consumption
- Battery Health Details
- Recall Details
- Maintenance Details
- Wifi Details
- Trip History
- Service Page
- Add a New Device
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Project Background
- The purpose of this project is to develop a mobile application that will support two devices:
- A device that connects to a car’s OBD2 port and allows drivers to check the status of their car such as fuel consumption, battery life, etc. In addition it provides WiFi hotspot and drivers can see their trip history and track their car in real time.
- A device that provides WiFi hotspot and allows customers to see their trip history and track their vehicle in real time. This device can connect to cars, boats, or other types of vehicles since it is powered through a cigarette lighter or USB port.
Workflow
In this challenge we are looking to design an application that can give the user the ability to choose a device, see details about his vehicle as per the user stories. This is a native iOS application so make sure to follow the iOS guidelines.
User Story
Luke is a business man and the happy owner of a Ford F150 a Bertram boat. Luke has installed a Novus WiFi hotspot in his car so can connect his laptop, track his business trips, and when his going on road trips with his family, his children connect their phones and tablets to the hotspot too. In addition to his car, Luke has installed a Novus WiFi to his boat. This allows him and his guest to have WiFi access when they go to the lake. Luke has a daughter that drives a Ford Mondeo. Luke has installed a Novus OBD2 device on his daughter’s car so he can monitor her car’s health and make sure they won’t miss a maintenance. The app also gives him peace of mind by allowing him to see where his daughter is and if she drives safety. Moreover, his daughter can his daughter connects her phone to the WiFi hotspot to use Google Maps for navigation around town.
The Novus application supports these products:
- Novus OBD2 Device (for cars)
- An OBD (on-board diagnostics) port connected device which can read car diagnostic data and has GPS, Bluetooth, Accelerometer, Gyroscope and Wi-Fi hotspot
- Novus WiFi Device (can connect to multiple types of vehicles, boats in this example)
- A cigarette lighter or USB power source connected Wi-Fi hotspot, with GPS, Bluetooth, Accelerometer, Gyroscope
Because of these devices, Luke is able to get access to Wifi and track each of his vehicles. The OBD2 device allows him to check: vehicle details, status, fuel consumption and trends, engine status, battery health and trends, upcoming maintenance date, and WiFi data usage. In addition he will also see a history of his trips and can use the application to navigate as well. While driving he can check the fuel stations on the road with related gas prices as well as any roadside assistance services.
In this challenge we are looking to design the user experience for Luke. The application will include the following pages:
Luke has acquired 1 Novus Device for his car and 1 Novus Lite Device for his boat so he can see details for each of them.
1. Login Page
For this page, we would like to see the following fields:
- Username
- Password
- Login button
- Option to create an account, if the user doesn’t have it (no need to design the register page)
- Option to change password if the user has forgotten it
2. Main page
After logging in Luke can see a list with all of their devices. In general the user won’t see the exact device name when logging in, but he will see the image of the connected vehicle, so in this case an image of his car and and his boat with related names will be displayed. When a user selects a car or object the appropriate dashboard view is shown. The user can easily switch between their cars/objects and has the option to add a new device/vehicle.
3. Car Dashboard
As soon as Luke selects the Ford Mondeo car, the dashboard for it will appear.
The dashboard will include a map as well. The default view should have at least 1/3 of the screen allotted to the map and the rest of the screen is allotted to a pop-up drawer (see Google maps explore view).
- Depending on the screen size, we can show everything about the car or the user will see a hint that they can slide up the drawer to completely dismiss the map.
- The user can also dismiss the drawer to show more of the map to see a current trip in progress. However the context for which vehicle is selected should always be visible.
The drawer will show the following information:
a) Information on the car: photo and name
b) State (drived/parked/offline): if it’s parked it should show the address
c) Fuel icon with level information:
- If the fuel is > ¼ the icon shows green
- If ¼ <= fuel < 1/8 icon is amber
- If 1/8 <= fuel icon is red
- The user can tab on this icon to see more details on the fuel consumption (see below).
d) Engine icon with engine health
- If green = no issues
- If amber = low severity
- If red = needs attention now
e) Battery Health icon
- If green = no issues
- If amber = low severity
- If red = needs attention now
The user can tap on the battery to see more details.
f) Maintenance icon
f) Maintenance icon
- Green = no upcoming maintenance
- Amber = maintenance is 4 weeks away
- Red = past maintenance milestone
g) Recall icon
- Green = no recall
- Red = recalled by manufacturer
h) Wifi icon
- Green = Wifi is on
- Gray = Wifi is off
Tapping on the Wifi icon will show additional details
4. Boat Dashboard
When Luke selects the boat, he can see the following information in the drawer:
a) Information on the boat: photo and name
b) Status (same as above): moving, parked (if parked we should see its address)
c) Wifi icon (same as above):
b) Status (same as above): moving, parked (if parked we should see its address)
c) Wifi icon (same as above):
- Shows the current Wi-Fi usage and limit
- Shows an option to buy more Wi-Fi data
5. Fuel Consumption
When the user gets to this page he can see the current fuel level, as well as a trend of fuel consumption week over week along with fuel prices from gas stations near by.
He also has the option to order a fuel fill-up regardless of his location (the default location can be the user current location but that can be changed).
6. Battery Health Details
Once Luke taps into battery info from dashboard, he is taken to this screen which shows a trendline of the battery with a health readout (good versus bad). Usually an average of 11.6+ V is a healthy battery.
7. Maintenance Details
Tapping on the maintenance icon from the dashboard will show additional details:
- Shows current odometer reading
- Shows the next maintenance due date and how far in terms of miles. For example, If I am at 12000 miles, my next maintenance is at 15000 miles, we should show 3000 miles from next maintenance
- Show cost of upcoming maintenance intervals (this is usually estimated by the service based on the information for similar cars)
8. Recall Details
On this page the user can see the recalls that are issued for that car (if any).
9. Wifi Details
Tapping on the Wifi icon from the dashboard will:
- Show current data usage amount vs plan
- Show an option to buy more Wifi hotspot data
- Show an option to turn on/off the Wifi hotspot or update SSID/password
10.Trip History
This page would should a history of all the trips that were taken with start and end point.
11.Service Page
The user will see:
- An option to call Roadside Assistance
- Link to Gas prices page
12. Add a New Device
From the main page, the user has the option to add a new device/ car. This can be a button/link, etc.
- On click the user would scan the device label which has an ICCID (Integrated Circuit Card Identifier)
- Once the ICCID is scanned, we would drop the user into a chat with Novus care, with the ICCID, so care can activate the ICCID for the user
Form Factors
- Your application should be a hybrid one (same design would be applied to both iOS and Android device).
- Size: 750 x 1334px
Branding Guidelines
- Branding guidelines can be viewed here.
- We’d like the splash/login page to have a black background to match the device’s box
- Please use magenta as an accent/secondary color only
- Feel free to use additional colors where it makes sense (e.g. fuel tank level would have red, orange, green). But use a shade of these colors that goes well with the colors from the brand guideline.
- This is an iOS native application so make sure to follow their guidelines
Stockphoto and Icons
Stock photography and icons are allowed as per Topcoder rules
Target Audience
Customer of Novus who wish to simplify their car experience
Judging criteria
- How easy can the user see the status of his vehicles at once?
- How exciting is your design looking
- Completeness of your submission
Marvel Prototypes
For this challenge you should submit your designs in Marvel. You can request one in the forums or email at keyla. blue1@gmail.com
Final Deliverables
- Source.zip – All original source files.
- Submission.zip – PNG/JPG files
- Preview.png – Your preview image
- Declarations.txt – All your declarations and notes
Final Fixes
- As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall color
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.