UX.UI Design · Web Redesign · Personal Project · 2023

About the Project

As part of our studies, we were asked to choose a e-commerce website that needed improvement in order to redesign it and improve its user experience. Our choice was an animal products website that we identified as lacking and in need of redesign.

Problem Statement

I have identified the main issue

The current pet supplies website lacks customization and clarity, leading to confusing navigation for customers. As a result, users struggle to find products tailored to their pets’ needs, causing frustration and potential sales losses.

The consequence & the opportunities

01

Difficulty finding pet-specific items

Improve website customization and clarity to enhance user experience.

02

Increased customer frustration

Simplify navigation to help customers find relevant products quickly.

03

Potential loss of sales

Boost sales and customer satisfaction by addressing these issues.

User Research

What really matters to pet owners

A user survey gathered quantitative data on pet ownership, online shopping habits, website feature preferences, and pain points. Additionally, two user interviews offered insights into online pet product purchasing experiences, informing the redesign with user needs and preferences.

“I appreciate when websites remember my past purchases and offer relevant suggestions”

“I get overwhelmed by too many products. Clearer categories and filters would help”

Main Conclusions

Ease of navigation

Pet owners value a website that is easy to navigate, allowing them to quickly find products tailored to their pets’ needs.

Customization

The ability to customize searches and filter products based on specific pet requirements is crucial.

Personalized recommendations

Pet owners appreciate personalized recommendations that cater to their specific pets, enhancing their shopping experience.

Efficient shopping experience

A smooth and efficient shopping process, free from frustration and confusion, is essential for a positive user experience.

User Persona

Emma lives with her spouse and their beloved dog, Max. She works as a data analyst at Intel. Emma buys dog products online but is frustrated by the disorganized site and the lack of tailored recommendations. She wants a more centralized and precise shopping experience to ensure Max gets the best products and services.

  • Married, no kids
  • Tel Aviv
  • Data analysis

Pain Points

  • Too many different websites for each service - She’s busy!
  • She is looking for fair price - she’s working hard for her money!
  • She does not know exactly what her dog needs - she is not an expert.
  • She is not willing to compromise for the quality of the products- her dog is her baby.

Goals

  • A fast and easy way to order high-quality products and services for her pet at fair prices, all in one place.
  • To find exactly what her pet needs in a precise way.

Empathy Map

Thinks

  • "Am I making the right choices for Max's needs?"
  • "There must be a better way to shop for pet products."
  • "I hope Max is okay while I'm at work."
  • "I need a more efficient and reliable shopping experience."

Does

  • Works as a data analyst from 9am to 5pm.
  • Regularly searches for and buys dog products online.
  • Spends time looking for the best products for Max.
  • Feels frustrated and overwhelmed by the lack of organization on pet supply websites.

Says

  • "I miss Max during the day."
  • "It's so frustrating to navigate this disorganized site."
  • "I wish I could be sure I'm getting the best products for Max."
  • "Why can't I find everything I need in one place?"

Feels

  • Concerned about Max's well-being while she's at work.
  • Frustrated by the disorganized online shopping experience.
  • Unsure about the quality and suitability of products for Max.
  • Desires confidence in her purchasing decisions.

User Story

As a busy pet owner, I want a convenient way to buy high-quality pet products online, to be able to save time and ensuring my dog needs are met accurately.

From problem to solution

Identify challenges & pain point

In our efforts to redesign the pet supplies website, we identified key challenges and pain points faced by users. Addressing these issues was crucial to enhancing the user experience and ensuring our platform effectively met our customers’ needs.

01

Lack of Personalization

The website’s lack of personalization makes it hard for users to find suitable products, decreasing satisfaction.

02

Confusing Mega Menu

The website’s cluttered mega menu frustrates users, hindering clear communication of options and efficient navigation.

03

Information Overload

The overloaded home page overwhelms visitors, hindering quick grasp of key details and navigation.

Crafting the solution

In response to user challenges on our pet supplies website, we embarked on a redesign to deliver a seamless, personalized experience. We streamlined navigation, enhanced product discovery, and reduced information overload, creating a more intuitive platform. By prioritizing user needs and implementing innovative solutions, we elevated the shopping experience for pet owners.

Customized system

ChatPet uses advanced algorithms to deliver personalized recommendations based on user preferences and pet needs, enhancing the user experience.

Simplified & intuitive menu

Implementing a simplified and intuitive menu structure with clear labels and logical organization can greatly enhance user navigation.

Reducing home page overload

Decluttering and prioritizing content can significantly improve user experience. Streamlining the layout, reducing excessive text, and utilizing visual elements effectively.

User flow diagram

The burden of choices burdens the chooser

During the user flow diagram design, we implemented decision-making models to help users with cognitive load and the decision-making process when using the site. By addressing the Paradox of Choice, we aimed to streamline options and simplify choices, reducing user anxiety and enhancing overall satisfaction.

Wireframes

Sketching the solution

We began by sketching ideas in a notebook, later translating them into digital wireframes using Figma. Throughout this phase, we experimented with layouts to ensure consistency with the design concept, aiming for a sleek and coherent design language.

Visual Design

Blue is the closest color to truth

We explored design concepts to set our website’s tone. Using Plutchik’s Color Wheel Theory, we chose blue and orange to create an inviting atmosphere. Orange brings joy, optimism, and energy, while blue provides confidence, calm, stability, and trust. Focused on the joy of pet ownership, we aim to uplift users and reflect our commitment to pet well-being through PetBot’s innovations.

Trust

Confidence

Calm

Stability

Joy

Optimism

Energy

Warmth

Final Design

Less is more

In the final stage, we developed user interfaces for both web and mobile platforms. Our objective was to create a minimalist design focused on enhancing user experience. By incorporating blue and orange hues, we aimed to achieve visual appeal and seamless navigation.

Home Page

The homepage seamlessly integrates essential elements, offering clear organization and customizable features tailored to each pet’s unique needs.

Mobile Homepage

Desktop Homepage

Mega Menu

The redesigned mega menu offers a clear and organized structure, making it easy for users to navigate through categories and find products quickly.

Product Pages

Specific product pages, such as for dry dog food, highlight product features and compatibility with pets, offering personalized recommendations recommendations with compatibility percentages for each pet.

Quick Shop

The Quick Shop feature allows users to add items to their cart directly from the product listing, streamlining the shopping process.

Added to Cart

A clear confirmation message and quick access to the cart ensure users know their items have been added successfully.

Item Page

Each product page provides detailed information, including features, benefits, and customer reviews, ensuring users can make informed purchasing decisions.

My Cart

The cart page displays all selected items with options to adjust quantities or remove products, providing a comprehensive overview before checkout.

Place your Order

The checkout page is designed for simplicity, guiding users through the final steps to place their order efficiently.

Explore More Projects

Sanvik

Corporate website

UX

UI

Web redesign

SquidFit

Mobile App

UX

UI

One Pager

LET'S

TALK!

Don’t hesitate to contact me, I’m nice 🙂

[email protected]

LinkedIn
Behance
Instagram

© 2024 Studio desigNelly. All Rights Reserved.