Toy Story 2 (week sprint)

Researching, testing & creating an interactive prototype for an e-commerce website (concept project for General Assembly)

Tools: Pen, paper, Sketch & Invision

1. The Brief

Pip & Squeak are a Shoreditch based toy-store looking to create a website that reflects their brand values of great customer service & offering useful solutions to help users find what they are looking for quickly and effectively

With a team of three fellow UX researchers (GA classmates) we were tasked with helping the client realise their goal of expanding into an online platform while staying true to their core brand values.

Alongside the brief we were give three initial personas that would act as the foundations for any subsequent design solutions. Although personas are incredibly useful tools to help get you in the mindset of a user, they can also be misleading or unrealistic, so our first port of call was that of validation through user interviews.

Our 3 initial personas

1.1 We’re not alone

By launching an e-commerce site, Pip & Squeak would be entering an arena of long established and well known competitors, although that’s not to say that they have any less to offer. However we would do well to understand what was already being done effectively and perhaps more valuable than that, what was being done poorly.

Along with my colleagues Anson, Elin and Flavio, we began the process of competitor analysis, initially we targeted some of the more obvious online toy stores such as Toys R Us, Hamleys and However, we also felt it would be valuable to look at the more mainstream retail chains like Amazon, Argos and even Tesco in order to see how they presented, structured and promoted their toy inventory.

The output from our competitor analysis

Some of the more interesting findings to come out of the competitor analysis was how each store differentiated itself through its branding, more specifically in terms of loyalty, reward & user reviews. It wasn’t clear at this stage but this information would prove to be very useful in helping me to find a unique angle for Pip & Squeak later in the design process.

1.2 Talk to me

We had laid the foundations of understanding when it came to the big competitors for core elements, such as how they structured their sites and the taxonomy they used to achieve that structure; the account and review systems they used and how they up/cross sold products. All of them were implementing slight variations on a theme so it was clear that we needed to dig deeper.

At this stage of the process we found it valuable to create some top-line user journeys with the provided personas, as a means of getting more familiar with the online toy-buying experience.

top level user journeys with one of the provided personas, Daria

These journeys were based on the kind of site structure, taxonomy and account/review features that we had seen in our competitive analysis. Beginning to empathise with the user when it came to interacting with these features started us on the path to understanding where the opportunities lay.

The most important part of the user research phase we had just entered was understanding what real life users were doing, what were they influenced and inconvenienced by? In order to find the answers to these questions it was time to interview. In hindsight, this stage of the process was perhaps slightly hampered by the fact that toy stores online are generally used by adults, not children, and the kind of adults who use these sites to buy toys are generally parents or those buying gifts for children of friends and family. This isn’t exactly a small demographic but it is a fairly particular one, with more time and fewer resource constraints it would have made sense to conduct screener surveys in order to tap into this demographic in a more targeted way and help us find the best and most fitting interview candidates. Nevertheless between myself and my colleagues we each knew at least a few people who had recently been through the process of buying toys as gifts for loved ones or friends’ children.

User interview

The interviews offered some useful insights into people’s thought processes and reasonings when it came to them buying toys (and other products on e-commerce stores) as gifts. When buying for themselves we found that users generally had go-to sites or processes in place in order to quickly and efficiently get to the items they needed, but when it came to buying for others then interestingly the process changed completely in most cases.

“If I’m shopping for myself I have top brands that I usually go to because I know what I like and what they offer” Nicole
“If you’re shopping for someone else or for a gift you need a little more inspiration and education” Nicole

This idea of “inspiration and education” was echoed across a number of our interview candidates in one form or another, along with the frustrations of not being able to find items easily and spending a long time looking for the perfect gift without being familiar with the products in general.

One thing that proved to be very interesting (and illustrated just how important our next stage of research would be) was brought up by one of my interview candidate, Nicole. She had recently bought a toy as a gift for a family member and had found it on the Marks & Spencer website, not necessarily the first place you’d think of when it comes to toys, but her answer was telling:

“I was buying jewellery as a gift for someone else on the M&S website because I knew what I was getting, I looked on they’re nav (Which is really good) it took me about 3 clicks to get to toy cars (kids — toys — cars) and found it straight away and added it to my cart then and there because it was easy” Nicole

This was the perfect illustration to me of just how important the practice of efficient and well thought out information architecture and taxonomy proves to be!

1.3 Card sorting and site mapping

With our interviewees statements rattling around our heads we jumped into the exciting new world of Information Architecture.

