CONCEPT PROJECT

Happy Paw Pets 

PROJECT DETAILS

Duration: 2 week sprint

Team size: 4

My role: UX designer

Date: December 2019

SOFTWARE USED

Sketch

Affinity designer

Adobe Photoshop

HOW THEY FELT

  • Knew what they needed

  • Didn't want complexity or wasted time

HOW WE HELPED

  • Clear, thoroughly tested navigation

  • Ability to repeat regular orders quickly and efficiently

MY PERSONAL INPUT

  • Solo from Define stage onwards

  • High-fidelity design

  • Presentation of findings to course tutors

PROJECT OVERVIEW

Discover

 

Contextual inquiry
GAINING INSIGHT INTO
THE PET SHOP

User interviews
GATHERING MORE INFO FROM USERS WHO SHOP ONLINE FOR THEIR PETS

Affinity mapping
DISTILLING INFO GATHERED INTO ACTIONABLE AIMS FOR OUR DEVELOPMENT STAGE

Competitive analysis
ASSESSING COMPETITORS' SITES WITH OUR USERS IN MIND, TO LEARN WHAT THEY DO WELL AND BADLY 

Define

 

The Persona
CREATING A TYPICAL
USER BASED ON THE INFORMATION GATHERED
AT RESEARCH STAGES

Open and Closed Card Sorting and Site Map
SORTING PRODUCTS 
INTO CATEGORIES TO INFORM THE STRUCTURE
OF THE SITE

Develop

 

User journey, Happy path and User flow
CREATING LILI'S JOURNEY THROUGH THE SITE

Usability Testing
TESTING THE EASE OF LILI'S JOURNEY THROUGH THE SITE ON DIFFERENT USERS

Deliver

 

Mid-fidelity prototype
CREATING AN ONLINE CLICKABLE PROTOTYPE FOR USERS TO TEST IN A MORE REALISTIC SCENARIO

High-fidelity prototype
SELF INITIATED HIGH-FIDELITY WORKINGS

6 MINUTE READ

Brief

Discover

The challenge for this sprint, was to design an e-commerce site for a fictional pet store that prides itself on being a local, knowledgeable part of the community, with a loyal customer base.

GAINING INSIGHT INTO THE PROBLEM

Contextual inquiry

We began with a visit to a local pet store with similar offerings and ethos to the store in our brief. Here we gathered research through observation and interviewing customers. There were some key learnings from this information that we believed important to take forward:

 

Observations:

  • Nobody speaking to staff

  • Items quite self explanatory

  • Organised by product type - clothes, cleaning stuff, food, toys, grooming, collars, hutches & hay, beds etc.

 

Interview with Sue, 53:

  • She can usually find what she’s looking for, sections are clear

  • Has been to store multiple times, doesn’t have a local

  • Always knows what she wants before she arrives (based
    on what her dog likes)

GATHERING MORE INFO FROM USERS WHO SHOP ONLINE FOR THEIR PETS

User interviews

We then individually chose two more target users to interview about their experience of shopping online for their pets, in order to get an understanding of people’s experience in this context.

DISTILLING INFO GATHERED INTO ACTIONABLE AIMS FOR OUR DEVELOPMENT STAGE

Affinity mapping

As a team, we collected the three stand out points from each user we interviewed, and mapped these out on post-its. We identified some key themes in terms of user needs and preferences, to take forward into our development stage.

 

  • Clear navigation - users wanted to be able to navigate online stores quickly and easily

  • Planned/repeat orders - users often ordered the same items frequently (as we see above with Elle, Mike and Sue)

  • Trust and Loyalty schemes - users were aware that being a loyal customer can be beneficial

  • Price comparison, sales, discounts and deals - users were keen to find deals and discounts where they could

  • Clear info and comparison of products - users appreciate when it is easy to read about the product online and gather the information they need for their purchase in a quick and simple way

  • Direct human contact (but must be a choice) - users like to have access to a human for help if they need it, but it is important that they aren’t pestered, so this must be a choice

ASSESSING COMPETITORS' SITES WITH OUR USERS IN MIND, TO LEARN WHAT THEY DO WELL AND BADLY 

Competitive analysis

We continued as a team and researched some key competitors of Happy Paw pet supplies in the form of a feature comparison. There were a few key takeaways from this that helped to inform how my designs would be structured later on.

Define

CREATING A TYPICAL PERSONA BASED ON THE INFO GATHERED AT RESEARCH STAGES

