Background
Genesis, the new luxury brand from Hyundai, offers a complete, end-to-end online sales process to consumers which called 'Genesis at Home'. Consumers can configure their own vehicle, put a deposit, apply for credit, trade their old vehicles and finally get delivered a new vehicle to their front door without visiting a dealership. Based on internal evaluations and user feedback from Genesis, Motoinsight team decided to redesign 'My Vehicles' page where consumers can access to their saved Genesis vehicles and 'Order Tiles' where consumers can take actions in order to complete their orders. 

Left: 'My Vehicles' page  / Right: 'Order Tiles'

Challenges
For consumers, it is difficult to
- Configure a new vehicle from 'My Vehicles' page.
- Understand order progress on each vehicle at a glance
- Prioritize each vehicle
- Know the details of each vehicle at a glance
- Manage the list (no ways to delete the vehicles from the list)

For Genesis team, it is difficult to
- Understand which vehicle is currently in the process of buying or which are saved for pure research
Approach
To enhance the user experience, our team decided to combine 'My Vehicles' page and 'Order tiles'. This will provide a central "hub" experience for users where they can access all of their Genesis vehicles/orders. Also, by categorizing the types of orders will bring more focus on the vehicles which is in the process of buying. 
Solution
- Categorize order types and apply different visual treatment to each type (Current Purchases vs. Saved Vehicles)
- Display more vehicle information(e.g. written exterior & interior colours, added accessories)
- Display payment information(e.g. payment type, terms, rates) 
- Indicate order progress and present action items
- Add ability to add/delete each vehicle from the list
User Testing
User Testing was conducted internally to test, 
- If users can understand what action they need to take in order to complete their orders 
- If users can determine their order progress
- If users can understand the differences between 'Current Purchases' and 'Saved Vehicles'
- If users can manage the list (add/edit/delete vehicles from the list)
- If users can understand overall information on the page

Feedback:
- All users found the latest modified date not meaningful and useful
- All users found the order progress diagram helpful, but wanted to see more information about the progress
- All users were confused by 'the arrow' in the button for 'Current Purchases'
- All users found that 'Current Purchases' and 'saved vehicles' are visually too similar
- Some users suggested a different label for 'Current Purchases'
Iteration
Based on the feedback from the user testing, I revisit the UI and Information hierarchy on the 'Current Purchases' and make some modifications to each vehicle order card.
Mobile Design
- Collapsable vehicle information
- Collapsable order progress
- Empathize on the most important action items

Default View / Collapsable Order Progress / Collapsable Vehicle Info / Adding a New Vehicle


Micro Animation
My contributions
- User Flow
- Wireframes
- UI/UX Design
- Prototyping
- User Testing

What's Next?
Genesis dashboard experience has become a corner stone of the dashboard experience for other projects.
Back to Top