After customers reported various design inconsistencies within the SingleOps Web application and the product team constantly struggled to meet development deadlines,
I was tasked with building a design system.
Within just 3 months, I was able to integrate the design system into the product team's development process. The new system not only unified the product's look & feel, but also streamlined designs, reducing our speed-to-market times by 25%.
PLATFORM
Web (Responsive)
TIMELINE
May 2023 - Sep 2023
MY ROLE
Senior Product Designer
TEAM
9-person Product Team
(3 Designers, 3 PMs & 3 Engineers)
The information/opinions/decisions shared within this case study are my own and may or may not represent the opinion(s) or decisions practiced by SingleOps.
2 - THE SITUATION
BACKGROUND
SingleOps is a business management platform for landscaping businesses.
Since 2013, SingleOps has been serving green industry companies with a mission to help them win their customers for life. Today, thousands of green industry professionals use SingleOps and the company has helped customers generate over $4 billion in revenue.
While SingleOp's platform is world-class in terms of functionality. Over the years it has steadily gained tons of technical debt, which has caused many areas of the product to feel disjointed and under-developed.
THE PROBLEM
The WebApp had numerous design inconsistencies. Moreover, the product team struggled to keep designs coherent, while meeting fast-approaching deadlines.
Tech companies are often expected to move at an incredibly fast pace. Moreover, building software is complex. Add ever-growing teams to the mix, and you often end up with disjointed experiences.
The team's lack of design cohesion hindered productivity, disrupted many workflows, & fostered user confusion. Although our products functioned properly, they were often developed with many inconsistencies. Moreover, our development practices impeded the team's ability to operate smoothly.
MY ROLE
As Senior Product Designer, I was tasked
with individually building the new system
Since the rest of the product team was busy working on other features within the platform, I spearheaded the design system's research, strategy, organization, and implementation on my own.
For this project, I worked directly with the VP of Product and two front-end engineers to make our vision a reality. The only capacity
that I could collaborate with other designers was to discuss any overlap in design elements (different elements, with same usage).
THE SOLUTION
Not only was I the sole designer on this project,
but I was also the initial founder of the business.
FEATURE 1
A Digital Profile, with all your links - in one place.
As a user I want all my contact info to be easily accessible & updatable, so that I don't have to keep reprinting more business cards to share.
My design answers this need by empowering:
1. Users to add an unlimited number of social links, directly on their profile - all in one place.
2. Users to update their links in real time, so all the hassle of having outdated info is no more.
FEATURE 2
Share your profile/links with ease, in many ways.
As a user, I want exchanging contact info to be engaging, so I can leave a lasting impression connect with others.
My design answers this need my offering users a variety of sharing capabilities - so they can share their contact info by tapping other phones, getting their unique QR Code scanned or by simply sharing their profile URL.
FEATURE 3
Share what links you want, for better privacy controls.
As a user, I don't want to share all of my details with every person I meet, so that I can preserve my privacy.
My design offers an intuitive privacy control system allows users to choose what to share. With a simple toggle users can share their full profile or can decide any one link of their choosing easily and confidently.
2.0 - DISCOVERY
PRIMARY RESEARCH
I evaluated the current experience to identify design inconsistencies.
To kick off the discovery phase, I assessed SingleOps’ existing Web experience. The examination revealed numerous issues that needed consideration, including improper color usage, typography, spacing issues, and very unconventional usage of user interface components.
Moreover, the lack of a standard grid system led to diverse layout variations across different pages. The absence of such guidelines resulted in a lack of design consistency/predictability in the WebApp
DOCUMENTING FINDINGS
Cataloging artifact states/patterns to track design inconsistencies
I decided to log all my findings in one convenient spreadsheet.The document served as a comprehensive record of all areas needing attention, ensuring that no UI aspect was overlooked:
• The document facilitated proper tracking of components that required standardization, modification, or a complete redesign.
• The document enabled my team to visualize the scope of our task, fostering a more coordinated approach toward creation.
SECONDARY RESEARCH
Learning from industry leaders
to avoid design system pitfalls
Studying existing and successful design systems
was essential for developing SingleOps' system.
The investigation revealed how leading companies tackled similar design challenges. It also helped me learn effective strategies to establish design consistency, improve the user experience, and accelerate SingleOp's product development.
By analyzing this data, I identified best practices that could be adapted into our unique context. The study benefits included:
• Avoiding design pitfalls, saving us valuable resources.
• Benchmarking our system against industry standards.
• Ensuring that our design system would be up-to-date.
2.1 - APPROACH
THE GOAL
Create a beautiful, efficient
and accessible design library
Our goal set a clear direction and standard. It inspired us to prioritize aesthetic appeal, user-friendliness, and inclusivity in all our decisions. 3 key principles informed my decisions.
1. Consistency: Ensure that our design language was uniformly understood & could easily be applied across all our products.
2. Efficiency: Our design system should help streamline our product development process and speed up our time to market.
3. User Centricity: Our design system should improve the user experience through cohesive, intuitive, & consistent designs.
CONSTRAINTS
TECHNICAL CONSTRAINT
In order to focus our efforts, we reduced the initial scope to making the system first for our flagship web application.
TECHNICAL CONSTRAINT
Tight project budget limited manpower, necessitated cost-effective solutions, & required proper resource optimization.
TECHNICAL CONSTRAINT
We had to ensure that our system met the needs of developers, designers, product managers, and users while still aligning with SingleOps' business goals.
STEP 1: FOUNDATION
Building a universal styleguide
for our system to be built upon
The first task in the design phase was establishing a style guide to inform our visual direction. I collaborated with the marketing team to strike the perfect balance between brand & product, while considering our target user's unique frame of reference.
The landscaping jobs can be highly stressful/laborious, especially during peak seasons; this was a key consideration in my design approach - from typography to color, to structue/layouts.
It was important for the platform voice to be that of helpful guidance and coaching, rather than adding more pressure on the already stressed users.
STEP 2: PURPOSEFUL DESIGN
Accessibility was baked into
design system development
The opportunity to build a design system from scratch meant that accessibility became a critical and early part of the design process, rather than just being considered as an afterthought. Key accessibility principles taken into system account included:
• Checking color contrast on different backgrounds and across different interaction states on the web platform.
• Ensuring font sizes are appropriate & structuring content with simple hierarchy for easy scanning and readability.
• Using clear, descriptive labels/icons for links and buttons, decreasing UI confusion and cognitive load for our users.
2.2 - DESIGN
STEP 2: UNDERSTANDING COMPONENTS
Building an evolving catalogue
of components to unify designs
Traditionally, many systems define components as atoms, which are used to build complex molecules & organisms. However, in practice, these re-usable atoms are used in many different ways, allowing for all kinds of molecules to be created.
This often opens the door to all kinds of disjointed experiences and makes any design system harder to maintain over time. Hence, instead of relying
on individual atoms, we started considering our components as elements of a living organism. They have a function and personality, are defined by a
set of properties, can co-exist with others, while still evolving independently.
The information/opinions/decisions shared within this case study are my own and may or may not represent the opinion(s) or decisions practiced by ElemenTerra.
EXAMPLE: CARD VARIATIONS
Our "card" component had
tons of different variations
Once I solidified my design direction, I transitioned designs to mid-fidelity wireframes & started adding interface spacing. Moreover, I started mapping out each screen's connections.
This step was crucial as it helped me add on more detail to the design bringing it closer to the final product. Moreover, digital frames would help me better assess the app's overall experience through the upcoming usability testing phase.
STEP 3: ESTABLISHING COMPONENTS
I decided to establish what a
component is & how it works
Each component is defined by it’s required elements (such as title, text, CTAs, icon and picture), and may sometimes contain optional elements. These elements are both defined in the Figma document as well as in code.
STEP 4: RECOGNIZING EDGE-CASES
Employing pragmatic creativity
to address complex situations
Pragmatic creativity is a concept I borrowed from BBC’s Design System; it resonated well with my approach while working on the Design System. When iterating on some complex screens, I occasionally had to step away from rules to think creatively.
This could mean both adding new components, as well as re-evaluating certain existing patterns. It was important to be pragmatic about when to be rigid with UI elements and when to be flexible - adding a splash of something new.
EXAMPLE: CARD VARIATIONS
Our "card" component had
tons of different variations
Once I solidified my design direction, I transitioned designs to mid-fidelity wireframes & started adding interface spacing. Moreover, I started mapping out each screen's connections.
This step was crucial as it helped me add on more detail to the design bringing it closer to the final product. Moreover, digital frames would help me better assess the app's overall experience through the upcoming usability testing phase.
STEP 5: COMPONENTS LIBRARY
Compiling elements to form a
powerful components library
While creating these components, I collected them in a master file called the library, which we referred to throughout the design process.
After a week or two we began to see huge leaps in productivity by using the library when iterating on designs. One day, while putting together a last-minute prototype, our team was able to create nearly 20 screens within just a few hours by using the framework the design library provided.
2.3 - EXECUTION
STEP 1: COMMUNICATION
Providing valuable context that
would help future generations
Building a set of components is not enough to maintain a
proper Design System; there needs to be enough context
to make it more accessible for a range of internal users.
Wherever possible, I always aimed to:
• Provide rationale behind my design decisions
(in design conversations with the Leadership team)
• Showcase behaviors, interactions and various states (in implementation discussions with the developers)
• Cite research sources and alternatives considered (for future designers and the wider Product team)
STEP 2: CONTEXTUALIZATION
Provided valuable context to assist future S.O designers & developers
Once I solidified my design direction, I transitioned designs to mid-fidelity wireframes & started adding interface spacing. Moreover, I started mapping out each screen's connections.
This step was crucial as it helped me add on more detail to the design bringing it closer to the final product. Moreover, digital frames would help me better assess the app's overall experience through the upcoming usability testing phase.
STEP 3: IMPLEMENTATION
Working with developers to
establish a design repository
Continuously working with developers, we collaborated to make sure that component organization and conventions worked for both sides - ensuring seamless implementation.
Finally, The components were mirrored in Storybook. Our Collaborative approach made the entire process more efficient & streamlined, helping designers easily update future designs & developers easily track new components.
4 - OUTCOME
SUCCESS METRICS
Time taken to develop new
products decreased by 25%
Overall, the project was highly successful - the design system we created had become an integral part of SingleOps’s product dev process. It improved design cohesion, sped up development cycles, and enhanced the overall user experience for our target audience.
Looking ahead, the design team could continue to refine and expand the design system as they learn more about our users' needs and as the product continues to evolve. This project was a testament to the power of good design and collaboration, and it set a high standard for all our future design and developmental endeavors.
80%
appreciated the sense of ownership and intuitive controls within the experience
90%
voiced that the random moments added in the game added an extra sense of delight.
60%
of our player base were players who had never even played games before.
70%
players mentioned that the game was incredibly immersive and relaxing.
5 - TAKEAWAYS
PROJECT INTROSPECTIVE
Twas a huge lesson in empathy, collaboration and organization.
I'm eternally grateful for the opportunity to not only, build a system that helped save a company longterm money, but to also actively contribute toward a more collaborative and efficient future for the product team. As I look back on my time spent building SingleOps' Design System, a few specific points come to my mind.
I have elaborated on these points below:
🤨
Components are unique
In most apps there are a set of components that repeat often. For us, these components were cards and table-cells.
Looking back, I wish we had taken more time to think about the cards and come up with a stronger set of patterns and components. In the end, we wound up with many different kinds with some inconsistencies.
🎓
Document Often
This project required us to operate within a tight timeline, which caused us to overlook some of the documentation process. Lacking thorough documentation created some confusion that could have been avoided.
Just like with coding, documenting systems as they are created is paramount to the process. It has to be done sooner or later, and documenting throughout the creation process allows for better decision-making.
🚀
Collaboration = winning
Collaborative environments are essential in product development. Frequent meetings and open communication channels ensure a seamless workflow and allow for the expertise of each team member to be utilized effectively.
Effective communication is a crucial component of a successful design system. Providing rationale, showcasing behaviors and interactions, and citing research sources enriches the design context and ensures everyone on the team is on the same page.