Design

Our design philosophy elevates the craft to an art form, focusing on creating experiences that are as intuitive as they are transformative. Here, design is not just seen but felt, marrying functionality with form in a symphony of creativity.

Our design process

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

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 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.

Briefing Understand · Gather information · Ask and absorb

Step 2: Research

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.

Research Refine requirements · Find solutions

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

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.

Review Submit for review · Gather feedback

Step 5: Iteration

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.

Iterate Improve the product · Retrospect · Repeat
Next: Culture Playbook

Connect.

Mashup Garage, a premier software development team, specialises in crafting exceptional products for startups and enterprises. With expertise in React, Elixir/Phoenix, and Ruby on Rails, we deliver solutions that meet your unique needs. Our mission is to bring value backed by decades of technical expertise and global co-founding experience.

What do you need help with?

Build a project

Build a team

Consult

Speak to someone

Expect a guaranteed response from us in 1-2 business days.

United Kingdom

London

Islington, London

+44 738 777 3405

LDN

Philippines

Manila

3F Topy IV Building, 3 Economia Road, Bagumbayan, Quezon City, 1110

+63 917 3084089

MNL