My Design Process
Design is not just what it looks like and feels like. Design is how it works.
Overview
Each client is unique so I employ an iterative and adaptable design process that fits within my client’s methodology whether it be lean, agile or scrum. Each process varies depending on the service required which includes branding, web/mobile app design and user experience design. Good design takes time so depending on the requirements, I can either start off by sketching ideas on a notebook or designing straight in the browser.
Having a design process provides me with a framework on how to best tackle a problem by breaking it down into a series of interconnected systems. A single screen can consist of many components, states, hidden elements, unseen feedback, user cases and scenarios, transitions and visual cues that are difficult to grasp in a single mockup, a design process provides me with an holistic overview.
My process can be broken down into key stages. There are many factors such as time constraints, pivoting and limited resources that can affect the outcome of each stage. Each of these stages require feedback and approval from the client before moving on to the next one. Below you can find an overview of how I typically approach a design project.
Process
User Needs
1.
Survey the client to uncover the business goals and history of the brand.
2.
3.
Communicate with the client about the needs of the user.
Liaise with the engineers to understand the technical resources available.
4.
Draft a scope to determine milestones that align with the goals and fit within the budget, deadline and technical resources.
Preliminary Brainstorming and Exploration
1.
2.
3.
4.
Explore the needs and wants of the user.
Research competitors in the market.
Gather resources to carry out the project.
Sketch out rough ideas.
UI/UX Design
1.
2.
Break down the epic into smaller, actionable goals.
Research established UX patterns for achieving a similar goal.
3.
Uncover edge cases by building personality and intent around each type of user.
4.
Create user flows to determine how to complete each goal in the least amount of steps.
5.
Break down the user flows into a system of interconnected components.
6.
7.
Develops wireframes based on the components.
Determine various states for each wireframe e.g. empty filled, logged in, error etc.
Visual Design
1.
2.
3.
Explore visual design patterns.
Research framework and/or guidelines if necessary.
Experiment with different styles, colors and typography most suited to the needs.
4.
5.
6.
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.
Prototyping & Animation
1.
Determine the start, processing and end state for each action.
2.
Build interactive prototypes for the client and engineers to demonstrate motion, feedback, state and context.
3.
Animate visual components such as logos for intro screens and pre-loaders.
Testing
1.
2.
Finalize assets for handover to development.
Ensure visuals are accessible, on-brand and within cultural boundaries.
3.
Experiment with different styles, colors and typography most suited to the needs.
4.
5.
Determine whether the visuals are adaptable at various sizes.
Collaborate with developers to determine any technical constraints related to the visuals.