Mobile UI | Saihu | Product Design

Saihu

Mobile Interface

Flow, Mockup, Process, Font, Color

Flow Outline

Begin to begin exploring page flows by creating simple flow outline, This help me explore the most important part of this product, In-depth to build flows and get much more accurate assessment of the whole interaction required for the user experience.

UI Flow

Create a low-fidelity mockup around realistic content for each page in flow outline. To bring my ideas to life with more detail around layout and structure. And also measure the success of a flow in terms of efficiency.

Critical Process

To make the consultation be closer to reality, have separate the process into five states, and ensure those can inform the user current transaction situation.

Provider - Provide KnowledgeBuyer - Buy Knowledge
  • 1. Buyer apply and ready to pay.
  • 2. Buyer pay and wait for provider reply.
  • 3. Provider reply and secure the timing.
  • 4. Wait appointment time.
  • F. Done for consultation and leave the review.

Usability Enhancements

After launch the product, the next step is to follow up all the and feedback. It's not only enhance the usability, but also try to find the new feature path. I take " Item Page " case for the problem and solving outcome.

A - Previous item page.B - New item page.
  • 1. Add price information

    Originally, the price just show in the details page, when the user wants to see the price they will throw inside it. And mostly, they just leave even didn't scroll the page.

  • 2. Revise image & item size

    One item occupied half screen size and it's hard to scroll more items and image is too big. The user just focuses on the topic information ( Who / What / How ).

Font Type & Color Palette

UI Outcome

  • Mobile Screen 1
  • Mobile Screen 2
  • Mobile Screen 3
  • Mobile Screen 4
  • Mobile Screen 5
  • Mobile Screen 6
  • Mobile Screen 7
  • Mobile Screen 8
  • Mobile Screen 9
  • Mobile Screen 10
  • Mobile Screen 11
  • Mobile Screen 12
  • Mobile Screen 13
  • Mobile Screen 14
  • Mobile Screen 15
  • Mobile Screen 16
  • Mobile Screen 17
  • Mobile Screen 18
  • Mobile Screen 19
  • Mobile Screen 20
  • Mobile Screen 21
  • Mobile Screen 22
  • Mobile Screen 23
  • Mobile Screen 24
  • Mobile Screen 25
  • Mobile Screen 26
  • Mobile Screen 27
  • Mobile Screen 28
  • Mobile Screen 29
  • Mobile Screen 30
  • Mobile Screen 31
  • Mobile Screen 32
  • Mobile Screen 33
  • Mobile Screen 34

Design Work

“ Create any possibility of flowing knowledge. ”

Carlos Wang CEO @ SaihuX Inc.
Back to Saihu