GOAL:
       
     
I. Primary Persona
       
     
I B. Secondary Persona
       
     
II. Site Map
       
     
III A. User Flows | Gelato Homepage
       
     
III B. User Flows | 'Shop'
       
     
IV. Journey Map
       
     
V. Wireframe Sketch | Gelato Homepage
       
     
VI A. Omnigraffle Wireframe + Annotations | Gelato Homepage
       
     
VI B. OG Wireframe + Ann. | Shop: Order Online
       
     
VI C. OG Wireframe + Ann. | Shop: Join the OGC Club
       
     
VI D. OG Wireframe + Ann. | Shop: OGC Gift
       
     
VII. Visual Design | Homepage
       
     
       
     
GOAL:
       
     
GOAL:

As the story goes, Organic Gelato and Coffee [OGC] envisioned building a company with uncompromising craftsmanship AND accessibility. They didn't want LA traffic and parking to impede on the experience of enjoying fresh gelato or amazing coffee. After conducting an ethnographic study on eight potential users, OGC agreed they would also sell and deliver their goods online. The lean UX process was undertaken and the result is an enhanced online ordering experience for OGC customers.

The process for building the enhanced experience is shown in the following 13 slides, beginning with the results of consumer research [see immediate slide to the right: 'I. Primary Persona'] and ending with a video of a user testing the online 'Shop Experience' prototype [VIII].

I. Primary Persona
       
     
I. Primary Persona

The UX process began with user interviews on the potential eight users, followed by a card sorting exercise. The data collected was used as the foundation on which the OGC personas were created. The primary OGC persona is Gina, a busy interior designer working in Santa Monica. She enjoys the ease of surprising both her team members out on jobs and thanking her clients around town with gourmet gelato and coffee.

I B. Secondary Persona
       
     
I B. Secondary Persona
II. Site Map
       
     
II. Site Map

The Site Map was designed with quick purchase ability in mind. Users can actually purchase any product straight from the Gelato, Coffee, Shop, and Shopping Cart navigation tabs.

III A. User Flows | Gelato Homepage
       
     
III A. User Flows | Gelato Homepage

The following two slides showcase potential user actions. 

Gelato Homepage: signing up for the OGC newsletter, exploring OGC products, and adding those explorations to the cart.

III B. User Flows | 'Shop'
       
     
III B. User Flows | 'Shop'

Users have the option to purchase gelato and coffee online, sign up for a monthly OGC subscription, as well as buy OGC products as gifts all under the Shop navigation tab. The top user flow is on overview of what a user might experience when navigating the Shop page. The second flow is specific to 'Online Ordering.'

IV. Journey Map
       
     
IV. Journey Map

Gina's journey map is a representation of all possible touch points users could have when ordering from OGC.

V. Wireframe Sketch | Gelato Homepage
       
     
V. Wireframe Sketch | Gelato Homepage

Prior to designing in Omnigraffle, wireframes were collaboratively sketched by the team.

Pictured: the OGC Gelato Homepage with a series of overlays.

VI A. Omnigraffle Wireframe + Annotations | Gelato Homepage
       
     
VI A. Omnigraffle Wireframe + Annotations | Gelato Homepage
VI B. OG Wireframe + Ann. | Shop: Order Online
       
     
VI B. OG Wireframe + Ann. | Shop: Order Online
VI C. OG Wireframe + Ann. | Shop: Join the OGC Club
       
     
VI C. OG Wireframe + Ann. | Shop: Join the OGC Club
VI D. OG Wireframe + Ann. | Shop: OGC Gift
       
     
VI D. OG Wireframe + Ann. | Shop: OGC Gift
VII. Visual Design | Homepage
       
     
VII. Visual Design | Homepage
       
     
VIII. Shop Experience Prototype & User Testing

The OGC shopping experience can be broken down into ordering online, joining the OGC club, and sending OGC gift. All three experiences were designed to be accomplished in three steps for learnability, memorability, and efficiency.