Quality isn't expensive, it's priceless
The design process of creating a new website for selling pet products.
PetLift.com
The website petlift.com is an e-commerce that sells equipment and supplies for bathing and grooming animals, such as grooming tables, pet baths, dryers, clippers, among others. They offer a wide range of products for professionals and animal lovers who want to take care of their pets well-being.
High-level goals
1. Increase the sales Understand market trends and user needs being creative and effective.
2. Redesign for the website The website needs to convey strong information with an informative design.
The team involved in this project
My role
As the UX Designer in charge of the project, my main responsibility is to deliver the best possible user experience within the timeframe established by the Stakeholders.
For this, I had to make decisions regarding methodologies, processes, among others. It is also part of my responsibility to lead the design team and ensure that everyone has enough to work with and be able to produce.
Design Process
The challenge imposed by the Stakeholders of this project is the delivery of the design to the development team in a short period. Given this scenario, we decided to adopt the Design Sprint.
The Design Sprint is an adaptation of design thinking methodology and hackathon culture, packaged into a five-day sprint to help teams generate and validate ideas before committing resources.
Understand - Desk Research
The start of our Design Sprint was to map all the information related to the problem to the current PetLift website. We carried out Desk Research and Competitor Analysis so that we could immerse ourselves in the context and thus generate concepts and gain new insights.
The first results of the survey we did internally were:
70% Veterinarians and Groomers are the customers who buy the products the most.
83% Petlift customers prefer to see more quality than quantity when making a decision.
This step helped everyone get on the same page. And the next step was to document our analysis of direct and indirect competitors.
Competitive Analysis
By examining the existing pet shop platforms on the market, we can identify the main features, functionalities, and user experiences they offer. This allows us to assess how our solution stacks up against the competition and identify potential areas for improvement.
After analyzing Petlift s direct and indirect competitors, some insights were important for our conceptual design. Enduraflap has more specific products and focus on durability and quality. On the other hand, Cobasi has a wide variety of products, and its strong points are the experience at the time of purchase and useful resources such as training tips and breed guides.
Persona
We use a Persona to generate more empathy, it s a way of imagining who I would be designing for. I listed goals and needs, motivation and fears and frustrations.
Meet Ana Silva, 35 years old, resident of New York, she is a purchasing manager at a company that distributes products to pet shops. She has a degree in business administration and has over 10 years of experience in the industry. Passionate about animals, Ana has two dogs and a cat at home. She is tech-savvy and uses an Android smartphone and laptop daily. Active on social media, she communicates with co-workers and vendors through messaging apps.
Ana also follows blogs and websites specializing in products for pets. Her main needs are finding quality products for pet shops, ensuring ontime deliveries, having access to a diverse catalog, and dealing with delivery delays, low-quality suppliers, and products that do not meet customer preferences. She is always looking for solutions, setting clear deadlines with suppliers, seeking new reliable partners, and keeping up to date with the demands of the pet care market.
After analyzing Petlift s direct and indirect competitors, some insights were important for our conceptual design. Enduraflap has more specific products and focus on durability and quality. On the other hand, Cobasi has a wide variety of products, and its strong points are the experience at the time of purchase and useful resources such as training tips and breed guides.
Customer Journey Map
If Ana needed a Grooming product, how would that experience be on the Petlift website? A customer journey map is a visual storyline of how the customer engages with our product, service, or brand.
Often, the value of a product or service is determined not by a single interaction, but by a combination of them. By putting all customer interactions into a customer journey map, it can be easier to identify key combinations good or bad.
On this journey, it is noticeable that Ana found it quite easy to find the product, but her experience with it began to decline on the product page, it got worse at Checkout and in the delivery follow-up.
Problem Statement
After the research phase, we can deduce that Petlift users need a better experience on the product page, checkout, and delivery tracking.
How might we improve the user experience by understanding that the product is out of stock?
How might we improve how the user gets in touch to find out more information about a product that has no price?
How might we improve on how we inform the user about new articles and events?
Ideate
In the biggest creative step of the design process, after a meeting to discuss possible solutions, we as a team were able to provide. Followed by drafts, low quality wireframes and usability testing.
Solution
Create a label
A label informing the stock status on the product page is extremely important for users and for the success of an ecommerce site. This little piece of information plays a crucial role in providing potential customers with a clear indication as to the availability of the desired productl
Create a modal
When a product does not have an immediately visible price, it is natural for users to be curious and want more information before making a purchase decision. The modal with contact information becomes a direct channel for users to obtain this additional information, they have the opportunity to contact the company, either by phone or email, to clarify their doubts and receive personalized service. This creates a more interactive and engaging experience, establishing a relationship of trust between the company and the potential customer.
Create specific cards
Including an event card and article section on a petshop website is an effective strategy for informing and engaging users. These cards, distinguished by labels, provide an attractive and organized way to present relevant content, keeping visitors engaged and up-to-date on the latest pet-related events and information.
Mid Fidelity Wireframes
This step of inserting solutions into wireframes allows designers to experiment with different approaches and assess their feasibility before moving on to the implementation stage. Stakeholders can review and validate medium-fidelity wireframes, providing valuable feedback to improve usability, identify issues, and tweak design elements as needed.
High Fidelity Wireframes
The process of creating high-fidelity wireframes, after being validated with stakeholders, plays an essential role in the design phase of a project. At this stage, high-fidelity wireframes refined and approved by stakeholders provide an accurate and detailed visual representation of the final product.
After validation with stakeholders, high-fidelity wireframes are the basis for design implementation. They serve as a reliable guide for developers, allowing them to more accurately translate the design into code. Visual details such as colors, typography, interactive elements, and layout are carefully incorporated into the high-fidelity wireframes, ensuring the result matches stakeholder expectations. Thus, the next step is to validate the experience with real users and obtain feedback.
Usability Testing
I conducted usability testing with 8 participants over Zoom, each lasting about 30 minutes.
The objective of the test:
1- Observe if users can accomplish the specified task. If they made a mistake, can they recover?
2 - Identify areas of the app that requires a change to improve user performance and satisfaction.
With the provided feedback, I created revisions to fill the gap between my understanding of the users and what the users experienced.
100% All users were able to complete the website flows effortlessly, and the most praised feature was the product status label.
25% In a specific scenario where the screen has many products. Only two people find the coupon box just below the product cards weird.
With the provided feedback and and green light from stakeholders to improve the product, I created revisions to fill the gap between my understanding of the users and what the users experienced.
Relocating the coupon box brought new life to the product. During the next usability test, I was overjoyed to see users easily navigating the site and finding the coupon box effortlessly. The usage flow was smoother, and the positive feedback from users confirmed that the change was on the right track.
This experience taught me a valuable lesson: we cannot cling to our ego or our initial ideas. We must be willing to listen to users, accept feedback, and have the courage to change the design when necessary. This attitude is the key to creating truly useful and satisfying products.
Lessons Learned
Leading the team on this Petlift UX project was a transformative experience. We focus on creating an exceptional experience, meeting users' needs from the start. We achieved a 100% pass rate on the usability test, which reinforced our user-centric approach.
However, user feedback revealed opportunities for improvement, especially regarding one specific feature. We've listened carefully to your feedback and decided to reposition the feature to make it more accessible. Implementing this change resulted in a positive response from users.
I learned that as a team leader, my role goes beyond giving directions. It is essential to value individual contributions and be open to change. Collaboration and knowledge sharing were key to the success of the project.
This Petlift experience inspired me to strive for excellence in all future projects. I believe in the importance of involving users early on, understanding their needs, and using their feedback as a design guide.
Shout-outs
I would like to thank Robb for trusting me with this project. Elenara for having contributed, always with great responsibility and dedication. And Niraj for the great job developing all this work.
I look forward to applying the lessons learned from this project to new challenges. I believe that the combination of a user-centric process and a committed team is the key to success in any design endeavor.