See how we help you build better products with our Design Process
Before we help you dive into developing a new product from scratch (MVP), adding new features to an existing one, or redesigning an existing website or application, we've got to understand, design, and sometimes prototype it first.
Our goal is to make sure we're not just designing something that looks good, but something that truly solves real problems for your users.
Our goal is to make sure we're not just designing something that looks good, but something that truly solves real problems for your users.
Design Process Overview:
Here's a breakdown of our process, so you know exactly what's happening:
Design Discovery Kickoff
The first thing we do in the design discovery process is to start a thread conversation with our design team, client and your key stakeholders.
Clients arrive at different stages of their project and product life cycle. Our initial discussion helps us understand what you've done, your challenges, and what to focus on next.
We aim to keep things simple and avoid lengthy online meetings, but if necessary, no worries. The key is to never start designing without proper context.
UX Research
Next, we dive into extensive user experience research, using AI and initial information to enhance our work and help us understand your target audience and the market dynamics of your product.
Here’s what our research typically involves:
- Identifying key issues that people face in your market.
- Getting awareness of how these issues impact people.
- Reviewing existing research related to these issues.
- Tracking products that already address these issues.
- Analyzing popular apps' strengths and weaknesses in your market.
- Building a profile for the ideal user persona facing these challenges.
- Conducting interviews to learn how personas deal with these issues.
- Gathering interview insights to identify key personas challenges.
- Ranking challenges by frequency and importance.
- Summing it all up in a Problem Statement.
Problem Statement
Our understanding of problem statement meaning in UI/UX design is a clear briefing that clearly outlines the major user issues identified through UX research.
It’s a compilation of user's needs, the obstacles they face, and the context in which they encounter these issues.
Our design goal is to develop a budgeting and expense tracking app tailored for freelancers like [Persona], who struggle with variable incomes and inefficient expense management.
The app will offer a simple, engaging interface with features for personalized budgeting, automatic expense categorization, and integrated financial, education, aiming to facilitate informed financial decisions and help users achieve their long-term financial goals.
It seems simple, but it requires a lot of effort and plays a big role in the success of the product.
How Might We (HMW)
After the Problem Statement set, we develop some How Might We (HMW) questions to brainstorm creative solutions to the problems identified. They turn challenges into chances for us to innovate in design, which helps us create user stories.
02 How Might We (HMW) questions that can guide the design and development process of the budgeting and expense tracking app:
HMW Design for Variable Income: "How might we design the app's budgeting features to adapt flexibly to the variable income patterns of freelancers like [Persona], ensuring accurate budget planning despite income fluctuations?
HMW Simplify Expense Tracking: "How might we simplify the expense tracking process in the app to make it more intuitive and less time-consuming for users, ensuring they can effortlessly log and categorize their expenses?"
User Stories
User stories in UI/UX design are short, simple descriptions of a feature or function from the perspective of the user, focusing on what they want to achieve and why. It basically highlights the essential features and experiences the app should have to effectively address the needs and preferences of its target users.
User Story for Variable Income Design: "As a freelancer with variable income, I want the app to automatically adjust my monthly budget based on my earnings, so I can have a realistic budget each month without manually recalculating it."
User Story for Simplifying Expense Tracking:"As a busy professional, I need an efficient way to track my expenses, so the app should automatically categorize my expenditures and present them in an easy-to-understand format to save me time and effort."
Feature Definition
Based on the user stories and needs identified, we map some ideas of features and functionalities that could be included in the product:
Income Fluctuation Analyzer: A feature that tracks the user's income over time and automatically adjusts the monthly budget based on the average income, peaks, and lows. This tool would help freelancers like [Persona] manage their budget more effectively despite income variability.
Automated Expense Tracking and Categorization: The app could use AI to automatically categorize expenses by scanning bank statements or syncing with the user’s bank account. This feature would reduce the manual effort required in expense tracking and provide an accurate, real-time view of spending.
We use ChatGPT to thoroughly explore feature ideas in detail, focusing on their Concept, Functionality, and Benefits. This gives us clear guidelines to effectively turn those ideas into actual features.
Feature Specification
This is the stage where we turn selected feature ideas into features ready to be designed. Some more research, and analysis with visual direction should be applied here for detailed planning and to refine ideas into actionable and well-defined features.
Bank Account and Credit Card Integration:
- Feature: Securely link the user’s bank accounts and credit cards to the app.
- Function: Automatically import transactions in real-time.
- User Benefit: Eliminates manual entry of expenses, saving time and reducing errors.
Smart Categorization Engine:
- Feature: Utilize AI and machine learning algorithms to categorize transactions.
- Function: Analyze spending patterns to automatically assign expenses to the appropriate categories like groceries, utilities, entertainment, etc.
- User Benefit: Simplifies expense tracking and provides a clearer understanding of spending habits.
User Flow
Now that we have a detailed document outlining the features and user needs, backed by thorough research on the market, competitors, and personas, we'll focus on a key aspect of UI/UX design: the user flow.
In our understanding: User flow is how we describe the route a user takes within a product, starting from where they first enter to their final interaction.
This concept aids us in grasping and crafting the user's experience and journey through the app or website.
User Onboarding:
1. User downloads and opens the app.
2. Introduction to the app’s features with a quick tutorial.
3. Prompt to create an account or log in.
Initial Setup:
1. User is guided to link bank accounts and credit cards for automatic transaction import.
2. Option to set up initial budget categories or use default ones.
Home Dashboard:
1. After setup, the user lands on a dashboard showing an overview of their current financial status, including recent transactions, current budget, and any alerts or notifications.
Transaction Review:
1. The app automatically imports new transactions.
2. User receives a notification to review and confirm the auto-categorized transactions.
3. Option for the user to manually re-categorize if necessary.
Design System
Before designing user flow screens, we prefer working with an existing design system or creating a new, simple one. This method ensures our designs are both consistent and scalable from the beginning.
It also help us avoid potential design issues in the future, - we call them Design Debits, allowing us to be more productive by focusing on what truly matters.
User Interface Design
Once we have our design system ready, we start working on the screens and flows, focusing on the key parts of user stories. This is when the interface really begins to come to life.
Normally, the process involves creating low-fidelity and high-fidelity wireframes. However, we don't strictly stick to this. If we have a design system with enough elements and design patterns, we directly aim for high-fidelity drafts. In cases where there are many options to explore, we start with low-fidelity wireframes and then refine them after getting approval from stakeholders.
We primarily use Figma for our design work and are open to using any tool you're comfortable with.
For communication, we like using Slack, comments in Figma, visual tools like FigJam and Miro, asynchronous videos through Loom, documentation pages in Confluence or Notion, or project management tools like Jira, Linear, Trello, etc.
Working with different software is not a problem for us. The only thing we try to avoid is online meetings that last longer than 15-25 minutes.
Interactive Prototype
After we finish the high-fidelity designs, we upload them to Figma to create a clickable prototype. This prototype is then shared with the development team and stakeholders. It's useful for estimating development time and needs.
There are times when we skip creating interactive prototypes if they seem unnecessary, especially when the user experience is straightforward. In such cases, having just the high-fidelity design is enough to move forward.
Design Handoff for Developers
Once we have the interactive prototype and the high-fidelity designs are complete, we create a design handoff file in Figma. This file contains the final design and its detailed specifications for the developers to implement.
We include comprehensive information about design elements such as components, colors, fonts, spacing, states, user flow, interactions and variations.
We aim to give developers all the details they need to accurately turn the design into a functional product.
QA Review
The aim here is to make sure the final product meets our quality standards and offers a great user experience.
We compare the implementation with the original design to make sure it's consistent. We also check that the user interface functions correctly across various devices and browsers, and we look for any usability problems.
The aim here is to make sure the final product meets our quality standards and offers a great user experience.
Iteration Process
We believe this stage is the most important, as it involves a cyclical method of designing, testing, evaluating, and refining a product or feature.
Our main goal is to set up methods for collecting user feedback on everything we've built, so we can learn from it and make continuous improvements. We keep refining until the design effectively meets user needs and business objectives.
This process ensures a user-centered approach, constantly improving the product based on real user interactions and feedback. It can include any aspect of our process.
While the initial steps of a project might seem heavy, the real magic happens during the iteration process.
Successful products need time to be refined and iterated. Our business operates on a UI/UX design subscription model, where you can pay monthly and benefit from these iterative cycles. The longer you stay with us, the more iterations your product will go through, always aiming for great strides.