logo_fentons.png

Fentons Creamery

Web Design

RESEARCH • ANALYSIS • DESIGN

 

Client: Fentons Creamery
My Role:
Entire product design: Research, Conception, Visualization,
Information Architecture, Wireframing, Web Design and User Testing
Project Time: 7 weeks

 
 
 

THE PROJECT

Fentons Creamery is such a great place — it’s an historic landmark in Oakland, California, and has some of the best handmade ice cream in the Bay Area.

Fentons wanted a new website, as their old version was outdated and not responsive, plus it was hard to read and navigate on mobile devices. The old site was a complete Flash site, so the SEO needed to be overhauled as well to help them rise in organic searches.

REQUIREMENTS/BUSINESS GOALS

  • Ability for users to view ice cream flavors and menus quickly.

  • View locations and contact information easily and intuitively.

  • Ability to quickly view online store information.

  • Showcase photo library throughout the site.

Fentons also wanted the ability to make edits to their website. They needed a CMS that was simple and easy to use. Squarespace.com is one of the best platforms for doing that: the interface is very intuitive and the platform is very stable and secure. A perfect fit for their needs.

 
 

Research

USER JOURNEYS

Taking the requirements and user goals, I created users journeys.

 
user_journey.jpg
 
 

SITE MAP

Using both the business goals and the User Journeys as a guide, I completed a card sort exercise. The result is the site map below.

 
 
 

Low Fidelity Sketches

PAPER SKETCHES

Quick, hand drawn screen iterations were made to see what the initial layout might look like.

 
 

 

Wireframe Layouts

WIREFRAME PROTOTYPE

Using the paper hand drawn iterations as a guide, I worked in Sketch to create wireframe screens. I then created a clickable prototype in InVision to see how the screens would transition together. After some user testing was done, changes were made to improve usability.

 
 
 
 
 

 
 

Design

 

BRAND STYLE GUIDE

Using existing elements of their brand (logos from existing collateral) I put together a brand style guide with logo elements, a font family, and color pallet

 
 
 

HIGH FIDELITY DESIGNS & AN INTERACTIVE PROTOTYPE

Using the style guide, wireframes and the Fentons library of imagery, I designed high fidelity mock up screens in Sketch, and a clickable prototype using InVision.

 
 
 

 
 

The New Fentons Website


MOBILE FIRST, USER CENTERED DESIGN
 

The hi-fidelity designs and prototype were reviewed and approved for development. To accommodate the clients need to make in-house edits, I implemented the new website using Squarespace. The end result was a responsive, mobile-first web site.

Each of the business goal and user requirements were met:
· Intuitive and easy way for users to find ice cream flavors.
· Multiple easy ways for users to find menus.
· Intuitive way for users to find location and contact information.
· A way for users to shop products online.

I also added new organic descriptive page titles, and meta data (key words and page descriptions) throughout the website to help raise their search engine ranking, and give their website more visibility. The new website elevated their online presence and place them on page one on the search engine rankings. I will continue to review their site analytics and rework key words to organically help their SEO on an ongoing basis.

 

Feedback & ROI

Feedback from the client was fantastic! Since the site was launched, there has been a large ongoing spike in web traffic and in sales.

Our online sales have really jumped this past week. Not just gift cards, but merchandise too! It’s got to be the new site. I thought you’d like to hear that! Thank you!
— Nini Curry, Owner of Fentons Creamery
 
analytics_spike.jpg