Isometric view of design system components including buttons, bottom app bar, and various elements.


Creating a new modern design system for HelloTech’s mobile app ecosystem

An arrow icon pointing down, symbolizing a downward direction or action.
Isometric view of design system components including buttons, bottom app bar, and various elements.

Nov 2021 – Apr 2022

Overview — 001

Laying new foundations

Working alongside designers and engineers, I helped create and test components for the new design system purpose-built for HelloTech’s mobile app ecosystem, particularly the newly redesigned technician app. The new design system helped streamline design processes and engineering build times for both native and web-based mobile apps.


Design System
Visual Design
Interaction Design

My Role



Nov 2021 – Apr 2022

Design Team

Kareem Soliman (me) – Product Designer
Addison Smyth – Director, Product Design
Patrick Martin – Senior Visual Designer




Mobile, Native & Web App

An isometric representation showcasing a spread of design system components, revealing the interconnected elements that form a unified user experience.
An image displaying a button component alongside a window indicating the contrast ratio of the elements. The contrast ratio is shown to meet the AAA rating according to WCAG 2.0 guidelines.


To ensure a user-friendly experience for all technicians, the new design system was built in compliance with the latest accessibility standards. By adhering to WCAG guidelines, we managed to create an inclusive interface that caters to various needs and preferences, improving the overall app usability.

Unified code base

Implementing a single code base for both iOS and Android through React Native enabled a more streamlined development process. This unified approach not only facilitated smoother updates but also fostered consistent user experiences across different platforms, reducing redundancy and accelerating build times.

An image featuring the React Native logo with three icons beneath it. The icons represent a bezier curve, a handshake, and a code symbol, symbolizing the harmonious integration of design, collaboration, and programming within React Native.
An image displaying a sun symbol on a card next to a moon symbol on a dark-colored card. This visual representation symbolizes the theme toggle between light mode and dark mode.

Design tokens & theming

The introduction of design tokens and theming in our design system brought about enhanced flexibility and cohesion. By creating a standardized set of design variables, we were able to ensure consistency across different components, making it easier to introduce new features and themes, and maintaining a unified appearance throughout the app.

Context — 002

Technical debts come due

HelloTech is a gig-economy platform that connects expert technicians with customers seeking smart-home services.

HelloTech runs a native mobile app for D2C orders and web app for B2B partner projects that underpin the day-to-day operations of technicians on its platform. However, since their launch, these tools hadn't kept pace with the company's growth, accruing considerable tech and design debt. Recognizing this, we embarked on creating a universal, mobile-first design system to address these shortcomings and enhance the apps' usability and accessibility.

Problem — 003

Making sense of the chaos

Before embarking on the redesign, we conducted a comprehensive UX audit of the current app. Through a mix of heuristic evaluations, user feedback, and performance analysis, we identified key areas where the app fell short of user expectations and modern design standards.

Namely, outdated design impeding technicians' workflows, technical constraints slowing feature development, and a usability standard falling short of our tech-savvy technicians' expectations.

The lack of a unified design system at HelloTech resulted in extended development times for engineers and compromised accessibility for technicians, impacting both efficiency and user experience.

Research — 004

Understanding user challenges

Our exploration and user feedback uncovered key insights that guided the creation of the new design system. These insights formed the backbone of our new design system, aligning it with user and business goals.


Understanding our users and their needs was fundamental to our approach. Here's a brief breakdown:

Primary Users

Designers & Engineers

Designers and engineers benefit from the streamlined design process and efficient build times the new design system enables.

Secondary User


Technicians experience improved usability and accessibility thanks to the new design system's improvements to readability and performance.


The key insights we uncovered influenced our design methodology  and informed our implementation of the product strategy moving forward.

An icon resembling a puzzle piece, often used to symbolize integration, collaboration, or fitting together.

Accumulated design debt

Our initial audit revealed a growing design debt that had accumulated over years of incremental updates. This had a tangible impact, not just on the aesthetics, but on usability and development speed. Addressing this was pivotal to modernizing the app and ensuring its long-term viability.

An icon resembling a code symbol, representing programming, software development, or coding.

Lack of 1-to-1 design handoff

One of the most glaring issues was the absence of a 1-to-1 design-to-development handoff process. This lack of a systematic approach led to inefficiencies, as engineers had to interpret designs without concrete guidelines, resulting in a longer development cycle and decreased velocity.

An icon portraying a person with arms outstretched, suggesting openness, welcome, or a gesture of embrace.

Failed WCAG 2.0 compliance