This was a relatively unexplored area for everyone on the team but its value had already been proven from the sentiments expressed in the interviews, so we knew it would be vital to help us create an efficient and user friendly experience for Pip & Squeaks online store.

When we were initially given the project brief we were also provided with a limited snapshot (around 75 products) of the possible inventory that would be found on Pip & Squeak’s online store; from this inventory we started the process of categorisation. To do this effectively we would need to carry out a number of card sorts, card sorting being the process of labelling individual cards, or post-its, with every single item from the inventory and grouping them in the most logical or obvious groups

We began with an open card sort where there are no designated categories and it is up to the user to group items together in a way that makes the most sense to them. We then tried some close card sorts whereby the overall categories were pre-defined and the user’s task is to place each card in the most suitable category. The results were fairly reassuring to us, most users felt that the overall categories were clear and fairly self explanatory, there were obviously a few outliers but on the whole it felt as though we had a good base for our prospective website, at least as far as taxonomy was concerned

One of the rounds of closed card sorting

The next stage of the ‘structuring’ process was to come up with a suitably efficient site map. From the interviews it was clear that a easily navigable site was just as, if not more important than any other of the other aspects we were in the process of considering.

Site maps V1, V2 & V3
The final site map

After a number of versions (and a certain amount of simply doing them wrong) we settled on a relatively simple and assistive sitemap that we could use as a guide for our upcoming design solutions.

Now with a clearer understanding of the competition, personas, users, site structure and taxonomy it made sense to start to hone in on more specific problems and begin to define where our efforts would be focussed.

In order to do this effectively I chose one of the provided personas (in this case Daria as she most accurately represented the users we had interviewed) and a reasonably specific scenario to frame the problem in a more tangible way.

Problem & outcome statement V1

1.4 (Design)Studio 54

Now the group part of the project was at an end I teamed up with some other UX designers in the making and we held a design studio. If you are not familiar with this concept it is essentially rapid group ideation and problem solving converging on a singular goal. In other words we all sketch as many ideas as we can for a particular problem and then refine them together. This meant that I could get a valuable outside viewpoint on my particular problem an hopefully come to some solutions that I would otherwise not reach on my own.

Design studio & sketches

During the design studio process we began to focus in on the ideas that were expressed during the interviews about inspiration and education, especially when it came to shopping for items, or in a category with which you were unfamiliar. We rapidly sketched ideas for five minutes, discussed these top level solutions, sketched again, this time developing the ideas further then took the best elements of each solution and combined them and what came from this process was the idea of shared wish lists.

The concept of a wish list is not unique, Amazon for instance implement them in a very successful way, although thinking back to the user research and the idea that adults buying gifts for children wanted inspiration, this idea began to sound like a possible solution.

During design studio we initially thought of a mechanic where the user could share a code to allow other users to view their list. The thinking behind this was to keep the process as simple as possible and to not necessarily require them to make an account to be able to save and share wish lists. After further discussion though we realised that sharing via email was probably the best route to take to avoid confusion by implementing some new mechanism, so this was the route I would begin testing in the first stage of paper prototypes.

A possible solution for sharing wish lists with a unique code

2. Does it look good on paper?

Moving into the testing phase I realised that I needed to redefine my problem & outcome statement to reflect the new direction my solution had taken after the design studio.

The now redefined problem & outcome statement

With this problem, solution and outcome in mind I needed to better understand the potential issues along this journey and where my focus would be most usefully applied. By creating a high level user journey I could move into the wireflow process with more consideration for the particular areas that may cause issues.

High level user journey and experience map

With a higher degree of empathy for my user going through this process, I could begin to delve into the more detailed aspects of how this particular problem could be solved with some initial low-fi wireflows.

Wireflow V1
Wireflow V2

Now it was time to translate this flow onto paper and begin testing with users.

Some screens from my paper prototype
User testing the paper prototype

For my paper prototype I tested the flow of the user receiving a link in their email client which they could click to take them to the Pip & Squeak website where they would be able to view the wishlist their friend had shared with them. They would then browse products from the wishlist, view a recommended product based on one from the wishlist and create an account to be able to save the product for later. The results for this particular flow were relatively successful and the concept seemed familiar enough to most users so I felt it was time to move into a low-fi clickable version to discover how the process would translate.

For the clickable prototype I devised a number of scenarios in order to try and get users to interact with as much of the site as possible to help me understand what they would expect in terms of taxonomy and the site map.

The clickable prototype yielded many interesting and actionable insights that really helped me to simplify and optimise my initial solution.

