Why it is so important to start with design and how we build app prototypes.
Our prototype process, also called UX & UI design process, is the starting point of the realisation of your app and everything you want it to do. The process takes a few weeks. In those weeks, we collaborate, discover, research, explore, problem-solve, and design a collection of deliverables leading to the final one — a clickable and shareable app prototype, that will allow you to navigate through the fully realized concept of your app.
Our prototype process enables the whole team to get up close and personal with the app concept to fill potential gaps and oversights, discover and solve potential issues, create a positive digital experience that is functionally sound and visually appealing, and very importantly, design for development. The prototype is a great deliverable often shared with investors, stakeholders, and people in the app’s target audience. This allows us to gain user feedback before the development process starts, where changes can be complex and costly.
Depending on the project's complexity, we sometimes combine the prototype process with a Solution Design (where we research and recommend the correct technologies, the architectural design and the relationships between the entities) and/ or a Proof of Concept (POC). A POC is particularly useful if we're trying to build a very innovative technology or testing a third party solution, for example whether generative AI can do what the app requires. This allows us to confirm feasibility and costing before we move too far into the development process.
Below are the stages and deliverables of our UX & UI process. Most stages and deliverables listed are completed in every prototype project, but sometimes we skip up to 4 (of the 14) because of project and client requirements. A common example is if a client is a small business, there is usually no value in redesigning their core branding if the client and their customers are happy with the existing one — in these cases, the client and team have been happy with skipping, for example, the moodboard and logo design deliverables. We clarify which deliverables are included in our prototype proposal. Here's a quick view of all 14 stages and deliverables.
The kick-off is where the team is introduced, the project is briefed, and expectations are communicated. Sometimes, there’s a 2nd round — brainstorming — where we discuss ideas about the concept, details, and execution of the app.
In the critical user stories stage, we write out and describe every feature of the app and all key details in terms of what the different types of app users (including the ones that are often forgotten, such as admin users). The user flows stage sees the individual features, described in the user stories, connected in a visual diagram.
Personas are the visualizsed representations of the app’s ideal users.
Moodboards explore themes and styles for the app — the first step in the design process where the app concept begins to materialise visually. Inspiration boards showcase similar and leading apps, good to take cues from for the different facets of the app's user experience. When needed, we supercharge the inspiration board, adding detail and slightly shifting the angle to focus on direct and indirect competitors.
The moodboard or existing partial branding solidifies into a simple style guide including fonts, colours, sometimes iconography, and sometimes more. If the client doesn’t have a logo, we can design one.
Now onto wireframing — the longest part of the design process. With everything we’ve learnt and created, we design each screen and modal for the app. We do it in parts. Medium-fidelity wireframes are grayscale wireframes that focus on visualising user flows and clarifying how the app will achieve the intended functionality. UI options sees us apply the basic style guide to key screens of the medium-fieldity wireframes. Finally, in the high-fidelity wireframes stage, we apply the client’s selected UI option to the complete set of medium-fidelity wireframes.
To close the UX & UI design process, we prototype the high-fidelity wireframes — realising the full app concept. With a link, you’ll be able to open your prototype on your phone and tap through it.
.webp)
.svg){kind=small}