How can we help the breeder spend less time filtering for quality customers?
HMW enhance the interactive experience of Chaoragdoll to make it more engaging for users?
HMW improve the visual feedback to Chaoragdoll to encourage longer user engagement?
We talked about their pet Experience + warm up
- Have you bought a cat before and how was the experience?
- 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 asked them
- How did you feel about the page that you just clicked? Have you found the information you want?
- Discover the Kittens page, can you find the cat that you’re interested?
- Imagine that you’ve already found the cat you are interested, How you would like to contact the breeder?
1. Prefer Customers to chat or text him
2. Don't want customers to see cats in person
3. Business highlight: customers can pick their own parents
4. Information needed from customers: Another cat? Experience? Color? Sex?
5. Willing to provide any detail info if needed
1. Would like to make an appointment to see the cat and see their personalities
2. Homepage: don't like the font, and the content is not detailed at all
3. About Us Page: can't find any info
4. Kittens page: need more info like age/price range
5. What to see what cat do they sell, and how many years of experience they had? Any sold cat history
1. Needs to be an authorized company.
2. Homepage: Cat pictures doesn't have legs/head, not attractive! Font has low readability
3. Website structure needs to change, has under construction pages
4. Kitten Page: Want to know price range, cat category, available kittens, and what are the steps.
5. Kings/Queens page: want organized and highlight content
1. Kitten Page: More info like Name? Personality? Need to know their parents? Age? Availability? Breed plan? M/F?
2. What’s important: Health condition + Appearance + Personality
3. Suggestion to the website: site structure needs to change, homepage could different sections can lead to different pages
4. Breed Advantage/Potential Health Risk? general personality? How to take care of this breed ?
1. Want to know Kitten's Name, birth, size, price , pick up date, their parents pics
2. Prefer texting, want pictures, 1-2 days response
3. History of cat pics
4. Every kitten should have a name, it's easy to find them
1. Websites need to have useful info, color, price, pet category, available cat? Deposit info, Certificate, Price range
2. Need to be legit. Want to see purchase history/story.
3. Need to confirm before buying: Price, Vaccination, Health condition, Delivery method
4. Contact method she used: via Instagram, video call
5. Need to know breeder's location
6. Bad font/readability, don't like the color
I used Figjam (in Figma) to organize their insights into different groups, it turns out the two main problems are Lack of Cat Information, and UI problem.
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
↔️User Flows
🔳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.
Yay! Chaoragdoll.com is finally launched.
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 look very crowded and information are on top of each other.
So how did 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 Rednote 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.
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.
