Our design process

We like to follow a good design process: Briefing or Retrospect, Research, Design, Review, and Iteration.

Illustration
  1. Briefing — Understand the problem.
  2. Research — Refine requirements and find solutions.
  3. Design — Wireframes, mockups and live coding.
  4. Review — Submit to the product owner for review.
  5. Iteration — Improve on our work.

Step 1: Briefing

Briefing
Understand   ·   Gather information   ·   Ask and absorb

Briefing is the most important part of the design process. We understand the problem and gather information. Failing to ask and absorb the necessary details and information might result to misguided design product or project; thus considered the most important phase.

Step 2: Research

Research
Refine requirements   ·   Find solutions

Following the information gathered, we dive further into researching the proper approach in solving the problem. In this phase, we further define the requirements until we land on the proper strategy for the product or project.

Step 3: Design

We dig into designing the strategy we have come up in the Research step. There are 4 possible ways to approach this, and we may do one, two, or all of them.

Sketching or wireframing

Low-fidelity mocks of the strategy. These are usually visualized in outlines, mimicking the skeleton or blueprint of the design. Sketching or wireframing are encouraged on unsure strategies as this avoids designing detailed mocks that might be debunked by the product owner.

High-fidelity mockups

We design in detail the strategy we envisioned. We visualize the color palettes, typography, accents and the overall visual direction.

Prototyping

We come up with prototypes of the product to see how our designs look and feel. This could come in form of GIFs, product interaction via Invision or Figma, and sometimes directly in the platform of the product (browser or mobile).

Live coding

We also sometimes dive into code implementation without sketching or designing anything. We love to fearlessly dig into code whenever possible, and iterate live in the applications we build.

Step 4: Review

Review
Submit for review   ·   Gather feedback

After producing the materials from the Design step, we submit them to the product owner for review. In this phase, we gather feedback if the strategy we created is the right one.

We usually submit the materials via Figma or Invision as both products offer seamless communication and feedback features.

Step 5: Iteration

Iterate
Improve the product   ·   Retrospect   ·   Repeat

We go back to the first phase, Briefing (step 1), to gather new information based on the feedback (step 4) and the next steps to improve the product.

Retrospect happens after design iteration (step 5). Same principle when gathering requirements, we gather information on how was the previous design iteration went through: what went well and what should be improved.