While at the General Assembly UX Design course, I was tasked to design a conceptual e-commerce website prototype of mid-fidelity, for a toy shop. In the time span of 2 weeks.
The first few days, we worked in groups so that we could share our interview insights and knowledge acquired of toy shops in general. And the rest of the first and second week, I worked solo and focused on representing the user’s problem and designing a prototype to solve them.
Techniques I applied
- Competitive and User Research.
- Card Sorting and Persona.
- Site Map and User Flow.
- Wireframes and Prototype.
- Usability testing.
The software I used
- Sketch, for UX and UI design.
- Trello and Google Sheets and Docs, to conduct and manage research.
- InVision, to prototype.
- Canva, to present my work.
Understanding Little Worlds
The company, a small toy shop, describes itself as local, community-driven and customer service-based. They are passionate about their heritage and quality products.
As they saw the increase of e-commerce popularity and its benefits, they wanted to expand their business online. And wanted for us to specifically focus on:
- A clear way to navigate the website and find products.
- Efficient means of purchasing products.
- Steer customers toward popular products.
- Showcase their heritage.
To kick things off, I decided to apply the Double Diamond process. This helped me to follow a logical order in the design process, by segmenting it into 4 stages: discover, define, develop and deliver.
As we all know, there are many toy shops, so we started looking at those competitors to see what was working, what wasn’t, and what was missing.
Comparing Little Worlds to other toy shops
I then incorporated the competitors in a quadrant format to be able to see where Little Worlds values would stand in comparison to them. And then I also looked at their websites, finding trends such as:
- The bigger the company, the more products and information, they offer. However, we do not provide information about their heritage.
- The smaller the company, they have a smaller, curated inventory, and heritage seems to be more important.
We understood that if we wanted the website to succeed, we needed to showcase plenty of information of the products, as well their heritage so it would set them apart from the big, hollow, companies.
Interviewing the targeted audience
We as a group conducted 5 interviews, as we needed to know where their pain points were so we could work towards solving them and not to make the same mistakes our competitors made. Finding that:
- People tend to buy toys as gifts.
- People value multiple images of the product itself, as well as their measurements and being able to tell the quality.
- Too many filters result in overwhelming them.
This helped us realized the importance of, for example, quality images and succinct information when navigating, so we could reduce the frustration level of the users.
Understanding how users go about information
We applied a technique called Card Sorting, where users are given a series of labelled cards and asked to organise and sort them into groups that they think are appropriate. We wanted to know how they would go about searching and finding the products, toys. We gave them an inventory of toys from Little Worlds. And we found:
- People categorize toys by type.
- Some of the categories they created are not used globally.
Therefore, we ended using the categories that were similar to the ones used globally, so it would make sense for most users that already buy from other toy shops.
Representing our users, meet June
Entering into this phase, we started working alone. And I decided to create a Persona, to frame our user research, and have a user to refer back.
The structure of the Little Worlds’ website
I create a Site Map, as it gave me a broad idea of how the website was going to be laid out and how June, would go about.
June’s flow through Little Worlds
Later on, I created a User Flow to represent how June would go about buying a toy, as I wanted to understand which screens were the necessary ones for me to design and focus.
After mapping out all the screens and steps June had to take and go through, to buy a toy, I started to design some ideas that could serve her objective.
I sketched a few paper Wireframes to have an idea of what the website would look like. Then I added navigation elements, to represent how and where they were going to be.
I moved the wireframes into a digital format, creating the low-fidelity ones. I then created a Prototype with these wireframes.
Testing It out
To take the wireframes to mid-fidelity, I conducted 5 Usability Testing, which is a technique where you test a product with a user, to see what is working and what needed to be improved.
The users were given the scenario that June would follow to achieve her goal, buy a toy (a Teddy Bear) for her little cousin. Here are some of the key problems found, and iterations made:
- Pages looked too cluttered, not enough spacing between elements. So I increased the spacing between elements.
- Some toys were ambiguous to categorize within the past categories. And the same ones were not big enough. So the main category of Baby & Toddlers became Baby, with increased size.
I continue to improve the website and iterate details to enhance the user experience, for June and the targeted audience.
Here below are some of the final screens I came up with, continuing in the mid-fidelity, so you can all understand the overall structure and some features implemented.
Try it for yourself!
I also designed a final prototype so you all can get a glimpse of what the website of Little Worlds Toy Shop could look like.
But just before that, let’s remind ourselves of June’s scenario; see if you can buy the teddy bear for her little cousin! Remember to check the measurements, as you are travelling.
Wrapping Up & Future
I can’t say I focused on all the deliverables because of time constraints, but what I can say, is that I design and e-commerce that it’s easy to use, the process to buy toys is fast and compared to the big retailers, Little World could keep up with them.
What’s next for little Worlds?
Keeping that in mind, I’d like to continue to work in this project to:
- Find a creative way to showcase the company’s values and heritage.
- Move into high-fidelity, adding colours and images.
- Continue to test and iterate.
The awesome feedback received
- The feedback was great in general, as I manage to deeply integrate the user feedback’s into the design, implementing realistic features.
- I iterated the placeholder images in the prototype. Prior to this, the image was of a line drawn mountain that stretched to fit the placeholder, and it realised that this did not look very good.
What I learned with this project
Overall this was an amazing opportunity for the class and I, to start understanding the users as a human being, not just data. Conducting plenty of user research, we were able to empathize with them to actually build a better experience, something beneficial that could address their needs in ways the competitors couldn’t.
Thank you for taking the time to read my design process!