Mr Coffee

The company: Mr. Coffee

Mr. Coffee, a well-known and established brand of in-home coffee makers was losing ground against their competition– coffee house franchises–as evidenced by year-over-year product sales being down.

My role:

Senior Visual Designer, Consultant

My responsibilities:

Tools:

Adobe PS

Adobe IL

Demandware

The project:

Create and launch a fully responsive online commerce site, including original visuals supporting the client's marketing campaign of “Bring the coffeehouse home,” to promote the Mr. Coffee brand and boost year over year product sales.

Deliverables:

The team:

Creative director
Project manager
UX designer

Success metrics:

Improved YOY product sales
Increased user engagement

Discovery

Mr. Coffee was an incredibly fun project to work on. Being such an established brand, the client had clearly defined color pallets and imagery, but their foray into the online commerce world was fairly new at this point. Their store was built on a highly customized, dated software platform that badly needed page speed improvements, image optimization, an SEO overhaul, and overall best ecommere practices implemented across the site. The site also did little to communicate the personality of Mr. Coffee's brand identity, so there was a great opportunity there for design elements to shine.

High fidelity mockup of the new Mr. Coffee online commerce site

Bring the Coffeehouse Home branding illustration with warm brown tones, an illustrated chalkboard, and coffee beans

3 examples of the mobile view of the Mr Coffee online shop

Custom illustration

The Mr. Coffee team had independently researched the phrase "Bring the coffeehouse home." and was ready to hit the ground running with that campaign. I was asked to incorporate it into my designs for the ecommerce site, and to create a warm and welcoming look and feel across the site. I created mockups with chalkboard illustrations, warm colors in the "coffee" family, and homey textures like wood and fabric throughout the mockups.

Success outcomes

My team and I met the project requirements on time, including:
• Mobile-first product page designs commerce experience
• UX UI collaborate to create information architecture
‍
I individually delivered:
• Original illustrations, hand-drawn and digitized, within Mr. Coffee brand standards
• Collaboration with engineers on technical feasibility of designs
• Presentation of final design concepts to client

Mr. Coffee's newly branded ecommerce site launch was a success. While I wasn't directly involved in SEO or page speed optimization, these metrics greatly improved, allowing our new site to reach a larger audience and improve the onsite experience for customers.

The client was really pleased with the visuals and the way that the brand was expressed on their new and improved online store; the team added new elements from my designs to their brand standards documentation. As a designer working as a consultant, this was not only a confidence boost, but also gave me some invaluable experience working with well-known brand names.