UX/UI • Design Language System Dev

Design Thinking and User-Centred Design are my daily tools

00. Kickoff Session

Here we start, usually with UX tasks such defining and designing a new feature or identify pain points in a current app and generate ideas for improvement.

01. Discovering (Empathizing)

By applying research methods - qualitative in the form of user interviews, surveys, observations, card sorting... and quantitative: using macro data from available reports and statistics from Google Analytics, Hotjar.

Tools: Video Recording, Google Forms, Docs, Analytics, Pinterest for moodboards

From left → 1. Screener, 2. Moodboard

02. Defining the Goals

Time for distilling the collected data into personas, then empathy diagrams helping us to uncover task flows and pain points within them. Not yet. Put all the found problems into a priority diagram. This serves the purpose of defining the most important goals.

Tools: post-its, color stickers for voting, whiteboard, draw.io, Google Docs

From top left → 1. Me working on Empathy Diagram, 2. Task Flow showing Pain Points, 3. Priority Diagram, 4. Persona

03. Ideation

Now, that we have the problems specified, it is time to brainstorm (there is not a bad idea). Good techniques for this phase are for instance HMW (How Might We), Crazy 8, Role playing, drawing on whiteboard... dot voting.

Tools: pencil and paper, post-its, whiteboard

From top left → 1. Crazy Eight, 2. Role Playing, 3. HMW with votes, 4. Flow Sketching

04. Prototyping

Start drawing user flows and from these, you should arrive at clear plan of how to prepare functional, clickable Lo-Fi, Mid-Fi, Hi-Fi prototypes without dead ends.

Tools: pencil, paper, draw.io or lucidcharts, Sketch App, InVision, Webflow

From top left → 1. User Flow defining processes in draw.io, 2. User Flows in Lo-Fi site map, 3. User Flow in Hi-Fi Screen Layouts

05. Testing

This part is a real source of truth. Testing (organic or by using use case scenarios) and its results define pain points and validate the hypothesis. A very valuable asset to this process is CanvasFlip. On a prototype, it provides us with testing of user flows and so shows drop off rate, average time spent, task completion rate, and heatmaps. The results can be transformed into a heuristic evaluation chart using tool Airtable.

Tools: Canvas Flip, Airtable, Hangout or Skype for remote testing

From top left → User Testing via CanvasFlip 1. showing Heat Maps, 2. testing prototype on Skype 3. showing Conversion Funnel, 4. showing Records of each test

06. Iterating

From the heuristic evaluation chart, it should be clear what issue has what severity. Based on this data, it is a good practice to make a priority graph again and to identify where to begin with the iteration.

Tools: Google Docs, draw.io

From left → 1. Heuristic Evaluation Chart in Airtable 2. Results of User Testing in a Report

07. Delivery

Eventually, the validated designs can be exported to a production - assets, code snippets and style guides (bootstrap / storybook). My preference is to think about design strategically and to follow a methodology as atomic design - a foundation for reusability of components across different platforms and devices. 

Tools: InVision Inspect, documentation and living style guide - DLS and Abstract (git for designers to keep an eye on changes and deliverables from multiple designers in a team - many branches, only one master)

From top left → 1. InVision Inspect Tool, 2. Design Commit in Abstract, 3. Samples of Design Style Guide (in Sketch and in code)

And again

As one part of the project is online and facing real users we can collect a lot of new data and start a new task for UX team based on them. The circle is closed.

*Some visual content has been tweaked due to NDA.