PRODUCT: Man Buns Bakery responsive website ROLE: Research, Design, Interaction DURATION: 2 months
Project Vision
Man Buns Bakery is a bakery founded by 2 formerly incarcerated men. For this project, I used a goal-directed design method developed around user personas and their needs. The result is a responsive site that allows users to select baked goods and complete a purchase journey.
Challenges
Serve as a responsive retail hub for Man Buns Bakery
Create a seamless purchasing journey
Implement an information architecture that effectively organizes bakery products
RESEARCH
Using a goal-directed design approach, I conducted qualitative research methods. This entailed a competitive analysis and a persona hypothesis construction.
I began by asking myself the following questions:
"Who is my primary demographic?"
"What do these users need the most?"
"How can I create a seamless purchasing journey?"
Meet the Users
Iris
63
Receptionist
USER 1:
Iris loves surprising her work friends with food. She needs a site she can access on her work computer and place an order.
Rayyan
38
Nurse
USER 2:
Rayyan loves to grab a coffee and snack before his shifts. He likes variety so he wants a site with many categories to choose from.
Paul
47
Lawyer
USER 3:
Paul likes to support local businesses. He wants a site that is easy to use since he's always busy.
Competitive Analysis
I analyzed four total competitors, three direct and one indirect. Each offered at least one service that Man Buns has. After conducting a competive audit I identified areas that Man Buns could improve upon:
Three of the four sites had dated design elements
Too many promotional features
Inconsistant branding
Successful takeaways from the audit were:
Smooth checkout processes
Effective subcategory organization
The option to check out as a guest
Selecting a pick up or delivery date before entering personal information
The Bundt Shoppe | Direct Competitor
Paris Baguette | Direct Competitor
Panera Bread | Direct Competitor
Target | Indirect Competitor
DESIGN
Preparing the journey
I constructed the information architecture to define the required pages. I chose a hierarchical model to accommodate the many product offerings.
Low Fidelity Wireframes
After determining the information architecture I moved onto wireframing the site. Before adding content I confirmed that all pages were built. I also ran through the preliminary user journey.
USABILITY STUDIES
User testing
Before adding content to the wireframes I conducted the first round of user testing. I walked through the site navigation with the participants and gave them tasks to complete. I received the following feedback:
There is no need for a Product page since the products are already provided on the Home page
No title is needed on the Shop page
The cart preview on the Checkout page should not have a button
The Nav bar does not need three icons
Pain point 1 | Product page
Users discovered that clicking the product offerings led them to an unnecessary duplicate page. I removed the Product page entirely. Users are now taken directly to the cart where they can select items.
Pain point 2 | No Shop title
The Shop page's title felt redundant to our testers so I removed it entirely.
Pain point 3 | Cart Preview button
The group discovered an unnecessary Checkout button in the cart preview. I removed this and kept the button underneath the form.
Pain point 4 | Nav bar icons
The number of icons on the Nav bar have been reduced from three to two.
STYLE GUIDE
I chose the color palette based on the rich browns of a cinnamon roll to match the company's main product. Once I had the two browns, I selected a muddy teal and light gray. I avoided feminine colors as the Man Buns brand challenges the connection of sweets with soft pastels.
The results of the competitive audit taught me the importance of color consistency. I observed a lack of cohesion across several brands and ensured that Man Buns would have a consistent palette.
Takeaways
I enjoyed creating a retail site that had so many items. This required a solid information architecture from the get-go. This organization made adaptation across devices seamless. Using a grid for product layout also aided in screen compatibility.
The Man Buns Bakery identity was a fun one to work with. I enjoyed creating a brand with a strong tone and message. Early rounds of testing helped me catch issues before proceeding with hi-fidelity mockups.
I was challenged with making a functional feature carousel. Completing it was very satisfying and I learned even more about components in Figma.