Website Redesign

Tatsu Bengals is a category of purebred Bengals. Bengals are adorable, intelligent and playful cats that are usually exotic and entertaining. This beautiful lap leopard will spend many enjoyable years being like no other pet you have ever had. Tatsu Bengals love people, children and other pets and will fall you around the house much like a dog does.

Tatsu Bengals started in 2006 with a few kittens and eventually grew by word of mouth and using various platforms. Tatsu Bengals is a small Bengal Cattery that cares about the well-being of their pets and the happiness they bring to their humans. They are very selective and will only place out kittens and retired adult Bengals with good families that share the same values.

Tatsu Bengals wants to educate people about Bengals, and allow others to easily find available kittens, see sold kittens, and view testimonials from previous buyers.

‍

Goals

Tatsu Bengals needed a responsive redesign of their website that could deliver clear, informative and easy navigation to their users. Tatsu Bengals wanted more visibility and have traffic generated to their online presence.

Objectives

• Optimize website for varying screen sizes (desktop, tablet, and mobile)
• List current bengals that are available
• Educate user with bengal facts
• allow customers to enquire about animal and place a hold on bengal
• Keep website design and experience consistent with brand across all platforms
• Homepage should have a clear call to action
• Drive sales and provide a destination for customers to research about bengals
• Gallery of bengals

Problem

• Tatsu Bengals needs a way to list current kittens availability and minimize key information so users can search through the website flawlessly
• Branding color needs a revamp - should be simple, fun, and friendly
• Overall brand should be modern and clean

Solution

A redesigned modern website will eliminate the difficulties of users and will enable pleasurable user experience. Redefining information architecture by taking user-centric approach will helps users locate to specific information without having any trouble.

Direct & Indirect Competitors

I initially started my research by knowing and understanding Tatsu Bengal's competitors to evaluate their strengths and weaknesses. Researching similar breeders, cattay, and adoption sites, I did competitive analysis. I examined their websites focusing on visual elements, structure, responsiveness and visibility of call to actions. Comparing the direct competitors and indirect competitive analysis, provided strategic insights into the features, functions, flows, and feelings evoked by the design solutions used and gave insight understanding of the facets of competitors’ products, allowing me to strategically design a solution with the goal of making a superior product and/or experience for the user.

After gaining insights from competitive analysis , I conducted a second research method - user survey to better understand the user needs, wants and features desired on a breeding website. This research method I used helped me better understand what the user is expecting on a website. I chose participants who have purchased a pure bred animal from a purebred business.

Few questions that were asked on the survey are the following:

• When looking for a purebred, which outlets do you use?
• What parts of the process were difficult?
• What made them difficult?
• What information do you look for from a breeder?
• What features would be important to have on a breeders website?

Now the findings of the survey are as follows:

Outlets used to look for purebreds

• Website - 78%
• Word of Mouth (friend) - 52.6%
• Facebook - 21.1%

Pain Points

• Outdated information
• Terrible website design
• Websites not user friendly
• Lack of communications

Important features to include on a breeding website

• Images - 100%
• Contact information - 100%
• Informational Content - 94.7%
• Availability - 78.9%
• Waitlist - 57.9%
• Testimonials - 47.4%
• Chat feature - 26.3%

I conducted user interviews to better understand their needs, wants and what frustrations they have with current design of the website.

Research included participants who search and shop for purebreds online. The interviews were conducted in person and remotely using zoom. 5 interviewee's participated in this research phase. Each interview lasted about an hour giving each participant equal amounts of time to answer questions and give feedback.

The interview participants purchased a purebred within 3 months / Participants included males and females with ages ranging from 30 - 60.

‍Research Findings:

The participants felt the following were a need for the development of a successful website:

Needs

Availability - 4 out of 5 participants said availability is a must and should be updated and accurate to have a successful search. According to the survey, 79% of the participants voted availability as a high priority. One participant mentioned even showcasing the least likely wanted animal “discount animal” to purchase.

Price - 3 out of 5 participants said a price range being visible on the site would help to give the customer an idea of animal pricing.

Participant #4 mentioned the idea of a price range. “I wish breeder websites could post their pricing so when I search I am not wasting my time. It doesn’t have to be a set price but perhaps a price range so it gives me an idea.”

