HK Driver Mobile App Design Concept Challenge

Welcome to HK Driver Mobile App Design Concepts Challenge.

We recently ran a design direction challenge to create the initial design artifacts to guide the production of this mobile application. We’re looking forward to seeing high fidelity designs and creative solutions around the automobile lifecycle management in a friendly fashion, considering the challenge of organizing a complex amount of information for the user.

Round 1

Submit your design for a checkpoint feedback.

01. Homepage or Navigation Menu 
02. Emergency Services

- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Submit your final design plus checkpoint feedback.

01. Homepage or Navigation Menu 
02. Emergency Services
03. Garage Mechanic Services

- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Challenge Objectives

• To create UI screens.
• To provide a seamless flow to complete user goals.
• Mobile application.

Application Overview

• The application will cover a considerable range of features to enhance a driver’s experience; the whole set of elements are in relation to access to service, vehicle maintenance, Parking Assistant, Traffic alerts, After Sales service,  Services/promotions and driving rewards (gamification) and more. 
• What’s the best way to deliver all this information in a fashion that makes sense while keeping it simple (avoid overwhelming the user).
• This is NOT an app to use ONLY while driving, more of an app that helps improve the driving experience by providing the driver with enough information and flexibility.
• This mobile application will be used by car owners in Hong Kong and it provides various functionalities including 
  • Car maintenance and repair services (mechanics, oil, types, m.o.t) 
    • Finding info without relying on others
  • Emergency and recovery services (roadside assistance)
    • An intuitive process that factors in driver’s safety and providing extensive information about location, fault, etc.
    • A driver may not be technical enough to understand the nature of fault that may be important for the recovery service
  • Traffic alerts
    • Real-time info about traffic
  • Finding 
    • Spaces and information relating to parking
    • Fuel (prices, location, availability)
  • Useful information such as offense points
    • May include fines and penalties
  • Promotions targeting drivers (services relevant to car owners or services applicable whilst driving)
  • Vehicles license status (part of the user profile)
  • etc.
• The major goal of the application is to make the car owner’s life easier at managing all the different aspects.
• The reason behind building this app is becoming first in the market to meet customer-specific needs, tying available existing services to consistent needs drivers have - these features can already be accessed but not in a manner / or with an easy tool; specifically maintenance and emergency services. Secondary but not less important, to be able to learn more about the customers we insure, the drivers; to understand them and their needs to be better placed to serve them in the future.
• See the attached PPT Design Workshop asset.

Workflow

• First Access
  • User opens the app
  • Onboarding screen to introduce app (what are the 3 key things the app can do)
  • User is able to access navigation, find parking, find petrol and find garages (services/prices) without having to log in
  • He can also check how the emergency assistance works without logging
  • Once customer “uses” these functionalities then a screen, “Login for a more personalized experience”  shows up
• Subsequent access
  • User open apps with Face Recognition or digital recognition
  • Or has option to open without registering 
• Navigation
  • Select destination 
  • Choose if he wants to have parking or find a petrol station on the way 
  • Navigation starts
  • User Received traffic alerts or re-route if anything happens
  • When ride finish then the user is asked to enter “who was this drive” so we can collect feedback
  • User can also report if price or info for parking is incorrect 
• Parking
  • The user might want to find if there’s parking around a certain area
  • He enters address and checks parking
  • Price and Availability of parking show up
  • User can choose to “Drive” to that parking
• Vouchers
  • The user receives a voucher to use
  • Vouchers will be pushed by the app 
  • The user receives a notification when there’s a new voucher
  • User can check available vouchers in the app (ones that were used and ones that are still available or expired) 

Screens/Features
01. Homepage or Navigation Menu 

• Landing page and the main interaction area of the user.
• What data and modules would be interesting for the user at this stage?
• What are the more important notifications and how to classify them in this universe where there are so many things going on from parts management to accident responses (and much more)? See design artifacts section.

02. Emergency Services

