EBATES

COMPANY
Ebates. 2012-2015
PLATFORM
Desktop and mobile
RESPONSIBILITIES 
Product design, user experience design, visual design, and art direction
Ebates is one of the strongest brands in cash back shopping, but to continue growing in a competitive shopping industry, Ebates needed to update the its experience. Recognizing the divide between its web and mobile experience and today’s user expectations, Ebates wanted a redesign to refresh the way it communicated with its members. After all, online shopping should be easy, engaging and personal.
THE REDESIGN
Ebates aimed to be the one stop shop for saving you money on purchases. That meant having a seamless online shopping portal, integrated offline coupons, and an easily manageable account.

Ebates was easy (and addicting) if you've tried it once; however, the first time was the most challenging. The redesign targeted these concerns and produced a new brand and experience for Ebates.
The PROCESS
I worked with multiple stakeholders as the sole designer. We started with revising the brand through email campaigns and social media. When the open rates and likes starting consistently trending upwards, we moved onto improving merchant store page’s user experience (70% of overall traffic) and then onto new products and mobile applications.

My process started with defining goals with the stakeholders. Then wireframes and prototypes. Prototypes were a new process I introduced and it became the standard. Once the experience with finalized I moved onto the visual design.
my KEY contributions
• Brand growth
• Product usability
• Customer satisfaction
• Project-specific metrics
• Employee productivity
The NEW STANDARD
My principles for the redesign are the following. To the user: modern, trustworthy, and easy to use. For the product: clean, customizable, and has the ability to grow and adopt. For the brand: stylish and approachable.
BEFORE THE REDESIGN
Ebates’ website was built in the 1990’s and had not been updated since. As web design got better each year, Ebates became more dated than its competitors.

The website had outdated navigation conventions, a monopoly man-esque mascot, and storefronts that were functional but not inviting. These, and more, were the problems I identified and aimed to fix with the redesign.
THE DETAILS
Leading the effort was the merchant storefronts, which accounted for 60%-70% of website traffic.

The first step for modernizing the brand and website was choosing new colors and fonts. The green and orange is directly from Ebates’ existing branding. To make the transition to a new look easier for the company to adopt, I choose more modern shades of the existing colors.
Visual Element
Primary Color
Call-to-action
Primary Color
I brightened the colors to make them more approachable. My rule of thumb was to use them both sparingly to make a point. They’re for headers, buttons or important details.
Proxima Nova
I chose Proxima Nova for its versatility on digital platforms and print materials. It’s legible at small sizes on various desktop and mobile screens. It’s also stylish at large sizes for headlines and advertisements. Proxima Nova’s round style made it approachable, which lends itself well to the friendlier direction I was aiming for.
The flat trend was popular for button and navigation elements and, most importantly, I wanted to give the page more breathing room. Coupon websites tend to be overloaded with information in a cramped layout, which is not ideal for users parsing deals and navigating a page. All components were spaced apart by at least 20 pixels.
Finally I pushed to abandon the company’s cartoon mascot for photography of real, relatable people. Avoid the overly photoshopped and composed stock photo look. Go for photos taken in natural light with people you’d see on the streets.
Before (left) and redesign (right)
Driven by function
I wanted the new layout to be clean, customizable, and responsive for both desktop and mobile screens.

First, information was represented in appealing, bite-size pieces to savvy shoppers. Second, each store had relevant information for both users and our SEO and SEM channels. Finally, each component contributed to the larger design system; and the design system had to be flexible and adaptive to future iterations on the product.
THE cOMPONENTS and layout
These components were built with customization and growth in mind. For the merchants, each store could have their own special layout, components, and coupon or SEO content. Our SEO ratings skyrocketed due to this! Customers also loved it because we told them about special sales, free shipping offers, and insider tips; all unique to each store.
THE ECOSYSTEM
The redesign for the store page was a success! It improved SEO, our relationship with merchants and users, and took Ebates one step forward into the future. The brand and company no longer trailed behind its competitors. Our competitors even started mimicking the new page designs!

More importantly, this design laid down the foundation for Ebates' future. My new system set the standard for other user-facing pages, our mobile application, and future products. In fact, it’s still being used today!
The style continued to grow and contribute to additional pages, features and our mobile platform.
streamlined
The design of the ecosystem had another benefit. While I was iterating on the redesign, I was also working closely with our front-end developers to create a smooth pipeline for going from designs to implementation. We had defined typography, page layouts, and a component library.

The component library contributed to less repetition and mistakes during implementation. It also speed up future iterations because developers had previous specs and templates. Finally, it meant our components were reusable and cohesive across the site, and easily transferable to other platforms without going back to the drawing board.
Redesign Wins
The redesign transformed Ebates to a modern website and strengthened its reputable brand. Both stakeholders and current customers were positively reacting to the changes. New customers were also having a better experience using Ebates.

Internally, I had created a design library for the design team (which eventually grew from just myself to a team of 3), streamlined the implementation process with front-end development, and transitioned the company’s image into modern times.
READ ABOUT IT ON TECHCRUNCH
$1 Billion
The accumulation of Ebates’ current successes and its future potential caught the eye of e-commerce giant Rakuten. In 2014, Rakuten acquired Ebates for $1 billion, to strengthen its global presence.
takeaways from redesigning ebates
If it's not broken, why fix it?
Change can be scary, especially if the feature is considered not broken. To challenge this way of thinking, start with tackling small, but effective problems first. Once you’ve got some wins under your belt and have made teammates aware of the benefits of good design, move onto the bigger, more challenging problems.
Build a style library
During development it’s easy to have an excess of designs and code. To keep the system organized and streamline development, build a style library for both designers and engineers. This’ll also create templates for both designs and code, which will reduce minute variations between wireframes and implementation, and between each team member.
Foster feedback
It’s important to have perspectives from all functions on a design. The team was involved in a daily design critique to make sure the redesign was heading in the right direction. It caught flaws in the design early, made sure every function contributed, and prevented surprises when it was time to implement.
YOU HAVEN'T EVEN SEEN THE BEST ONE YET!