Thinking differently: a UX Case Study on Readings Kids
This is a case study on developing an ecommerce website for Readings Kids — the bookstore. But rather than writing an essay on the whole process, much of which I’m sure you know, and have seen before, I’ve focused on the most contentious bits!
I hope you enjoy, and this piques your interest to grab a coffee. I’d love to chat!
Project Summary:
- Brief: Develop an ecommerce website for Readings Kids.
- Set up: Two week sprint, with a three person team, all working remotely due to Covid-19 restrictions.
- My role: UX Designer.
- Research Goal: To understand who buys books for kids online, and how we can take advantage of this growing market.
- Key Research Findings: (1) No one likes buying books online — it’s a functional experience and in no way mirrors the “warm hug” of walking into a cosy book shop. (2) A persona, Rachel, for whom the empowerment of the child is key in the book choosing process. (3) The staff at Readings, and the recommendations they make are highly trusted.
- Delivered: A user tested paper prototype of the Readings Kids website, using Figma, designed for our persona Rachel. Ready for mid / hi-fidelity mockup.
My Learnings:
- Interrelationship digraphs are handy for synthesis!
- We broke the rules — and got great results because of it.
- A minimum viable product (MVP) may not always answer the brief.
The Sprint:
So, here is how we broke down the sprint, and I could tell you all the usual things. How we broke down the brief, and how we followed the double diamond. Did a market analysis, researched the brand, used a survey to gather data, interviewed users etc, but I wont. I’m pretty sure you know all about that stuff.
Rather, in this case study I’ll be focusing on the two biggest points of contention on this project — the interrelationship digraph, and our (not quite) card sort. So, why don’t I just get to the juicy stuff?
Detangling our insights with an Interrelationship Digraph
On this brief we did a lot of research and got some great insights, consistent across our user interviews and our survey. But these insights were difficult to break down. They were so messy!
We knew that key to the issue of users not wanting to shop for kids online was that they didn’t like the experience. But why? How do we address that?
With one insight influencing another, we had a complex web of information and as a result it was difficult to identify the real problem we needed to address. So I suggested we used a handy-dandy “Interrelationship Digraph”. This blew my teammate’s minds. It’s taken straight from my project management training. This is what we came up with:
Basically, this is a way to map the various interdependent relationships between problems and their outcomes, and work out where would be the most effective place to focus our energy.
While no digraph is perfect (how do you ever map what causes ‘a feeling’ with certainty?) by looking at how many links an individual post-it had, we were able to immediately rank the insights. From most influential to the least. Resulting in this:
So we knew that the core problem was that the real life browsing experience could not be replicated, and that was why people didn’t like buying kids books online. But by viewing this through the digraph we were able to nuance this analysis, and understand a key pivot point of this problem. This led us to an aspect of the problem which was specifically addressable!
We could change the experience so people could check the book “physically” before buying online — this led us to our MVP.
By building a tangled web of interdependent relationships, we were able to detangle and distill our key insights into one, manageable problem to address. Thanks digraph!
Our MVP
This insight led us to a very simple MVP: better product pages.
In our final prototype all our product pages had:
- A high fidelity preview (of the whole book for picture books).
- An ASMR style video of the book — to show users the tactile quality of the product.
By providing these two new elements of the product pages we were able to address Rachel’s (our user’s) problem, without redesigning the whole website if the client didn’t want to. Brilliant! Cost savings!
Our whole team agreed that should this have been a real life project, we would have gone back to the client at this point. We’d have given them the opportunity to choose how they wanted to proceed.
We had an MVP that had solved the problem, but had not answered the brief — it had to be their choice whether they wanted to spend more money employing us. However, this project did not have a real life client and the brief did include a redesigned website. So on we went!
Doing (not quite) a Card Sort
To answer the brief, we had to design a full ecommerce website. Key to this was understanding how our persona, Rachel, categorised kids books. This way our site’s information architecture would sort them into categories logical to her. But we had two key concerns about a card sort:
- What books do we choose for the card sort?
Do we use a list of the top 100 best selling kids books? Will they include all the various types of books sold at Readings Kids? Rachel also likes Australian books and authors, which are also rare to find on book lists. Short of having a stock list from Readings we had no idea where to find a list of books to include in the card sort.
2. How do we ensure authentic engagement in the card sort for her?
From our research, we knew it was vital for Rachel to physically check a book before she bought it. And she was looking for numerous things. The size. The story’s values. The reading level. The quality of the paper. What it taught. We knew that these things could not be replicated in a traditional card sort. By only providing product names and basic information we would actually be undermining our results — depriving Rachel of key information upon which she would normally base her purchasing decisions, and thus we assumed her categories.
So we decided to break the rules.
We did a ‘card’ sort where we asked users to categorise actual physical books. (Without the constraints of physical distancing due to Covid-19, we would have used the same books consistently in each card sort, but sadly this was impossible.) So we asked users to take a random assortment of children’s books off their own book shelves and sort them with us watching.
It was an experience!
Users loved it. They opened up the books to show us the language, “This one teaches prepositions, like over and under and around, so I’m going to put it in an early language category”.
They got excited showing us why they categorised each book a certain way. “This one is interactive. You can get the kid to find certain things on each page, or lift up flaps and find things. I’ll make a category called interactive!”.
And they led to some brilliant insights, which we wouldn’t have otherwise had using a traditional card sort.
While we know we “broke the rules” and even caused some heated debates on the ‘correct’ way of doing things — I truly believe we did the right thing. We broke the rules based on our research of what was important to our users. We got consistent, insightful and valid results because of it, and it would have been impossible to find these insights using a traditional card sorting method.
I’d do it again.
So, what we delivered:
We delivered a low fidelity prototype, designed for our primary persona Rachel, complete with a product page which addressed her key problem: ‘physically checking’ the book before buying.
Key Elements of this Design were:
- A slider in the top right hand corner which allowed for a dual user engagement process, one designed for the adult and one for the child, as it was important to Rachel that their child could take an active role in choosing the books they read.
- A quiz about needs and interests which leads them to three staff recommended books, similar to the real life process of getting a book recommendation from the staff, whose opinion we know Rachel respects and trusts.
- A redesigned product page with two key features to address Rachel’s need to physically check the product before buying it:
- A high fidelity preview (including full previews for story or picture books) so she can assess whether the content and literacy level is right for her child.
- A short ASMR video of the book so Rachel can better assess the tactile experience of reading the book which is core to her reading experience. Such as the first 10 seconds of this video.
Next Steps
This is obviously an incomplete project, and that’s ok. We worked super hard on this, and came up with a prototype that met both the brief and our user’s needs. But there are still heaps of things the team would like to do:
- Further develop the Informational Architecture of the website with further card sorting research. (We only had the time to do three after all the heated debates!)
- Further usability testing of our paper prototype to fine tune the user experience.
- Flesh out the designs better to produce a high fidelity mockup, upon which we can conduct further usability testing.
- If possible, interview Rachel’s kids. If she wants them to play an active role in choosing the books they read they are likely our secondary persona, so we will need to know how to meet their needs too!
Reflections to chat about
- I need to ensure I either always work on a well balanced team, or improve my graphics & high fidelity mockup skills.
- Our market analysis needed more work in order to improve our strategy and provide a unique advantage to our client.
- Covid-19 had some good side effects — remote video conferencing for user interviews is great! Easy to record and schedule.
Want to learn more?
If you’d like to become an expert in UX Design, Design Thinking, UI Design, or another related design topic, then consider to take an online UX course from the Interaction Design Foundation. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices. Good luck on your learning journey!
So, what do you think? Drop me a line, I’d love to hear your thoughts!
I’m at www.linkedin.com/in/jmaguirerosier/
This project was done with two wonderful humans, and great UXers:
- Monica Flores, you can check out her work, including her case study on this project at www.monicaflores.co/
- Dogan Sevik, you check his take out at dogxhe.wixsite.com/website
