Moorepay logo Cutting edge payroll software
  • Powerful and easy to use
  • HMRC & RTI compliant
  • Used by payroll pros
Pipedrive logo The CRM platform to grow your business
  • Great for entrepreneurs
  • Powerful data analytics
  • Manage sales and data
Wix logo Powerful web builder and advanced business tools
  • Great for startups
  • Powerful web page builder
  • E-commerce available
Planable logo Supercharged content planning
  • Great for marketing
  • Better than lists or sheets
  • Manage social media
Webador logo Create a new website in 10 minutes. Easy.
  • Launch your website fast
  • Powerful data intuitive
  • No coding skills needed


How to plan the UX design process: the Three Ds methodology

Updated on 9 October 2015

There are many possible renditions of the UX (User Experience) creative process, designed to help guide a project from conception to completion, but I use the 3D process.

 
Quick, easy, no commitment!

The phases within this methodology are ‘Discover’, ‘Define’ and ‘Deliver’.  Each of these phases define the steps needed to implement to a solution to a business or user problem, taking it from concept to production. The lines between these are blurred, but it provides enough of a framework so you can bring it to your own work.

user-experience-process

Moorepay logo Cutting edge payroll software
  • Powerful and easy to use
  • HMRC & RTI compliant
  • Used by payroll pros
Pipedrive logo The CRM platform to grow your business
  • Great for entrepreneurs
  • Powerful data analytics
  • Manage sales and data
Wix logo Powerful web builder and advanced business tools
  • Great for startups
  • Powerful web page builder
  • E-commerce available
Planable logo Supercharged content planning
  • Great for marketing
  • Better than lists or sheets
  • Manage social media
Webador logo Create a new website in 10 minutes. Easy.
  • Launch your website fast
  • Powerful data intuitive
  • No coding skills needed

1. Discover

Things normally kick off with an in person workshop. The ground work – speaking to the stakeholders & users to understand the context, keeping their environment and emotions in mind. If this is done thoroughly, It’s almost certain that you’ll discover a need your competitors aren’t fulfilling or overlooked. I always aim to design solutions that speak directly to those needs and wants.

Outputs:

Whiteboard with Post-it notes (physical or digital);
Rough paper sketches, Stats & Research, Interview Script & customer interview recordings. Customer user journeys.

Tools:

Candor (great for idea generation)
Mural.ly (digital whiteboards) more recently Boards (by inVision),
Post-it notes,
Sharpies and paper

2. Define

This is where the blurry picture starts getting focus, it’s taken what you’ve found in Discovery and fleshing it out, iterating it and giving it more fidelity. Early user testing is always a good idea – it really helps keep things focussed and ensures you’re designing and building the right solution.

I start off with whiteboarding some concepts. Once I have an idea, I’ll start by sketching out a flow and possibly create a quick prototype using InVision, My output is still rather rough to keep things lean. It’s about the concept, the solution, not what it looks like..yet.

After a round of feedback from users, stakeholders and developers, I’ll create annotated wireframes in Sketch to give it that extra layer of fidelity.

In parallel I’d kick off the Visual Design process, by putting together a moodboard, using Niice. It’s important to get alignment within the team and business what the visual direction might be.  I find moodboards to be particularly useful, as pointing at a picture is much easier than trying to verbalise how something should look.

Output:

Whiteboarding, iterated sketches, prototypes, flows, wire frames, moodboards.

Tools:

3. Delivery

This is the fun bit! You’ve got your wires and now we breathe life into them. Taking guidance from the moodboard I identify stylistic treatments that would work in the given project and start designing. I prioritise the key screen(s) and get first round of feedback from my team/stakeholder/users/developers.

Often a static image – however beautiful – still doesn’t communicate exactly how UI elements should move or behave when interacted with. That’s when animation becomes cardinal. Fake it till you make it – this will help set expectations on how the final product may work when its complete. This also paints a fuller picture for the developers on what actually needs to be built and helps with their estimations and planning.

It’s a good idea to document visual treatments and design patterns in a central place, which could easily be shared by designers and developers alike – I’ve used GitHub in my previous role.

Output:

Visually designed key screens, animations showing interaction choreography,

Tools:

  • Screenflow
  • Edge animate
  • Sketch/Illustrator/Photoshop

Reviewed by , Managing Director

Compare prices ⓘ