Little Worlds Toy Shop
No better time than a global pandemic to create a new e-commerce website for a budding toy store
Concept project as part of General Assembly’s UX Design Immersive course. This was a collaborative group project and 2-week design sprint.
The brief
For this concept project I was tasked with creating a new e-commerce website for Little Worlds Toy Shop, a fictional toy store.
My role
I acted as the sole designer on this project. Throughout certain activities of the design process, including user interviews, competitive review and card sorting, I collaborated with four classmates for the purpose of leveraging each other’s networks and research data from which to draw insights.
Discovery phase
The discovery phase began with reviewing the business requirements outlined in the project scope document before exploring customer needs through qualitative user interviews. This was further supplemented with competitive review.
Business needs
Little Worlds has been a neighbourhood store in Seven Sisters since 1996. It wants a website that showcases its products while still maintaining its brand image, ‘small shop’ appeal and great customer service. In the project scope document, Little Worlds outlined key elements that were important to include on the website:
- Full product catalogue, with steer to popular categories
- Clear and easy navigation
- Purchase path
- Establish the brand and its point of difference
- Ability to contact the store
User interviews
The business requirements seemed reasonable but the project would benefit from validating them by exploring customer needs through qualitative user interviews.
My teammates and I put our heads together to come up with a series of questions that would allow us to dig into users’ digital shopping habits and pain points. We decided that it made sense to interview people who had real-life toy shopping experiences and therefore could conceivably be a customer fo Little Worlds.
Key learnings:
From the five user interviews conducted, a broadly consistent set of needs emerged. When it came to online shopping, our users prioritised:
- Convenience — through ease of delivery and return
- Painless product discovery — through use of search and filters to narrow down options
- Informed purchase decisions — by reviewing photos and videos of the product and customer reviews
To help keep the users’ needs front of mind throughout the design process, I created a persona based on the user I had interviewed. My persona, Svende, needed a way to easily search for and find the right product because she gets overwhelmed by choice.
User flow:
To further focus my persona’s needs, I created a user flow mapping her journey through a would-be toy website. To do this, I imagined a typical scenario faced by Svende — buying a gift for the child of a close friend. In this scenario, Svende’s goal would be to find a product, assess its quality and buy it.
Competitive review
An important part of the discovery phase was to understand how competitors in the market designed their own websites in order to identify common design principles that users would expect to see on Little Worlds’ website. My teammates and I created a list of design elements to analyse on the websites of other toy stores, large and small, as well as the largest online retailer, Amazon.
Our analysis showed that the most common design elements identified aligned with not only the requirements stipulated by Little Worlds but also our findings from the user interviews.
Navigation
The last piece of the puzzle before jumping into design was to decide how best to organise information on the website. To do this, we conducted an ‘open card sort’ with fourteen users to understand how they might expect products to be organised. This involved giving each user forty cards, each representing a product from Little Worlds’ catalogue, and asking them to arrange the cards into categories that made sense to them.
The results highlighted eleven common categories. To consolidate this further, I referred to Hamleys’ categorisation, which most closely aligned with the results of the card sort. This then formed the basis of the sitemap and the pages to design for the website.
Design phase
Given the tight timeframe, I focussed my design efforts for the sprint on only the most pertinent screens and design elements. This would allow me to quickly capture and iterate on feedback gathered from usability testing before adding in more complex features.
This was an iterative process that started first with basic sketches on paper and ended with a a mid-fidelity clickable prototype.
Throughout I gathered regular feedback from seven users across three rounds of remote testing:
- 1st round — lo-fidelity digital design tested for overall structure and intuitiveness
- 2nd and 3rd rounds—mid-fidelity digital design tested for ease of interaction and navigation
Key learnings
Feedback was overall very positive. Users found the design very intuitive and in all instances were able to navigate through the screens with minimal effort. However, I observed some moments of confusion as well as requests for more information. Users:
- Wanted to see how many results their search returned
- Wanted the option to sort results
- Couldn’t immediately find the ‘back’ navigation links under the main call-to-action buttons
- Experienced duplication of effort with log-in prompted after some billing details had already been entered
- Needed the opportunity to review their order one last time before finalising payment
Improved design
I addressed these points in the final iteration as follows:
- Displayed search results and added a sort option
- Moved the ‘back’ navigation links to the top right where most users had first gone to look
- Changed the log-in prompt as a pop-up screen before users moved to the checkout flow
- Added a review order page
Next steps
With the basic layout and flow of the website in place and tested, the next areas I would focus on include: adding sub-categories in mega-navigation menus for more refined search, expanding the product pages to include the ability to add and see customer reviews, and building out the pages for wishlist and account/profile. And, of course, designing a high-fidelity wireframe to really bring the website to life.
Challenges and key learnings
As this was the first time the group had worked together, it took some time for the ice to break and the collaboration to flow as the group lacked a forceful personality who might have immediately taken the reins and steered the group more quickly — particularly in a remote working environment. Whilst this arguably made for a better working dynamic later on, valuable time was lost early on during what was a very tight timeframe. This was a learning I took to the next group project with a similar dynamic where from the get go I took on a facilitator role to facilitate productive brainstorming sessions.
The updated prototype can be found here
https://danachahine546817.invisionapp.com/console/share/PG1J0KSS23/480579736