Our analysis revealed that the app struggled with readability and basic color contrast, making WCAG compliance a top priority for the redesign. We committed to ensuring that our new design system would meet these essential accessibility guidelines.

An icon depicting a cracked egg, symbolizing fragility, vulnerability, or the breaking of a shell

Aging tech stack

The app's tech stack had become increasingly outdated, limiting our ability to adapt to new technologies and methodologies. Modernizing the stack became an essential step in ensuring that the app could be efficiently maintained and upgraded in the future.

Opportunity — 005

Defining the problem

How might we create a design system that improves user experience, accessibility, and ease of updates for our technicians?

A new modern design system if properly implemented, would be a boon for both users and the business. It would streamline the product cycle for feature improvements across both native and web apps.

Strategy — 006

Defining success

Addressing the problems at hand, we set forth a series of business and user goals that would guide our redesign process.

User goals

Modern user experience

The app needs to help technicians carry out their tasks without performance-related interruptions.

Better product support

Be able to more quickly react to technician needs to design, build, and release feature updates consistently.

Improve accessibility

To ensure accessibility standards are met, the app should be fully compliant with WCAG 2.0 guidelines.

Business goals

Single, up-to-date codebase

To make feature additions and updates more efficient, the app should be built using the latest frameworks.

Improve scalability

The app's design should be flexible enough to add new features without significant overhauls.

Increase technician NPS

A more useable app would help differentiate the platform and increase long-term technician satisfaction.

Process — 007

Building the design system

The creation of our design system was a collaborative journey, requiring close partnership between designers and engineers. Through this iterative process of designing, testing, and refining, we ensured the system met the needs of our technicians and the business.

Setting the foundation

We started our redesign journey by choosing a reliable foundation. Google's Material Design stood out, providing valuable color and surface elevation principles. Additionally, we drew inspiration from other apps, choosing to structure content into section panels that fit the Material Design framework. This exploration shaped our new design system's vision.

A diagram providing an overview of the design system foundations. It covers the fundamental aspects of the color system, elevation system, and the workings of the dark mode theming.

Design system tokenization

Our development process embraced design system tokens, a change inspired by both engineer feedback and best practices in design systems. This move, paired with the versatility of Google Material's color system, introduced a new level of flexibility, making color adjustments and theme customization smoother than ever before.

This made the introduction of a user-friendly 'dark mode' fairly easy, adding a fresh dimension to our app interface. We even applied this tokenization approach to typography and spacing, simplifying implementation and making handoff a breeze.

Working through platform differences

Selecting the right tech stack for our project was crucial, and after thorough consideration, we settled on React Native. Its versatility in facilitating a unified code base for both iOS and Android platforms offered us the practicality we sought. Despite the challenges posed by adapting specific components to each operating system's nuances—toggles, for instance—we found that this decision significantly streamlined our process.

To further accelerate our development, we turned to the popular and extensively supported React Paper library. This foundation allowed us to focus on creating customized components rather than building everything from scratch, effectively saving us substantial time.

A diagram comparing the platform differences between iOS and Android, demonstrated through a toggle component that showcases the variations in design and interaction styles.

Taking designs from spec to code

During the technician app redesign, I played a key role in crafting and testing components, particularly ones that touched the end-to-end flows I designed.

Setting up the new system also involved overhauling our documentation and handoff process, strengthening the bridge between design and engineering teams. We used tools like Zeplin and Storybook to synchronize our design system tokens and components, creating a single, easy-to-understand source of truth fostering a shared design understanding.

A diagram illustrating an example of design system specifications documentation for the 'Top App Bar' standard component, highlighting details such as dimensions, spacing, typography, and interactive behaviors.

Impact — 008

Performance gains and time saved

The impact of the new design system at HelloTech reached beyond mere aesthetics, forging a stronger collaboration between design and engineering, and notably streamlining our development process. This synergy led to significant improvements across key areas.

Product velocity increased
Significant increase
Product velocity
More performant code
Slight increase
App performance
QA time reduced
Slight reduction
QA time

Reflection — 009

Lessons learned

This project was a hands-on lesson in creating a design system from the ground up, a rare opportunity since most roles involve mature systems. In collaboration with engineers, we focused on component standardization, accessibility, and user feedback, improving both user experience and maintainability.

Next Steps— 010

An ever-evolving system

Our design system is not static but continuously evolving to meet the changing needs of our technicians and the business. Following the launch of the redesigned technician app, we've utilized feedback from our technicians to implement several updates and improvements to both the app and the design system. Looking ahead, we're committed to consistently enhancing our design system, keeping it adaptable and current in response to user feedback, business needs, and the dynamic nature of digital design.

Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading
Thanks for reading