BOOSTER-UX&UI

DESIGN CHALLENGE( A weekend )

On-demand gas delivered while you work. Low prices. High quality. No catch.​

ORIGINAL DESIGN-Returned User Order Process​​

Image uploaded from iOS (4)

Image uploaded from iOS (3)

Image uploaded from iOS

Image uploaded from iOS (1)

Nexus Mock-ups copy 3

Nexus Mock-ups copy

mock up1_3x

BOOSTER1

BOOSTER3

BOOSTER2

BOOSTER4

1. PRODUCT ANALYSES

  • ​​User Benefit-Save time and money.

  • Organize and group information and process.​

2. RETURNED USER SCENARIO

A: The user parked the car before leaving the car to make an order.​

3. PRODUCT POSITIONING -DESIGN DIRECTIONAl PRINCIPLES

  • Tools: Design an information structure that makes it fast and easy to get to content. Organize your information structure in a way that requires a minimum number of taps, swipes, and screens.

  • Content heavy- News/Airbnb

  • Complex serious-Email/Office

  • Light entertainment-Music

  • Immerse-Game

mock up2_3x

Boost Tab

Image uploaded from iOS (4)

Image uploaded from iOS (3)

MAP-Concept_3x

OPTIMIZE POINT-1

 

 

Returned User Scenario

A: The user parked the car before leaving the vehicle to make an order.

 

Action &  Information Priority

Input where is my parked. [Must]

The price of gas. [Must]

See gas station price. [Delighter]

 

SO

I combine these analyses and user needs, depending on their priority, addressed on this screen with elegant visual language and manipulator.

mock up3_3x

ORDER- Concept-one page-check_3x

OPTIMIZE POINT-2

 

PRODUCT POSITIONING -DESIGN DIRECTIONAl PRINCIPLES

Tools: Design an information structure that makes it fast and easy to get to content. Organize your information structure in a way that requires a minimum number of taps, swipes, and screens. — iOS Design Guidelines

 

so

1. The idea was to not break down the process into multiple, then show a confirmation at the end to allow changing each piece individually. The goal is to show everything on 1 screen, and without scrolling.

2. I try to address the manipulators with their own hierarchy.

Image uploaded from iOS (4)

Image uploaded from iOS

Image uploaded from iOS (1)

Nexus Mock-ups copy 3

Nexus Mock-ups copy

mock up4_3x

Iphone_color-Recovered-copy

ORDER- Concept-one page-oval_3x

button-2

MAP-Concept_3x

ORDER- Concept-one page-check_3x

MAP-Concept

My Gallery :)

© 2018 BeibeiDesign  |  All rights reserved  |  The Web made with love by your truly

  • 1476932257_QQ
  • Black LinkedIn Icon