Milette’s Cakes

Updating a website that has remained unchanged since 2014

The task for Milette's Cakes was to improve the order process and make it enjoyable for clients. The owners also wanted to update the website's design, which has remained the same since 2014.

I derived two problem statements: one for the internal users of the site (employees, #1) and one for external users (clients, #2).



Statement #1: "How do I enable the business to handle orders more efficiently so that they can optimize business operations while reducing memory load?"

The owners expressed that employees personally handled every order from start to finish, which takes a long time and problems have seldom arose from memory slips or having incorrect information.

Statement #2: "How do I empower clients to easily order with the business so that they understand the ordering process and won't feel the need to call about it."

Clients have consistently stated that they couldn't get through the company's phone lines (busy line) and there is currently no way of remotely ordering a cake without contacting over phone or through email.

Research revealed that ordering is seen as an effortful process on both ends.

I used a mobile-first approach since 60-65% of traffic were from mobile devices.

First, I conducted a heuristic analysis and cursory visual audit of the site and noted any glaring UX/UI errors. Some key takeaways and room from improvement from the analysis was:

• Superfluous amounts of (outdated) information across many pages
• Blurry (and outdated) visuals
• Lack of whitespace and visual hierarchy
• Excessive load times (>10 seconds for some pages)
• Unorganized IA
• Inconsistent typography
• Broken links and was not responsive on desktop
‍
I took a multi-methodical approach to research and focused on understanding the current site and the attitudes and pain points of the users. I ended up doing an analytics review, ethnographic research, card sort, and user interviews/testing.

Clarifying the problem: A closer look at the user flows

From the ethnographic research, I was able to deduce the two main user flows for both the employee and the client when receiving an order and ordering from the bakery respectively. An important note is the only thing on the website that potentially leads to ordering with the bakery is a basic contact form which allows for a name, email, phone number, and message.

Scrutinizing the flows revealed an over-allocation of human resources to taking customer orders.

The solution? Online order forms.

How online order forms improve the ordering process

The first challenge was "to make the ordering process more efficient, while creating a pleasant ordering experience for clients."

The order-taking and order-making processes were closely intertwined and revealed potential efficiency improvements. To address the time-consuming challenges stemming from in-person, phone, and unclear email orders, I proposed implementing streamlined online order forms accessible via the website. These forms not only consolidate essential client details for accurate pricing but also diminish the need for excessive email exchanges. Having phone/in-person orders while granting users the flexibility to place orders at their convenience, effectively eliminates the time-bound necessity of contacting the bakery during operational hours and benefiting both sides.

I modeled the forms from the physical order form and current processes, but kept it as concise as possible to meet the needs of the user. Four forms were made: General Inquiry, Cake Order, Cupcake Order, and Wedding & Consultations.

Cleaning up the UI & Rebranding

The second challenge was "to 'modernize' or bring their UI up to times...”
‍
The website was made by one of their employees back in 2014 who didn't have any background in web design or development. This means there was no design system or asset organization set in place. All assets, including vector files and photos were produced by me (except the cake photos).

UI design began by understanding the color scheme and emotional design the company should go for. Insights from research suggested certain neutrals were associated with bakeries, but there were also specific colors that the company wanted to go for. After 5 iterations and mockups, we were able to decide a color scheme and typography. I also cleaned up and redesigned their logo since they only had a blurry jpeg available. I used the original design as inspiration and incorporated the new color motif to the logo design.

Addressing photo album load times

The last key challenge, which arose from research, was the load time for the photo albums page. According to analytics, photo albums were the top viewed page, and yet took the longest to load averaging 10.2 seconds for initial openings. This problem was ostensibly due to the 1900+ photos they manually uploaded into the albums, which drastically increased load time.

Since the owners regularly post on Instagram, my solution was to incorporate an Instagram feed into the website. This helps the business owners, since they won't have to manually upload photos anymore, and shortens the website's load speed. As a result, the album page load time has become instantaneous, and instead holds ~650 curated photos.

Improved user flows led to business flow improvements

The end result helped the business flow for ordering cakes greatly. As someone who worked directly with customers, my job became significantly easier since I could now just refer customers to the online form and print out the emails instead of asking follow-up questions and writing down the customer's order by hand. The updated flow diagram below shows this optimization.