Harbuzovyi Rai

Redesigning the e-commerce website of Ukrainian craft cheese company.

Overview

I was tasked with designing an e-commerce website for a Ukrainian craft cheese company to help them sell their products online. The goal was to create a user-centric design for the main page, catalog, product page, basket, and checkout pages that would provide a simple and fast ordering experience, present information logically, and focus on the shop's offerings.

As part of my Web Design Junior course, I worked under the supervision of two mentors who provided guidance and feedback throughout the process. The design process involved creating wireframes, testing them, and iterating to develop a final prototype that aligned with the client's requirements and user needs.

Research icon

Research

Analyzed competitors and original site to identify opportunities and design issues

Planning icon

Planning

Created detailed sitemap and wireframes to restructure content and layout

Testing icon

Testing

Conducted user testing to gather feedback and validate design decisions

Design and Refinement icon

Design and Refinement

Developed a prototype of the redesigned website

Delivery Icon

Delivery

Finalized UI kit and high-fidelity mock-ups for the new homepage

Competitive Analysis

Company name Syroman Cheese mandry Seliska syrovarnya
Value proposition Craft cheese, French technology, made in Ukraine Craft cheese, organic milk, produce from small Ukrainian businesses First Ukrainian craft cheese producer, making local produce since 1994
Competitive advantages Available in multiple retail locations, including big ones, like Rozetka (online) and Silpo, and restaurants in Kyiv Large Instagram following, multiple locations in Lviv Restaurant with their own produce, they support small businesses in Carpathian mountains
Offering Cheese, sauces and jams, spreads, gift sets, sweets, snacks Cheese, alcohol, jams, spreads, granola, meat, snacks Cheese, tea, honey, mushrooms, canned food, meat, oil, fresh fruit, snacks
Price range (cheese & cheese sets) ₴40 — ₴396 ₴65 — ₴915 ₴80 — ₴1000
Marketing Social media (Instagram, Facebook) Social media (Instagram, Facebook), blog (not active) Social media (Instagram, Facebook), blog (not active)
Customer feedback N/A 4.5 (188 reviews on Facebook), 4.2 (12 reviews on list.in.ua), Good quality and service, fresh, somebody mentioned that little cheese “testers” that would come with the order, would be nice 4.6 (152 reviews on Google), A bit expensive, unique taste
Support Email, phone, Instagram, Facebook Email, phone, FAQ, Instagram, Facebook Email, phone, FAQ, Instagram, Facebook
Additional services Café N/A Restaurant, visits, degustations
Notes The only payment option is cash on delivery Slider when trying to choose cheese weight is not very user friendly N/A

Original Design Assessment

Original design of Harbuzovyi Rai's webpage showing a product quick add-to-basket feature with images of various cheeses, product price, and an option to add the item to the basket.

Through a thorough review of the original website, I identified several key design issues that were impacting the user experience and potentially hindering sales:

  • Category visibility: Categories are hidden under "shop" menu, hindering navigation.
  • Inconsistent green labels: Used for both new products and weight, causing confusion.
  • Quick preview limitations: Minimal information and poor "Add to basket" button design.
  • Undifferentiated sections: Descriptions, ingredients, and nutrition blend together.
  • Inconsistent weight placement: Located in varying places across pages.
  • Missing product information: Ingredients and nutrition not always included, impacting informed decisions.
  • Unclear discounts: Mentions lower prices for bulk purchases but no direct option to apply.
  • Vague gift set contents: Insufficient details about included products in gift sets.

Design considerations

Based on my analysis of the original website and client requirements, I identified several key areas for improvement:

01

Lighter color scheme

Evolve the current dark, Christmas-themed aesthetic to a lighter, more natural palette that aligns with the company's branding and evokes a paradise-like feel.

02

Simplified navigation

Streamline the site structure and menu organization to facilitate easier browsing and product discovery.

03

Engaging product video

Incorporate a high-quality, informative product video in the header to showcase the unique qualities and benefits of the company's offerings.

04

Enhanced product pages

Design a standardized layout for presenting product descriptions, ingredients, and nutritional details to enhance clarity and comparability.

05

Filtering options

Implement filters for product type, availability, and other key attributes to enable efficient product search and comparison.

06

Recipe inspiration

Create a dedicated recipe section to foster community engagement, showcase product versatility, and provide value-added content for customers.

Sitemap

Sitemap for Harbuzovyi Rai's website showing the hierarchical structure of pages including Homepage, Catalogue, Workshops and Visits, Recipes, About Us, Login, Basket, and their subpages and content features.

Wireframe

Main webpage with sections for header, description, popular items, recipes, about us, Instagram section, and footer with social media links.
Catalog page showing categories like cheese, sauces and jams, gift sets, and products from friends, with filter and sort options.
Catalog page showing categories like cheese, sauces and jams, gift sets, and products from friends, with filter and sort options.
Product page with large cheese image, product name, price, description, ingredients, nutritional info, reviews, Q&A section with star rating, and ask a question button.
Basket page listing cart items with product image, name, price, quantity adjustment, remove option, order summary, delivery cost, promo code field, total amount, and purchase button.
Checkout page with fields for delivery info, order summary, total amount, delivery cost, promo code field, and proceed button. Includes sections for delivery method, payment, and order review.

User Testing

Usability tests were conducted on a sample size of 6 people to identify major issues and pain points in the user experience on the top tasks:

  1. Finding products
  2. Adding chosen products to basket
  3. Checkout process

Adding to basket

“If you add to the basket on the main page or the catalogue, it would be helpful to show more prominent confirmation that you’ve added it to the basket.”

Checkout

“To make it more obvious for users that they have to choose something, you could make the button inactive or not show it to users until they choose delivery or payment type.”

Recipes

“It would be nice to show the recipes for the specific cheese on the product’s page.”

Design

Clickable Prototype

Lower, you can find some samples of the screens that I have designed for the project. For a better viewing experience, I recommend accessing the clickable prototype. This will provide a more interactive and convenient experience.

Main page featuring a header video of cheese-making, description, popular items, recipes, about us, Instagram, photos, and footer with social media links and contact information.
Catalog page featuring a variety of cheese, sauces, jams, gift sets, and products from friends. Includes options to filter and sort items
Catalog page, with a notification of a product added to the basket, featuring a variety of cheese, sauces, jams, gift sets, and products from friends. Includes options to filter and sort items.
Product page featuring a cheese product with image, name, price, quantity selector, add to basket button, description, composition, nutritional value, and recipe suggestions. Includes customer reviews and Q&A section
Basket page displaying a cheese product with image, name, price, quantity selector, and total price. Includes order summary.
Checkout page with fields for delivery details (email, name, address, phone), order summary showing cheese product with image, price, quantity, total amount, and sections for billing address, delivery method, payment, and order review.

Key Improvements in Redesign

  • Streamlined navigation with prominent product categories and intuitive menu structure
  • Added product filtering by type, availability, and other key attributes
  • Refreshed color palette to evoke a natural, inviting ambiance aligned with branding
  • Consistent layout for product pages
  • Dedicated recipe section to inspire customers and foster community engagement

Conclusion

Through this project, I applied my design skills to enhance the e-commerce website. By identifying areas for improvement, considering client requirements, testing, and creating a user-focused design, I delivered a solution that streamlines the user experience and effectively showcases the company's unique products.

Key learnings include the importance of establishing a consistent visual language through color and typography styles, as well as the potential value of incorporating user-centric features such as a "Notify When in Stock" option to improve customer engagement.

Collaborating closely with stakeholders, I ensured the redesigned website aligned with their vision and communicated the quality of their products.