Tquila UX Lean Process

19

Click here to load reader

Transcript of Tquila UX Lean Process

Page 1: Tquila UX Lean Process

2014.03.07 V1.1

Page 2: Tquila UX Lean Process

22014.03.07 V1.1

Research User Model Find out Needs

Design Plan Modification Management

1 2 3 4 5 6

Research Users PersonaUser ScenarioUser Journey

User’s NeedsBusiness Requirements

Technical Details

Information ArchitectureScreen LayoutUI Structure

Interaction DesignInterface Design

Contents

Development Support

UX Design Process

Page 3: Tquila UX Lean Process

32014.03.07 V1.1

Research User Model Find out Needs

Design Plan Modification Management

1 2 3 4 5 6

Research Users PersonaUser ScenarioUser Journey

User’s NeedsBusiness Requirements

Technical Details

Information ArchitectureScreen LayoutUI Structure

Interaction DesignInterface Design

Contents

Development Support

UX Design Process

Page 4: Tquila UX Lean Process

42014.03.07 V1.1

2.User Model Persona

He is 32 years old market researcher who lives in London. He normally works outside of office and travels around London.

Task worker“ I visit sites to collect data from real customers and sales employees. I travel extensively.”

Devices and Platforms Proficiency Level

Using Mobile

Using Tablet

Using Internet

Using Software

Usage App/Tablet

Work

Mails

Surfing internet

Social media

Must Do Must Never

User Experience Goal (User’s needs)

TechnologySNS

- Hide unnecessary processes - Show geography information: To save time for travelling and to ensure where the stores are.

- Be able to work online and offine both: Not to lose data and keep users to do their tasks.

- Too many clicks through/ Long process to get information he needs: User is busy and wants to get information quickly.

John SMarket researcher for Tquila

Profile

Page 5: Tquila UX Lean Process

52014.03.07 V1.1

2.User Model User Journey User’s Needs

Engage and Connect Learn and Discover Manage and Use Evaluate and Share

Action

Motivation

- John opens app with mobile or tablet.

- The first time he is required to enter his login details. when he next opens the app, he is automatically logged in through Salesforce.

- Sites to visit are shown on the landing screen.

- See schedule and access information about how many sites he needs to visit today.

- Selects one of the sites to see details.

- Collected data synchronise to Salesforce and sent to client straight away.

- App shows his tasks done.

- To become familiar with the app.

- To check his schedule. - To get the information about his tasks.

- To collet specific data that clients want to get from real customers.

- To ensure his tasks are completed.

- Check the map and see where is the nearest store to him.

- Get the route to go to the store.

- Check-in to the store and collect data by filling out Q&A form.

Task worker“ I visit sites to collect data from real customers and sales employees. I travel extensively.”

John SMarket researcher for Tquila

Page 6: Tquila UX Lean Process

62014.03.07 V1.1

Research User Model Find out Needs

Design Plan Modification Management

1 2 3 4 5 6

Research Users PersonaUser ScenarioUser Journey

User’s NeedsBusiness Requirements

Technical Details

Information ArchitectureScreen LayoutUI Structure

Interaction DesignInterface Design

Contents

Development Support

UX Design Process

Page 7: Tquila UX Lean Process

72014.03.07 V1.1

Time

App experience level during working

Expe

rienc

e le

vel

Considerations

- User is smart and quite fmiliar to technology but busy. - This app is used for a long time period. - Familiarisation period with the app should as short as possible (Beginner to Expert).

- Target user type is Intermediate. - Interface design should be intuitive and easy to find required information.

Design point

3.Find Needs User Journey User’s Needs

Task worker“ He visits sites to collect data from real customers in sales and reports it to clients straight away. He spends his time on travelling heavily.”

John SMarket researcher for Tquila

Page 8: Tquila UX Lean Process

82014.03.07 V1.1

Research User Model Find out Needs

Design Plan Modification Management

1 2 3 4 5 6

Research Users PersonaUser ScenarioUser Journey

User’s NeedsBusiness Requirements

Technical Details

Information ArchitectureScreen Layout

UI Structure

Interaction DesignInterface Design

Contents

Development Support

UX Design Process

Page 9: Tquila UX Lean Process

92014.03.07 V1.1

3.Design Plan Informaiton Architecture

Page 10: Tquila UX Lean Process

102014.03.07 V1.1

3.Design Plan Screen Layout Design Concept with sketches

App opens and splash screen loaded. Schedule is shown in Card view.User can customise the main screen as choosing among Card view, Map view and Calendar view.

User can access to key functions (Check-In, Camera, Q&A) as swiping one of the schedule section.

User can access to different schedule views(Sub-menu).Schedule detail view.User can check details and progress of task given.

Page 11: Tquila UX Lean Process

112014.03.07 V1.1

Schedule detail view.User can check details and progress of task given.

Calendar view. Map view.User can check where sites are and access to the details as tapping them.

Menu view.User can access to different schedule views(Sub-menu).

3.Design Plan Screen Layout Design Concept with sketches

Page 12: Tquila UX Lean Process

122014.03.07 V1.1

4.Design Plan Detailed sketches with key interactions

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Check-In Take photo Q&A

QA

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Map Cal CardDD MM

00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

D

DD

DD

DD

Search

Home

My profile

Chatter

Settings

Log out

