Creative UX/UI Process

Design Thinking & User-Centred Design a key to a good design.

... Kickoff Session

Here we start, often with UX tasks such as defining and designing a new feature or identifying pain points in a current process and create ideas for improvement.

01. Discovering (Empathizing)

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

Tools: Asking the right questions, Video Recording, Google Forms, Analytics, Hotjar, Pinterest

From left → 1. Screener, 2. Moodboard collecting inspiration

02. Defining the Goals

Phase of distilling the collected data into personas, empathy diagrams helping to define task flows and pain points in them. We put all the found issues into a priority diagram, which serves the purpose of defining the most important goals.

Tools: post-its, stickers for voting, whiteboard, draw.io, stakeholders

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

03. Ideation

With the problems specified and prioritized, we are ready to brainstorm where every idea counts. Techniques for this stage that we use are HMW (How Might We), Crazy 8, roleplaying, drawing on a whiteboard... dot voting.

Tools: pens, markers, paper, post-its, whiteboard, opened minds

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

04. Prototyping

We start drawing more detailed user flows. Based on them, we have should have a holistic view how to prepare meaningful, clickable Lo-Fi, Mid-Fi, Hi-Fi prototypes without dead ends.

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

From top left → 1. User Flow in draw.io, 2. User Flows in a Lo-Fi Prototype, 3. User Flow in a Hi-Fi Clickable Prototype

05. Testing

Testing (organic or using scenarios) and its results are key to observe real pain points and check our hypothesis. The CanvasFlip platform brings an effective solution. Using a clickable prototype, it provides us with data like drop off rate, average time spent, task completion rate, heatmaps and funnel maps. Then as a comprehensive method to store results of testing we use a heuristic evaluation chart.

Tools: CanvasFlip, Airtable, Zoom or Skype

From top left → 1. Heatmaps, 2. Remote Video Testing, 3. Conversion Funnel, 4. Archive of User Recordings

06. Iterating

A heuristic evaluation chart can provide us with an overview of the severity of issues. This is a big help for creating a priority graph again and identifying what is the most crucial to redesign first.

Tools: Google Docs, draw.io

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

07. Delivery

Eventually, the validated designs are ready to be exported into a production as assets (images, vectors), and code snippets (HTML/CSS/design tokens). Preference is to design strategically by following a methodology like atomic design, component-based architecture to build reusable parts.

Tools: InVision Inspect, zeroheight to document design systems, Abstract (git for designers to keep an eye on changes and deliverables from multiple designers in a team)

From top left → 1. InVision Inspect Tool, 2. Design Commit in Abstract, 3. Samples of Design Systems (in Sketch and in Bootstrap 4)

And again

As one part of a project is online and facing real users we can collect a new batch of data and so start a new task for UX team based on them. The circle closes and starts again.

*Some visual content has been tweaked due to NDA.