My Gluten Free Muffins

Making a mobile-focused ecommerce site to sell allergy-friendly muffins

I've been gluten free for a decade.

I made some of my favorite Gluten Free muffins for a group gathering (all gluten eaters) and they insisted I needed to start selling them online, because they were SO delicious (they are). And I thought it would be a fantastic and fun project to practice the UX process more!

Problem: Gluten Free products are often seen as overly expensive, disappointing, and sometimes unclear about the "safety" of the product.

How can I best provide a delicious, affordable safe product, with transparency about ingredients?

Solution: Create an online store providing freshly baked, delicious, and easy to buy gluten free muffins with transparency about all the ingredients used.

My Role: UX Designer & Stakeholder

Tools: Figma, Miro, InVision, Unsplash, Instagram, Google Forms, Zoom, Pinterest, Coolors.co, pencil, paper

Research

Some of the Online Competition

The Competition

I started by researching the competition both direct and indirect. What are they doing differently? How many offer Gluten Free? What do prices look like? Do they offer shipping or delivery?

INSIGHTS:

There are LOTS of online options for baked goods, and most offer some kind of gluten free option.

But many were local and only brick and mortar. The ones that DO offer shipping usually had a flat rate, and recommendations to keep fresh

Keeping the baked goods fresh & the shipping cost down, was one of my main concerns. So to see that only a few larger brands were able to successfully offer that, made it feel reassuring, to me.

Survey Data from Google Forms & Instagram

Gathering Survey Data

Most of my life I've been health conscious. It's second nature to me. I don't see "gluten free" as necessarily bougie or health conscious, but I sense that others do.

Instead of making assumptions, I needed to get a more realistic view about people, online baked goods, and food allergies. I sent out several surveys.

How many people actually have food allergies? Do they know someone that has allergies? Would they ever order baked goods online? What are the top fears when ordering online?

I used Google Forms and Instagram
I got 20 responses to my surveys
80% have or would order online
100% have or know someone with a food allergy
INSIGHTS:
The biggest pains and concerns when shopping online: Food Safety & shipping cost

Interviewing gluten free shoppers.

A couple friends in Atlanta used to/currently eat gluten free. I wanted to hear from other people, what makes them choose to avoid foods, and how they feel about online baked goods for special diets. I set up an interview for each, over Zoom.

What do people want from an online muffin store? What are their biggest concerns when shopping for gluten free baked goods? Have they shopped online before? How was that experience? What would they need to see online to feel safe to order?

These two women LOVE baked goods, and tend to make from scratch because they hate the "garbage" in the mixes and in the stores.
Only one had ordered online before but it wasn't specialty and they would do it again.
I was most curious about the intentions behind ordering online. Was it convenience? Special occasions? trust in the product? trust in the source?
Both were especially concerned to order gluten free or any other specialty because of the ingredients. They felt uneasy not being able to see everything
INSIGHTS:
What is the absolute most important thing they are looking for, when ordering baked goods online: Price, Reviews, and Safety

Who am I serving?

User Persona in Figma

Meet Liz Murphy

After speaking with my crew in ATL, I focused on the types of people that would need/want my gluten free muffins. I, and my friends, first found "Gluten Free" through our gyms nutrition guides.

I kept us in mind when creating my persona. I'm no longer an aggressive gym goer as I once was, but felt these muffins would be especially appealing to someone like that. Convenient, healthy, and delicious.

Liz Murphy was born
She's a young professional, who stumbled into the health & strength world, but has quickly become rejuvenated by the change in her mind and body
Liz wants to be strong AND feed her body well
Gluten Free is easier these days (there are more and more options every day), but it can still feel like a chore when it comes to snacks and delish baked goods

User Journey Map in Miro

Liz's journey through my store

I wanted to fully empathize with Liz and understand what her frustrations, goals, and pain points might be when searching for online baked goods.

What matters most to her? What does she need to see in order to feel safe?

