_______________________________________________________________________
Nayeli Valeria Vázquez Herrera
Psychologist/Researcher
_______________________________________________________________________
Sugar Doggos, UX case study
Creating a website to buy pet clothes
_______________________________________________________________________
About Sugar Doggos website
Sugar Doggos is a small Mexican pet clothing company looking to extend its reach by creating a website where it can sell its products. This website seeks to be simple and user-friendly.
The purpose of the website is to allow people to make online purchases of pet clothing; as well as provide users with access to information such as: product characteristics, size guide and delivery methods in an easy and simple way.
_______________________________________________________________________
Project Description
_______________________________________________________________________
Goals
Determine if the Sugar Doggos website is user-friendly.
Determine if users can complete the purchase process on the website.
Analyze if users easily identify the size guide section.
Determine if users can complete the purchase process on the website.
Analyze if users easily identify the size guide section.
Discover if users can easily understand the different delivery methods for their purchases.
_______________________________________________________________________
To carry out this project, the Design Thinking methodology was used, which consists of five main phases shown below.
Source: Medium
_______________________________________________________________________
Empathize
The first step was to empathize with the users who usually buy at Sugar Doggos. Being a small company whose presence is solid on social networks (especially Instagram), this network was chosen to contact seven frequent customers and interview them.
From these interviews, two personas were built that served as the basis for creating the website.
Personas
With the creation of personas, user journey maps were created in order to understand the user's purchase flow and the main challenges it faces.
_______________________________________________________________________
User Journey maps
_______________________________________________________________________
Competitive Analysis
A competitive analysis of three websites that sell pet clothing was carried out. Petco, Benito Moda and Pet Pals Boutique.
Of these companies, Benito Moda and Pet Pals Boutique are the most direct competitors of Sugar Doggos due to the small-medium size of the companies.
From the competitive analysis, it was found that:
_______________________________________________________________________
Define
Taking the characteristics of the empathizing phase and the competitive analysis, the objectives of the sugar doggos website are the following:
Design a user-friendly website that guides the user in a simple way through the entire purchase process.
Create a "size guide" section that is easy to understand for the user, with different visual resources and a section for personalized and tailored orders.
Offer different delivery options (delivery and pick-up) in order to meet the user's needs.
Create a website with a defined and recognizable brand identity for users and that takes accessibility options into account.
_______________________________________________________________________
Ideate
During the ideation phase, I worked with the site map, first sketches of the website on paper, as well as the digital wireframes.
Site Map
Paper Wireframes
Some paper wireframes
Digital Wireframes
Adobe XD was used for the creation of digital wireframes and prototypes.
Some of the most important digital wireframes of Sugar Doggos website
_______________________________________________________________________
Prototype
Based on the digital wireframes, the first lo-fi prototype was created. The testing phase was carried out with this prototype.
Conceptual low-Fidelity Prototype
_______________________________________________________________________
Testing
The objective of the testing through a low-fidelity prototype was to determine what were the main problems that a user experiences when interacting with Sugar Doggos Website.
Various KPIs were used, such as user error rate, abandonment rate and system Usability Scale.
The study was a moderate usability study and 5 male and female users between 18 and 50 years of age participated.
The participants carried out the process of interacting with the prototype through 4 tasks. At the end, they answered a questionnaire to report their experience.
At the end of the tests, the main information collected was the following:
Main findings
Additionally, it was found that most of the people interviewed found the website useful and reported that they would use it frequently:
Bar graph recording user responses. The scale goes from 1 (strongly disagree) to 5 (strongly agree).
Bar graph recording user responses. The scale goes from 1 (strongly disagree) to 5 (strongly agree).
Low-fidelity prototype modification
After testing and knowing the main results, the pertinent changes were made to the low-fidelity prototype.
Main Page
Image on the left: first version of the prototype. Image on the right: new version (in green the modifications made are indicated).
Page that notifies you that a product has been added to the cart
Image on the left: first version of the prototype. Image on the right: new version (in green the modifications made are indicated).
Delivery method
Image on the left: first version of the prototype. Image on the right: new version (in green the modifications made are indicated).
Size guide page
Image on the left: first version of the prototype. Image on the right: new version (in green the modifications made are indicated).
Mockups
The next objectives within the research were to create a high fidelity prototype that allows users a better interaction.
Below are some images of the prototype.
Conceptual high-Fidelity Prototype: main screens
Conceptual high-Fidelity Prototype: main screens
Design System
Some of the components and colors that were used.
High-Fidelity Prototype
This prototype follows the flow of buying a sweater and the process of home delivery as the delivery method chosen.
_______________________________________________________________________
Results
The first version of the website was released to the public.
_______________________________________________________________________
Next Steps
-A second test needs to be carried out to determine if the hi-fi prototype has made progress in the right direction as far as the user experience is concerned.
-It is also required to verify accessibility options for people with disabilities.
_______________________________________________________________________
Learnings
1. One of the main things I have learned from this project is the benefits of working with Adobe XD for designing websites.
2. It is exciting to know that research, psychology and technology can be combined with the aim of offering better products and services and help companies to grow.
3. Working with a small company with the aim of making it grow is a challenge, but also an enriching experience as a UX designer and researcher.
_______________________________________________________________________
Thank you for reading
I'm Nayeli Valeria, a UX Researcher living in Mexico City. I am passionate about research. Connect with me on LinkedIn and let's talk.
_______________________________________________________________________
