Redesigning the Theobroma website

Right off the bat, I’m not affiliated with Theobroma in any capacity, and the views for this case study are strictly my own. Since I don’t have full access to all the user data that influenced their current design, this case study is not fully comprehensive. This case study was done to enhance my learning experience and challenge me to redesign it to serve a specific purpose.

What is Theobroma?

Theobroma is a Parsi family-owned patisserie and bakery that is well-known for its bread and desserts. Theobroma deals in items like chocolate truffle pastry, overload brownie, choco-chip brownie, pound cake, dense loaf, walnut brownie, and more on offer.

Why Redesign?

I use to visit Theobroma bakery frequently to buy different bakery products but when Covid-19’s second wave started increasing in India, I ordered the products from Swiggy or Zomato. Once I thought to try Theobroma’s desktop website. I opened the website and my first reaction was WHAT IS THIS?! The desktop version was not at all good. And there were a lot of flaws that needed to be rectified.

I have used many bakery websites before too but I faced a lot of trouble navigating through it and finding irrelevant stuff. The veg/non-veg symbol was too small to be visible. The order online button didn’t work. If I want to buy something then it would redirect me to another page. There was no ‘add-to-cart’ option on the website. Also, the design felt outdated with poor organization, labels, layout, and inconsistency.

After this exploration, I set out to reimagine the Theobroma website and improve the experience in any way I could.

GOALS AND MOTIVATIONS FOR THE REDESIGN

My goals for the redesign:

• To deliver a natural, intuitive and personalized experience user interface(UI)
• Propose a more engaging and seamless reading experience so that users can seamlessly access the bakery products and other services like contact us, find us so on on the desktop version of the website.

My personal goals:

• Take full accountability for the various roles involved in designing a product such as a User Researcher, User Experience Designer, UI Designer.
• Enhancing my learning experience by challenging some design decisions and addressing their solutions.

Theobroma’s HomePage Analysis

I decided to do an in-depth analysis of the homepage first. I wanted to understand the functionalities, overall architecture, and navigation.

Through the analysis, I was able to identify some clear usability issues and pain points. I listed all of them to validate them after my User Research.

DEFINING THE PROBLEM

After identifying and analyzing pain points through user research, I defined the following pain point that most users had trouble with.

Pain Point 1- There is no price written on the products.

If you use the desktop version of Theobroma’s website, then you will notice that the price tags are missing so he/she will never know the price of the product they are willing to buy. They have to first click on the product which will take the user to a new page where the price and related details are present. It represents bad UX design.

Pain Point 2- Veg/non-veg symbol is missing

The user must know the food he/she ordering is either vegetarian or non-vegetarian. And to represent whether a product is a veg or non-veg we use the green/red dot. These symbols are either missing or are barely visible because of the contrast conflict with the food’s image contrast. This is another example of bad UX design.

Pain Point 3- Confusing and cluttered UI

Most of the users complained that UI is confusing. It was hard for them to find a particular thing. Font and spacing in the website are inconsistent and irregular. Most of them found the body text font small and the heading font quite large, leading to a terrible reading experience.

Pain Point 4- There is no add to cart option

A user cannot order more than one item at a time. For example, if he orders a chocolate brownie and also wishes to add red velvet cupcakes, she/he cannot do that.

IDEATION AND PAPER PROTOTYPING

Affinity Mapping

Next, I compiled all the feedback, insights, and pain points listed above. This helped me brainstorm and develop potential ideas and gave a clearer view of what was important to users while keeping the business goals and objectives in mind.

Paper Sketch

For paper wireframes, I carefully went through the UI of Theobroma’s website and noticed the most essential things which needed to be added to the homepage. After making some observations, I sketched out all the possible layouts and finally came out with the one that worked the best. This allowed me to prototype solutions for the main screens before committing to high fidelity designs.

UX SUGGESTIONS

1) Addressing ‘Prices’ on the items

On the original website, the prices are not mentioned. I tried adding the prices and ongoing discounts(if any) on the items.

2) ‘Non veg/Veg’ logos are not present

The ‘Non veg/Veg’ logos are either not present and if present then they are not visible. This reflects the inconsistency of the website.

3) No indication on the navbar

There is no indication on the navigation bar on which section of the page are you on. This is a very minute detail but I think it is important to mention it.

4) Colour contrast used in the website and the CTA are not correct

5) The arrows used in the image carousel are not visible enough

The arrow in the original website is barely visible to the user. In the redesign, I tried to add a black gradient in the background to show that there is a carousel and the arrows are visible too.

Additional info

1) Made a new colour design

The colours combination used in the website are dull and the contrast is not enough. I tried creating a new colour palette for the website which is more vibrant and comparably high contrast.

2) Added Find Us option on the homepage

The ‘Find us’ option is used on a website to locate the location of the store. If there are multiple outlets of the store in a city, the ‘find us’ option helps find that store nearest your location. I felt that ‘find us’ is essential to keep on the homepage, in the original website ‘find us’ is only placed in the top navigation bar.

3) Made ‘Add to cart’ option

In every e-commerce platform, ‘Add to cart’ is very essential if a user wants to buy more than one item so that the user can pay the bill once s/he has done choosing the items s/he needs to buy. On the original website, ‘Add to cart’ was missing so I considered adding it.

4) Added Account option

On the original website, there is no option to make an account. I think there should be an option of making an account so that the user's order history can be saved on the website and records can be maintained.

5) Integrating a WhatsApp bot to make orders

Nowadays, integrating automated bots are in trend but they also make the work more simple for the users. If there is any assistance they need they can simply talk to the bot. I tried integrating the WhatsApp bot by which a user can simply put his order via Whatsapp chats.

New Theobroma website

Reflection and lesson learned

Initially, I was a bit nervous as I knew this would be a lot of work. But, despite my fear and nervousness, I knew this was the perfect opportunity to showcase my design skills.

Looking back on the whole process, redesigning the homepage and working on this case study reminded me that users are always the centre of every design decision and the impact the smallest of a thing can have, such as changing an element’s position. I learned about figuring out what works and what doesn’t and implementing them, and the best part is doesn’t end. The learning process is continuous.

And that’s a wrap. Thank you for reading!

I had a lot of fun doing this project, and I hope you enjoyed reading it too. Be sure to 👏🏽 below (You can give 50 claps at once, click and hold on the clap button) and leave your comments and suggestions.

If you have any feedback or want to chat with me, drop me a message at yash.yashlko@gmail.com or connect on LinkedIn or Twitter