1
PROJECT OVERVIEW
The problem
Original website had some issues with the responsiveness and displayed in a wrong way on mobile devices. In addition to that, new products were launched and needed to be displayed on the website.
Project duration
January - March, 2022
The goal
Design a responsive website with modern look for cat litter brand.
My role
UX designer leading the website design from conception to delivery
The product
www.diamondfeline.com is a responsive website for Diamond Feline brand. It is very intuitive and simple to use. The website conveys the most important products information required for customers to send a price quote inquiry. It displays both well on desktop and mobile devices.
My responsibilities
Paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
2
UNDERSTANDING THE USER
User research
The customers of the company who owns Diamond Feline brand are wholesalers and retailers. So it was crucial to performs a user interview among this group of people in order to understand what they expect from a cat litter brand webpage and what can make them send an inquiry.
From the brand owner it was important to get contact information from potential buyers such as e-mail and phone number.
PERSONA 1
Name: customer
Occupation: wholesaler, retailer
Most of wholesalers and retailers would like to see advantages of products they are about to purchase. They don't like spend too much time going through thick catalogues at the first stage of getting familiar with the new product.
​
In addition, wholesalers and retailers always would like contact the manufacturer or brand owner directly, especially when instant messengers are very popular in B2B business nowadays.
PERSONA 2
Name: brand owner
Occupation: manufacturer, exporter
The main purpose brand owner wanted this website is not only to improve brand awareness, but also to get as much contact information of potential customers as possible. Considering B2B business nature, it is very important for manufacturers to acquire very accurate contact information in order to start the negotiation.
​
Main pain points of manufacturers using other platforms is that potential customers don't leave enough contact information or their contact information is very vague or inaccurate.
3
ITERATING AND PRELIMINARY DESIGN
Iteration direction
According to the pain points of two personas with different points of view, here is the rough out line of the iteration direction:
​
1) All products will appear on the home page (so far brand has only 5, so it will not make the homepage very long)
2) Each product gets it's own page with high resolution package photo, description and outstanding features
3) "Get a quote" button will remain floating so customers can go straight to the enquiry form from anywhere on the page
4) Floating hamburger menu even for desktop version - will improve browsing space as there will be no fixed or fading header
5) Enquiry form will have e-mail and phone number fields where one of them will be necessary to fill in, this will help brand owner to get contact information of the customer
6) Footer will have WhatsApp number for customers who prefer to use instant messaging to negotiate
Iteration sketches
Low-fi prototype
4
1st USABILITY STUDY & HiFi PROTOTYPING
Research questions
​
-
Is it easy for customer to send a price inquiry?
-
Is products information displayed correctly?
-
Is navigation accessible on every page?
-
Does mobile version include all features and information available in desktop version?
For the user testing I have chosen three sales employees of the brand and three wholesale purchases (who are not clients oft he company this website was built for). To my surprise, both customer and brand owner users said the layout is ok and they would like to see the hi-fi prototype to test again.
Hi-fi wireframes and prototype
5
2nd USABILITY STUDY
During usability study of hi-fi prototype, customer and brand owner discovered some flaws and suggested improvements to the prototype.
Customer suggestions
QUOTE - "It would be better to know what products are new to keep up with industry trends"
INSIGHT - add labels for products that are new under this brand, display new products first on the homepage.
QUOTE - "This brand has 5 products so far, however it would be great to see a comparison sheet for each product to see the whole picture of their strengths"
INSIGHT - add a comparison sheet to the every product page
QUOTE - "When I fill the contact form, I discovered I don't have WhatsApp, but I would like to be contacted by other instant messaging means, Skype for example"
INSIGHT - clarify the instant messaging section that not only WhatsApp number can be left there
PERSONAL INSIGHT - write example of what should be filled in each field
Brand owner suggestions
QUOTE - "Is it possible to add separate Contact Us page? Not only on the homepage, the button could be shown on every page and lead to contact form."
INSIGHT - add a separate Contact Us page with contact form for inquiry.
QUOTE - "I think mobile site need a button that can switch to our WhatsApp directly letting customers contact us in instant chat directly"
INSIGHT - add a WhatsApp button on mobile and desktop as WhatsApp also being used as a desktop app sometimes.
QUOTE - "Is it possible to add a country code to the phone number field? Sometimes customers leave a bunch of numbers and we don't know what country is the phone number from."
INSIGHT - add a separate selector for the country code in the phone number field of contact form.
2nd revision of Hi-fi wireframes and prototype
