Shoniz Chocolate

Website redesign for a non-profit company

Shoniz Chocolate

Our 4-member team has undertaken a voluntary project to improve the UX and UI of the newly launched website for Shoniz Chocolate, a well-established company specializing in wholesale and retail chocolate sales. The website now offers partial purchase options for both regular customers and provincial representatives, making it more user-friendly and accessible for all.

Project Overview

Project image

Problem

  • lack of online payment options, absence of a concise summary, and insufficient product details.

  • These issues hinder user convenience, understanding, and timely access to important information.

  • The issues collectively present a significant barrier to product adoption and effective use.

Goals

We aim to better understand prospective users and their needs so that we can provide:

  • Smooth and convenient navigation

  • Ability to filter and compare

  • Present carpet-related services in a better way

Challenges

  • Inability to communicate with the stakeholder

  • Finding customers who directly purchase products from Shoniz's website online

  • Lack of an online payment gateway

  • Finding a way to address the reason for the lack of online payment.

Project image

My Design Process

My team of 4 ran a double Diamond method based on the Design Thinking Methodology. It was not a linear path, we bounced between stages as the project progressed.

Project image

Discover

We conducted our research in three phases: 

  • Phase 1: Heuristic Evaluation

  • Phase 2: Survey and Interview

  • Phase 3: Competitive Analysis

Heuristic Evaluation

To get a better understanding of what issues to focus on, all four members of our team performed a heuristic evaluation of Shoniz and another websites.

The following are a few results of our investigation.

What did we find?

1. The presence of large product images on the homepage (under the catalog section)

2. Overcrowded and confusing magazine-like images that occupy a lot of space on the page and create confusion for the user

3. A cluttered and lengthy navigation bar with ineffective announcements (even if one of the issues mentioned in the announcement is important)

4. The presence of the "More Information" title next to the display details instead of "Out of Stock"!

5. Placing orders without final user confirmation and the absence of online payment option.

6. Incomplete and confusing product descriptions on the product details page

7. Random categorization and unclear titles that do not change the product categorization

8. Not displaying out-of-stock products at first glance

9. Incorrect announcements.

What can we do?

1. Designing a good information architecture that provides a seamless experience

2. Keeping the hero static will help avoid disturbing the balance or showing an unsuitable image in the hero area

3. Make membership and more detail CTA visible and easy to find

4. Creating effective and user-friendly filtering.

5. Displaying important announcements effectively and writing product details accurately and clearly.

Project image

Survey

Project image

We started designing a survey for user research, and from the results obtained from approximately 150 users who completed 15 open-ended questions in the survey, we obtained the following results:

1. Question: Which of the following factors is important to you when buying a food product?

  • Results: About 50% of users give importance to user reviews, product price, and details.

  • About 42% of users give importance to quick support, online and secure payment options.

  • About 60% of users mentioned product variety and categorization.

2. Question: Which of the following filtering options is more important?

  • Results: 50% of users mentioned "bestsellers"

  • 46% of users mentioned "price"

  • 37% of users mentioned "special offers"

  • 24% of users mentioned "product rating"

3. Question: Which payment method do you prefer?

  • Results: 68% of users mentioned online payment"

Interview

Interviews

During the ideation phase of the project, I conducted user interviews to build new personas and to inform the design. Together with the team, we prepared an interview script with 32 open-ended questions, focusing on our target audiences’ values, motivations, and daily routines. In 4 days, I recruited and interviewed 7 users remotely. We referenced the user interview findings throughout the entire design process.

  • What objectives influenced your questions?

  • How many users did you interview?

  • What were the main insights from the interviews?

  • How did you use your findings?

Define

We conducted our define and ideate step in three phases: 

  • Phase 1: User Jouney Map

  • Phase 2: Open card Sorting

  • Phase 3: Information Architecture by Sitemap

User Journey Map

Project image

Persona

Who is the user of the IAB website?

The website will be redesigned based on the persona’s needs and preferences.

Project image

Card Sorting

How do users think the website should be organized?

Project image

Sitemap

Project image

Develop

Usability and Iteration (Phase 1)

Project image
  • The initial design was cluttered with poor colors, bad images, and weak UX.

  • Our value propositions and differentiators were not clearly displayed on the homepage.

  • Product variety was not at the top; only bestsellers were shown first, followed by the magazine. This layout should prioritize product variety for easier access.

  • The Shoniz magazine initially showcased products, not aligning with user expectations.

  • Quick delivery options, a crucial feature, were placed at the bottom, reducing their impact.

  • Navigation items needed rearrangement to better align with target audience priorities.

  • The "More Details" option next to products was redundant, as clicking the product reveals details.

Usability and Iteration (Phase 2)

Project image

Deliver

High Fidelity Design

Finding a suitable UI design for the Shoniz website

The color palette we created was inspired by company branding and we can't change them. Blue and Gold are this brand's colors.

Project image

Shoniz brand & Color pallete

Final Prototype

In this section, you can check out the complete final prototype.

Project image

Reflections

What did I learn?

  • Making a good balance of users' needs and the stakeholder's marketing strategy in mind while designing

  • Effective communication with team members and leading challenging situations

What can we do next?

  • Evaluating the current design and testing it with elderly users to check accessibility

Thank you for reading my case study!

Want to work with me? Feel free to contact me!
or just say hello on my social media....