I used a template in Miro to help guide my thoughts
My focus remained on the data from surveys and interviews
How can I make sure Liz's experience is easy, and enjoyable?
How can I set her mind at ease when buying online?
Always keeping Liz and the data in mind, helped me keep the focus where it needed to be: health, safety, and ease of buying muffins online

Sketches to Wireframes

Sketching out Mobile Wireframes

Sketching some ideas...

I wanted the website to be mobile focused. I had been avoiding mobile out of fear, and wanted to tackle those fears with this project.

Sketching always helps me ease into the design aspect. It helps ideas become more tangible and real.

What is most important to Liz? How can I help her decide on trying my muffins? What kind of layout would be most clear?

The data from interviews and surveys were at the forefront of my thoughts.
I made 2 different versions of each page.
I focused mainly on the landing page, the ingredients page, and store page

Moodboard in InVision

Gathering inspiration

I felt excitement to design, and wanted to gather images in a Moodboard to help inspire me with colors and motifs.

I found inspiration on Pinterest & Unsplash and put together a moodboard using InVision

I loved the idea of pastels & warm floral bakeries

Pumpkin puree is the base of my muffins and I wanted some of the autumnal feel that pumpkin always generates

Style Guide in Figma

What kind of style...

Once I got a true feel for the vibe I wanted, from my Moodboard, I started figuring out colors, fonts, and specific photos I wanted to use for the website.

What would help me best showcase me and my store?

I used Figma to build a Style guide of typography, photos, and color palette

I used Unsplash to find free photos to use

I searched for fun, and whimsical fonts using Figma

Coolors.co helped me find a earthy, warm, & pastel color palette

Hi-Fidelity Homepage Wireframe in Figma

Hi-Fidelity Wireframes

After putting together so much inspiration in my Moodboard, and style guide, I couldn't wait to start on the hi-fidelity wireframes. I focused on clean, clear pages and content.

I want to instill trust, not overwhelm any visitors with too much noise on the pages.

I used Figma to design and prototype
I slowly built each page and overlay, keeping Liz, and the data in mind
I started with 3 main screens: home/about, ingredients, and store
I placed "call to action" buttons on each page, incase the user was ready to shop
Contact buttons were on the bottom of each screen
I decided on contact form overlays instead of full pages, because it felt less invasive and more convenient to be able to exit out of the screen
The contact form overlay had interaction to show what it would look like to fill out the form and submit
I also showed interaction in the store, with some check out screen overlays
You can see all the hi-fidelity wireframes below!

Prototypes & User Testing

Hi-Fidelity Clickable Prototype in Figma

Hi-Fidelity Prototype

I made everything clickable, except the Instagram link in the contact sections

I used Figma to build the clickable prototype

I linked overlays for the shop and the contact forms

I still need to build out the account info & checkout pages

Testing the usability

As always I was incredibly nervous yet eager for the User Testing. It's always incredibly crucial to get some fresh eyes on my design.

I was able to get 3 User Tests
We used Zoom to meet, and record the tests
We tested the Hi-Fidelity Prototype
All three testers made the target group because all 3 have some form of dietary requirements: gluten intolerance, and lactose intolerant
"It was clear, and I could buy quickly"
"I loved the colors"
"It's your best work yet!"
"I love the ingredients page. It makes me feel safe in ordering from you."
The feedback gave me the confidence to build out more overlays in Figma, keeping with the themes I had already used

What I learned

I had been avoiding mobile-versions because of some weird fear around them. This project helped me overcome that fear, by just diving in head first!
It REALLY helped to sketch first. Once the sketches were on paper, the Wireframes in Figma just flew out of me!
I watched a lot of YouTube tutorials about mobile design to help me get through the nervousness, and they helped TREMENDOUSLY
I was especially nervous about the User Testing, because I felt unsure about the design, so getting nice feedback REALLY helped my confidence!
Mobile isn't as scary as I was building it up to be. Just like with desktop, one step at a time
I want to do a desktop version next, and add more pages, like the checkout overlays, the account info, etc...
When I find a job that allows me to work remotely, I want to build the ACTUAL website, and start selling muffins for real!