The Persona

Having distilled our research on the target audience for Happy Paw pet supplies, I created a typical user based on the information gathered, who I would keep in mind when designing the website to avoid assumptions and ensure that I am designing for the user.

SORTING PRODUCTS INTO CATEGORIES TO INFORM THE STRUCTURE OF THE SITE

Open and Closed Card Sorting and Site Map

Entering the development stage, I conducted a card sort. The open sort was done with 3 users, who placed products into categories that they created themselves. I distilled these categories into a set list, that I could use to inform the structure of my site.

 

The closed sort was then carried out on two more users, who used my set list of categories to sort the products. The feedback was mostly positive, with a few changes that needed to be implemented. 

 

The resulting categories were then used to create my site map, which helped me understand the underlying information architecture of my website. The image below shows the final list, with some changes made to the site map.

CREATING LILI'S JOURNEY THROUGH THE SITE

User journey, Happy path and User flow

It was important that I tested the site structure with my ideal user in mind. I created a happy path for Lili (ideal path from deciding to buy a product, through to its purchase), to show how my website could help her.

 

Lili is already signed in to the site because she regularly shops for her own pet. Her task is to choose and purchase a dog bed for her friend’s new rescue puppy.

Her overall journey looked like this, with the website interaction marked in blue:

Develop

TESTING THE EASE OF LILI'S JOURNEY THROUGH THE SITE ON DIFFERENT USERS

Usability Testing

I asked 3 users to test Lili’s journey through the site on paper wireframes, which allowed me to make quick, rough sketches of the website and iterate quickly based on their feedback. 

I gathered lots of feedback based on the users pain points and their behaviour and emotions throughout the journey. It was important to keep my user goals from the research stage in mind at this point, in order to rank the severity of issues encountered. For example, navigation issues were highly ranked, as clear navigation was a big priority for our target users. I did various stages of iterations to the sketches, and tested again on another user.

An example of the kind of changes I made from low-fidelity through to Mid-fidelity.

CREATING AN ONLINE CLICKABLE PROTOTYPE FOR USERS TO TEST IN A MORE REALISTIC SCENARIO

Mid-fidelity prototype

From here, I created a mid-fidelity prototype of the site that reflected Lili’s journey (including all the changes I’d made on the sketched wireframes after user feedback), and three extra tasks related to it. I tested these three tasks on 4 users, to learn what they struggled with and identify where I could improve the usability of the site.

The tasks:

  1. Choose and purchase a dog bed for your friend’s new rescue puppy.

  2. Add a dog bed to your basket and then choose an additional green ball toy and place it in your basket.

  3. Favourite a dog bed and view it in the for you section.

 

The feedback was very useful, and I implemented more changes at this stage. 

Mid-fidelity wireframes in Sketch.

Further examples of changes I made during mid-fidelity testing with users.

Deliver

The 2 week sprint ended with a functional Mid-Fi prototype that walked through the various stages of Lili’s journey through the site, and the additional tasks she might want to carry out. I presented this, along with key learnings and findings along the way to my tutors and coursemates. I then decided to develop this project further, into a high-fidelity prototype.

High-fidelity wireframes in Sketch.

Walking through Lili's journey in high-fidelity.

Insights

What next?

I learned a lot during this fully packed sprint, but there were some key takeaways worth noting as I continue to learn this process:

  • The ability to observe and record information from users in their environment is really important. This was a big challenge for me, having never done it before. I came away feeling like I’d asked questions but not recorded everything I wanted to, as I also had to balance listening to the user and observing how she felt. Next time, I’ll aim to have fewer specific questions, and instead go in with the knowledge of some clear aims, focusing on information I need to gather. That way, I can focus on listening, learning and recording as much as possible.

  • This sprint gave me a much better understanding of why it is important to set out your target users goals and needs early, and how this informs your designs later on. I really enjoyed bringing these elements through the journey to inform my designs.

At the end of the sprint, I wanted to focus on a few things:

  • Further usability testing and development on the mid-fi prototype based on new scenarios, in order to broaden the site and ensure that feedback can be implemented across it.

  • Development of a brand for Happy Paw pet supplies that reflects their values and insights and helps them to be appealing to customers online.

  • Development of a high-fidelity prototype that implements these previous points into one clickable prototype, that can then be tested further in order to see how users interact with the experience as a whole.

  • LinkedIn