My UX Design Process

I am passionate about user-centered design which begins with empathy and research. I am a fan of the Stanford D.School's design thinking methodology for creative problem solving.
I believe a successful user experience lives on the intersection between user needs and business goals.

My design process is data-driven. It changes from one project to the other and adapts to the requirements of each project at hand and its goals. Generally, this process can be broken down into five stages following the Stanford design thinking approach.

Below is a detailed complete roadmap: visualizing the process and timeline, and listing the tasks and tools that I use in each stage of the process.

uxbusiness.jpg
UX-Process2.png
 
 
 

01. Research

Meet the user.

DEFINE USER CHALLENGES
It is important to know who the user is before defining their pain points and challenges. In order to keep the user at the centre of my designs I rely on different tools depending on the project:

  • Surveys
  • Focus groups
  • In-depth Interviews

DEFINE METRICS AND FORM HYPOTHESIS / GOALS
To design desirable experiences is important but it is also crucial for the business to make sure these experiences are viable and can increase engagement rate or generate revenue.

  • Market scan
  • Define competitors / Lean business canvas model
  • Setting goals

OUTCOME: Detailed report defining the users and the goals to be achieved.

02. Empathize

Be the users.

MAPPING USER BEHAVIOUR
Empathy is the core of user-centered design, it completes the research step. It is arguably the most critical step to get right. Once the user challenges are defined, this step helps knowing the “why”:

  • Empathy maps
  • User personas
  • User scenarios / Current-state journey maps

FINDING UX SOLUTIONS
While keeping the user and their challenges in mind, I get into a problem solving mode at this stage through ideation and creation. I use various tools for that:

  • Brainstorming (individually or in a group).
  • Mind mapping / Analysis
  • Sketching / Future-state journey maps
  • UX user flow diagrams

OUTCOME: Empathy / current-state UX journey maps and proposed future-state UX user flows.

03. Create

Make it simple and accessible.

PROTOTYPING
At this stage, I turn my ideas into prototypes. These prototypes help me validate my design decisions through usability testing at each step. The fidelity of the developed prototype depends on the complexity of the project and timeline. To complete this step I use the below tools:

  • Paper prototyping
  • UI wireframing
  • Low fidelity UI mockups (Adobe Products: i.e. Photoshop, Illustrator, etc.)

INFORMATION ARCHITECTURE

  • Future-state UX user flow
  • Accessibility guidelines
  • Icons libraries / UI look and feel
  • Interactive prototypes (Adobe XD, Sketch, InVision, Justinmind)

OUTCOME: Low / High fidelity prototypes and UI design library draft / mood board.

04. Test

Data don’t lie.

USABILITY TESTING
At this stage, and before spending resources on development, I go back to the target users to run all my design decisions by selected participants and collect feedback. I achieve that using:

  • Adobe experience cloud
  • A/B Testing (Optimizely, Adobe Target)
  • Focus groups/ Ethnographic studies (usertesting.com)

USAGE TRACKING & REVIEW METRICS
Unlike the above qualitative mediums I sometimes need to track the performance of my design quantitatively:

  • HubSpot

OUTCOME: Test reports and refinement recommendations for the next iteration.

05. Develop

Stick to the design.

HIGH FIDELITY UX / UI DESIGN
The data from the previous stage display the successes and downfalls of my design. I update the prototype into a refined iteration following the resulted recommendations:

  • Complete system design (Adobe Products: i.e. Photoshop, Illustrator, etc., Unity)
  • High fidelity prototype (Adobe XD, Sketch, InVision, Justinmind, Unity)

HTML, CSS, JAVASCRIPT, C# FRONT END DEVELOPMENT Knowing front-end code always helps tie the development process between myself or the design team and the developers. It helps make the collaboration more time and quality efficient.

  • Front end code (HTML, CSS, JavaScript)
  • Interactive virtual environment (C# within Unity)

OUTCOME: Interactive prototypes, UX / UI packages and system design libraries ready to be implemented or inserted in the market.