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 :)

To play, press and hold the enter key. To stop, release the enter key.