Pip & Squeak e-commerce | UX Case Study | 2 week design sprint
Conceptual Individual project
Process overview:
User research: Research, Competitor analysis, Contextual inquiry (group), Guerrilla interviews, User interviews
Define: Jobs to be done, Open card sort, Closed card sort
Ideate: Site map, Wire-flow
Design, Prototype, Validate and Iterate: Paper prototype, Usability testing, Mid-fidelity prototype
Software used: Sketch, Adobe Suite, Keynote, inVision
Brief: To create a new e-commerce website for a neighbourhood toy store in Hackney, London that is “edgy, knowledgable, bright, fun and affordable”. To maintain their values and identity in their new digital presence. To keep the current loyal customer base, but to use the website to gain new customers and increase sales.
User research:
Research the problem and understand what users are doing, thinking and feeling
Research:
Before I could begin with design I wanted to learn more about Pip & Squeak and what their values are to ensure that the website was not a generic e-commerce toy store, but was instead tailored specifically to them. They pride themselves on “service first”. Other key values are that “everything is chosen by hand” and being the “biggest little toy store.”
The features that they wanted for their website are to:
- Have a clear way of locating specific products, support a single page for each product which can be linked to directly.
- Have an efficient means of purchasing one or more products.
- Steer customers toward popular products.
- Allow customers to contact the business (including to request a product not otherwise stocked).
Competitor analysis:
With these ‘musts’ in mind, I conducted some competitor analysis to test these features against some toy stores in London. I looked at both local neighbourhood stores as well as large retailers such as Hamley’s to see how companies of different sizes operate and how they display their products.
After conducting this study it became clear that After Noah, a neighbourhood toy store in Angel, encompassed many of the same values as Pip & Squeak toys. A group of 4 of us were all given the task to design the website for Pip & Squeak and so we decided to conduct the user research together and visit After Noah to gain insights about the company and test the assumptions that we made from their website. We conducted 4 interviews in store, 2 with customers shopping and 2 with employees. The findings were really interesting as it was clear how special this store was to both types of users. They also discussed their connection with the community and the events that they organise and how they donate toys to the nearby school and church. All in all, it was an enriching visit and helped me to understand the mindset of a user at Pip & Squeak toys. This trip to After Noah concluded the group portion of the project.
User interviews:
From the persona provided by Pip & Squeak, a typical user is someone who likes to support local businesses and avoids shopping at giant retailers. They also value customer service and appreciate the craft in a gift and toy. A frustration is that they dislike the loss of human interaction and personalisation from online shopping. With this persona in mind I conducted 3 user interviews.
Define:
Identify pain-points and prioritise user goals and design objectives
Pain Point: The user finds it hard to find educational gifts, especially as she doesn’t have a child of her own so does not know much about toys.
Jobs to be done:
“When it is my nieces birthday, I want to buy her an educational present that is also fun and sustainable, so that she has a great birthday and benefits from the toy long term.”
Open card sort:
I was given an inventory of 75 categories and to make sure that the toys would be able to be found within the information architecture I conducted 4 open card sorts that allowed me to understand how users categories cards. I gave each of the 4 users the inventory on index cards and asked them to group them and provide a title for the category they created for the toys within it. It was interesting to see the language that the users used and to see what topics were common between all groups [e.g. lego] and which were unique [e.g. pretending to do things]. It was a very enriching exercise and it allowed me to analyse the copy that I would used on the website so that it would be understandable for everyone.
Closed card sort:
After the open card sort, I analysed the 4 different categories I received and compared them to one another to create a combined set of categories. To verify if this combination would work, and that the toys could be found on the website, I tested them in a closed card sort on 3 different people by giving them the inventory and asking them to divide the toys in the categories I provided. It was really helpful to see when users hesitated and how some toys fell in two categories in the users mind. It became clear that some of my categories were not mutually exclusive, and therefore I refined them to:
Soft Toys, Early Years, Dolls, Action Toys, Outdoor, Build It!, Games, Arts & Crafts and Science & Education.
Ideate:
Brainstorm creative solutions and define designs that answer the objectives.
Site map:
Following this, I produced the following site map that encompasses these categories, sub categories and the overall navigation for the website.
Wire-flow:
After zooming out to the site map as a whole it was important to zoom back in to the user and understand how and what they would see at each step of their journey. I created a wire flow for my desired scenario- to buy an educational toy to arrive tomorrow.
Prototype, Validate and Ideate:
Design and build a model of the best solution, test it to get feedback and then go back and refine design based on feedback.
Paper prototype usability testing:
I used these wireframes to create a paper prototype, which I tested on 3 people. I chose to create a paper prototype as it is an efficient way to quickly test ideas. One of the main things that I realised is that if users clicked on ‘proceed to checkout’ from the basket pop-up and never went to the basket they did not reach the gift-wrapping page. In addition to re-ordering the flow to fix this, there were some other issues with the checkout process that I went back to the drawing board on.
Mid-fidelity prototype:
After refining this, and other changes from my paper prototype, I designed a first iteration of a digital prototype to incorporate the changes.
Usability testing:
I created a scenario to test this mid-fidelity prototype to see how the users responded to the new flow that included gift wrapping. I also wanted to see if there were additional places that the users got stuck while trying to complete the scenario (to buy a lego toy to arrive the following day).
From this test, out of the 5 people that I tested, I noticed that:
- 40% of users had an issue at the log in page as they were unsure how to continue as guest.
- 20% was confused about the graphics of the checkout page and weren’t sure where to click to move on to the next step
The final mid-fidelity prototype can be found here:
Reflection:
Looking back and reflecting on the process and outcomes
This was the first e-commerce project that I worked on, and therefore I learned a lot about how to create forms and how important it is to keep certain standard elements that users expect and for them to be where they expect them. The card sorting was especially interesting to me as it gave me insight on how to isolate the issue of navigation and test that prior to having wireframes. I was able to focus on the scenario and flow rather than navigation terms while designing and testing the wireframes.
If you have any additional questions about this project and my process, please reach out to me- Thank you!
