The Appraisal Lane

Introduced, created and implemented a design system for Product and Engineering so that users have a seamless experience while using the products through iOS, Android, and the web.

Background

A third-party vehicle appraisal service that utilizes a real-time app for car trade network, dealership community, and communications platform that enables dealers to submit used cars or appraisal and receive cash offers from a network of experts.

Design Opportunity

To find a solution to help improve the design process and manage design at scale.

The Impact

• More consistency and predictability
• Less time and debt in design and development
• Improved products’ quality
• Fewer bugs

Once upon a time

The adventure started on the very first day of my job at The Appraisal Lane. I was assigned a simple design task for one of the apps and all I had to do was create the UI. Cool. That sounded easy enough. My first instinct was to ask if there was some sort of styling guide available. I was told, “Sorta. We use Abstract, which is a 3rd party Sketch versioning tool, and you’ll find your answers in there. Just click around and you’ll figure it out.” That was an all too familiar statement that I’ve heard before so I braced myself and charged ahead. Inside Abstract, here was a list of things that I found:

1. Questionable color options
2. Several text styles
3. Different icon sets
4. Variations of button styles
5. Unclear direction on look and feel

Instinctively, in order to fully understand the scale of the problem, I interviewed the following people who had a direct impact and recorded their pain points:

• Designers
  • They manage and create the design files 
    • Mixups on different component libraries 
    • Broken and inconsistent symbols in the Sketch design files
    • Time wasted by recreating components when was already pre-existing
• Product owners
  • They manage resources 
    • Incorrect design references for developers
    • Uncertainties on which design references are up to date
• Developers
  • They manage and create the system 
    • Mixups on different component libraries
    • Incorrect references to code from
    • Recreating pre-existing components
• Marketers
  • They manage and distribute content
    • Incorrect sharing of design screenshots
    • Uncertain design references and versions
• Customer service
  • They manage feedback and problems
    • Additional feedback of broken and/or inconsistent UI and interaction on the apps
    • Uncertain versions and references of which designs were rolled out

The ultimate goal is to help allow customers to use an app to easily get their car appraisal in a delightful manner. The problem was the miscommunication and distribution of wrong information from the internal side which eventually affected our customers and the business. This overall process resulted in creating delays and back and forths. After my investigation, it was clear to me that the answer was to introduce, create, and implement a Design System.

Kickoff Meeting

To get things moving, we had a kickoff meeting of presenting the current problems and concluding that a Design System was the solution. The participants were the Head of Product, CTO, and myself. In that meeting, we discussed what goals we wanted to achieve and the general scope of the task at hand.

Presentation

After preparation and agreement, I provided a presentation to the company to inform and bring awareness of this big project. The main goal of this is to get everyone excited and get the buy-in so that it’ll be easier to roll out. This way, I was also able to gain feedback on additional ideas that I may have not thought of. 

Building the Design System

Here were the key steps I took to build it out:

• Visual audit on all platforms which include iOS, Android, and the web
• Focused on the main components

• • Color
  • Typography
  • Spacing
  • Images

• Identify common patterns
• Documented the components

Implementation

I connected with the lead iOS, Android, and web developers, who are based on Uruguay, to make sure we were in agreement and to gain feedback on what they needed to deliver. Based on their feedback, I created Jira tickets of Epics of each platform and Stories which represented creating and implementing the components for each client. Not all the tickets go through each sprint but I do try to make sure as much gets in as possible since we work through sprint cycles. 

To keep everyone in sync, I provided bi-weekly email status reports. Here’s an idea on how it was structured:

Component Status

• In Development
• Up Next / Backlog
• Under Consideration
• In Production
• What’s New?

In Conclusion

Getting started was the hardest part. From my initial presentation, I did mention that the Design System will be a living and growing thing. We’ll go through some hardship and but on the grand scheme, it’ll be beneficial for everyone. Overall, the feedback has been great:

• Designers spend more time on problem-solving instead of recreating buttons
• Developers can produce faster instead of fumbling around on recoding
• Product owners have more confidence on design documentations
• The iOS and Android apps along with the web look and feel much more seamless

With the design system, a simple feature to be put into production will now take 1 month in comparison to the old ways which was 3-4 months. 

What’s the next plan, Stan? Well, I want a more seamless design-to-development creation experience. The idea is to be able to create a design that renders out in code in a test environment. The rendered out version will also output the different states and scenarios. The goal is to help speed up the creation and development process so that the customer and business can reap the benefits of receiving the end result faster.