Design Process


"Good designers are praised for their technique, great designers for their impact."

Every design process is unique to the client i'm working with.  Being adaptive and fast on my feet allows me to gauge the client and know when I can start off by sketching out concepts or start designing straight into browser. The process may vary but the service will always be up to a certain caliber. The structure of breaking down problems and finding a solution is gratifying and nothing beats the feeling of finding the perfect solution. 


A design process provides a framework for solving problems in a broken down structured systematic list.  One stage of design can have many components, states, hidden elements, unseen feedback, user scenarios, transitions and visual cues that are difficult to understand or see with a single mockup.  The design process breaks down these complicated stages in an easy to understand way. 

This process can be listed into 6 stages.  Each stage may have different outcomes depending on time and other constraints.  Every stage works like a well oiled machine where the oil is feedback and approval from the client.  To keep things moving and on target communication before moving to the next stage is needed. Below you can view the structured layout I typically use when approaching a design project. 


Typical Design Process


1. User Needs

  • Understanding client and brand

  • Communicate with the client about the users needs

  • Knowing the limits of client's resources

  • Creating a draft with milestones of design project that meet deadlines, resource limit and budget

2. Brainstorming & Exploration

  • Research the users' needs

  • Research the competition

  • Form ideas from researched information

  • Sketch out rough ideas

3. UX Design

  • Create small organized goals that will reach main goal

  • Research established Ux patterns that meet these small goals

  • Create a user flow and establish fastest coherent routes for the user

  • Establish the status of each flow and develop a full wireframe

4. UI Design

  • Establish visual design patterns that meet goals

  • Create a flush Ui aesthetic that can carry over to all elements

  • Establish guidelines to help engineers understand the visual properties

  • Transform wireframes into high fidelity mockup

5. Animation & Prototyping

  • Determine the 3 states of each action ( start, processing & end )

  • Build interactive prototypes for the client and engineers to demonstrate motion, feedback, state and context

  • Animate all visuals that require it

6. Testing

  • Finalize all assets and ensure visuals are adaptable at various sizes

  • Collaborate with engineers to ensure structural integrity with all resources and assets