Who is Odeko?

Odeko is a company who provides a product suite that unifies the coffee shop experience. This includes:

• A dedicated marketplace for coffee shop owners to buy supplies
• A logistics application to create efficient routing systems from the warehouse to coffee shops
• A driver app to ensure swift delivery
• A mobile and desktop application for coffee shop enthusiasts to skip the line and order ahead at their favorite coffee shop

Project Overview

I took on the role as Lead Product Designer, and the project duration was one year. The project phases included:

• Research & Discovery: Competitor Analaysis, Heuristic Analysis, User Research, Stakeholder Interviews
• Ideation: Personas, Brainstorming, Findings, Strategy Development
• Design: Collaborative Iterations, Atomic Design Structure, Hi-Fidelity Components, Documentation

Research & Discovery

I implemented a research approach that prioritized user groups which ensured their needs were the focal point of our efforts. With the guidance of a senior product designer, my design manager, and an engineering lead, we successfully identified pain points among both designers and developers. This enabled a comprehensive assessment of necessary changes. In summary, this included:

• Discovering hidden shortcomings from the current design system and determining a vision for success
• Researching best practices within Figma to discover the ideal approach to building modular components and hierarchy
• Assessing other design systems (IBM Carbon, Uber, etc.) to aid during the ideation process
• Capturing the thoughts of designers, developers, and stakeholders

Competitor Analysis

This was my first time doing a complete revamp of a design system as a lead designer. At this point, Figma was swiftly coming out with features such as auto-layout which would be very powerful for design system components. This was especially prevalent due to this design system needing to work for both mobile and web applications.

Realizing this, I educated myself through Figma’s online documentation, YouTube channel, and Config talks to be able to fully understand how to build the most up-to-date design system. This would incorporate new features that Figma added down the line and keep the design system running smoothly.

Designer & Developer Interviews

Collecting user feedback is paramount in UX design, and engaging with actual users significantly enhances the project's overall success and impact. Following the heuristic evaluation, I routinely met with the other designers and developers who would be using the design system components.

These collaborative sessions with team members brought up valuable insights into pain points and desires. This identified the common ground between designers and developers. Presented below are excerpts from the feedback sessions that informed the prioritization strategy for each team:

Stakeholder Interviews

Stakeholder interviews allow the goal of the project to become married with the business goals for the company.

As the components were being designed, I talked with the design team manager, director of engineering, and director of marketing to ensure that all of our goals were being aligned:

• Versatility of Components: Would designers have enough variations of components to create user friendly solutions?
• Re-branding: Would the design system be able to go through a re-brand quickly? As it turned out, there was already a re-brand of the company in the works.
• Component Compliance: Would the components maintain compliance for both web and mobile applications?
• Training & Documentation: Would all teams be able to read and understand the guidelines for using the design system?
• Storybook Components: Would the components be too difficult to build and maintain from a developer’s perspective?

By meeting regularly, we were able to discuss issues before components became solidied within Figma and Storybook. This also allowed for everyone to provide feedback as needed.

Brainstorming

After compiling and documenting all my findings, I collaborated with the Director of Engineering and another designer. This led to brainstorming sessions one to two times a week to ensure project alignment. Additionally, I sought insights from other designers to understand the specific components required for their ongoing projects.

To kick off our first component, we decided to focus primarily on the Button component. This would allow us to build a foundational component that used tokens for color, radius, typography, and padding. This would also be the easiest component to start incorporating into live projects.

One of the main pain points I found with designers was the lack of being able to search for specific components and finding relevant results. This led to creating a naming structure for all components from table columns all the way to icon categorization. This allowed for variants to be easily found and customized. Below is an example for a primary checkbox with a default active state:

Collaborative Iterations

As much as I may want to jump into a project and try to figure out the best way to do something, working with other designers, engineers, and stakeholders allows you to gain perspectives that you may have overlooked. For example, I learned how difficult something such as a table component could be and how to create a flexible, modular solution.

For marketing stakeholders, providing them a way to flip between design system themes so they could efficiently pull product screens was also incredibly important. Lastly, as mentioned earlier, designers needed ways to more effectively search and customize components without misusing them. This lead to in-depth documentation and naming structures within Figma.

Use Cases

After the design system was established, it was used in all the new projects that Odeko was rolling out. For example, the revamped mobile app, logistics product, and marketplace used the design system components:

Reflection

Towards the end of the project, I demoed the design system within Figma to other product designers. This allowed for final feedback and adjustments to be made. The director of engineering and I would also demo new components being rolled out to Storybook with developers to keep interest in the project and also to show developers how to incorporate components into their existing projects.

What I learned:

• Confidence: this was my first project as a lead designer, and it felt intimidating. I knew getting outside my comfort zone was key to my growth, and, after awhile, it felt great getting so much feedback through all the cross-collaboration.
• Ask for Help: at the start, I tried to take on the entire project by myself. After speaking with one of the senior product designers, I realized the importance of asking for help. One of the areas in particular was how to collaborate with other developers and stay in regular touch with them.
• Know My Value: being able to explain why the design system was being built a certain way was difficult at times, but building the confidence through feedback and research helped pave the way to critiques that ran more smoothly.