RepairSmith

— Product Design

RepairSmith is a nationwide startup that’s on a mission to deliver convenient and transparent auto repair everywhere with its mobile service. I joined the founding team to help shape the online consumer experience and internal management tools.

pic

The team in 2019

The Early Days

The initial shape of RepairSmith as a marketplace for trustworthy repair shops was the result of a joint venture between investment and incubator BCG DV (or Boston Consulting Group Digital Ventures) and Daimler (Mercedes-Benz) back in 2018.

I was thrilled to have been brought onto the project as one of four full-stack designers.

Name & Brand

There was an idea of the service offering and MVP, but there was no name or brand yet. Over the coming weeks, I co-facilitated branding and naming exercises. We encouraged every member of every team to participate — the more perspectives the merrier as we set out to become to “Yelp” of car repair.

The team aligned on brand values and name proposal finalists that reflected those values. Through team and executive voting, followed by a trademark search, RepairSmith was picked and the domain RepairSmith.com was purchased.

pic

Brand values

pic

Naming exploration artefacts

The Web App (1.0)

Alongside the branding effort, I worked closely with the design lead and project manager in two week cycles to hammer out pixel-perfect designs of the end-to-end customer online experience.

pic

MVP sprint process

We A/B tested at least two prototypes of a feature every other week. In the example below, we asked 10 users in unmoderated remote tests to add and then remove a second repair service in two different ways.

While most users were able to complete both tests successfully, we specifically wanted to test if users would expand the rows in Variation B, since we wanted to go with that variation due to its simplicity (from both a UX and dev effort perspective).

pic

An example where we tested two ways to remove a service

Launch & Scaling

After a few months of designing and building, the MVP was successfully released to the wild.

pic

Demo day yay

The brand, product and company quickly evolved. RepairSmith pivoted and became a mobile service with its own employed technicians. We moved out from our small corner at WeWork into our very own compound in El Segundo, California (and then into our homes when the 2020 pandemic hit).

I was fortunate to ride along from 0 to 200+ employees while clocking in 100,000 service appointments across 650+ US cities through a series B funding.

pic

A year of employment puts your name on a repair van (photo courtesy of Ross DiMattei)

Responsibilities

Throughout 3 years I worked on many initiatives at RepairSmith large and small; including leading and supporting qual and quant user and usability testing, in-person user interviews and some bug logging, while putting together designs for:

  • Funnel to empower customers to book a service appointment for their car
  • Signed in dashboard to manage those appointments
  • Internal portal used by service advisors and technicians to manage repair orders throughout the life cycle
  • Landing pages
  • SEM & SEO content pages
  • Blog design
  • Invoice design
  • Transactional emails
  • Careers page design

Showcase #1:
In Search of the Perfect Search

All cars need to be serviced every once in a while, be it preventative maintenance or squeaky brakes. Sometimes you know the repair you need, at other times you stand there clueless. A key part of the funnel was to allow the customer to select the required service(s) or to diagnose the issue with the online diagnosis tool.

With the v1 out the door we continued to add features and to iterate on existing ones where we had compromised in favor for speed, or simply failed. We usually designed mobile first being that the traffic in initial tests was 80% mobile, but sometimes we just took the desktop pattern and shrank it to solve the mobile experience (or vice versa). Not ideal even if it works alright, but it can work better.

Opportunities

Some things were obvious from earlier design exploration, and through observing analytics tools such as Hotjar I found issues where users were struggling to find the services they needed.

  • Search bar not being visible, some users were simply not seeing it
  • The UI eats too much real estate
  • Misspellings: e.g. users type “break pads” instead of “brake pads”
  • Synonyms and abbreviations: e.g. users type “ATF” instead of “Automatic Transmission Fluid”
  • Services we offered were missing in the database
pic

v1 of the mobile version of search

Improvements

  • Adjusted copy to give some context
  • Search bar more prominent
  • Search opens in a full screen modal to maximize real estate
  • Decreased row height to 48px
  • Fuzzy match for misspellings, abbreviations and synonyms
  • Option to create a custom service request
  • Diagnosis tool entry point
  • Bolding of text match
  • Closest match is marked in blue
  • Added a clear button
  • Keyboard button says “Go” instead of “Return” since it adds the service to the cart
pic

v2 of the mobile version of search

Showcase #2:
Bending Time Selection

Once the customer has selected repairs and service address (usually their home or office), it's time to set up an appointment.On the initiative of PMs and Head of Product, I lead the exploration of the scheduling UX that would best serve our customers and business goals.

Evolution

Primitive at first, the booking system evolved from a single am/pm selection, to multiple slots request, to fully autonomous auto book.

v1 MVP: A simple date time request that we would need to confirm manually on our end. The UI allowed us to gather data around the urgency of the request.

v2 Preferred Times: Eventually we introduced UX to allow customers to select 3 preferred times to better cater to their and our own availablity. We've learned that most customers looked for appointments within the coming three days so we built a UI with that in mind.

v3 Auto Book: After some time we finally had auto book in place! This enabled the display of real-time availability. While same-day appointments were popular, due to parts availability they couldn't always be fulfilled so we added a click-to-call button in its place.

v4 Quick Pick: Auto-book was refined into “quick picks” where we could promote the next available appointment for a particular service as well as slots that would improve efficiency. To manage customer expectations we updated the UI to fit the arrival window rather than a distinct time. To improve legibility am/pm was switched from uppercase to lowercase and the denotation for minutes was dropped.

pic

The evolution of time selection

Exploration

Throughout the evolution I researched, explored and user tested in search of the perfect appointment system. Below is an excerpt of screens.

pic

Some scheduling UI exploration

Shiny Screens

And if you came here for the shiny screens, here are some throughout the consumer product.

pic

The selection of screens

Style Guide & Interface Library

As a designer it was my duty to try to keep the style guide and interface library organized and in check as the product grew.

pic pic pic pic pic pic pic pic pic

Learnings

I learned a lot during my time at RepairSmith. I learned the importance of understanding the real problem to solve and to ask questions, to collaborate and share early and often, to take ownership and keep championing for the user while working towards business goals.

Don’t take on too much design debt and if you do, make sure to budget in time in the end of a project for housekeeping. Be consistent in naming conventions of features, pages and components across teams and maintain a reusable repository for design and development.

And don’t forget to try and make people smile, chuckle and laugh.

Thanks for viewing!

Let's create something