Casa de Chocolates Website Redesign: a Case Study

What the site looks like now

Casa de Chocolates is a chocolate shop in Berkeley, California. They specialize in Mexican Chocolates and Desserts.

You can shop on their website casadechocolates.com

Setup

Our task at Casa de Chocolates was to create a more modern, user-friendly site that integrated seamlessly with social media and that would attract more customers.

The current site wasn’t generating enough revenue. The client wanted to increase sales, and improve user experience. The site also had bugs and was difficult to update and edit content. It was being hosted on Wordpress using Woo Commerce, and the client mentioned not really finding the Wordpress platform helpful.

Goals & Objectives

  • increase revenue
  • increase online traffic
  • simplify checkout process
  • further establish brand.

Team

Rubi, a product manager, and I teamed up for this project. My role was a UX+UI designer and at times, a Visual Designer.

Design Process

Initial Research

Since Casa de Chocolates already had a website, the first thing we did was thoroughly examine it to identify the problem areas with the existing website and the purchase flow.

The Original Site

The necessary content was available for the most part, but the content required more focus, there were links that led to pages without meaningful information. The main view of the landing page was the hero image, but the image carousel was too small to really have an impact on the user.

There were also two menus, which could cause confusion in that users may not know where to start. While social proof is great and their site showed awards, they seemed a bit out of place and bigger than some of the product images.

Although an initial thorough analysis of the original website gave us a better idea of improvements we could make, we had yet to access the challenges that users were facing when shopping on the site.

Were users encountering any problems when trying to purchase items? What prevented them from completing their purchase? What were their thoughts on this process?

We started with a short usability test. At a cafe, we got 3 volunteers to go through the site and “purchase” a box of bonbons, and tell us the reasoning of why they were doing what they were doing. We asked for first impressions of the landing page, and then asked a few questions about how much trust they had in the Casa de Chocolates brand after they had completed their fictional purchase. The key takeaways from this test were:

  • The images were not displayed in the most appealing manner, they didn’t do the chocolates justice. There was some images that were cropped, and they were small compared to some of the other items on the page.
  • A popup appeared when you added an item to the cart that mentioned the errors that could happen, which was not reassuring to customers, and would prevent them from actually ordering.

Wireframes and Prototypes

Before designing the landing page, I wanted to first focus on creating a better user flow when it came to the purchase process. Better how? Well disabling the popups, and the random error messages was a start.

The first thing we did was stop using Wordpress, and migrated the shop to Shopify.

I’m a big fan of Shopify, their UI is one of the best that I’ve worked with as far as e-commerce goes; as a small business owner, I appreciate their simplicity because it allows me to focus on the difficult task of managing a business. When I suggested it to the client, they found the UI of Shopify much easier to use than that of Woo Commerce.

The best part was that Shopify already has a really great checkout process that varies very little in each theme, so aside from the branding and minor customizations, that task was taken care of by the transition. I’ve found it’s usually easier to start from scratch rather than learn someone’s project, I know that’s not always how it goes, but I got lucky this time.

Site Map

As mentioned before, there were two menus on the original site, which gave the illusion of many options, but most of these links directed to the same place. We wanted to simplify this, and give a more intuitive shopping experience so that users could directly focus on what they came to the site for: buying chocolates.

Site Map I created

Once the site map was established, we completed a competition analysis. The websites we looked at were Recchiuti’s and Kollar Chocolates. The websites we looked at reflected a lot of what we were already planning to do, so with that reassurance we began wire-framing.

Wireframe created based on other e-commerce sites

Picking a theme:

Given the small budget, we definitely wanted one of the free themes — luckily you’re able to customize those as much as you like. We wanted something simple and standard, one of the stakeholders was very attached to the previous website, so we didn’t want to stray too much from it.

I chose two themes that were structured similarly to the wireframe we had, and once I added the products, I was able to tinker with each theme on the Shopify Customize page. This allowed us to create a prototype really easily.

Theme #1:

Theme #1 landing page
Loaded faster and was more responsive on mobile.- I. Promi

Theme #1 resembled the previous website more, it had a lot of options for customization, and allowed us to display a lot of products. Despite Theme #2 getting more positive feedback, the client initially chose this theme for its more conservative approach.

Theme #1 product description page and collection page.
More coherent hierarchy of information made it easier to find the 24 bonbons 
-O. Thi

We didn’t expect the client to favor the old website design more than our new one, and it wasn’t until someone else got involved (on the client’s end), and a few more walk throughs, that they saw the benefits and improvements of the new sites powered by Shopify.

Theme #2 :

Theme #2 landing page
Feels less cluttered, better typography and visual hierarchy.- A.Chen

This one was my personal choice, and I’m glad we ended up going with this one. It’s more modern and I like how the product pages are structured a lot more than Theme #1.

Theme #2 Product details page
Cleaner interface — modern look and simple design. -D. Ante

Constraints

No project is perfect, and sometimes problems arise that cause the deadline to be pushed back maybe once, or twice.

dribbble shot for when the site was originally scheduled to be published (content changed a little)

Aside from that, most of the issues we faced were due to a small budget, and limited time.

Because it’s a small business, they were also limited with staff so not all stakeholders were present at meetings were big decisions were made which caused some issues due to miscommunications.

It was a learning experience.

Sidenote: Style Guide

style guide created for marketing and future design changes

Most of the branding decisions were made before I began working with them.

The logo and typography had been created and chosen, so I made different variations based on the original logo. I put everything together in a style guide and chose the colors for the site.

The colors for the site were chosen for their warmth and earthy tones. We wanted something that resembled their shop in Berkeley, which has exposed brick.

Results

We sent out a google form with links to both the Shopify site aka Theme #2 (Website A) and the Wordpress aka original site (Website B). We asked users to compare both sites and the experience of buying a box of chocolates on each site. Here’s some highlights:

Survey Results
Our survey sample was diverse in ages!

We asked users to also share their age with us, because we want the site to be usable for everyone. Our responses were really diverse, which is great because loving chocolate has no age.

Since the website has just been published, I don’t have results on how it has improved sales, but I will be adding that to this article in a few weeks.


Casa de Chocolates was a very unique opportunity because I got to design for something that really matters to me and shapes who I am: Mexican Chocolates. 😂 🍫

I learned a lot about UX strategy and thoroughly enjoyed working with a product manager. However, I also learned that these aren’t the type of design problems I want to be solving.

E-Commerce is great, but I’ve worked on projects similar to this before. There’s a lot of documentation on how to build these types of projects online, and I realized I want to be creating solutions to new problems (ones that don’t have a lot of documentation).

So now that this project has been published that is the type of work I’ll be pursuing.

🙏 Thank you for reading this post, comment below with any comments or questions, and clap!