Montilio's Bakery E-Commerce

 

Overview

The purpose of this project was to determine an effective information architecture strategy for Montilio's bakery to allow for e-commerce. This design was completed over 2 weeks.

Goals

Provide an e-commerce website that makes it easy to purchase baked goods online.

My Role 

I was the sole designer on this project.

Tools/Skills

Pen/Paper, Axure, Card Sorting

User Research

I conducted 5 user interviews. My users said that they mostly bought baked goods in-store. When I asked them why that was the case, they said that they were usually picking up something on the go. The two users that picked up baked goods in-store only were not offered an online ordering option at their respective bakeries. The other three users that placed online orders did so out of convenience or because their bakery was out of state. 

After conducting the interviews, I had each of my users navigate through Montilio's website and give me feedback. Some of the common themes were:

  • Users were overwhelmed by the choices given to them for cakes
  • Pizzeria and Bakery don't seem like they belong together
  • Difficult to find photos of their work and when they did find them they were not pleasing photos
  • Search function resulted in broken html
  • Huge header kept getting in the way when scrolling
  • No one knows what Presidential white cake is
  • Unable to find prices
  • Icons are not clickable

Based on their feedback, it was obvious that the site was not organized and left users asking a lot of questions.

“I could live on this website and never have found everything.”
— Nick B.
 

Persona Development

 
Screen Shot 2018-04-24 at 8.32.42 PM.png

Marissa needs a cake; but there are so many options.

Marissa called the bakery to order a cake. She is planning a party and is very busy. When the bakery asked her, "What flavor of icing would you like?" Marissa asked, "What are my options?" The bakery said, "Oh, we have so many you'll have to go online to see them all." Marissa said, "Okay, I'll go do that and call you back." Marissa went online and saw that the bakery not only had many options for icings, cakes, sizes, etc. but the site itself was difficult to find what she needed.


Screen Shot 2018-04-24 at 8.49.19 PM.png

Marissa discovers Montilio's website

Marissa goes online to check out a different bakery called Montilio's. She's heard a lot of good reviews about this bakery. She likes that their site is organized and you can order baked goods online easily. She also likes that she can order a cake online according to her specific needs.


Screen Shot 2018-04-24 at 8.45.51 PM.png

Marissa: "Cake=Happiness"

Marissa picks up her cake for the party. The cake was made according to her instructions she provided Montilio's. She enjoys the cake very much and will be ordering from Montilio's again.

 

Problem Statement

Busy people need a way to order online because going to the bakery or having to call to place an order is time consuming.

The Struggle was Real

I performed 4 closed card sorts with participants that ranged from basic understanding of baking to a pastry chef. Some of the challenges of getting items organized were questions like:

  • Is a cheesecake classified as a cake or a pie?
  • Where should we find Boston Cream Pie?
  • What is a torte?

After multiple rounds of card sorting, I decided that this is how the site would be organized. I separated the Wedding section apart from the Bakery section because Montilio's is well known for their wedding cakes and thought that should be its own separate category. Users were confused as to why a bakery also sold pizza and my thought was that sounded like a separate business and could possibly have its own website. After consulting with the business, I learned that the pizzeria was essential to their business. They had first started out as a pizzeria, then switched to a bakery, and now with this generation of owner they do both so I needed to keep both on the same site.

Site Map

Screen Shot 2018-04-25 at 12.20.12 PM.png

How to order a cake

Along with organizing the bakery site to allow for e-commerce, I also wanted to tackle the cake ordering process. Currently, customers call Montilio's to place a cake order. When they call, they are asked a series of questions regarding the type of cake, cake flavor, icing flavor, fillings, etc. While this is their current method, I don't think its the best method. After researching their Yelp reviews, customers were saying that Montilio's had got their order wrong. I couldn't help but think that since it's being done over the phone, something got lost in translation. Having an online ordering system could potentially help solve this problem. However, this area requires more research than I was able to do in the allotted time. This was relevant to creating an e-commerce site for them because having to list 3 million + cakes was not feasible. I first made this map of all the steps a customer would go through to order a cake.

 For those doing the math, users have 3,041,280 choice of cakes. Once you combine that with decorations on the cake, the choices are infinite. 

For those doing the math, users have 3,041,280 choice of cakes. Once you combine that with decorations on the cake, the choices are infinite. 

Competitive Analysis

During my research phase, I also wanted to see what other local bakeries were doing for e-commerce. I began researching Konditor Meister. Konditor Meister offers cakes online but the ones listed come just as they are. They don't allow for modifications on the decorations. They do allow customers to choose size, flavor, and inscription. I liked this idea but I also had to keep in mind that so much of Montilio's business comes from customized cake ordering. In addition to taking those elements that Konditor Meister had been doing, I wanted to add a feature that would allow customers to upload an image of how they want the cake to be decorated so that Montilio's could review it and then contact them with a quote. If it was a cake decorated with a template, no need to have a quote and the customer could just order it online. 

People eat with their eyes

As mentioned earlier a number of users had stated that they felt that Montilio's was not a professional bakery based on photos they had seen of their work. Photos were the first item users went to look at. They want to see what kind of work you do before ordering. Konditor Meister on the other hand has photos of their work that look much better due to the following reasons:

  • Lighting is better
  • Cakes being photographed at the same angle for more uniformity
  • Backgrounds don't distract from the subject

Because I am a food photographer, I wanted to illustrate how much of a difference this would make, especially when selling products online. The left is Montilio's current photo of their red velvet cupcake. The right is the photo I took of the same cupcake but with a backdrop and better lighting.

 

Sketching/Iterations

Next, I started to sketch the layout of the site based on the site map. I also wanted to make sure that the header menu I created did not obscure the user's view. I also wanted to think about how to make ordering a cake online an easier process than compared to ordering via phone or in-store. I decided to add a progress bar to the "build your cake" function because I heard from users that they thought the process seemed too long and they weren't sure how many steps they'd have to take in order to get their cake. 

There were three main iterations concerning the "build your cake" function.

  •  Users did not see the cart turning from black to green when adding an item to the cart. I added a pop-up screen to alert them that they could continue shopping or checkout.
  • Users thought that the black circles on the progress bar were clickable. I changed it so that the circles were filled in so it didn't look like a button. 
  • In the original design, there was a floating box containing your order that would build as the user went through the process. However this was a problem because users were focused on the progress bar on the left and never saw this other box on the right. I redesigned it so that both processes were happening at the same time in the same location.
Screen Shot 2018-05-24 at 11.15.33 AM.png
 

Prototype

 

This design was not a "piece of cake"

I struggled with this project. It was difficult because with only so much time I think I bit off more than what I could chew in two weeks. To be honest, the project was a lesson in information architecture so I should have just focused on that aspect. I wanted to do that AND create the build your cake function for the website. Looking back on this project, it was also a lesson in time management and getting to that MVP. From this I have learned to create a project plan and stick to the plan.