BUILD

Innovation and design process

Sketch -> Wireframe -> Lo-Fi Mockup -> Lo-Fi Prototype

Design workshop or Design Studio

By having design workshop helps building mutual understanding where the product is heading and involving everyone to design process eases collaboration and is one LEAN UX principles. Sketching phase is a design phase for the whole team. During design workshop team draws multiple sketches/wireframe suggestions and decide backbone for the product.

Sketch -> Present -> Critique

####Process:

• Problem definition and constraints
• Individual idea generation
• Presentation and critique
• Iterate and refine
• Team idea generation

####Workflow

Divide A4 into 6 parts and draw 6 ui-draft solutions to solve the problem. Everyone can draw circle, square and triangle. Afterwards presentations and critique (about 3min per person).

If enough feedback was give do an iteration phase. Now make just one new sketch based on the feedback. (can be made with mockup tool)

Wireframe

Sketches are changed to wireframes if necessary using UI design tool.

Lo-Fi mockup

Lo-Fi mockups are made of wireframes by using UI design tool. Tool is chosen depending on case. Lo-Fi mockup is a simple gray scale visualization of the UI.

Lo-Fi Prototype

Lo-Fi prototype is made using mockup illustrations as an example. Prototype is coded, has a gray scale UI and it is used for testing purposes. Coding is light-weight, buttons work, still some of the features work more simpler than in final developed version.

Prototype to actual code

Here we should have some kind of convention how we convert the prototypes to actual code for the service. One possible solution would be to use the same framework/library to do the proto as we use in the actual service itself, if it's simple and fast enough.

Wirefly might be another solution. It's a fast framework for building prototypes.

---

Alternatives for design process steps

1st alternative: Lo-Fi mockup and Lo-Fi prototype is made using UI design tool. After piling mockup, buttons are linked to pages and become interactive. UI design tool is used for testing with users.

+ piling mockups is fast

+ mockups can be converted to prototypes easily (linking of elements)

- Design tool UI can distract user

- Design tool might have some usability problems (user experience suffers)

- Usually prototype is not responsive

2nd alternative: Lo-Fi Prototype is made using UI design tool. After piling mockup of library components with using one UI design tool and exporting mockups as .png, other UI design tool is used for importing mockups (.png images), hotspots are made over the buttons and linked to pages. Mockup becomes interactive lo-fi prototype. UI design tool is used for testing with users.

+ Tools that use import and hotspots work more properly (no unexpected bugs)

- Prototype is not responsive

- when making mockups, usually export feature is chargeable feature

- Using more than one UI design tool can have unexpected problems

** 3rd alternative ** Sketches and wireframes are made on paper and the lo-fi prototype is done from the wireframe. This would skip the mockup part of the iteration and might be the right thing to do depending on the task under work.

+ Fast to develop

- Some code has to be done before presenting to the user (unless we present the sketches)

---

MEASURE

UX testing Workflow

After getting Lo-Fi prototype ready, it can be used for testing with users.

Usability tests -> Analytics and metrics

Testing of Prototype and gathering data

• Test several prototypes or one?

• Decide what to measure (accurate feedback)

• Choose the right users (relevant feedback)

• Ask testers to think aloud (constant feedback)

• Observe what tester is doing and write down interesting points

• Interview at the end (more feedback), ask why not what

LEARN

Investigate and understand. Learn from user behavior.