• Emergency Example: Car breakdown
  • User click on Emergency/ Breakdown assistance (user-action - some intuitive action)
  • One-Click call to an insurer
  • The screen shows his exact location and address
  • Has an option to share this location
  • In case the user is not insured he can top-up (pay for towing) directly on the app 
  • User will see the nearest towing car (dispatched by Assistance Provider)
  • The screen will show a countdown for arrival or car (xlocation) 
  • The user gets to rate service after towing car finishes service
  • Examples of Web:
    • https://www.motormech.com.hk/en/price-list.php
    • https://www.motormech.com.hk/en/car-care-service.php
    • https://www.motormech.com.hk/en/booking-form.php

03. Garage Mechanic Services

• Book Garage Service / Car Care Services
  • User needs to change the engine oil 
  • Goes the garage services
  • Checks available services (that matches his car if this info has been provided on the registration)
  • Services can be filtered by distance/price/rating
  • Selects  the one they want and Books service
  • Receives confirmation
  • Provides Feedback after service is provided 

Design Direction Artifacts
Previously to this challenge, we ran a design direction challenge where we received useful elements we’d like to take inspiration from, see 03. Artifacts in the provided Assets folder.

• 1st:
  • Liked safety first approach taken here (App is designed thinking about driving with safety).
  • Great voice functionality - take usability into account, noting a driver will not be able to handle his device. How can this feature be enhanced to cover the highlighted user stories?
  • We would like to see the emergency road-assistance proposal.
  • The notification process needs to be implemented with the user in mind - it ought to complement and not distract.
  • Running late notification is a good ‘nice-to-have’, linked to the user calendar feature that may enhance the application, but not an immediate priority
• 2nd:  
  • Liked voice recognition - see above
  • Thought about login in using social media and phone number - onboarding options to register should consider what’s easiest for users.
  • The app suggests parking while you are navigating, this is quite intuitive; implementing the user’s own points of interests during his journey could be a good touch. E.g. a user could identify “flower shops” or “parking” along his journey.
  • They thought about providing service via video. This is great but we will probably need to start with chat conversation - a bot > human engagement process here would be good to see implemented.
• 3rd: 
  • The logo is nice - not critical but it would be good to see some good ideas.
  • Navigation page looks interesting but the map needs to be bigger.
  • Didn’t like Biometric Login, if it’s on the person’s phone a simple verifiable login should be ok.
  • The dashboard looks quite long, would need to make it simpler; ensure key pages avoid scrolling and important information stays within the viewport.
  • Needs further development of Emergency and Garage services

Screen Specifications

• Phone: 750px width. The height as much as needed, but maintain viewport on the dashboard.
• Make sure your work is in a vector format, for retina scaling and high fidelity.

Branding Guidelines

• We’d like to see a simple logo approach, see feedback from 2nd runner up (3rd placed). Do not focus on a logo design, just a simple draft would be fine.
• Branding colors and fonts are open to suggestions, keep them based on the target audience.

Design Assets
Folder: https://drive.google.com/open?id=1s3vjrTX1MNNSD-oa_dflrdH-rlbMTzHZ 

• Design Workshop.ppt: design workshop artifacts and general vision of the application.
• Artifacts: design elements from for design direction and inspiration.

Target Audience
Car drivers in Hong Kong. We're targeting the driving population so accessibility is something that will weigh heavy. It's important for a broad variety of users to be able to navigate the app with ease.

Judging Criteria

• How well you plan the user experience and capture your ideas visually.
• Are mobile-first principles properly applied to your solution?
• How well you implement the challenge requirements.
• Cleanliness of your graphics and design.
• Creativity and ease-of-use is key to success as it must be engaging to users.

Final Deliverables

• All original source files.
• Files should be created in Adobe Photoshop, Adobe XD or Sketch.
• Numbered/Ordered JPG screen files.
• Marvel Prototype
  • We need you to upload your screens to Marvel App.
  • Request a MarvelApp prototype from me using this link: https://tc-marvel-app.herokuapp.com/challenge/30098241
  • Do not use the forums to request for MarvelApp.
  •  Provide clickable spots (hot zones) to link your screens and showcase the flow of the solution.
  • You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).

Stock Artwork (Illustrations, Icons, Photography)

• Stock artwork is allowed for this challenge.
• Make sure to declare all your assets properly or you might fail screening.
• You don’t want to fail screening? Read this.