Purrberry website redesign
Project background
Purrberry is a luxury pet clothing brand that aims to be the ultimate destination for pet owners seeking to pamper their furry companions with top-quality clothing and accessories. Their mission is to encourage love to all animals without discrimination from adoption or breeding. This website redesign serves as their way to showcase the unique brand identity, provide comprehensive information about their products and manage inventory.
Problem statement:
Purrberry's current website does not effectively facilitate an engaging shopping experience. Users report difficulty navigating the site, locating product information, and completing purchases. The website’s design is outdated and lacks a cohesive aesthetic that aligns with the brand's modern and eco-conscious identity.
Project goal:
The objective is to design a new, user-centered website for Purrberry that enhances the overall user experience and aligns with the brand’s values.
Key objectives:
Reflect Brand Identity
Clearly communicate Purrberry’s commitment to high-quality, eco-friendly products through a modern, cohesive visual design that appeals to the target audience.
2. Improve Navigation
Create an intuitive and user-friendly navigation system that allows visitors to easily find products, read descriptions, and access information about the company’s sustainability efforts.
3. Enhance Shopping Experience
Develop a streamlined and efficient purchasing process, including a responsive design for mobile users, to reduce cart abandonment and increase conversions.
4. Increase Engagement
Integrate interactive elements such as customer reviews, product recommendations, and educational content about eco-friendly pet care to foster a deeper connection with the brand.
5. Optimize Performance
Ensure the website is optimized for fast loading times and reliable performance across all devices and browsers.
Creating personas
Following the identification of the key objectives of the website redesign, I created two personas to represent the targeted clientele of Purrberry. Each persona plays a crucial role in identifying specific features that enhance the shopping experience, increase engagement and create an increase in conversion rates.
Some of the key features that are important to our personas are:
-Ability to locate products easily.
-Locate information on the brands mission.
-Read product reviews to narrow their search.
-Locate information to keep them up to date with the latest trends and sales.
Wireframing & Prototyping process
With the personas created and the key objectives identified, I began the wireframing process. For this website, I envisioned a few different ways I wanted the screen to layout and progress as the user navigates the page. I sketched out some ideas, selected my favorites and turned to Figma to begin imputing them digitally.
As I started creating the wireframes, I immediately discovered some important design changes I wanted to implement such as: a large banner that features the current latest products, a section that states the brands mission, a product feature section and direct links to stay up to date with their social media. Upon completion of the initial wireframe, I create two more to test out different user flows. After a few iterations, I landed with a stream of wireframes which led me to the user flowing testing stage.
Usability testing phase
Once I had a satisfying user flow demonstrated throughout my low fidelity prototype, I conducted a usability study to test a list of questions I wanted answered:
Locate the “featured product” section.
2. Locate where to find the brands mission statement.
3. Locate where you can find the brands Instagram feature.
Iteration
After the usability study was completed, I decided to iterate on a few elements to improve the user flow. I started by adding a section near the header that describes the brands mission, added in a “featured product” section, and created a new section near the footer that features the 8 most recent Instagram posts from the brand.
Another important iteration I included was the shortening of descriptions on the page. In my original designs, I included lengthy descriptions about products and the brand. This felt too busy and would lead to users feeling overwhelmed and increase the rate of abandonment.
Final product
Key features:
Featured product section
This section showcases the newest product collection to be featured on the home screen. When users hover over the “Shop” section, a featured link has been added as well.
2. Social Media Integration
An Instagram feature was added near the footer that displays the 8 most recent posts. Two small icons were also added in the header that provide direct links to the brands Instagram & TikTok.
3. Search Functionality
A search bar and advanced filtering options were added to help users find specific products quickly.
4. Product Reviews and Ratings
Customer reviews and ratings for products to help users make informed decisions.
5. Inventory Management
Tools for tracking stock levels, managing product availability, and handling orders.
6. Order Management System
Features for managing and processing orders, including order status updates, returns, and exchanges.
7. Customer Support
Support options such as live chat, email, or phone support to assist customers with their inquiries.
8. Analytics and Reporting
Tools for tracking store performance, sales metrics, customer behavior, and other key data.
9. SEO Optimization
Features to optimize product pages and content for search engines to improve visibility and attract organic traffic.
10. Content Management System (CMS)
A system for managing and updating website content, including product descriptions, blog posts, and landing pages.
Before & after
This before & after showcases the changes I made to the homepage header. Upon opening the website, the header image filled the entire first section & left users feeling overwhelmed. I resolved this by resizing the header image to about half the size, which allows for more content to be immediately visible upon opening the website.
As you progress down the website page, the next section showcases the featured collections and announces the brands mission statement. This section came with a few changes that created a more consistent brand identity and a simplified amount of content for the user to consume. I started by rewriting the description under “unleash your pets style quotient” to be more clear and concise. I then redesigned the mission statement section by replacing the busy image with a colored background that aligns with the brands color standards, removed the emoji and rewrote the mission statement to be more clear.
After some iterations, I found that featuring a brand image with an extension of mission statement enhanced the user flow and added to the brands identity.
The next section is meant to highlight two of their best selling products, but I found that the original lengthy description led to users feeling overwhelmed by the amount of content they needed to read. I changed this by shortening the description of the products and removed the section break that added unnecessary content to the page.
The remainder of the content below are features I added to the page to aid in sales conversion rate and to boost their social media. This section features 8 newly added products and the brands Instagram’s 8 most recent posts. The only addition to the original footer is the added email sign up section.
