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,
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
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
With the problems specified and prioritized, we are ready to brainstorm
idea counts. Techniques for this stage that we use are HMW (How
Might We), Crazy 8, roleplaying,
drawing on a whiteboard... dot
Tools: pens, markers, paper, post-its, whiteboard, opened minds
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
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
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
A heuristic evaluation chart can provide us with an overview of the severity
of issues. This is a big help
a priority graph again and identifying what is the most crucial to
Tools: Google Docs, draw.io
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)
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.