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.
Process overview:
Empathise: 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
Prototype and Test: Paper prototype, Usability testing, Mid-fidelity prototype
Software used: Sketch, Adobe Suite, Keynote, inVision
To see the full case study on medium please click here.
Before I could begin with design I wanted to learn more about Pip & Squeak and what their values are. They pride themselves on “service first”. Other key values are that “everything is chosen by hand” and being the “biggest little toy store.”
I conducted some competitor analysis to test these features agains 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.
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.
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.
“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.”
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.
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.
Following this, I produced the following site map that encompasses these categories, sub categories and the overall navigation for the website.
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.
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.
After refining this, and other changes from my paper prototype, I designed a first iteration of a digital prototype to incorporate the changes.
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).
The final product was a mid-fidelity website and it can be seen below:
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 a wireframe for the users to react to. Feeling confident about the copy of the navigation was a good start for the wireframes when they were tested as I was able to focus on the scenario at hand and the full flow rather than navigation terms.
If you'd like to get in touch, please reach out via email or on linked in:
