BOOSTER-UX&UI

DESIGN EXERCISE ( A weekend )

I'd like to introduce Booster to the Chinese audience.  On-demand gas delivered while you work! Low prices. High quality. No catch. And same-day delivery is free.

 

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

滴滴出行

滴滴出行

加油钱包

加油钱包

会加油

会加油

加油宝

加油宝

去加油

去加油

去加油

去加油

mock up3_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 car 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, depended on their priority, addressed on this screen with elegant visual language and manipulator.

mock up4_3x

ORDER- Concept-one page_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 was to show everything on 1 screen, that fits without the need to scroll.

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 up5_3x

Booste-open_chinese copy

Booste-open_chinese

ORDER- Concept-one page_3x

MAP-Concept_3x

ORDER- Concept-one page_check_3x

My Gallery :)

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

  • 1476932257_QQ
  • Black LinkedIn Icon