CoolCat Shops
A stylish approach to a cat-centric e-commerce.
Market Insight
Competitive analysis
User Survey
Personas
Wireframes
Flow diagrams
High-Fidelity UI
Prototype
Mini usability study
Accessibility evaluation
Where
London, England
Role
Designer, Researcher
What
Native Mobile App (iOS)
Category
Why
Portfolio Project
When
Dec 2023 - Jan 2024
Project description
Market Insight
Opportunity
The cat product market has seen rapid growth, with a surge in awareness and demand for
high-quality offerings. The global cat product market is estimated at approximately £2M.
Challenge
Owners struggle to find trustworthy, high-quality cat products with fast shipping, creating an opportunity for an efficient solution
Competitive analysis
I analysed 3 popular cat shop apps, evaluated the ordering experience,
and examined negative feedback on customer review platforms to identify common patterns and insights.
Positive aspects
All competitors enable users to search for nearby shops and make local purchases.
The negative
Users can't view products without registering (Competitor 1, 3), and none offer next-day or same-day delivery.
Problems from the comments
I needed something for Tomorrow and the closest delivery was in a week.
Kayla
Local search rocks, but registering? Meh. Need faster delivery options.
Achmad
Registration lock and no express delivery? This app needs an improvement.
María
Key research findings
Initial research highlights the demand for high-quality, swift delivery with a variety of items available from nearby shops.
Personas
I created two personas (Buyer and Seller) based on two types of users of the app. A pet shop owner and the client.
Initiating the design phase!⚡️
After reviewing all the research data, the next step involved outlining the initial user flows and creating the first set of low-fidelity wireframes.
Low-fidelity wireframes
Once I finished the main flow chart. I began creating low fidelity wireframes for the main user flows.
High-fidelity UI Design
Following the completion of the initial flow, I started by creating most of the main screens of the app. I started by defining the fonts and colors.
Color palette
Accent, primary, secondary
tertiary, background
Font
Gilroy
Regular, Medium, Bold
Main CTA button accent
AaBbCcDdEeFfGgHh
Fun and minimal look & feel
The style was achieved by using
fun decorative PNG’s of kitten toys
and treats.
46 high-fidelity designs were created
Incorporated two distinct navigation patterns, many different tab bar styles and a hamburger menu, with the potential of doing an A/B testing during subsequent design phases.
aurora-style blurred background
Example of selected tab-bar navigation
I additionally experimented with clean, white backgrounds on primary screens, and a version with aurora-style blurred backgrounds and other variations on product screens to give products that fresh and modern look & feel.
Alignment and Grid
I picked an 8-point grid for the project and set margins for within groups at 8 and 16, with margins between groups at 24,32 and 48.
High fidelity prototype
I connected some of my high fidelity designs into a clickable prototype. That will allow me to test the app on a first group of users.
Category
Product detail view
The prototype can be live-previewed at: [ LINK ]
Prototype validation
I validated my prototype with 3 users. Each were given a subset of the prototype dedicated to the category, product, and product detail view, I wanted to be sure users understand that there are more products within categories. and that each product also has a dedicated page
This was tested over a zoom call, where I introduced the user to the app and asked them questions. The questions were dedicated to finding whether the category and product tabs were easy enough to understand.
Updated button copy / action to simplify the flow
Study results
66% of the users (2 out of 3) were unsure what to do from the category page. They quickly understood how to add a product to the cart, but did not expect to be more information accessed by tapping the actual product image, That means that the task success rate was 33%
Prototype update concept
Because of time constraints, I wasn’t able to run a second usability study on the updated prototype. However, I have updated it by moving the add to bag button to the detail page and replacing it with “view item” on the category page.
Accessibility check
The main goal is to create a sleek, modern web presence and clearly communicate the company’s mission by redesigning the Hero Home section in high fidelity, with the rest presented as wireframes.
Project summary
During the project, I managed to evaluate the market, do a quick user survey on X, perform a mini usability study (online), create a set of low fidelity wireframes, connect them into a prototype and build them out to high-fidelity. Beautiful UI designs. In the last checkup round I also an extensive QA audit focusing on consistency and colour contrast with regards to accessibility.
