Mile High Pie Co.

Redesign for a small Colorado bakery, improving visual appeal and information architecture.

Case Study:

ROLE: personas, copywriting, style guide, user testing, user journey, prototyping

TEAM: Brad Davis, Juliet Noory, Riley Wooten, Celina Caffarelli, and Cheri Buxman

TOOLS: Figma, Slack, Google Drive, Zoom, Pen & Paper

TIMELINE: May 2023

LINK TO DESKTOP PROTOTYPE

Overview:

PROBLEM STATEMENT:

No holiday meal is complete without the love and laughter shared over a delicious piece of pie. Pie shoppers need to know how they can purchase their product quickly and easily.

Mile High Pie Company is a small Denver bakery focused on the wholesale market. Their current site greets users with a bare bones design that does not reflect the warmth and fun of their brand and their purchasing page is seemingly non-functional.

How might we improve the site's visual design and the function of the purchasing user flow?

BUSINESS GOALS FOR THIS PROJECT:

Number of visits to site increased by 20%.

Task completion rate reduced to 1 minute or less.

Cart abandonment rate reduced to 57% or lower.

Average annual transactions per user raised to .15 or higher.

Conversion rate raised to 4.49% or higher.

Add to cart rate raised to 8.54% or higher.

Timeline of Design Process:

User Research

Definition & Synthesis

Prototyping

Final Iteration

Journey Map

Affinity Diagram

Heuristic Evaluation

User Testing

User Persona

Competitor Analysis

I like/I wish/what if?

Card sorts

User Flow

Wire-frames

Mood Board

Lo-Fi mock up testing

Style Guide

Hi-Fi Prototype testing

User Research

Ideation

Visual Design

Understanding Our Users:

TESTING & EVALUATING:

As empathy driven designers, we wanted to understand our users' experience of the current site. We kicked off our exploration of with a HEURISTIC EVALUATION and 5 remote USABILITY TESTS on Zoom.

"Why is all of the pie sold out? This is so frustrating!"

Susan Davis

(pie enthusiast and test user)

PRIORITIZING:

Sorting our feedback into a PRIORITY MATRIX helped us hone in on the features we would tackle in this redesign.

FOCUS AREAS FOR THIS PROJECT:

All pie seems to be sold out, because online ordering is poorly explained.

Retail options are difficult to find.

The catering form does not load.

The page is very plain (there are almost no images of pie).

The navigation bar is confusing.

The “About Us” and “FAQ” tabs don't share much information about the company or how the pie is made.

USER PERSONA & JOURNEY MAPPING:

We synthesized our findings into a USER PERSONA and JOURNEY MAP that helped us empathize with shoppers' needs and pain points.

Meet Martin Miller...

Martin is a therapist who just moved to Denver. He loves to throw big holiday parties for his friends who also live far away from their families. He particularly misses his mom's strawberry rhubarb pie and wants to serve it for his guests...unfortunately, he is not a good baker.

"Farmer’s Markets are my happy place, but I always wait till the last minute...

Now I'm panicked!

Will I be able to order online?"

Martin Miller

(User Persona)

Research:

A Competitor Analysis yielded potential solutions for information architecture.

We also drew inspiration from how written copy could be a company's "voice" to tell a story that expresses their values.

Ideation:

We had our areas of focus from our affinity diagram...now it was time to brainstorm about how best we could address these issues.

To improve information architecture, we conducted a “I LIKE/I WISH/WHAT IF?” brainstorming session. This yielded the addition of a page dedicated to Farmer’s Markets and retailers, as well as consolidating "About Us" and "FAQ" into the homepage, giving the company more of a brand voice to tell its unique story.

We incorporated this into multiple CARD SORTS, resulting in an improved user flow that allows the user to shop last minute and support local business with ease.

Prototyping:

WIREFRAMES:

With our new user flow as a guide, we built WIREFRAMES using pen and paper, and then converted them to low fidelity digital mock ups on Figma. This was done with the goal of understanding whether our choices were intuitive to the user.

We tested our low fidelity digital mock ups and iterated accordingly based on feedback.

Visual Design:

MOOD BOARD:

Our MOOD BOARD used the pie’s packaging as inspiration. The gingham and playful typeface on the pie box evoked picnics in the park and 1950’s diners.

To replace the plain black and white blocks of the header and footer, we played with various textures like the wood planks of a picnic table or the chalkboard of pie specials at your favorite greasy spoon.

STYLE GUIDE:

Many of these themes arrived in our final STYLE GUIDE...with the chalkboard idea winning out, because it provided texture without being visually distracting.

We incorporated the same playful typeface for headers, careful to set them in a size large enough to address accessibility concerns. Setting the headers at an angle reflected the visual language of a diner’s menu.

A critique of the original site noted the lack of product images. We scoured the company’s social media for mouth watering images of Mile High Pie. We selected a beautiful berry pie for our hero image with inviting raspberry and plummy hues. We drew our analogous color scheme from that image, using raspberry for our buttons and gingham borders.

We tackled issues of clarity by adding written copy to explain the ordering process and images and iconography to guide the eye to important information on the page. The company story takes pride of place on the homepage and is written in the founder’s voice along with his headshot to drive home the “down-home," personable feeling the brand strives to achieve.

Having applied our style guide to create a high fidelity mockup, we returned to more user testing. Feedback included adjusting some text color and size to improve legibility, but overall, the response was positive.

HIGH FIDELITY SCREENS:

We applied our style guide to our high fidelity prototype, which again was tested and iterated accordingly. Below are examples of the screens.

LINK TO DESKTOP PROTOTYPE

Results:

At the conclusion of this project, our team delivered a style guide and a high fidelity Figma prototype consisting of 4 screens that we believe clarified the purchasing process while expressing brand values through color, texture, typeface, text, and imagery.

As this was a UX/UI bootcamp project, we were unable to gauge the efficacy of our design on our KPIs. In practice, we would recommend using Google Analytics to track visits to site, bounce rate, time spent on page, and cart abandonment. Heat mapping through Crazy Egg to monitor user activity is also advisable.

This project taught us how every visual component from typeface to texture and from color to copy can express brand voice. Additionally, we appreciated the importance of user flows in creating greater ease for the user.

There are no future plans for the project at this time, but it was submitted to the owner of Mile High Pie Company who expressed interest in adopting the redesign in the future, time and budget permitting.

CASE STUDIES/HOME