Project Overview

Mac’s meats.

Mac’s Meats is inspired by my great-grandfather’s butcher shop, carrying on a modernized legacy of quality and community. This locally sourced, premium butcher service is designed to bring high-quality meats right to customers’ doors. The website offers a seamless ordering experience for busy professionals and families in Austin, TX, who value both convenience and exceptional products.

Duration

september 2024

Problem

The idea for Mac’s Meats came from a personal need—I can only eat butcher shop meats due to my health condition, and I realized how inconvenient it is to find quality meats without easy delivery options. Austin’s butcher shops are often out of the way, so I designed an application to make it easy to browse, order, and schedule deliveries, bringing high-quality meats straight to busy people’s doors.

Goal

I go to the farmer's market every Sunday and wait in a very long line just to get my meat for the week. I created Mac's Meats with the goal of easing that pain for people who don't have the mobility or time to do that. A user-friendly platform that makes ordering these premium meats simple and accessible, so customers can get what they need and schedule deliveries with ease. I wanted to make healthy, quality food more convenient while also supporting local, sustainable sourcing.

My role

I led the UX design for Mac’s Meats, handling the user experience, interface layout, and functionality for both the mobile app and website.

Responsibilities

My role involved conducting user research, creating wireframes and prototypes, designing the user interface, and running usability tests to make sure the app and website met user needs.

Understanding the User

Mood Board

the mood board for mac’s meats was my way of immersing myself in the rustic, farm-to-table vibe I wanted to bring to life. with warm, earthy tones and imagery that speak to trust and quality, it helped me connect with the brand’s roots in locally sourced, premium meats. this process grounded the design in tradition while making it feel fresh and inviting for modern consumers, letting me truly feel the vibe I was crafting.

the mood board for mac’s meats was my way of immersing myself in the rustic, farm-to-table vibe I wanted to bring to life. with warm, earthy tones and imagery that speak to trust and quality, it helped me connect with the brand’s roots in locally sourced, premium meats. this process grounded the design in tradition while making it feel fresh and inviting for modern consumers, letting me truly feel the vibe I was crafting.

Research: Pain Points

1

Many users struggle to find the time to visit a butcher shop due to busy schedules. Moving forward, designs will focus on creating a quick, streamlined process for browsing and ordering, ensuring that users can complete a purchase in just a few clicks.

2

Users found it challenging to compare cuts and prices across different butcher shops. To address this, designs will incorporate a comparison feature that allows users to easily view and evaluate multiple products side by side.

3

Users expressed a strong preference for transparency in quality and sourcing when it comes to grocery items, especially meats. To address this, Mac’s Meats will feature a robust “About” section, ensuring users know exactly what they’re getting and where it comes from.

User journey maps

Emily is a busy, health-focused shopper who prioritizes convenience and quality when purchasing premium meats. Her goal is to save time while making choices that fit her health standards, so every action on the site should be easy and frictionless. She’s looking for a straightforward experience, avoiding anything complex or time-consuming.

persona:

Emily K.

Quickly and easily order high-quality, all-natural meats that fit her nutritional goals, without having to spend time traveling to a butcher shop or dealing with low-quality grocery store meats.

action

Action 1

Action 2

Action 3

Action 4

Action 5

task list

A. Open website

B. Navigate to desired section

C. Browse available options

A. Search for meats

B. Filter by product type

C. Compare prices + quality

A. Select preferred cuts

B. Review product details

C. Verify product quality and ratings 

A. Add items to cart

B. Review cart

C. Check delivery options

A. Proceed to checkout

B. Enter delivery info

C. Complete purchase

emotions

Curious

Hungry 

Optimistic 

Confident

Eager

Relieved

improvement opportunities

Search filter functionality 

Detailed product descriptions, reviews maybe

Highlight reviews clearly

Offer an estimated delivery time for ASAP orders

Simple payment

persona:

Emily K.

Quickly and easily order high-quality, all-natural meats that fit her nutritional goals, without having to spend time traveling to a butcher shop or dealing with low-quality grocery store meats.

action

Action 1

Action 2

Action 3

Action 4

Action 5

task list

A. Open website

B. Navigate to desired section

C. Browse available options

A. Search for meats

B. Filter by product type

C. Compare prices + quality

A. Select preferred cuts

B. Review product details

C. Verify product quality and ratings 

A. Add items to cart

B. Review cart

C. Check delivery options

