SadoTech

Mission 

SadoTech had recently switched their

e-commerce platform from TicTail to Shopify, causing them to redesign their entire website. Unfortunately, their business suffered as a result: The new Shopify site had a conversion rate that was 50% lower than their previous conversion rate on their TicTail website. My teammate and I were tasked with redesigning their second website to raise the conversion rate to its original level - and beyond. 

Client

SadoTech manufactures and sells wireless doorbells; they are the #1 best-seller of wireless doorbells on Amazon.

Team

I collaborated with Dan Rieger, also a UX designer. We worked with SadoTech's CEO and E-Commerce Manager.

Role

Usability testing, user interviews, information architecture, problem identification, content strategy, and UI Design

Step 1: Researching Why the Conversion Rate Dropped

 SadoTech's TicTail website

SadoTech's Shopify website (which we were tasked to redesign)

Content Audit

I looked through both SadoTech's TicTail and Shopify websites. I discovered that the Shopify site included many more details about their products than the TicTail site did, but this detailed information was scattered among disparate pages and difficult to find.

Interviews

I talked to a few types of doorbell consumers, including ones who had visited the Shopify site and did not make a purchase. I learned that a typical user had never purchased a doorbell before, and had trouble understanding SadoTech's different product lines.

Usability Testing

I observed as people tried to purchase a SadoTech doorbell for a certain scenario. I learned that most users were confused by the product names and became overwhelmed by the amount of options. Oftentimes, they couldn't find what they were looking for and gave up.  

Step 2: Distilling Data to Understand the Problem

Empathy and Affinity Mapping

Dan and I combined our research notes into an empathy map, and then used affinity mapping to uncover core themes.

Key insight

Users liked SadoTech’s products and prices. However, they didn't understand the differences between the doorbell types, preventing them from making a purchase

Step 3: Strategizing Solutions

To help consumers feel more confident in their purchases, we identified three core strategies for improvement:

1. Create tools to help users discover the right doorbell for them

2. Use everyday language to make content more understandable

3. Simplify navigation so users can quickly find information they need

An example of where these strategies could help: SadoTech's Doorbell Types page. The language was confusing, because "standard" and "functional" sounded like they might mean the same thing. There weren't any links to the products or categories. And the text didn't include enough contextual details to for readers to understand what it meant.

Step 4: Diving into Doorbell Details

Information Architecture

I used card sorting and decision trees to organize the products into categories that mapped onto people's expectations for  home improvement shopping. I also used these groupings to create a better filtering system for the shop section and renamed the products with clear, to-the-point titles (such as Standard Motion Sensor, instead of Model K).

Revised Product

Categories

Basic

Accessible

Expandable  

Pets

Alerts & Sensors

Original Product

Categories

Standard

Functional

Expandable

Developing a Doorbell Guide

With the categories in place, Dan and I created tools to help users find the right product. We collaborated on a quick quiz to match users with the right doorbell, but we also wanted a more skimmable option - so I designed a shopping guide.

Whiteboard:  My idea was to group doorbells by use case, with bullet points instead of paragraphs.

Wireframe: I added photos for each use case, showcased one product per category, and designed on-page navigation.

High-Fidelity: During testing, users found the screen helpful. But some also wanted install instructions, which I included in the hi-fi iteration

Step 5: Removing Clutter & Clarifying Structure

UI Tweaks

To keep SadoTech's branding consistent, we didn't change the visual style their existing website. Our UI improvements focused on highlighting calls to action, adding opportunities for interactivity, and removing distractions. We also used spacing to create information hierarchies and make the pages feel more relaxed.

Example: Product Page

Before

After

Key problems:

  • The product's star rating - a key piece of information for users - was hidden

  • The large size and amount of additional product photos were distracting for users

  • Users couldn't switch the color of the product

  • The lack of color contrast and the tight spacing between elements made the page feel cramped 

My changes included:

  • Including the product's star rating in the header

  • Cutting clutter by reducing the size and amount of additional product photos, which also brought "similar items" above the fold

  • Adding the ability to change the color of the item

  • Placing elements further apart to make the page feel more open

  • Highlighting the "add to cart" button by coloring it red and increasing its size

Step 6: Implementing the Improved Design

Getting the Go-Ahead

Dan and I presented our redesign plan to Long Wong, SadoTech CEO, and Wilson Chen, SadoTech E-commerce manager. They were ready to fully implement our changes, and we were excited to continue working with them. Since the holiday shopping season was approaching, they wanted the redesign up and running ASAP. So, we opted for an iterative implementation.

Long Wong, SadoTech CEO

"The output far exceeded my expectations"

Shifting Roles & Priorities

For the first round of implementation, we looked for high-impact changes that we could finish quickly. For example, we built the doorbell guide, but skipped the interactive doorbell matcher. I focused on ensuring consistency, sorting products, and writing copy. Meanwhile, Dan worked on coding and development. 

Interim Designs

Because we couldn't make all of our changes at once, I needed to make sure all our screen designs were consistent with what we would be able to implement by the deadlines. This meant making some UI changes, like replacing a call-to-action button that lead to the doorbell matcher with a "Shop Now" button.

Clear & Concise Copy

I wrote new copy for certain pages, including the homepage and the doorbell guide. Sticking to my redesign strategy, I focused on making the terminology more colloquial while giving readers clear calls to action - such as encouraging them to watch videos that show how people use SadoTech's products.

Result

Our implementation is live.  After the first phase of our redesign, SadoTech's overall e-commerce conversion rate increased by 40% - a major success!

Want even more behind-the-scenes insight into SadoTech?

I'm always happy to chat about it.

© 2019 by Elana Altman