The wishlist email link and a product detail page from the low-fi clickable prototype
The wishlist and account pop-up window from the low-fi clickable prototype

I tested a number of separate scenarios with the clickable prototype ranging from asking users to view products, navigate to other product listing pages, sign up for an account and save items to their own wishlist. From this testing a range of vital of feedback was received that would help me simplify and also clarify a number of the features I had included.

“The ‘Already Have’ section on the wish list is confusing, is it generated by the site or does the user add it?” Tommy
“Does the ‘Already Have’ section get generated from past purchases or does the user add them manually?” Mariane
“I didn’t expect the items in ‘Already Have’ to be there in the wish list” Julien

The first important element that I needed to reconsider was how the wishlist was displayed, all of the users were unsure about the fact that you could add items to your wishlist which you already had. The intention behind this was that you could share this information in order to ensure people didn’t duplicate purchase items that you already owned but obviously the implementation at this stage was unclear and caused unnecessary confusion for the users.

“The homepage should have a wishlist icon to save me having to go through my account to view it” Tommy
“I would like to see an icon for the wishlist in the top nav bar” Mariane

One of the most valuable insights I got from the user testing was that there was no way for a user to access their wishlist without first going to their account page. A classic case of not being able to see the wood for the trees, I was trying to implement a wishlist solution but hadn’t provided a clear route to the feature! This was a real “penny drop” moment for me on just how valuable user testing and feedback throughout the whole process is, without it I was so focused on the solution that I was unintentionally making it harder for the user to reach their goal, lesson learned!

Testing the clickable prototype with Tommy, Julien & Mariane

With the feedback on hand I could set about making all of the necessary changes and iterating to the the next stage of design, a couple of these changes can be seen below:

Changes to the top Nav bar to include the wish list icon and a more informative account sign in icon
Changing the button hierarchy and aligning with the ‘wish list’ naming convention

After testing the low-fi prototype again with the included changes I found that users were much more comfortable navigating through the site and had no problem carrying out the scenarios I had set for them, this was encouraging so I swiftly moved on to upping the fidelity and testing further.

Changes implemented to the wishlist and account creation pages
Simplifying the ‘share wish list’ process and clarifying the ‘add to cart’ information

Feeling confident that users were comfortable with the taxonomy, site layout and wish list feature implementation, I felt at this stage it would be important to consider a checkout flow, this is an e-commerce site after all and would be an essential part of the process for users.

I wanted the process to be as clear and linear as possible, helping to guide the user through the process section by section and visually confirming entered information at each stage. I sketched out the process initially to help me visualise all of the components necessary for what is a fairly complex and interaction heavy task for the user.

Steps 1–3 of my initial checkout flow
Steps 4–5 of my initial checkout flow

I created the required wireframes for the checkout process and incorporated them into my next round of testing, updating my scenarios to include purchasing a product and going through the full checkout process to see how users would interact with my solution.

The initial stages of the checkout flow prototype
The final screen served to the user would see on completion of the checkout process

The feedback was generally positive overall, I had to change a few elements that users felt were unnecessary or confusing, however I had tried to stick to conventional design patterns for checkout processes as closely as possible making the whole flow feel fairly familiar and comfortable for most users I tested with.

3. Delivering the goods

Now that I had all of my testing feedback implemented, my scenarios and flows updated and all of my screens designed and structured according to the site map (there were a lot of screens, see below) I could evaluate how my solution had answered the initial project brief and helped my persona achieve her goal. With regards to the brief I felt as though I had answered a number of the key targets such as ‘having clear ways to locate specific products’ through an effective site map and good information architecture. I felt that I had also effectively addressed the requested ability to ‘have an efficient means of purchasing one or more products’ via my checkout process.

All of the screens for the various flows being tested, including the checkout

For my persona she would feel confident in her purchasing decisions by virtue of specific recommendations via the wish list feature, have inspirational guidance in the form of products recommended based on similar products and also save time by having a clear and efficient checkout process.

A reminder of my key persona’s problem, solution and outcome

Reaching the end of the project I wanted to explore the service design aspect of my solution a bit further by including both sides of the process. First would be the user who creates and shares the wishlist, second would be the user receiving the link, viewing the wishlist and completing their purchase based on the wish list recommendations.

Both user flows for the entire wishlist creation, sharing and purchase process

Here I have included a video showing a walkthrough of the above ‘dual user flow’ in the form of a clickable prototype.

Video walkthrough of the clickable prototype

Try the prototype for yourself by clicking here