Information - 4 out of 5 participants said the content information is ideal to have updated and easily accessible when searching through a breeder’s website. According to the survey, 95% of participants voted for content information as a high priority. 

Information that is ideal is as follows: (About breeder, pedigree, medical, health guarantee, contact, payment information, and animal personalities)

Participant #5 stated, “The website content should be fresh and up to date. It's frustrating for me especially if I have my heart set on wanting a new pet.”‍

Images - All participants said they enjoy looking at beautiful images of the animals. Images need to be colorful, visually appealing, and within close range to the animal. According to the survey, 100% of participants voted images as a high priority feature.

Waiting List - 2 out of 5 participants said there should be a waitlist that is functional and easy to use with no flaws. Potential pet buyers want the ability to wait in line for their chance to purchase. According to the survey, 58% of the participants voted for a waitlist feature.

Additional Features - 1 out 5 participants mentioned possibly adding these features to a breeders website. Having the ability to book an appointment to visit the breeder and see the animal in person would be helpful. Having a chat feature where the user will be able to communicate with the breeder for any questions a customer may have. One participant suggested a live camera. 

“When I purchase a pet, it would be nice to be able to see a live recording of how the animal behaves and interacts.” - Participant #5

Pain Points

Lack of Information - The least liked about a breeders website is the lack of information and outdated content. 4 out of 5 participants said they would leave the breeder website if the content is outdated or lacks information when searching through the site.

Outdated Inventory - 3 out of 5 participants said that it can be a negative and frustrating experience when animal availability is not up to date. One participant said, “I don’t want to waste my time on a site when their availability is not updated. It shows unprofessionalism. At least invest in our business.” Also, there should be a distinction between the available and no longer available.

Menu Navigation - Navigating through a website should be smooth and seamless when scrolling and clicking through information. 3 out of 5 participants said if a menu is not clear and categorized properly, it can be confusing and frustrating when trying to find information.

Price Range - 3 out of 5 participants said a lack of displaying pricing or lack of price range can cause frustration for the customer when wanting to know that information before reaching out to the breeder.

Motivation

Images - All participants are motivated when they see clear visually appealing images of the product, in this case, the Bengals. Participants mentioned the images should be close and clear to see detail.

Availability - Having a current, up to date availability of the animals is a huge motivator to the potential customer.  4 out of 5 participants said the availability should always be kept current and is seen as a high priority according to the survey.

Health - 3 out of 5 participants mentioned wanting to know the health conditions of the animals, the parents, the conditions of the breeder, any known health concerns, medications, vaccinations, vet visits, screening reports, etc.

Pedigree (lineage) - 3 out of 5 participants mentioned wanting to know the pedigree of the animal, the parent lineage and access to parents medical and photos.

About Cattery - According to the survey, participants said they want to know the following: number of years in business, the environment, living conditions, ethics, breeders knowledge, previous sales, reputation, transparency and honesty. 2 out 5 participants said having great information about the breeders is comforting when deciding to purchase a pet from a breeder.

Reviews (Testimonials) - Not as a high priority, however, 2 out of 5 participants expressed how they would like to see how past customers review the business before purchasing an animal.

With all information I gathered from research, I defined a user persona, which guided me make design decisions further in the process. Cassandra Perry. She is 30 years old and is a Cat Cafe Owner based out of Culver City, CA. During her free time, she often finds herself looking for accessories to add to her shop. She loves animals, especially exotic pets such as bengals. The cats remind her of lap leopards and just loved their color. She is wanting to be able to navigate through a cattery site and find her forever bengal in just a few clicks.

"An online cattery should be clean, bright, organized, current with information to bring home a forever bengal."

Keeping in mind of Casandra's needs and frustrations, the persona guided me to make design decisions further. The empathy map was created to gain more insights into Cassandra's behavioral patterns.

Card Sorting

