Madison's Home Bakery 🍰
Madison's Home Bakery (M.H.B.) is a company offering home-baked, home-delivered goods in NYC.
CHALLENGE
For this project, I was tasked with creating medium fidelity desktop wireframes for M.H.B's upcoming website. Unlike a typical bakery, M.H.B. does not have a brick and mortar store. Everything is baked by Madison herself.
The goal was to create wireframes that were conducive to an easy and intuitive user experience while remaining adaptable for future stylistic decisions and strategic updates.
*I also ended up designing a logo for M.H.B. to place at the top of each page's top navigation.
ROLE
UX Designer, Graphic Designer
Research 🔍
I began by discussing with Madison what she envisioned for the site and researching various other bakery websites. I made sure to look at both larger baking companies and smaller home-baker businesses.
I compiled some of my favorite designs and layouts for inspiration and created a sitemap using what I learned from talking with Madison.
M.H.B Sitemap
Ideation 💡
After the initial research and discussion, I decided the 5 most important pages to wireframe would be:
1. Home
2. Contact
3. About
4. Shop
5. Individual Item
I then got to work, sketching out ideas and finalizing the medium-fidelity designs.
Some ideation sketches for home/shopping pages.
Logo Design ✍️
Here is the simple logo I designed for M.H.B. I noticed that many bakery logos used more decorative scripts as their typefaces. They add a sense of friendliness and individuality to a brand's identity.
I also replaced the "o" in Madison's name with a chocolate chip cookie to make it more unique. The design is simple and recognizable but also adaptable since the cookie could be swapped out with another treat (like a macaron).
Here are some alternative designs I created for M.H.B. that highlight other baked goods (a macaron, cupcake, and chocolate truffle) while retaining cohesion with the primary logo.
Final Wireframes 💻
Home Page
Medium Fidelity Design
I spent the most time developing the wireframe for M.H.B's homepage. After all, this would be the page with the most elements as well as the most visited page on the site.
The most important and most each-catching aspect of a bakery's website should be the delicious pictures of baked goods. I illustrated this in the homepage's design by making the images large and prominent. I also made the hero section a slideshow so that Madison would be able to feature multiple items/images.
Contact Page
Medium Fidelity Design
For the contact page, I designed a simple form for users to fill out and added a section to showcase other contact options and social media links.
*Social media accounts are vital to any business's success, but especially important for small, home-based businesses.
About Madison Page
Medium Fidelity Design
As you can see, I kept the "About" page's design simple, leaving a large space for a picture of Madison. Pictures do a lot of heavy lifting in helping customers empathize with business owners so I thought, the bigger the better!
I made sure to add a CTA to the contact page and prominent links to M.H.B's social accounts as well.
Shop All Page 1
Medium Fidelity Design
After the "Home" page, the "Shop All" page was the most complex page to design. I kept the hero section from the homepage but altered the layout so that it was a simple asymmetrical text/image design with a CTA to try out the featured item.
Next, I designed a fixed filtering accordion menu and drop-down sort that were easy to understand and typical of other retail site designs.
I also added a "featured" section partway down the page to break up the monotony of the 3x3 rows of items.
Individual Item Page
Medium Fidelity Design
The individual item page took a lot of inspiration from other bakery desktop designs.
Baked goods often need to feature longer descriptions including things like ingredients, allergens, and customization options. I made sure to give adequate space for these elements while still showcasing the item images and other purchase suggestions prominently.
.jpg)
Shop All Page 2
High Fidelity Example
To help demonstrate the adaptability and overall look of the site, I added color, pictures, and more decorative fonts to the "Shop All" page's wireframe. (All of the pictures were gathered from various baking blogs across the web.)
I think the result indicates the success of my initial design goals. The page feels clean and classic without sacrificing friendliness. The baked-good pictures also feel like the star of the show.
It's also clear that the style of the website can easily be altered in the future by updating the photos/colors/typography.
Reflection 🪞
Retail websites are all about getting users to become customers. I realized throughout the design process that M.H.B's uniqueness lies in Madison's delicious baked goods. The purpose of the desktop site is simply to get those goods into the homes (and mouths) of New Yorkers with as little resistance as possible.
Once that was clear, I was able to hone in on usability and creating simple, modern, intuitive layouts for my wireframe designs.
