Responsive Web | Branding | UX/UI Design | Testing
PROJECT OVERVIEW
Challenge:
CityPup is a small e-commerce startup company specializing in eco-friendly products subscription boxes for dogs. They have been selling their products online and in store as vendors and wholesalers. However, with the rise of pandemic, Citypup has seen a reductions in sales.
Solution:
Refresh their brand and redesign the current website to attract young professionals. The main priority is to have a responsive website that is easily browsable, contains an online shop that has the ability to filter by basic categories of products.
Objectivies
-
Redesign the responsive E-commerce website of City Pup that is pleasing to use and that allows customers to browse through all products and easily filter by relevant data.
-
Rebrand to attract a young audience
Spec:
Project Scope:
Responsive Website, Re-Branding
Tools
Figma, Adobe Illustrator, Miro
Role
UX + UI Designer
(User and Market Researcher, Visual Design, User Testing)
Client
City Pup
Project Duration
Summer 2021
RESEARCH
I wrote a Research Plan to guide me as I focused on learning about CityPup's market, their competitors, common e-commerce practices and the target audience. My goals and the methodologies used for research were:
Research Goals:
-
Identify various challenges faced by customers when shopping online
-
Learn common success and pain points of online shopping
-
Identify successful navigational patterns and filter functions on e-commerce websites
-
Learn how competitors use the digital space to target their audience
-
Understand the needs and requirements of online shoppers.
Methodologies
-
Market Research
-
User Interview
-
Observersation
User Interviews and Observation
To achieve my research goal of understanding the needs, goals, and challenges of online shoppers, I conducted user interviews. While recruiting participants for the user interviews, I kept in mind City Pup's target audience:
Participants
-
Age 25-35: Young digital users who shop heavily online.
-
Age 35-45: Digital users who rely on online shopping out of necessity.
Before conducting interviews, I prepared an Interview Guide where I laid out my questions to understand the users' overall online shopping behaviors, understand their preference regarding certain actions and features of e-commerce shopping.
Insight #1
All participants do not like that the unsubscription button is hidden. They do not want to waste their time talking to a representative.
Insight #2
Most participants would like to know more about the owner's story in About me page. They would like to have more information when trying a new product. They like to know what are the owner's aspiration and why are they passionate about their products.
Insight #3
Participants like to read review of all the product reviews to help them decide whether they should buy it or not.
Insight #4
All participants preferred shopping online using desktop/laptop instead of tablet/phone because 0f the desktop's larger size.
Persona
Conducting user interviews before market research helped me have a better understand of the overall online shoppers behaviors. Gaining feedback on City Pup's existing site also gave a solid ground to continue my research on. The information I got from product owner informed me about their desired target audience with my insights gained from the user interviews. I created three personas, this way I always had my users in mind, while researching, defining and eventually desigining.
.png)
_edited_edited_edited.jpg)
Competitive Research
I continued my research to understand City Pup's competitors were addressing the same challenges of having online presence that attracted almost the same target audience. I focused ed on learning what were common navigational patterns and filters functions for e-commerce websites. I also analyzed the competitors websites to learn what were some success and pain points for my targets users based on the insights I gained from user interviews.
DEFINE
As was concluded by many users during the interviews, the existing site needs better organization of information. Thus, the next natural activity for me was card sorting activity. I created and conducted this using optimal workshop.
However, the result were inconclusive. Upon consulting with other designers, I concluded that City Pup had too few categories for a successful card sorting activity. This limitation caused the participants results to lack a consistent pattern from which I could implement changes going forward.
Although card sorting activity was not a success, it helped me understand my client's products in a different light. I realized that I could not treat City Pup as any other e-commerce website. City Pup specializes in selling eco-friendly subscription boxes, thus I focused on that specialization. Thinking this way allowed me to better understanding my client's products, and I was able to provide users a clearer organization and seperation of catergories.
Sitemap
With a better understanding of City Pup and its products, I compiled my research findings to define a sitemap. As it was noted by users that the existing landing page lacked prioritization of information hierarchy. I laid out all the main navigation: About Us, Shop All, Home, Contact Us, Treats, Toys, Boxes and Accessories.
Low-Fidelity Wireframe
The define stage helped me identify key screens to design. I focused on creating low-fidelity wireframe of homepage, shop page, product and the checkout page. While working on these wireframes I used inspirations from e-commerce sites and City Pup's competitors to implement successful common design patterns. At the same time I try to avoid common pain points experienced by online shoppers that I learned during interviews.
Responsive Homepage
Shop Page
Product Page
Checkout Page
UI Kit
Since logo designing was a low priority risk, I focused on refreshing their color pallete and overall style. The existing site of City Pup had a purple and orange as a color throughout their site. Therefore, to refresh the site, I chose green to attract young professional and convey eco-friendly brand, as those were the target audiences. I contrasted the green with the different shade of green for highlight to continue with the client's current choice.This helped me create a style that touched creativity but also spoke to the ecommerce aspect of the site.
12 Column Grid
8 Px Grid
Typography
For the brand I wanted to go with a modern style and versatile font for the system I chose Questrial font for body text and subtitle. It's perfect on a website making it highly readable in any context. Questrial with Lulo Clean font goes well together. Lulo Clean is used for heading and sub-heading
CityPup font stack
Iconography
For the CityPup design system, I went with the e-commerce icon library in Figma. E-commerce icons offered simple, informative, and complements the overall visual language of the design system. I did not want to increase the user's cognitive load. I focused on simplicity to help users understand icon concepts and recognize icons on a smaller screen.
E-commerce icons
Color
In CityPup, every color has an assigned role, which holds a specific meaning based on how they interact within the interface. By defining the parts, it makes it easier to modify and customize later. Color plays an important role. It supports the purpose of the content, a hierarchy of information, interactive states, and the difference between the distinct elements.
CityPup color palette
Buttons
When it comes to buttons, there are several different states. The most common being is active, hover, focus, and disabled. In addition, there is a loading state, but I decided to show four of those states in CityPup. There are types of buttons; those types are primary, secondary, subtle and text. Below are some of the buttons in a few of the different states below.
Form Fields
Form fields are very similar to buttons in a sense they need to be able to accommodate several different states. When designing anything, I try to keep in mind accessibility, especially in form fields. Ensure that the form's title does not go away and they are appropriate color indicators for errors. These are just a few things to keep in mind—components such as dropdowns, radios, checkboxes, toggles, and others are essential to have.
CityPup form field