A. Proceed to checkout

B. Enter delivery info

C. Complete purchase

emotions

Curious

Hungry 

Optimistic 

Confident

Eager

Relieved

improvement opportunities

Search filter functionality 

Detailed product descriptions, reviews maybe

Highlight reviews clearly

Offer an estimated delivery time for ASAP orders

Simple payment

persona:

Emily K.

Quickly and easily order high-quality, all-natural meats that fit her nutritional goals, without having to spend time traveling to a butcher shop or dealing with low-quality grocery store meats.

Action

Action 1

Task list

A. Open website

B. Navigate to desired section

C. Browse available options

Emotions

Curious

Hungry 

Improvements Opprtunities

Search filter functionality 

Action

Action 2

Task list

A. Search for meats

B. Filter by product type

C. Compare prices + quality

Emotions

Optimistic 

Improvements Opprtunities

Detailed product descriptions, reviews maybe

Action

Action 3

Task list

A. Select preferred cuts

B. Review product details

C. Verify product quality and ratings 

Emotions

Confident

Improvements Opprtunities

Highlight reviews clearly

Action

Action 4

Task list

A. Add items to cart

B. Review cart

C. Check delivery options

Emotions

Eager

Improvements Opprtunities

Offer an estimated delivery time for ASAP orders

Action

Action 5

Task list

A. Proceed to checkout

B. Enter delivery info

C. Complete purchase

Emotions

Relieved

Improvements Opprtunities

Simple payment

User personas

emily is a 24-year-old realtor in south congress who needs a convenient way to purchase high-quality, all natural meats because her busy schedule leaves little time for grocery shopping, and she wants to avoid chemicals found in grocery stores.

Emily K.

  • Realtor

  • South Congress

  • Single

"Emily is a social, budding realtor in South Congress. She spends most of her time working, working out, or socializing. She doesn't have a lot of free time to get high quality meat."

Goals

  • Eat an all natural and nutritious diet to prioritize muscle production

  • Avoid the tasty chemicals they have in the meat at the grocery store

Frustrations

  • Butcher shops nearby have crazy hours, and when Emily does have free time, she doesn't want to spend it getting meat.

  • Quality of meat at the grocery store is not edible and makes her break out.

Description

Emily is a realtor in South Congress. She loves to spend time with friends. and on self care when she isn't working. Emily plans on ordering from Mac's Meats on a weekly basis to avoid the long haul to the butcher shop when she has much better things to do.

Emily K.

  • Realtor

  • South Congress

  • Single

"Emily is a social, budding realtor in South Congress. She spends most of her time working, working out, or socializing. She doesn't have a lot of free time to get high quality meat."

Goals

  • Eat an all natural and nutritious diet to prioritize muscle production

  • Avoid the tasty chemicals they have in the meat at the grocery store

Frustrations

  • Butcher shops nearby have crazy hours, and when Emily does have free time, she doesn't want to spend it getting meat.

  • Quality of meat at the grocery store is not edible and makes her break out.

Description

Emily is a realtor in South Congress. She loves to spend time with friends. and on self care when she isn't working. Emily plans on ordering from Mac's Meats on a weekly basis to avoid the long haul to the butcher shop when she has much better things to do.

Emily K.

  • Realtor

  • South Congress

  • Single

"Emily is a social, budding realtor in South Congress. She spends most of her time working, working out, or socializing. She doesn't have a lot of free time to get high quality meat."

Goals

  • Eat an all natural and nutritious diet to prioritize muscle production

  • Avoid the tasty chemicals they have in the meat at the grocery store

Frustrations

  • Butcher shops nearby have crazy hours, and when Emily does have free time, she doesn't want to spend it getting meat.

  • Quality of meat at the grocery store is not edible and makes her break out.

Description

Emily is a realtor in South Congress. She loves to spend time with friends. and on self care when she isn't working. Emily plans on ordering from Mac's Meats on a weekly basis to avoid the long haul to the butcher shop when she has much better things to do.

Starting the design

Sitemap

the sitemap for mac's meats keeps things straightforward. users can easily navigate from the home page, browse meats by category on the menu, and check out the about section to learn more. the account page makes order management simple, and the cart is all about a quick, easy checkout. everything is built to make finding and ordering quality meats hassle-free.

