Design Process

"Let's use design to solve a problem, one stage at a time."

I like to take an iterative and adaptable design approach that fits within my client’s methodology whether it be lean or agile. I can either start off by sketching ideas on a notebook or designing right from a sketch software. Good design takes time so it always depends on the requirements.

I realize early that having a design process helps me to build a framework for building the best possible way to tackle a problem. One single screen can consist of many components, scenarios, unseen feedback, user cases, transitions and hidden elements. A design process provides me with a holistic overview of visual indications that are difficult to comprehend in a single mockup.

I can break down my process into 6 design stages. Due to factors that can affect each stage's outcome, such as limited resources and time constraints, feedback and approval from the client before moving on to the next one is required. Below is how I would approach each design project.

Standard Design Process

UX Design

Break down the major into smaller, actionable goals
Research established UX patterns for achieving a similar goal
Create user flows to determine how to complete each goal in the least amount of steps
Develops wireframes based on the components
Determine various states for each wireframe e.g. logged in, error, etc

Graphic Design

Explore visual design patterns
Research framework and/or style guidelines

if necessary
Experiment with different styles, colors, and typography most suited to the needs
Transform the wireframes into high fidelity mockups
Generate a consistent UI kit for reusable components
Generate guidelines to help engineers understand visual properties such as size, style, positioning

and motion

Exploring and Brainstorming

Explore the needs and wants of the user
Research competitors in the market
Gather resources to carry out the project
Sketch out rough ideas

User Needs

Survey the client to uncover the business goals and history of the brand
Communicate with the client about the needs of the user
Collaborate with the engineers to understand the technical resources available
Draft a scope to determine milestones that align with the goals and fit within the budget, deadline and technical resources

Animate and Prototype

Determine the start, processing and end state for each action
Build interactive prototypes for the client and engineers to demonstrate motion, feedback, state and context
Animate visual components such as logos for intro screens and pre-loaders

Testing

Finalize assets for handover to engineers
Ensure visuals are accessible, on-brand and

within cultural boundaries
Determine whether the visuals are adaptable at

various sizes
Collaborate with engineers to determine any

technical constraints related to the visuals