Case Study:
doinstruct Software GmbH
doinstruct, a mobile-first training platform for frontline workers, needed a design system to ensure accessibility and compliance across industries. We delivered a design system that improved usability and scalability.
UX/UI Design Integration
Design System Creation
Component Library Development
The Challenge
When we first saw the customer side of doinstruct's business, we were amazed. Amazed negatively as we really believed their products have a great niche, yet are still underrepresented in what they can achieve. What you see bellow, was a screenshot of how we found it.
If you are a founder and you cannot do better, this is perfectly fine, investors will probably won't even care about the interface.
But if you're at a stage where you've tested your product and have secured some investment, this is no way of doing business and you will probably hurt your customer experience more that you promise to help.
Our Key Pain Points:
Basic and unintuitive interface, created on the fly by founders.
Difficulty in scaling the platform for new features.
Lack of any type of design system or developer guidance.
No clear indication of the product vision.
Our Approach
We conducted a design audit and collaborated with doinstruct's team to create a user-first design system.
Our approach was pretty unique for the market, which was to define the existing UI components first and then proceed rebuilding all elements of the product (forms, tables, modals etc)
Methodology:
Discovery workshops to understand user needs and accessibility requirements.
Design system foundation with a focus on scalability and accessibility.
Tools & Techniques:
Figma for design system libraries.
Design tokens for consistent styling.
We delivered:
Design System:
Core design elements (color system, typography, spacing, grid).
Component library with 30+ reusable components.
Accessibility-compliant design patterns.
Documentation:
Design principles and usage guidelines.
Accessibility and compliance documentation.
Training & Support:
Training sessions for doinstruct's design and development teams.
Implementation guidelines for seamless integration.
The outcome
The design system delivered significant ROI:
Financial Impact:
Reduced design and development costs by 25%.
Operational Impact:
Faster time-to-market for new features.
The ROI
The design system delivered significant ROI:
Financial Impact:
Reduced design and development costs by 25%.
Operational Impact:
Faster time-to-market for new features.
The Process
We worked closely with doinstruct's team, ensuring alignment at every stage. The process included:
Collaboration:
Regular feedback sessions with doinstruct's product and design leads.
Feedback & Iteration:
Three rounds of revisions to refine the design system.
The future
The design system will continue to support doinstruct's growth, with plans for:
Future Outlook:
Regular updates to the component library.
Ongoing support for new feature development.