Design Process

The goal of my process is to first to understand the problem and only then go after the right solution.

Typically my process involves creating artifacts ( mind maps/state diagrams/low and high fidelity mockups etc.) that help me understand the pain points better and acts as a tool of communicating this common understanding, which is key to getting to the best solution.


Design for me ultimately has to solve a real problem and drive a positive real world outcome.

Understanding context - “ What are we trying to solve and for whom “ ?

Methods : user interview - personas - competitive analysis - other secondary research to understand the domain.
Activities :

  • Mapping out current state

  • Get data available around the problem

  • Mind Maps to understand relationships and overall human context
    into which this problem fits in

  • Discover peculiar persona behavior patterns

Playback - “ This is what I understand about the problem, am I correct “ ?

Methods : Sketching on Paper / Fig-Jam / whiteboarding / Workshopping
Activities :

  • Declare and Validate assumptions based on the preliminary research

  • Allows me to see gaps and missing pieces in my understanding
    as I sketch

  • Document, Validate and Share the context and understanding I gathered

  • Narrow in on the problem to be solved

Explore - “ These are some ways we could approach solving “ ?

Methods : Low fidelity sketching and prototyping FigJam / Balsamiq
Activities :

  • Present and collaborate around possible solutions given the context

  • Low fidelity sketching feels ideal as -

    • it feels and looks inexpensive and allows more collaboration

    • it’s quick to execute and iterate

    • keeps the conversation about things that matter
      in the beginning stages

    • Can be used for preliminary user testing

High Fidelity Mockups and design - “ The solution could look like this “ ?

Methods : High Fidelity mockup and prototyping Figma
Activities :

  • Present and collaborate the options in final state of the UI

  • High fidelity prototypes provide the almost real world experience
    to the end user ideal for user testing

  • Creating the mockups using a component driven design
    (color palette ,type, reusable components) system
    which is easy to make changes to.

User Testing - “ The should work, let’s see what the users do “ ?

Methods : User testing using Figma prototypes or Figma + Maze
Activities :

  • Setting up real world scenarios based to testing goals,
    so that we can observe the user react to the solution

iteration

iteration

iteration

TLDR;
Outcome oriented - non linear - collaborative - iterative - lots of fun !

Process Deliverables / Artifacts (samples)

System Diagrams

System diagram shown below documents interactions and relationships between various apps in a suite of apps used in the warehouse. It provides an overall context of what app’s role is in the system, detailing out the interactions between various apps to make the system work.

Mind Maps

Mind Maps shown here are used to capture unstructured information in case there is already a process and system in place

Current Vs Future

Example shows how the current state is a sequential linear flow vs the future one that is more central - which provides a unified mechanism to view and use the system to the user rather than an isolated view.

Current State

Future State

Personas and Journey Maps

Personas help with discovering behavior patterns and Journey maps compile a set of user goals and actions into a timeline to get a better understanding of user needs.

Figjam Sketches

Here I have used sketching as a means to explore layout options , draw out possible user flows to identify gaps in understanding the problem , explore visual hierarchy at a broad level.

Ideating and Competitor Analysis

Images below show ideation around docking scheduler for trucks at a warehouse . I sketch out multiple variations of how a problems could be solved, also considering competitors and what already exists in the market that solves a similar problem.

Low to High fidelity translation

Samples of how paper sketches Balsamiq wireframes are translated to a final high fidelity UI.

User Testing using Maze

Real world scenarios were executed to test the usability of the solutions built. Using a tool like maze gave a deeper insight into user behavior also enabled us to run remote user testing when needed.