UI Design Workflow

"From scratch to final product" The following section is an overview of process and medium that team and I used for UI/UX design process. Usually, there will be a lot of small iterations in each steps.

1. Mind Mapping / Requirement Analysis / Persona

2. User Flow

3. Information Architecture

4. Wireframing

5. Prototyping

6. Mockup

7. Deliver UI to Developer

 

_______________________

1. Mind mapping / Requirement Analysis / Persona

To Study about user, problem and product

Requirement Note
Requirement Note
Mind Mapping
Mind Mapping

2. User Flow

Define workflow and actions needed​

User Story Mapping

userflow_mapping
userflow_mapping

3. Information Architecture

Define structure and information on each part of the app or website

Screen Shot 2017-01-29 at 9.30.42 PM
Screen Shot 2017-01-29 at 9.30.42 PM

4. Wireframing

To get rough idea about layout and element in each screen

To get the clearer picture about screen flow

PREVIEW-EXERCISE2-WIREFRAMES
PREVIEW-EXERCISE2-WIREFRAMES
Screen Shot 2017-01-29 at 9.35.05 PM
Screen Shot 2017-01-29 at 9.35.05 PM

5. Prototyping

To test UI design and flow by paper prototype or interactive prototype

Paper Prototyping
Paper Prototyping
Interactive Prototyping
Interactive Prototyping

By Invision

Paper Prototyping
Paper Prototyping
Interactive Prototyping
Interactive Prototyping

By Invision

6. Mockup

To get the final look of each screen

A/B Testing from Alternative Mockups

Get final approval from stakeholders or product lead

Leaderboard - All TIme
Leaderboard - All TIme
Profile_Sleep_InformationDay01
Profile_Sleep_InformationDay01
AddFood_AdjustCal02
AddFood_AdjustCal02
ASPHALT8-MOCKUP-CARSELECTION-LOCKED
ASPHALT8-MOCKUP-CARSELECTION-LOCKED

7. Deliver UI to Developers

Create ready-to-dev asset

Send guideline to developer

Manual Layout Guideline
Manual Layout Guideline
Share UI Guideline via Zeplin
Share UI Guideline via Zeplin

Sketch's Plugin