Design Workflow

Project Research

The goal of this step is to figure what the problems you need to solve using your design from asking the people involved such as our customers (businesses owners) and the users, the people who will use your design outcome directly. We don’t guess or assume things.

There are 2 types of research you can do to figure this out:

Quantitative: These are the things we can measure. Examples include analytics that communicate customer behavioral patterns and aggregate stats about customer cohorts.
Qualitative: These are things that tell us about the qualities of a product or experience. Customer interviews, for example, give us insights about how a customer feels, which can provide a lot of insight into what motivates their behavior.

You can create a provisional persona of potential user base on your research and people around you who you think they are able to your object of study.

Job Story & Scenario

After collecting information and figuring out the above expected goals, we continue to conduct Job Stories and come up with Wire-frames.

Writing Job Stories

This is an example of a Job Story.

“When I find a good movie, I want to share that movie for others, so that people could know that I have a good taste of movies.”

After that, you write a scenario base on your job story.

When you write a Job Story, the story need three things: Situation, Motivation and Outcome.

Your final design should be a list of jobs to be done which help the users achieve their goals. Therefore, writing down job stories will help you know exactly what you should put in your final design for your users.

Guerrilla Usability Testing

Base on your job story and the scenario, you will conduct guerrilla usability to test you hypothesis.

Before you ask them to do tasks, you should ask them to imagine they are in your situation and what they need.

Example of questions:

If you are looking for a place where you’d like to travel, how would you do that?
Let’s say you found a place you like, what do you do to check out that place?

After that, you should make statistical tables base on your test.

You’re interested in the place, and you decide to plan on travel there, what would you do next?

Identifying and Prioritizing Pain Points

After you review the user interviews, you write each users’ pain points onto Post-Its. Then you categorize pain points with Affinity Mapping and prioritize them with 2x2 Matrix.

Flowchart

Next step, you draw a flowchart what is a diagram of the sequence of movements or actions of people or things involved in a complex system or activity.

Design Decisions

Sketch wire-frames**

Sketching wire-frames using pencil & paper make easier to iterate your design and get feedback.

Here are some reasons why:

Pencils are inclusive. They’re not just for designers—anyone can use a pencil to express their ideas clearly. The pencil is the great equalizer.
Pencils are low-fi. Quick sketches give no impression of a complete thought, signaling to all that it’s okay to offer feedback.
Pencils aren’t fiddly. Instead of getting lost in software settings or style, you’ll focus on your ideas.
Pencils are fast. You can explore vastly different solutions to the same problem in minutes, and you won’t feel bad throwing your sketches out because you invested so little time.

But you can also choose your right tools for better delivery, such as Balsamiq

UI Design

We believe you already had a good taste of design so this step should mostly based on your creative. But it’s still good to get these principles as we believe grid, visual hierarchy, typography, icons and colors are the things that make useful, attractive user-interfaces.

Getting to know how we humans read with digital screens and interact with computers is also helpful to build engaged users-interfaces.

Principles

https://www.smashingmagazine.com/2018/02/comprehensive-guide-ui-design/

https://medium.com/hh-design/crash-course-ui-design-25d13ff60962

https://polaris.shopify.com/visuals

Use of colors

https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e

https://uxplanet.org/the-most-important-color-in-ui-design-d4f23aefffdf

Typography for the digital screens

https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/

Icons

https://medium.com/@tubikstudio/icons-in-ui-design-great-power-of-small-details-7942df655a04

Delivery

Getting better at documentation and presentation is also required as a designer.

Writing

Many times you will find your self forgetting why you put that icon into that place, why you did choose your colors, etc. Writing down is helpful for your brain since you don’t have to remember so many stuffs, it’s also helpful for others when they want to understand your intends without bugging you through emails while you are on vacation.

Prototyping

Getting to use your design is exciting. Waiting for it to be approved and built up from scratch through many debates with developers is not. So give yourself & them a working prototype. Use marvelapp.

Design System

Consistent is a key to good design. It might be easier for you to keep your design consistent throughout your design files. But it is not the same to developers. Building a design system or a design guideline for your design is healthy for your design and helpful for your fellow developers to keep your design’s consistency on the real production app.

Delivering your design with a design system is a **MUST. **So keep that in mind in day one on designing it.

Read more on how to create a design system based on your design using tools like Sketch or Figma.

https://www.sketchapp.com/docs/libraries/

https://blog.figma.com/components-in-figma-e7e80fcf6fd2

https://blog.figma.com/team-libraries-in-figma-409fa5e20f7

https://blog.figma.com/team-library-1-0-d1427092323a

Guideline

This step will support the development team to understand what system you are doing so that they can follow up faster.

Review, Feedback

Use tools like Marvel, Figma to present your design. Marvel should be used when you want to present the interactive prototypes, while Figma is better to present general designs, just import your final design here to present & collect feedback. Don’t forget to let people know by shooting a link via Slack/Hygger.
Feedback shouldn’t be taken personally.
Feedback should be constructive given with reasons that aligned with listed goals of the product.