Since the current website has excessive information and lack of structure it was imperative to know how users see and group information. To gather the needed information architecture, the research method for this was to create an closed card sorting using Optimal Workshop. The closed card sorting consisted of 20 cards (categories of web pages) that the participants needed to categorize the cards. 10 participants partook of the closed card sorting with an average time of 3.22 minutes. The p[participants grouped the cards into categories. Popular placements included: Bengal information, about us, available bengals, purchasing info, and breeds.

Site Map

With the results from the card sorting exercise, I created a site map which includes information users would like to see eliminating outdated content inside different pages. I made sure only relevant information is displayed so that users are not distracted from the purpose of their visit.

Main Task Flow

With the information gathered from the card sorting and creating the site map, I am able to create a user flow. The user is wanting to purchase a bengal so the user goes online to find the right bengal. The user navigates to the availability of the bengals. The user scrolls through the available kittens, filters and searches through the results. The user goes through the process to reserve the bengal, fills out the form and then receives a confirmation. The user then leaves the site.

Sketching

I began my wireframe process by making sketches on paper in order to quickly explore ideas for the site layout. I then digitized the sketches and refined the information flow using my sitemap, user flow, and task flow as points of reference. Based on user interviews and market research, I prioritized the home page section on the landing page and also focused on the mobile version of the available kittens page.

Wireframes

Based on all the gathered information from research to information architecture and task flow, I created responsive mid-fi wireframes to ensure that the design fulfills and can able to successfully complete the task.

Since the purpose of the whole redesign was to make the website look modern, cohesive and clean, I referred to several other similar kind of websites to get inspiration and came up with wireframes as shown below.

Sketching & Ideation

I started the logo design process with the word Tatsu, which is Japanese for dragon. The Japanese characters look similar to that of a cat so I tried to incorporate that into one of the concepts. I wasn't convinced others would be able to picture the same visuals, so I incorporated an outline of a cat instead. Using those, I created a logo that would symbolize a bengal within the design. Below are some of the ideas I explored before landing on my final logo design.

Final Logo Design

The final design I decided to move forward with was the "bengal within a circle and tail with the word "Tatsu Bengals" besides it. This allowed me to create the "Bengal within a circle" as an icon and the flexibility of using the logo in many different ways.

UI Kit

Designing the UI Kit came from the research and inspiration from various sites, I created the various buttons shapes, icons, and detailed typography for the various headings. I also included form fields, checklist, accordion, search bar, and social media icons.

‍

Final Design

Following the establishment of a brand identity, logo, UI kit, I refined my wireframes and created a working prototype in order to test the site’s features and checkout process.

Before & After

I used style tile to implement on the wireframes. I put more emphasize on call to actions to grab users attention. The old website displayed no CTA’s, which confuses the user, I tried to solve that problem by having one CTA for any particular action.

After creating main pages for high fidelity design I created an interactive prototype which involves task my persona would likely do and I can perform a usability test which will determine how successful the redesign was.

Prototype

After creating main pages for high fidelity design I created an interactive prototype which involves task my persona would likely do and I can perform a usability test which will determine how successful the redesign was.

User Testing

I tested my working prototype on a group of users who fit the user persona in order to gain feedback on the functionality of the site and inform my final revisions. Using remote testing, I conducted usability testing with five users. Users were within the ages of 30 - 50 years old, both male and female participants. I recorded users’ interactions with the prototype and had them narrate their actions and thought processes as they completed a series of tasks. I gathered first impression of the look and feel of the website prototype. I gained feedback on the placement and layout. I documented the navigation flow of each participant while going through the reserving a bengal process.

Usability Test Results

The usability test was 100% successful.

• All participants mentioned the task was easy to follow and very simple
• All the links and call to actions were noticeable
• Participants like the filtering option to select a bengal
• All users mentioned that the website is very clean and user friendly.
• Users liked the branding and aesthetic of the website

Since the prototype was 100% successful, There is no need to make any further changes as for now. After creating more pages test can be done again and make changes as needed.

Overall, the goal of this project was to create a responsive redesign of an already existing website. The redesign was based on the design research and iteration from design after design. The project taught me the significance of proper information architecture, proper research techniques to gain and decipher the research findings, and overall design elements. Understanding the user and their experience played a major role in this project. I am beyond satisfied with the outcome of this project. The only challenge I faced was having to make some crucial decisions as a solo designer.