Building a Scalable Design System
SMARTY, a subsidiary of Three, brought me in as a product designer to refine and implement their new design system across both their website and app. My role was to ensure consistency, improve usability, and optimise the overall user experience by integrating the updated design system seamlessly into SMARTY’s digital products.
My Role
Product Designer
Year
2024
What is SMARTY?
SMARTY, a rapidly growing SIM-only subsidiary of Three Mobile, offers affordable mobile tariffs that move customers away from traditional, expensive long-term contracts. Most of their business comes through their website or app, and they continue to expand their customer base.
Why did they hire me?
SMARTY hired me to implement a design system for several important reasons.
They needed consistent/accessible design and components across their products to enhance user experience. Reusing design components would make work more efficient.
As a fast-growing company, SMARTY required a scalable system to manage design across multiple teams while maintaining high-quality standards.
The design system would also strengthen their brand identity and streamline development.
Get a feel for SMARTY
The Challenge
When I joined Three, I inherited a design system from an agency that initially received negative feedback. My task was to update and optimize various sections of the SMARTY website and app.
This project was particularly interesting due to the multiple challenges it presented. It required extensive communication and promotion of the design system's benefits to stakeholders.
The updated design system offered several advantages: it was accessible, thoroughly tested, visually appealing to users, and ensured consistency across digital platforms. Additionally, it improved SEO and enhanced the overall user experience.
Approach
To tackle these challenges, I began by integrating new components into designs for specific projects aimed at broader optimization. This involved redesigning sections such as the refer-a-friend and SIM activation areas. I collaborated closely with other product designers who were simultaneously implementing the new design system across the dashboard and logged-in areas.
The strategy was to demonstrate the system's effectiveness in real-world contexts, aiming to garner greater support from stakeholders and enhance team alignment.
The design system includes:
In-page annotations
how each component is documented and laid out within the library.
Illustrations and Icons
I over saw and briefed a freelance illustrator to design and create new icons and illustrations in line with SMARTY’s brand image.
Branding details
This included colors, typography for web and mobile, logos
Break points
Spacing guidelines
This was to ensure consistent spacing across the site
State changes
Recommended defaults and the subsequent changes in appearance.
Case Study: Referral Programme
When I started working on the Refer-a-Friend redesign, there was a lot of pushback from stakeholders about using SMARTY’s new design system. Some felt it wasn’t the right fit, but I made the case that the design system was built for a reason—it was well-tested, accessible, and meant to bring consistency across SMARTY’s products.
Early feedback wasn’t always helpful (one project manager just said it didn’t "pop"), but I stayed focused on the bigger picture. I redesigned the entire Refer-a-Friend section for both the website and app, improving the user experience and integrating key components from the design system.
In the end, the work paid off. The redesign was well received, and the go-to-market manager even gave me a public shoutout for the improvements. The new Refer-a-Friend section looks cleaner, functions better, and makes the user journey much smoother. It’s set to go live in August 2024.
Overcoming Challenges & Driving Change
This project came with its fair share of challenges, particularly as we introduced the new design system. There were differing opinions early on, and feedback was sometimes more subjective than actionable. However, as a team, we stayed focused on creating a better, more consistent experience, and in the end, the final designs were well received.
SMARTY is still evolving in how it approaches user research and feedback, and a well-tested design system plays a key role in bridging that gap. I hope this project helps pave the way for a more user-centred approach in the future.
Evaluation
This project was a great opportunity to bring clarity and consistency to SMARTY’s digital experience. While introducing the new design system came with its challenges, it ultimately helped create a more streamlined and accessible user journey. The team adapted well, and it was rewarding to see the final designs not only well received but also set a strong foundation for future improvements.
This project also highlighted the potential for SMARTY to further integrate user research into its design process. By continuing to build on the structured approach of the design system, SMARTY can create even more user-friendly experiences moving forward.