How might we help the breeder to attract more ragdoll lovers?
How might we help the cat lovers to have a better experience of purchasing a ragdoll?
Competitive Analysis
The breeder gave me a competitive's website to compare before I start: redechoragdoll.com.
User Interview
I would like to know what's really going on with the original websites, especially for the homepage, kittens page, and the contact us page because of the huge traffic drop in Wix.
I prepared the below questions to ask the interviewee:
Start with their cat experience and trying to warm them up
1. Have you bought a cat before and how was the experience?
2. What’s important to you when you are trying to buy a breeders’ cat? Discover the homepage, and What page you would want to discover first and why?
Questions I prepared
3. How did you feel about the page that you just clicked? Have you found the information you need to find?
4. Discover the Kittens page, Can you find the cat that you’re interested?
5. Imagine that you’ve already found the cat you are interested, What method you would like to contact the breeder and why?
6. Looking at the contact us page, do you feel comfortable to leave your information on the contact us page? Why?
Usability Testing
I interviewed 6 people (including the breeder), mostly test them remotely, recorded the session, and took my notes in Google doc.
Synthesis | Affinity Diagram
After talking to the users, I used Figjam (in Figma) to make an affinity diagram. First bundle the what I've heard from the user interview and cluster the similar insights into group A, B, and C; and then summaries those ideas into different themes.
The two main problems I found from the user interviews are Lack of information, and UI problem.
Synthesis | User Personas
I created user personas based on my research to give a clear understanding of the target audience and their needs.
There are two types of users: Cat Lover and Breeder.
Brainstorming
Sketches
Design Process | User Flows
Design Process | Wireframes
I used Figjam (Figma) template to quickly create 4 pages: home page, kings & queens page, kittens page, and contact page.
Visual Design
Here is how I created the Style Guide.
Font
I tend to find fonts that look like cats and also easy to read. That's how I found Fjalla One and Futura Light.
Fjalla One is tall and narrow; letter "j", "s", "t" look just like cat's tail and body! Futura Light's letter "e" and "g" look like a cat lying on the floor. Since Futura Light has higher readability than Fjalla One, so I use Fjalla one mostly for Heading; and Futura Light is for the rest of the content including Paragraph.
Color
Since the site will have lots of colorful cat images, adding too much color to the site would be too overwhelming. I use white as the background color because I want the information stand out. I then used color picker to catch the blue hex code from their beautiful blue eyes and used Rogdoll's paw color as the error color.
Element
Buttons have round corner because I want it to look like cat's paw; and it will add more fun and interesting flavor to the website.
Style
Overall, I would like the vibe for the website to be clean, straightforward, and not boring.
After creating the prototype, I launched it. I sent the website link to the same 5 people who tested the original websites. I asked them how they feel about the new website; if they can find the information they needed; point out anything that doesn't make sense to them. I received a lot of positive feedback from the new look of the site: it looks clean, trustable, and very detailed. The negative feedback are content missing, confused buttons, format issues.
P1 issues
1. Responsiveness
Some content are missing and not responsive when viewing the website from different devices ( Web, Tablet, Mobile)
Let me give you some examples. So some pages may look like this:
So how do I solve this issue?
First, I need to find out why it caused this issue. I googled and researched a little bit, it turns out that this is one of the limitation of Wix (like what it says in the picture). Only certain types of elements are responsive in Wix.
After reading the limitation, I started to put everything that's outside of the vertical grid line inside. Overall the web version and mow version looks good but the tablet version looks really funky. Since the goal is to attract more customers, so no matter what devices customers are holding to view the websites, I want them to have a good user experience.
P2 issues
1. Cat photos on the homepage seem clickable but it shouldn't be.
Before:
Users will click on the cat photo because it shows in different color when hovering over. But what I want to present is just cat photos and it should be non-clickable.
After:
So I deleted the hover feature, let user focus more on the right arrow button or scroll to see different cat photos.
P3 Issues
1. Text Alignment Issues
One of the user is also a UX designer and she pointed out some alignment issues. "Pet, Show, and Deposit should all be left aligned."
Some content are not readable near the edge, so I shorten the text box which gave the text spaces to grow.
The Chaoragdoll Cattery logos would stack up each other when the screen size gets smaller from web to tablet, so I changed the position from horizontal to vertical, now it looks good.
And instagram logo and 小红书 logo are not visible because it's outside of the wix vertical line, so I move them closer to Chaoragdoll Cattery logo, now it's visible.
Same thing for the text box, it looked pretty busy and the content don't have enough spaces on the left and right, so I deleted a cat photo to make the content stand out.
The heights for buttons are not the same, after I noticed them, I checked every button and make sure the same type of buttons have same heights and same size fonts.
Users pointed out the cat images are not attractive because they can't see their whole body. And text content is hard to read; and they are not willing to log in.
New Home page highlights the information that customers care the most: cat availability, breed & contests, health & certificate, contact info; and uses CTA buttons to direct visitors to different pages.
The old Kings & Queens pages are separated. The King page looks pretty lonely after Tiger (one of the King cat) died and Queens page is lack information. I want to save customers time when they are trying to find parents' info by combining Kings page and Queens page.
New Kings & Queens page allows visitors to view kittens' parents info, for example, their name, background and personality. Since the breeder offers customized breeding plan, visitors can choose their favorite parents and ask for the next available breeding plan.
New Kittens page has added more detailed information: has pricing range for all kittens, this would give customers an idea of what's expected to pay; has kittens' availability information, who are their parents, and upcoming breeding plan. To inspire recognition, confidence, quality, and eventually customer loyalty to the business, website visitors are able to see the sweet moments of the previous buyers and their lovely kittens.
New Contact us page provides customers brief steps of purchasing a kitten; the breeder contact information; an option to ask questions; where the breeder locates. At the same time, Breeder also has the option to collect customer's information, know their location, preferences and experiences of raising a pet, to filter and select who to sell.
1. Wix's responsiveness is not friendly to designers.
The business owner built the original Chaoragdoll website on Wix and they don't want to spend extra time transferring their website from Wix to another, so I agreed continue using Wix for the rebuild.
However, I should have googled the limitations of building a website on Wix before I sketch. It seems every content (except the slide show) has to be within the vertical grid lines, otherwise it can't be seen. And another issue is I can't see the preview for tablets version, I can only see the desktop and mobile version, so when I self tested the site, I have to use my own iPad to see the change, make sure it looks right. It is really time consuming and I am not even sure it if fits every devices.
Good thing is from the traffic data Wix provided, Chaoragdoll customers like to use mobile device the most.
