The Problem
When I joined Risika, I encountered a fully functional product that, despite its capabilities, faced some user interface and user experience challenges. Prior to my arrival, the platform had operated without an in-house designer, which had led to certain issues, especially concerning the utilisation of the Material-UI (MUI) framework. One noteworthy challenge was the inconsistent use of components for similar functionalities across different pages.
Another issue I observed was the multitude of text styles and colours employed across various sections of the platform. Rather than adhering to a consistent and well-defined set of design principles, the platform exhibited a mishmash of visual elements. This not only hindered readability but also created a sense of disconnectedness between different parts of the platform. What's more, these UI issues had tangible impacts on usability and accessibility, which called for immediate attention.
Key Pain Points
Inconsistent UI components
The platform lacked standardised UI components, resulting in varying user experiences and functionalities across different sections.
Inconsistent text styles
Numerous text styles were in use, deviating from a unified set of guidelines and impairing overall coherence.
Inconsistent colours
A wide range of colours was employed, exacerbating the platform's visual identity fragmentation and causing confusion among users.
Visual bugs and other issues
Visual bugs and unresolved issues further compounded the user experience, introducing friction and frustration into the product.
Lack of a design library
There wasn't a design library in place to serve as a source of truth, leading to inconsistencies and challenges in maintaining a cohesive interface.
Approaches and Challenges
1. From the ground up: Designing and building our own design system from scratch
Pros:
- Bespoke design
- Opportunity for research to apply best practices
- Potential for positive PR when shared with the wider community
Cons:
- Demands a significant amount of resources
- Lengthy design and development process
- Misalignment with current business priorities
2. Moving to a new library: Finding another React framework like Chakra UI, Bootstrap, Tailwind
Pros:
- Opportunity to research and select the most suitable framework
- Fresh start
- Potentially using a more modern and customisable library
Cons:
- Time-consuming for the business, design and development
- Relatively unknown territories
- Potential costs
3. Sticking with Material UI: Keeping on using Google’s React component library but in a more efficient and streamlined way
Pros:
- Really helpful for small tech teams when implemented properly
- Cost and time-saving benefits
- Fairly customisable through theming
Cons:
- Some default components and interactions are not necessarily the best practices
- Lacks character
- Design constraints
Ultimately, the decision on which approach to pursue was the result of extensive negotiations led by me, involving discussions with the Head of Product and front-end developers. Considering the business priorities and available resources, we opted to harness theming within Material UI to significantly enhance and standardise the platform's interface. This decision struck a balance between efficiency, customisation, and alignment with the current project landscape.
Work lane #1: Foundations
In this work-stream, I embarked on the foundational task of creating a design library that mirrored the current live platform, exactly as it was. This reverse design/engineering process provided a clear picture of both the strengths and weaknesses of the existing design. While it was somewhat frustrating to recreate the issues, it was an essential step. This library encompassed stylesguides, components and pages. I named this library Risika DS v1.0, signifying its role as the initial version of a comprehensive design system.
Work lane #2: Theming
Within this work-stream, I focused on establishing a limited set of style guides and rules, which I then applied to the existing components and pages. Although it might appear as mere retouching, it led to significant improvements in several components. In addition, I streamlined minor UI aspects, such as spacings, alignments, and labels, to achieve quick wins and enhance the overall user experience.
While creating this 'single source of truth' for design on Figma, I meticulously implemented Auto-Layout properties on the components and pages, to increase design velocity when editing or creating designs. I established detailed but easy-to-use component variant structures to speed up design and development processes.
This work laid a foundational basis and set the stage for more substantial enhancements and streamlined development. It played a pivotal role in standardising components by eliminating redundant elements for the same functionalities. I designated this phase as Risika DS v1.1.
The Outcome
The establishment of a comprehensive and consistent design library yielded substantial benefits:
Enhanced design velocity
The design team's productivity surged, with design velocity doubling when crafting new features and user journeys.
Visual consistency
The library fostered visual consistency across various user journeys, products, and communication channels.
Shared language
It introduced a shared language among cross-functional teams, effectively preventing miscommunications between designers and developers.
Initiated collaboration
The library sparked the beginnings of regular collaboration between design and front-end development. It laid the groundwork for the potential integration of tools like Storybook in the future.
Improved scalability
The library provided a scalable foundation for design assets and patterns, accommodating the platform's growth seamlessly.
Resource allocation
The initiative freed up design resources, allowing designers redirect their focus towards addressing more complex design challenges and innovation.
Onboarding efficiency
The streamlined library expedited onboarding for new team members, enabling them to quickly integrate into the design and development processes
Efficient bug fixing
Addressing and rectifying bugs became more efficient and precise, contributing to a smoother user experience.
Enhanced UX and customer satisfaction
The resulting design improvements directly translated into an enhanced user experience, leading to higher levels of customer satisfaction.
In summary, the creation of a comprehensive and consistent design library delivered a multitude of benefits, ranging from improved efficiency and collaboration to heightened customer satisfaction and enhanced scalability. These results underscore the critical role that a unified design system plays in the success of a digital product.
