A Little Store With a Big Heart
A UX Design, e-commerce project for a fictional toy store
Project Overview
A concept e-commerce website created during a two-week sprint.
Toys are incredible — some of my fondest memories are from building LEGO as a kid. I would say they shaped me into the person I am today, but then I would be sat here dressed as Buzz Lightyear…
The project set-up was split in two, initially working within a team for the discover phase and then independently for the remainder of the project. Buckle in.
Phase 1: Discover
Researching competitors, card sorting and conducting user interviews.
Phase one commenced by receiving a brief from Little Worlds Toy Store. To summarise, they wanted to create an e-commerce website to make purchasing toys easier in the local area, priding themselves on:
- Customer service.
- Quality handpicked goods over quantity.
- Supporting the local community.
What other toy stores are out there?
Competitor research meant looking at a variety of existing toy websites and highlighting their strengths and potential weaknesses.
After convincing myself I don’t need more LEGO, I produced a feature analysis table — an awesome way to visually represent what existing stores included and anything missing.
Some stores, for example, did not include wish lists, toy dimensions or videos of their products…intriguing…
Card Sorting
Why do we do it?
Participants are asked to group items into categories according to criteria that made sense to them.
After conducting 10 card sorts, it was clear that everyone had differing opinions for category names. Combining these to make sense to the majority was challenging. To solve the issue, using the most popular and frequent wording, I formed the following:
User Interviews
User interviews helped me understand my target users goals, perceptions and experiences with e-commerce shopping. The main insights were:
- The average amount of online shopping was 4 times in one month.
- Knowing product dimensions, multiple images and videos is important.
- Users enjoy a simple website set-up. “I tried to use Amazon to buy a new toothbrush but the choice was so overwhelming I ended up shopping in-store instead”.
- “Recommended for you” sections are very helpful.
Phase 2: Define
Creating a persona, considering the navigation techniques and producing a user flow.
Everybody, say “hello” to Deborah
One of the highlights for me was creating the persona. Summarising the insights to understand the target markets needs, goals, frustrations and behaviours, was a lot of fun!
How would I integrate all of these findings into the Little Worlds Toy Store website?
Sitemap
My first step was to produce a sitemap — this is a great way to showcase pages the website would provide. Using the card sorting results I produced the below sitemap:
Navigation
Sitemap complete, I considered various navigation techniques to help guide users around the website:
- Global Navigation: An ever present section of the website at the top, it would include a consistent set of buttons that would take users to key sections of the website.
- Secondary: This would include a menu, such as a drop-down, to guide users to more specific areas.
- Breadcrumbs: This would show users where they are on a site’s hierarchy of pages.
- Faceted: Use of filters.
User Flow
Much like myself, you may be asking yourself “how will Deborah navigate the site and purchase a product?” Even if you’re not, a user flow helped present an overall picture in creating a more seamless user experience, the ‘happy path’.
Phase 3: Develop
Ideating, creating, sketching wireframes and usability testing.
How low can you go — low-fidelity wireframes
Keeping Deborah’s persona and all my findings so far in mind, I produced sketched wireframes. Taking the initial research into consideration, I included toy dimensions, images and videos on the website:
User testing provided great feedback
Testing on two users provided the following feedback:
- The ‘chat-bot’ function would annoy users.
- Users wanted to see pricing of products on the listing page.
Feedback on board, I used Sketch to create low-fidelity digital wireframes:
User testing and Insights
Testing on four users provided the following feedback:
- Users liked the large ‘hero image’ on the Home Page.
- The faceted navigation was popular.
- There was confusion over why the “Recommended For You” was a tab rather than a separate section.
- The checkout process caused major confusion. Originally, when selecting a delivery slot I had opted for a calendar-based layout to improve customer satisfaction, but users were not used to seeing this and deemed it unnecessary.
Moving to mid-fidelity
Using the feedback, I upgraded to mid-fidelity and again tested on 5 users. Insights showed:
Phase 4: Deliver
Iterating and creating a clickable prototype!
Final iterations complete, using InVision, I created a clickable prototype. You can see here Deborah browsing the site in order to find her daughter an amazing new LEGO set:
Next Steps
If there was more time for the project, I would:
- Include social media links in the footer.
- Further explore an ‘About Us’ section.
- Enhance customer service and community elements by exploring a ‘live-chat’ option.
Conclusion
All in all a great project. Carrying out and learning a variety of UX processes, such as interviews, card sorting, creating a persona and testing/iterating in order to produce an e-commerce website was a really cool experience! Much like my old toys will alway bring back such fond memories, looking back to this project will always remind me of how good a time I had and how much I was able to learn in such a short space of time.
Key Learnings
- New programs — Using Sketch throughout this project really helped develop my skills and knowledge extremely quickly in the program.
- Becoming agile — responding effectively to user testing and feedback to iterate and make changes to the wireframes in a very short space of time.
Please feel free to reach out to me on LinkedIn!
