Nov 2021 – Apr 2022
Overview — 001
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.
Functions
Design System
Visual Design
Interaction Design
My Role
Contributor
Timeline
Nov 2021 – Apr 2022
Design Team
Kareem Soliman (me) – Product Designer
Addison Smyth – Director, Product Design
Patrick Martin – Senior Visual Designer
Status
Shipped
Platform
Mobile, Native & Web App
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.
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.
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
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
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.
Research — 004
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:
Designers and engineers benefit from the streamlined design process and efficient build times the new design system enables.
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.
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.
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.
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.
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
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
Addressing the problems at hand, we set forth a series of business and user goals that would guide our redesign process.
The app needs to help technicians carry out their tasks without performance-related interruptions.
Be able to more quickly react to technician needs to design, build, and release feature updates consistently.
To ensure accessibility standards are met, the app should be fully compliant with WCAG 2.0 guidelines.
To make feature additions and updates more efficient, the app should be built using the latest frameworks.
The app's design should be flexible enough to add new features without significant overhauls.
A more useable app would help differentiate the platform and increase long-term technician satisfaction.
Process — 007
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.
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.
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.
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.
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.
Impact — 008
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.
Reflection — 009
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.
.svg){kind=icon}