💡

Project

A browser extension called Cheep

Background

Cheep is a browser extension that helps online shoppers buy the items they want at their desired price. Track the prices of items across the internet then receive notifications when it reaches your desired price.

My role

End-to-end Design, User Research, Brand Design, UX/UI

This is how we began our research:

During the first two weeks, we focused entirely on discovery and definition.

Before visualizing solutions, we wanted to make sure we’re asking and answering all the right questions. So we began by conducting preliminary research, forming hypotheses, and validating early ideas to ensure that we designed the right solutions.

My task was to compile user and market research that could inform our design decisions.

I identified our top competitors and started looking for useful data.

💡

I performed extensive research on the consumer psychology behind discounting. You’ll see later in this case study why this was so important for us to understand. This PRD contains all of that key information as well as their links and sources.

We also used personas to improve empathy for the user and to refine the scope of the project.

The document also includes Success Metrics, High-level UX Flows, and Product Requirements.

This is how I researched the competition:

Honey is the preeminent browser extension for shopping for discounts.

As I used it, I was especially surprised at how difficult it was to find the list of the items I’d saved.

💡

I’m Watching for Price Drops, but the item is also Droplisted.

Is that the same thing? Are they different?

💡

So I’m Watching for Price Drops, the item is Droplisted…

Now they want me to add it to Collections? What’s the difference?

💡

Oh, here it is.

And CNET shopping wasn’t much better.

💡

Not only are the visual cues here are really weak…

but I’m left with no indication of where to go to view my Price Alerts.

I knew that our product needed to make this process not just simpler and more obvious, but enjoyable.

This is how we came up with ideas:

We had defined our problems, our users, and our proposed solution. We looked at the design decisions of our competitors to learn about which features were successful, which sorts of UI patterns they used, and what we thought we could improve upon.

Once we settled on the features we would include in this iteration of the product, I had a strong enough understanding of what we were designing to begin sketching some ideas.

I turned to my whiteboard to begin rapid ideation.

💡

This is how we improved the design using wireframes:

I used the ideas I’d sketched to create low-fidelity wireframes.

💡

We talked about how this idea for the Watchlist used too many columns for the width of the plugin.

We agreed that the container design used in the Recent Drops section could be an effective solution for the entire Watchlist.

💡

We were happy with how the Watchlist was beginning to look. Using containers gave each item ample space to breathe. The UI was starting to show more explicit hierarchy.

As for the Recent Drops, as it matured the product outgrew this feature. Having to scroll through a potentially very long list of Recent Drops to view the rest of the Watchlist isn’t great UX.

What we did to resolve separate content into their own tabs.

💡

The result was a nicer-looking UI with less clutter, more explicit separation of information, and improved usability.

This is how we approached the Visual Design and Branding:

💡

The type

Strong contrast between type styles creates clear hierarchy without relying heavily on colors, rules, or containers. The most important information is clearly emphasized.
Zilla Slab is a distinctive display typeface that makes a loud statement. This typeface is strictly used for the brand logotype and is not used for UI Design.
We used Open Sans for the UI. Open Sans is an accessible Google font that lives harmoniously with Zilla Slab and within the Google ecosystem. It is pleasantly geometric, which marries well with the product’s other rounded styles and gives the product a modern yet casual look-and-feel.

The UI

Ample white space allows the eye to travel across visual information comfortably. This gives the user a sense of freedom and comfort while they consider buying.
Orange is used sparingly in order to emphasize actions and important content.
We relied on popular UI patterns to make the design process more efficient and to improve usability.
Light gray backgrounds are combined with gray strokes in order to create only as much contrast as is necessary to distinguish neighboring elements. This works to maintain the airy feel of the product while still being highly-usable and accessible.
Rounded borders are more playful and marries well with geometric fonts. They reinforce Cheep’s casual look-and-feel.

The colors

Cheep Orange is high-contrast, making it both distinctive and accessible.
Cheep Orange attracts the eye and triggers a physiological response while the user considers a purchase.
Cheep Orange compliments the logo concept.
Cool grays play to the complementary relationship between blue and orange.

This what happened at high-fidelity:

💡

When we went to high-fidelity, some of the solutions we agreed on weren’t coming together.

This design in particular was comfortable to look at and easy to understand, but organizing this information horizontally turned out to be too limiting when we considered how to provide any additional cues to indicate other important price information.

I spent the rest of the week performing additional research on the best ways to display discounts to influence buying behavior.

💡

What I learned is that it’s best practice to show the price in whichever form indicates the greatest reduction.

$100 off of $1000 sounds better than 10% off.

However, 10% off of $25 sounds a whole lot better than $2.50 off.

As designers though, we need to make our interfaces predictable. Displaying a reduction as $10 off here, 10% off there is a usability nightmare. I wondered: what is the single, all-around best method; the most well-rounded?

I learned that the overwhelming consensus is that comparing the original price to the reduced price sends the most powerful message.

This is how we improved the design:

💡

Before

After

That was the knowledge that led us to the final design, which shares a similar layout to a receipt.

Going vertical was the better solution. By shrinking the crop of the image, it enabled us to include other visual cues and affordances to increase excitement around reduced prices.

In order to be accessible, it was necessary to use methods besides color alone to indicate these changes.

We also chose to hide the destructive action inside of an ellipses menu.

💡

Before