Background
Mitsubishi Motors will launch a limited 'Diamond Edition' for their one of best selling model 'Eclipse Cross' in Canada. Motoinsight was tasked to come up with a solution for its pre-order experience. 
Objectives
As a user, I want to be able to
- Search and browse available dealerships near me based on my postal code
- Select a dealership based on my search results
- Secure my pre-order with a deposit
- Review,edit and confirm my payment information for the deposit
- Review my order information
User Flow
Approach
- Persistent vehicle information: to keep users excited throughout the pre-order journey
- Collapsable vehicle information: to use the limited real estate efficiently 
- Progress bar: to guide users through the pre-order experience
- Collapsable input fields(mobile only): to avoid intimidating input process

UI Iteration
Motoinsight team was tasked to change the background of the UI from white to black from the client and as a result, the background tone of the vehicle info div was also changed.

White Theme vs. Black Theme

Mobile Design

Landing page(step 1) / location input and scrolled / dealer selected / step 2

Collapsable form sections / Review information / Confirmation / Sold out page


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

You may also like

Back to Top