DateDD/MM/YY 00:00

Reschedule

Date

AddressPlace

Previous Visits

Staff

View details

DD MM00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

DMap Cal Card

Splash screen loaded. Card view screen.User swipes one of the schedule section.

User can access to Check-In, Take photo and Q&A menu easily.

Page 13: Tquila UX Lean Process

132014.03.07 V1.1

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Check-In Take photo Q&A

QA

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Map Cal CardDD MM

00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

D

DD

DD

DD

Search

Home

My profile

Chatter

Settings

Log out

DateDD/MM/YY 00:00

Reschedule

Date

AddressPlace

Previous Visits

Staff

View details

DD MM00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

DMap Cal Card

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Check-In Take photo Q&A

QA

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Map Cal CardDD MM

00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

D

DD

DD

DD

Search

Home

My profile

Chatter

Settings

Log out

DateDD/MM/YY 00:00

Reschedule

Date

AddressPlace

Previous Visits

Staff

View details

DD MM00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

DMap Cal Card

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Check-In Take photo Q&A

QA

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Map Cal CardDD MM

00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

D

DD

DD

DD

Search

Home

My profile

Chatter

Settings

Log out

DateDD/MM/YY 00:00

Reschedule

Date

AddressPlace

Previous Visits

Staff

View details

DD MM00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

DMap Cal Card

4.Design Plan Detailed sketches with key interactions

User taps Menu button. Main menu(Home, My profile, Chatter, Settings and Log out) shown.

Page 14: Tquila UX Lean Process

142014.03.07 V1.1

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Check-In Take photo Q&A

QA

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Map Cal CardDD MM

00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

D

DD

DD

DD

Search

Home

My profile

Chatter

Settings

Log out

DateDD/MM/YY 00:00

Reschedule

Date

AddressPlace

Previous Visits

Staff

View details

DD MM00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

DMap Cal Card

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Check-In Take photo Q&A

QA

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Map Cal CardDD MM

00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

D

DD

DD

DD

Search

Home

My profile

Chatter

Settings

Log out

DateDD/MM/YY 00:00

Reschedule

Date

AddressPlace

Previous Visits

Staff

View details

DD MM00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

DMap Cal Card

4.Design Plan Detailed sketches with key interactions

User taps one of the schedule section to see detail.

Detail view.User can check detail and progress of task given.

Page 15: Tquila UX Lean Process

152014.03.07 V1.1

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Check-In Take photo Q&A

QA

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Map Cal CardDD MM

00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

D

DD

DD

DD

Search

Home

My profile

Chatter

Settings

Log out

DateDD/MM/YY 00:00

Reschedule

Date

AddressPlace

Previous Visits

Staff

View details

DD MM00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

DMap Cal CardDD MM

0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Check-In Take photo Q&A

QA

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Map Cal CardDD MM

00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

D

DD

DD

DD

Search

Home

My profile

Chatter

Settings

Log out

DateDD/MM/YY 00:00

Reschedule

Date

AddressPlace

Previous Visits

Staff

View details

DD MM00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

DMap Cal Card

4.Design Plan Detailed sketches with key interactions

User taps Sub-menu button. Sub-menu(Map, Calendar and Card) shown.

Page 16: Tquila UX Lean Process

162014.03.07 V1.1

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Check-In Take photo Q&A

QA

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Map Cal CardDD MM

00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

D

DD

DD

DD

Search

Home

My profile

Chatter

Settings

Log out

DateDD/MM/YY 00:00

Reschedule

Date

AddressPlace

Previous Visits

Staff

View details

DD MM00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

DMap Cal CardDD MM

0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Check-In Take photo Q&A

QA

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Map Cal CardDD MM

00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

D

DD

DD

DD

Search

Home

My profile

Chatter

Settings

Log out

DateDD/MM/YY 00:00

Reschedule

Date

AddressPlace

Previous Visits

Staff

View details

DD MM00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

DMap Cal Card

4.Design Plan Detailed sketches with key interactions

User taps Calendar button from Sub-menu bar.

Schedule shown in Calendar view.

Page 17: Tquila UX Lean Process

172014.03.07 V1.1

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Check-In Take photo Q&A

QA

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Map Cal CardDD MM

00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

D

DD

DD

DD

Search

Home

My profile

Chatter

Settings

Log out

DateDD/MM/YY 00:00

Reschedule

Date

AddressPlace

Previous Visits

Staff

View details

DD MM00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

DMap Cal Card

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Check-In Take photo Q&A

QA

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

DD MM0km 00:00

PlaceAddress

Map Cal CardDD MM

00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

D

DD

DD

DD

Search

Home

My profile

Chatter

Settings

Log out

DateDD/MM/YY 00:00

Reschedule

Date

AddressPlace

Previous Visits

Staff

View details

DD MM00:00

00:00

00:00

00:00

00:00

PlaceAddress

0

0

0

0

0

DMap Cal Card

4.Design Plan Detailed sketches with key interactions

User taps Map button from Sub-menu bar.

Sites/Stores to visit shown in Map view.User can zoom in/out to check the details on map.

Page 18: Tquila UX Lean Process

182014.03.07 V1.1

4.Design Plan Graphical User Inerface

Page 19: Tquila UX Lean Process

192014.03.07 V1.1

4.Design Plan Graphical User Inerface