UX DESIGN
UI DESIGN

nate Browser Extension Design

Project Overview

A browser extension on desktop that would be compatible with Safari & Google Chrome initially and then onto other browsers eventually.

Challenge

There is no desktop version of nate, whether it be app or extension, that can be used. There are a lot of desktop users who enjoy making purchases on their computer due to it being on a bigger screen.

Solution

A browser extension on with new features, new additions to the design, and a more tailored user experience.

The Research

Competitor Analysis

honey

• Browser extension that automatically finds and applies coupon codes at checkout with a single click.
• Available on app store and google play chrome store.
• Can use on browsers like Chrome, Safari, Opera, Firefox, and Edge.
• Honey helped a luxury retailer grow in revenue and sales by 236%.

Rakuten

• Browser extension that finds you coupons, deals, and Cash Back at over 2,500 stores.
• Available on Chrome, Safari, Edge, and Firefox.
• Deals, coupon codes, and receive cash back.
• Can look at your order history.
• Cash back balance.

Ibotta

• Browser extension for cash back on in-store and online purchases.
• Available on Chrome and Firefox.
• Finding online offers and deals.
• Cash back for both online shopping and grocery pickup and delivery.
• Works with certain retailers like Target, Thrive, and Forever 21.
• No coupon codes.
‍

Insights

• Lots of people shop online on their desktop/laptop
• When talking to a group we all said how we prefer to make purchases on laptop/desktop and to view the cart all in one place there because it’s easier.
• 47% of global purchases are completed online (https://www.thinkwithgoogle.
com/consumer-insights/2019-shopping-retail-insights/)

The Features

New UI Design

A clean and minimal design of black, white, and grey with pops of butter yellow for a fresh user experience.

Light/Dark Mode

People have preferences for different screen modes, and we want to make sure that we cater to different needs in our UI.

Row Product View Options

Users can choose to view the items they liked via 1 row view, 2 rows view, or 4 rows view. This gives the nate user the ability to customize their user experience to how they like to see their list of products they like with easy access.

Search Button

The search button would be located on the top navigation bar, where users can search up profiles, lists, and emails, as well as follow their profiles.

Making A Purchase

When you click on an item you liked, the item will pop up and become a bigger card where users can make a purchase and do it all in one place. Making the purchase process simple and straightforward is key.

List Tab

A list tab would be located in the bottom nav bar, where users can view their lists all in one place. Users also get to pick and choose which row view they would like to view their lists.

Create Lists

The plus sign button in the middle of the nav bar is for creating lists. When clicking on the plus sign button, the creating a list screen would move up and you can create a list there.

Profile + Butter Balance

The “you” tab in the nav bar will have the profile, where users can easily access their followers and who they’re following.

They can also look at their butter balance, a potential new feature where users can make purchases and get points added to their butter balance. $1 = 1 point. For every 100 points, they can redeem and get rewards. Potential rewards can include cashback and $10 gift cards.

Users can also change their screen mode preference on their profile page.

The Mockups

Takeaways

Having multiple options for different things is so important for a good user experience. There is no one size fits all, and we all have our own preferences for how we view screens.