the sitemap for mac's meats keeps things straightforward. users can easily navigate from the home page, browse meats by category on the menu, and check out the about section to learn more. the account page makes order management simple, and the cart is all about a quick, easy checkout. everything is built to make finding and ordering quality meats hassle-free.

Paper wireframes

i sketched paper wireframes for both the website and iphone app in goodnotes, starting with the logo to keep branding consistent. the design emphasizes simplicity, with clear paths from browsing to checkout and easy order tracking. using responsive design, key elements like the logo, navigation, and product categories adjust smoothly across screen sizes, ensuring a seamless experience on both desktop and mobile.

Digital wireframes

for the digital wireframes, i focused on a clean layout with intuitive navigation, making core product categories accessible and product information easy to scan. peer feedback helped refine call-to-action buttons and optimize space for improved flow and readability. the layout adapts responsively across screen sizes, ensuring a seamless experience on both mobile and desktop.

Mid - fidelity

for the digital wireframes, i focused on a clean layout with intuitive navigation, making core product categories accessible and product information easy to scan. peer feedback helped refine call-to-action buttons and optimize space for improved flow and readability. the layout adapts responsively across screen sizes, ensuring a seamless experience on both mobile and desktop.

Usability Study

Parameters

Participants

the usability study included 5 participants who aligned with mac’s meats target demographic of busy, health-conscious individuals interested in convenient, high-quality food options.


Objectives

the study aimed to assess the ease of navigation, ordering, and checkout flow, ensuring a seamless and intuitive experience for users placing meat orders.


Tasks

participants followed a script guiding them through browsing products, adding items to the cart, and completing the checkout process unmoderated.

Findings

1

users mentioned that while they found the navigation simple, they often felt lost and wanted a clearer way to return to the previous page.

2

a navigation improvement was achieved by adding back arrows to each page, giving users an intuitive way to return to previous screens. this simple addition enhanced the user experience by preventing any feelings of being “stuck” while exploring the site.

3

based on feedback, i added a reviews section to the product pages, giving users added confidence in their purchase decisions with insights from other customers. this change aligns with the need for transparency and builds trust in the products.

Refining the design

Mockups

Before Usability

After Usability

the goal for the mockups was to create a clear, user-friendly interface that enhances the shopping experience. Based on feedback, i increased text size for readability and added more prominent buttons for smoother navigation and key actions, like adding items to the cart. these updates make the shopping journey more intuitive and efficient.

Final mockups

AccessIbility considerations

1

mac’s meats was created with a focus on users who require high-quality, butcher-sourced meats for health reasons, providing an inclusive service often lacking in the food delivery space. by addressing dietary restrictions and specific health needs, mac’s meats ensures that users with unique conditions can access reliable, high-quality products that support their well-being.

2

every product image includes descriptive alt text, allowing visually impaired users to gain a full understanding of each meat cut, its source, and quality. this ensures that all users, regardless of visual ability, have access to essential details, supporting informed purchase decisions and a seamless shopping experience.

3

the site employs high-contrast text and clear visual cues throughout the design, enhancing readability for users with low vision or cognitive disabilities. these elements make navigation and key actions, such as adding items to the cart, straightforward and accessible.

Going Forward

Impact

this app tackles a real need for convenient access to high-quality, locally-sourced meats, something that’s especially personal for me. every sunday, i make the trip to the farmers market—no easy feat when dealing with musculoskeletal issues—just to find food that fits my dietary needs. this platform would be a game-changer, simplifying that entire process and making quality meats available at the tap of a button. with clear navigation, larger text, and features like user reviews, the app delivers a user experience that’s straightforward, reliable, and invaluable for anyone looking for top-notch products without the weekly trek.

going forward

throughout this project, i learned that while projects like this may not be the most intellectually challenging, they’re essential for building solid design and research skills. Each time I work on something foundational, i gain new insights into my design process and refine my approach. these experiences are key to growth, helping me develop a strong UX foundation that I can build on in future, more complex projects.

Next steps

1

first, i would find a developer or work on developing the platform myself to bring the design to life.

2

next, i would collaborate with a local butcher to secure a steady supply of high-quality, locally-sourced meats.

3

finally, pitch the app to potential users at the farmers market, using business cards and marketing materials to spread the word.

sydneygrignon@gmail.com

© 2024 sydney grignon all rights reserved.

sydneygrignon@gmail.com

© 2024 sydney grignon all rights reserved.

sydneygrignon@gmail.com

© 2024 sydney grignon all rights reserved.