Product Design, UX/UI, Design Systems
Dataswyft
Wallet Suite
Goal
Transform the existing prototype into a market-ready MVP through a complete, comprehensive redesign of the entire application.
Duration
12 weeks
Design
UX/UI Design
Redesign
Research
Product Design
What is the plan?
Content
How it started
Background
Upon inheriting the project, we were presented with a pre-Minimum Viable Product (MVP) web application that lacked fundamental design infrastructure, specifically an established Design System or UI kit.
Our primary mandate was a comprehensive overhaul: to completely redesign the application and ensure it met modern standards for usability and clarity.
This involved a multi-faceted approach:
• Developing a robust Design System from the ground up to ensure consistency and scalability.
• Integrating the newly refined brand guidelines to establish a cohesive visual identity.
• Conducting rigorous user testing to validate the designs.
• Delivering a polished, market-ready application that would be compelling as both a Business-to-Business (B2B) and a Business-to-Consumer (B2C) product.
Challenges
Goals and Needs
• Achieve complete visual alignment with the brand guidelines
• Deliver a modern, highly intuitive User Experience (UX) that resolves existing friction points
• Develop and implement a robust, scalable Design System and UI kit from scratch
Pain points
• Outdated UI
• Weak, inconsistent UX
• Product complexity and unclarity for users
Problem
Users struggled with an outdated UI and weak UX, which prevented the product from being delivered to the final consumer seamlessly and properly
This poor experience stemmed from complex and inconsistent user flows that eroded user confidence, coupled with a dated visual design that failed to meet modern usability standards or align with the brand guidelines, creating a major obstacle to market readiness and adoption.
This comprehensive redesign directly addresses user struggle by delivering a modern, intuitive interface that guarantees friction-free navigation and task completion. Adherence to the brand guidelines instantly elevates the app's professionalism and instills user trust, making it market-ready. Crucially, the custom-built Design System and UI kit acts as a centralized design authority, ensuring all future features remain consistent, accelerating development cycles, and enabling seamless, scalable growth for both B2B and B2C segments.
Solution
Complete redesign of the application, anchored by the creation of strong, cohesive brand guidelines and the development of a reusable, scalable Design System.
Information Architecture
Sitemap
To ensure the foundation of the redesigned application was robust and user-centric, our first critical step was to map the Information Architecture (IA).
Through collaborative sessions with the Product and Development teams, we created a comprehensive Sitemap for the entire application. This strategic deliverable served two core purposes: to verify the completeness and relevance of the content against current product requirements, and, most importantly, to explicitly lay the User Experience (UX) groundwork for all subsequent design decisions, ensuring a logical and intuitive navigation structure from the outset.
User Experience
User Flows
Given the application's complexity - supporting distinct user types including Badge Holders, Validators, Authenticators, Merchants, and Issuers - a comprehensive understanding of user interaction was paramount.
We developed clear, user-centered flows that addressed the unique journey and requirements for each role. Recognizing that some users can hold multiple roles simultaneously, the flows were designed individually yet meticulously maintained a seamless, integrated experience across all potential paths. To ensure the final product was polished and robust, both the happy path (ideal user journey) and the unhappy path (error states, exceptions) were thoroughly worked through in collaboration with the Product and Development teams, achieving complete alignment and ensuring technical feasibility.
Building the global kit
Design System
Following the establishment of the foundational structure via the sitemap and user flows, we immediately began building a solid Design System - a critical move to ensure future consistency and scalability.
Our core philosophy centered on structure and clarity: every component, pattern, and token was meticulously classified and documented to guarantee ease of use for both designers and developers. This dedicated focus on building a robust, centralized repository ensures that the Dataswyft Wallet application maintains visual integrity and efficiency as it grows, making all future design and feature implementation quick, clear, and highly scalable.
Component showcase: multi-role versatility
To illustrate the inherent flexibility and user-centricity of the Design System, we designed core components, such as the Badge Card, to serve multiple user roles simultaneously. This single, dynamic component adapts its function and presentation based on the user's active role: it functions as a visual identity for the Badge Holder, provides a streamlined starting point for validation and authentication for the Validator and Authenticator, and clearly displays all essential, high-level information related to the badge for the Badge Issuer. This intelligent, versatile design ensures that every user, regardless of their current context, can quickly and seamlessly access the information and functions most relevant to them.
Impact and Results
Result
The intensive 12-week design initiative culminated in the successful transformation of the CheckD Dataswyft Wallet application.
We delivered a complete product package: a fully redesigned application integrated with a robust, scalable Design System built for long-term growth and consistency. All design artifacts were comprehensively handed off and successfully implemented across both web and native application platforms, ensuring the product is now market-ready, visually cohesive, and built on a foundation of superior user experience.
Results
UI
• The UI was completely overhauled to strictly adhere to the new brand guidelines, successfully transforming the app's visual identity to instill user trust.
• A fully classified and scalable Design System was built and implemented, guaranteeing visual and functional consistency across all platforms and features.
• The outdated interface was replaced with a clean, modern visual design that meets contemporary standards and enhances the professional perception of the product.
UX
• Complex user workflows for all roles were streamlined and standardized, significantly reducing friction and ensuring swift task completion.
• The creation of the new Sitemap and User Flows established a logical, intuitive structure that efficiently guides all user types to the information they need.
• The design successfully created component-level solutions that adapt seamlessly to the user's active role, simplifying the experience for complex, multi-functional users.
Was the customer satisfied?
Outcome
The project was met with high praise from the Dataswyft CEO and VP of Product, who highlighted the new design's exceptional clarity and approachable, user-friendly aesthetic. This successful transformation not only met all immediate design objectives but also reinforced the company’s commitment to delivering a superior, market-leading product to its global user base.