Design System: How to Maintain E-commerce Brand Identity While Rapidly Building an M-commerce App?
A design system allows you to quickly create a mobile app UI tailored to your brand, especially when combined with modern technologies like Flutter in the Rappid Workflow.
As a result, the UX/UI design phase itself is completed about 53% faster, and building an m-commerce app takes up to around 45% less time. Find out how this is possible.
The data provided in this article is based on Holdapp’s internal benchmarks. Actual timelines depend on the scope and size of each specific project.
Key takeaways
- According to our internal benchmarks, classic UI design for an m-commerce app takes around 36 man-days (MD). Some brands opt for no-code/low-code tools to speed up this process; however, these designs end up with a more generic look.
- A design system offers ready-to-use, defined UI components built specifically for recurring e-commerce user paths. This solution allows for full customization of key branding elements, including colors, typography, product graphics, and product tile layouts.
- In the Rappid Workflow approach (powered by Flutter technology), AI aligns pre-written code directly with the customized design in Figma.
- Utilizing a pre-built component library cuts the interface design phase from 36 down to approximately 17 man-days, depending on the project scope (with initial visual branding applied in as little as 2 MD).
- Optimizing the design phase results in a significant reduction of the entire project timeline, from concept to deployment (reducing time from 55 to 30.5 MD, depending on the project scope).
- Brands that do not yet have an established visual identity can start the process with workshops to define guidelines before tailoring the design system.
What is a design system and how does it work in Rappid Workflow?
A design system is a set of ready-to-use building blocks we usedto create an app. It includes elements such as buttons, forms, cart, checkout, or home screens, which helps maintain a consistent UI look and feel. The design system also contains guidelines the project relies on, covering colors, typography, and how to use individual screens.
Rappid Workflow, on the other hand, is a system for building apps in Flutter. It differs from typical low-code solutions because it relies on developer-written code while utilizing AI to automate processes. To quickly build mobile apps in Rappid, we rely on the design system.
As a result, unlike with no-code or low-code builders, we don’t get a generic-looking app, but rather a design tailored to the brand’s unique identity. Preparing it also takes far less time compared to traditional mobile app development.
How does a design system work in Rappid Workflow?
In practice, developing a design system and creating a clickable app prototype based on it serves as the first step when building a new product. Only after the design is approved do we leverage AI. The artificial intelligence adapts our custom-written code based on the Figma project (a UI/UX design tool).
The design system consists of various modules containing UI components. We created this core library based on standard user journeys used in m-commerce apps. Importantly, these components are fully editable. If your brand relies on specific colors, typography, or icons in its visual identity, our design system allows you to incorporate all of these elements into the project seamlessly.
What exactly is customizable?
- Colors
- Fonts
- Product photos and graphic
- Component layout within defined variants
How long does it take to adapt a design system for an e-commerce brand?
According to our benchmarks, a design system in Rappid Workflow can reduce the time needed to prepare UI/UX design by up to around 53%. Much depends on whether the brand already has defined visual identity elements or, at least, specific preferences.
The key, however, is that we don’t have to build everything from scratch, which—in the case of a standard m-commerce app—takes about 36 working days (man-days, or MD) of UX/UI design alone.
After that, some additional time needs to be allocated to fine-tuning various elements to ensure the entire project fully satisfies the client. This includes tasks not strictly tied to branding, such as customizing product tiles. Altogether, for a standard m-commerce app, this process takes about 17 MD.
| Technology | Time to prepare UX/UI design (man-days) |
|---|---|
| Rappid Workflow | 17 |
| Classic Flutter | 36 |
This ~53% reduction applies solely to the UX/UI design phase. Building the app is a separate stage: development, QA testing, and store release take around 55 MD with the traditional approach and about 30.5 MD using Rappid Workflow, which is roughly 45% less. If a project covers both phases, the entire process is shortened from 91 to 47.5 MD, or by approximately 48%. This is a general estimate, because every project is calculated individually. Actual timeframes may be shorter or longer than the given figures.
What if there is no visual brand identity?
Not every company starting a project already has established colors, typography, or a complete brand identity. In such cases, we begin the process with a workshop to determine your preferences regarding the brand’s visual identity.
Alternatively, we can prepare proposals based on your answers to our questionnaire, which helps us understand what matters to you, what you like, and what should align with your brand’s personality.
Only once we develop the branding elements do we adapt the design system to fit them. Therefore, you don’t need a ready-made brand book to get started. At Holdapp, we can suggest the right direction to take when designing your app.
How much can you save? Key figures
The figures below are rough averages based on our projects, not a guaranteed timeline.
| Stage | Classic Flutter | Rappid Workflow | *Savings |
|---|---|---|---|
| UX/UI Design | 36 MD | 17 MD | ~53% |
| App development, QA tests, product launch | 55 MD | 30,5 MD | ~45% |
| Entire Project | 91 MD | 47,5 MD | ~48% |
* If you have your own project team and a ready-made UI design, the savings apply solely to the app build, which is around 45%. The full estimate of around 48% applies to projects where we are also responsible for the UX/UI design. This estimate above is based on our internal benchmarks. We provide individual time estimates for every project, as much depends on the specific features of the app, particularly its size.
Is it worth opting for a design system in Rappid Workflow?
A design system within Rappid Workflow allows you to build m-commerce apps faster while maintaining a unique brand identity. Using a design system reduces UX/UI design time by around 53% (from 36 to 17 MD). Building the app itself (development, QA testing, and store release) takes about 45% less time (from 55 to 30.5 MD). When a project covers both phases, the entire process is shortened by approximately 48% (from 91 to 47.5 MD). We determine the exact schedule and extent of savings individually during consultations, based on your project’s specific needs.
Rappid Workflow was born out of 14 years of experience building apps for brands such as Answear, Homla, and Medicine, among others. Check out our portfolio to see the m-commerce apps we create at Holdapp.
Want to see what a brand-tailored design system may look like in practice? Book a consultation, and let’s discuss your project in Rappid Workflow.
FAQ
How does Rappid Workflow differ from typical no-code/low-code tools?
Rappid Workflow is a Flutter app development system based on code written by developers, where AI merely automates the process of matching this code to the Figma design. As a result, the app doesn’t have a generic look like in typical no-code/low-code builders, but rather a custom design tailored to the brand’s identity.
How much time does a design system save in UX/UI design?
In Rappid Workflow, a design system can cut UX/UI preparation time by up to ~53% — down from 36 to around 17 man-days (MD). Naturally, a lot depends on the specifics of the project.
How much time can you save if the project includes both UX/UI and app development?
If the project covers both phases, the entire process is shortened from 91 to 47.5 man-days, which is roughly a 48% reduction, according to our internal benchmarks. We always estimate delivery time individually for each project, so if you would like to find out how long building your app might take, tell us about your app.
What if the brand lacks an established visual identity?
In this case, the process begins with a workshop to determine visual identity preferences. Alternatively, Holdapp can prepare proposals based on your answers to a set of questions. You don’t need to have a ready-made brand book to get started.
