n.png

An extension of the retail experience

Designing a Pet Store ECommerce WebSite

UK market reports state that the pet supplies e-commerce market is booming and will continue to grow, meantime the lines between retail and online stores are blurring - suggesting that the consumers value the personal experience.

Project Overview

Concept Client   

Pets 4 Life, a London based retailer of hand-picked pet supplies.

Time   

3-week solo project

My Role   

Ideation, UX Researcher, Interviewer, UX Designer

Techniques Used

Market Research, User Research, Information Architecture, User Interviews, Card Sorting, Prototyping and User Testing, Low to Mid-Fidelity Prototype

Tools   

Pen and paper: Wireframe

Sketch App: UX / UI Design

Invision App, Principle App: Rapid Prototyping

Adobe Photoshop: Visual Design

Background

As part of my studies of UX at General Assembly, I was tasked to expand on and implement further on the double diamond process by designing an e-commerce website in an imaginary scenario and iterating a prototype up to mid-fidelity. The discovery phase was conducted as part of a team, before moving into a independent process rest of the project. The task was to build an e-commerce site that reflects the clients core values, creating an extension of their hand curated physical store. Focusing on maintaining their personal touch and in store customer engagement when entering the online market. 

My Role

Started the process working as a team conducting the competitor research, but I soon realised that the rest of my team had a niche market and persona in mind which wouldn't give a realistic foundation of research. I then decided to go solo from that point and I'm quite happy I kept my mind clear from biases that would've changed the outcome of the final product.

My Key Deliverables

Discover

  • 7 user-interviews to understand the real-world and online shopping habits of a wide range of demographics.

Define

  • Synthesised the findings from the interviews and created a detailed persona to underpin the design process.

  • Conducted a detailed analysis of the pet supply market, understanding the different options available to users, key features of the range of competitors, and gaps in the market.

Develop

  • Created paper prototypes that I user-tested and integrated into low-fidelity wireframes using Sketch.

  • Conducted remote user testing on the prototypes to test functionality, usability, and accessibility to create a workable, mid-fidelity product.

Deliverables

  • Competitor analysis of the online pet shop market to gain an understanding of where Pets 4 Life should aim to be

  • Usability testing to gain insight from users to inform the design of the product

  • A mid-fidelity clickable prototype of an e-commerce website, including relevant features

My Key Learnings
  • The importance of translating research findings into product decisions and feature prioritisation.

  • How to build feature analysis tools to understand what a market-specific product should, could, and won’t have.

  • The basics of user-testing, building a script, and tasks that would allow me to gain an insight into the usability of a product.

  • The necessity of creating accessible products that are mindful of the needs of users with specific disabilities.

  • The logic of navigation and site architecture and creating short paths to guarantee uninterrupted considerations of the purchase.

Recommended Next Steps
  • Develop a responsive mobile version with integration in other mobile content browsing apps. 

  • Design user onboarding frames to familiarise them with features within the site.

  • User test with screens relevant to secondary users (e.g. friends and family of the pet owner persona) to further iterate user journeys and observations.

 

Reflection

It was an eye-opener how UX is one of the defining factors in the successful development of an eCommerce marketplace. As my first website project, it taught me to balance the user needs with the priorities of the business and the market in mind. This to keep the focus of what to include and what not. While iterating through the design process, I learned that people will navigate through your design in unpredictable ways and it’s important to get feedback from the users and implement the changes that eliminate ambiguity.

 

The Process
Competitor Feature Analysis
Competitor Feature Analysis

Statistics show that the majority of online shoppers use reviews to determine what products to buy, create trust and customer engagement. This would be a great tool for Pets 4 Life, where they could involve their solid customer base to share their thoughts about their purchases which could drive the customer bond and community.

press to zoom
Competitive Axis
Competitive Axis

Embarking on the online presence, Pets 4 Life could offer even a wider product base where the online space doesn’t require the same physical space. This would be a possibility to branch out even further, where the customer could benefit from ordering from the online selection when in store. This way they can reach a wider market, while creating a stronger customer base while maintaining their face to face contact.

press to zoom
Design Annotations of the Homepage
Design Annotations of the Homepage

press to zoom
Competitor Feature Analysis
Competitor Feature Analysis

Statistics show that the majority of online shoppers use reviews to determine what products to buy, create trust and customer engagement. This would be a great tool for Pets 4 Life, where they could involve their solid customer base to share their thoughts about their purchases which could drive the customer bond and community.

press to zoom
1/12
The Final Product - Mid Fidelity Prototype