Joyous Toys
Project Duration:
Two Weeks
My Role:
UX Research, UI Design, Prototyping and Testing
Solution for E-commerce website, for a small local toy shop business, with a goal to increase the rate of online conversion
BACKGROUND
Let me introduce you my client!
Joyous Toys business model is based on customer service, reasonable pricing, and keeping it local. They employ local staff and support the community. They source from a variety of suppliers so that they are able to offer customers the best range of products at the most competitive prices.
CHALLENGE
Joyous Toys launched their e-commerce website one year ago to support the local community by allowing them to order some products online. They were not pleased with the results, they had plenty of visitors but few completed purchases. Through an improved e-commerce website, they want to showcase their products, while maintaining brand image of a ‘small shop’ appeal, and great customer service. How can I improve Joyous website to increase conversion rate?
What does client want and need?
The primary business goals for this website include:
● Having multiple clear ways of locating specific products
● Each product must have a product description page
● Having an efficient way of purchasing one or more products
● Steering customers toward popular products
● Allow customers to contact the business
PROCESS
What I will do face a challenge?
Challenge
Problem
Research
Define
Ideate
Test
Iterate
RESEARCH
Research Methods: Online research, User Interviews, Card sorting
Analysis Methods: Affinity Mapping, User Persona, Competitive Analysis
ONLINE RESREACH
Trends in Online Children's Toy Sales Industry
Although market research studies have shown that parents prefer to to see and touch the product when it comes to buying toys for their children, analysts predicts that Online Toy Sales industry is expected to continue growing over the next five years, and even become the main distribution channel.
Customers will continue to demand high convenience of online shopping, and business will continue to fine tune convenience of delivery, shipping options and shopping suggestions.
Beside that, because shoppers still prefer in-store experience, business is trying to retain some of those fun interactive elements when selling online. For example, for holiday season, Walmart has launched online toy lab with interactive video feature, for children to virtually interact with top 20 toys of their choice. They staved to simulate how kids might interact with a toy in person.
WALMART ONLINE TOY LAB
Dedicated web page with interactive video feature who allows children to virtually interact with toys, watch
360 degree videos of toy, and videos of toys in action in different scenarios.
TOP 5 Influencers on Parents’ Toy Purchases
-
Child’s own wants and wishes 85%
-
Price promotions/sales 72%.
-
Online ratings/reviews 48%
-
Friends / family members advice 41%
-
Displays for trying toys in stores 37%
*Field Agent Survey presented parents of 5-12-year-olds (N = 523) a list of 10 potential toy-purchase influences and asked, “Which of the following have a particularly strong influence on toy purchases you make for your child?”
USER INTERVIEWS
What I am trying to find out?
Find out people habits and their experience when is come to buying toys online, in order to discover, what is their expectations, is there any pain points and find opportunity to improve whole process and make conversion rate higher.
Target Audience:
The major customer groups within this industry are young children who wish to play with the toys and games and their families that allow the kids to find entertainment for themselves and allows parents to rest. Most toys are made for children but bought for them by adults. Children must express interest in the toy, but parents and adults are the ultimate decision-makers. So, families with young children are the main target market for the toy industry. A lesser target market would be older children that contain their own money for toys.
For the purpose of this project I have interviewed 8 people with next demographic characteristics:
-
Age 25 – 60
-
Gender: any
-
Race: any
-
Profession: any
-
Location: Singapore
-
Criteria: People who have children
What I am going to ask?
-
How often users buy toys?
-
Where do they prefer to buy them (in store/online) and When (specific occasion, time of the day, month, year)? Why?
-
What shop or online store they are currently using and? Why?
-
How process of searching and buying toys look like, step by step?
-
What is the most important information they need to see when searching for the toy and selecting one for purchase? Why?
-
What kind of pain point they experience when trying when trying to purchase toys?
FINDINGS
What I have discovered?
After interviewing users, I gathered a lot of interesting and useful information. But how to make sense of them? By using Affinity Mapping! Affinity Mapping helped me to discover very strong patterns in users behavior, motivation and frustrations, and based on this insights I have created USER PERSONA to help me empathize during the design process and keep me focus on target users.
Common findings among behavior, motivation, needs and frustrations for all the participants include:
-
Most of the users prefer to buy toys online because is more convenient and time saving.
-
Most of the users buy toys approximately once a month.
-
Most of them are not willing to spend more than 15 min browsing.
-
User buy toys for 2 reasons, for their kids and even more for other kids as a birthday present.
-
When they buy for their kids they usually know exactly what they want. In that case they type in search bar, name, model, brand...
-
When they buy for presents they usually go through categories, use filters by age, gender, price, popularity...
-
To ensure proper product selection, for most of users was the most important to have good detailed photos where they can see how kids interact with toys, and guess about product quality.
-
Delivery time is crucial when toy is birthday gift, which is often situation (on a monthly basis)!
-
Most of the users care a lot about product material, dimension and safety.
-
Branded toys are preferred due to non-toxic and better quality.
-
Most of the users care about reviews and like to read them, but they leave review very rare, when they are approached by email and only if they are very happy or very disappointed in product.
-
Most of the users would be happy to have Gift Wrap option.
-
Most of the users like simple, visually pleasant and not overwhelming site
DEFINE PROBLEM
UX Methods: Problem Statement, Brainstorming, Hypothesys
CORINA NEEDS
a easy way to browse and quickly scan and access info about toys relevant to her
SO THAT
she can safe time on scrolling and avoid reading long descriptions.
CORINA NEEDS
to know more details about the toy, and understand how toy function
SO THAT
she can easier make her decision, and be sure that she made right choice.
CORINA NEEDS
an option to get quick delivery, and to know the estimated delivery date
SO THAT
she can be sure that gifts she want to buy will be delivered on time for upcoming occasions
HOW MIGHT WE HELP CORINA?
How might we can help Corina to quickly locate details she need? How might we can help Corina to understand product and make her choice? How might we can help Corina to be sure that toy will arrive on time?
HYPOTHESIS
I believe that by creating website with clear interface, logical categorization supported by various filter options, website which will provide rich photo gallery with zoomable photos and videos about product, I can help Corina to find product quickly and easy, and help her to make the right choice. By displaying estimated delivery time in a early stage of browsing, and offering option for express delivery, I will help Corina before she make order, to be sure that order will be delivered on time for special occasion.
IDEATE SOLUTION
UX Methods: User Flow, Site Map, Card Sorting, Sketching, Wireframing, Prototyping
UX Tools: Optimal Workshop, Figma
BACK TO RESERACH!
Competitive Analysis
Now when I know what is our User Persona's problem I can work towards solution. But before jumping to solution, to gain inspiration for my e-commerce website, I began by identifying 4 main competitors in Singapore. The direct competitors I analyzed included Amazon, Lazda, Toys 'r' Us and Better Toy Store. My goal was to compare and identify common features across these sites and potential opportunities for Joyous Toys to differentiate itself.
The most important takeaway from this activity was learning how different websites organized their toy selection and the overall layouts they used for those websites. Some of competitors has cluttered user interface overwhelmed by colors or information. Users had to scroll down a lot, or read very carefully in order to find key information they need. Check out process would lead users trough a few different pages consuming their time and make them click many times to complete their order. I identify that opportunities for Joyous Toys lies in clear visual design, scannable content and more simple check out process.
Competitive Analysis
FEATURE PRIORITISATION
Based on client brief, online research findings, USER PERSONA needs, and competitive analysis I made prioritization of the features I want to include in my solution.
MUST
-
Have multiple clear ways of locating specific products (search, categories, filters, sorting)
-
Allow users to log in and save details (saves time - user's need)
-
Each product must have a product description page (standard)
-
Have an efficient way of purchasing one or more products (standard, business goal)
-
Steer customers toward popular products (business goal)
-
Allow customers to browse products related to their current selection (standard, user's need)
-
Promotion & Discount section (Business goal and user's preferences)
-
Shop by Brand section (User's preferences)
-
Wishlist (Standard)
-
Read and leave reviews (Standard, user's preferences)
-
Have a multiple, zoomable photos which show product from different angles ( User's need)
-
Express delivery option ( User's need)
SHOULD
-
Provide videos about products (Trend in industry)
-
Q&A (Trend in industry)
-
Membership program and Reward Loyalty for repeated customers (Trend in industry)
-
Order status and Tracking option (Trend in industry)
-
Gift wrap option (User's needs)
-
Provide information about the store (Business goals)
-
E-mail support
-
Live Chat support
-
Share feature (Standard, online research)
COULD
-
Allow customers to contact sellers (Nice to have)
-
Blog (Nice to have)
-
Return and exchange policy (Trend in industry, nice to have)
-
Details on how to play to encourage child development (Nice to have)
-
Brand presentation (Nice to have)
INFORMATION ARHITECTURE
Card Sorting
The next step of my process was to develop the navigation system by conducting a card sorting user research technique to tap into people’s existing mental models. For this project I was given an inventory of 76 best-selling Joyous Toys products to use as a guide. With such a large inventory, it was essential to organize this information in a clear and understandable way so that site visitors could find the products they’re looking for.
I have conducted Open Card Sorting. I asked 9 participants to organize the 76 products into categories that seemed the most logical to them. Then I had them label each of those groups with titles they felt accurately described the items in that category. The goal was to gain an understanding of the potential ways the products on the Joyous Toys website could be categorized and how those categories could be labeled. This helped to identify and clarify next categories logical to the majority of users:
Site Map
With the results of the card sort and inspiration from other competitor websites, I created a site map to define the overall structure of the website. This was to ensure that products were going to be placed where users would expect to find them when visiting the website and make the experience more intuitive.
User Flow
After defining the “bigger picture” of the experience I needed to provide, I created a flow for the User Persona. The point of this was to define the intended steps users might take through various pages and actions on the website in order to complete their goal. This will help me to focus on what users needed to accomplish, and how to deliver that experience in the most effective way.
Sketching, Wireframing
Once I organized all my insights from the exploration phase, I began to design the website. To start this process I began to sketch several of the site’s main screens, using my user flows as a guide. This allowed me to quickly explore several concepts for the website layout.
After refining my sketches I began to design wireframes using Figma. I made sure to prioritize the features that would best address the needs of the users throughout the website.
High Fidelity Prototype
I had enough time before my first scheduled testing so I decided to make High - Fi prototype. I included real images of toys, real description as well as visual design. Based on my User Persona needs, and findings from Competitive analysis, I have focused to create clean and simple visual design to avoid overwhelming users on the pages they see, so that they can scan contend easy and quickly.
Home Page
To allow users to easily locate and find products I included a global and secondary navigation, as well as a search bar. The new arrivals, best sellers, promotions and product recommendation sections were key to showcasing the curated and frequently updated inventory as well giving users helpful suggestions on what to buy. I wanted to build customer brand relationship with Joyous Toys by incorporating “Our story” section on home page as well as "Welcome" section on global navigation bar where customers can find further information.
Category Page
Once a user selects the SHOP TOYS tab , they are brought to a category page that lists all the items under that specific category.
Product List
Once a user selects a certain category, they are brought to a Product List page that shows all the items under that specific category. On this page I incorporated faceted navigation for my user persona who wanted to narrow her choice by filtering products by gender, age, brand and price. I also included "Sort by" feature so that user easily can see what is best seller, new arrival and price gradation. After they use filter options to narrow product list, I included a breadcrumb trail to make it easier for the user to navigate and identify where there are within the website. Another important thing is that below every product I indicated estimated delivery time so that users immediately, before clicking on product can see is certain product can fir their criteria when is come to delivery time.
Specific Product Description
On the single product page, I wanted to make sure to provide detailed product descriptions so that users can ensure the product fits their needs. On this page it was important for me that user can scan easily key content they want to read without to much scrolling down and reading whole description. That is why I incorporated additional navigation in forms of easy scannable buttons, just below of short product description. Another important thing was to provide multiple zoomable photos of the product, so that users can be sure about visual details and get better impression of the toy. Below product description user could find helpful product recommendations based on the current product they have selected.
Check Out Page
Since my User Personas do not have time my goal was having an efficient checkout process so I made sure to make this experience as seamless as possible. As a returning customers, users have the option to log in to their account and have their saved shipping and payment information auto filled in for them. I decided to keep the checkout process all on one page to make it easier for users to edit their information at any point in process.
TESTING AND ITEARTION
UX Methods: Usability Test
UX Tools: Figma, Zoom
GOAL
Usability test would allow me to evaluate how users would engage with the proposed Website solution and validate whether it was addressing the primary user needs. I wanted to find out how my solution is easy or difficult to use, is it intuitive, what area need to be improved and what is users overall feedback.
USABILITY TEST TASKS, FINDINGS AND ITEARTION
Using Zoom and my Hi-Fi prototype I conducted remote usability test with 5 participants and asked them to complete three different tasks, to put themselves into the shoes of my User Persona. With participant permission I was recording UT sessions and analyzed results later. Let's take a look of Tasks, Major Findings and Iteration I did based on test findings:
Task 1
You want to buy Action Toy for your 6 year old nephew. Can you show me how would you do it? What if you want to see only toys from MARVEL?
Major Findings
-
All participants were able to complete task easy and quickly, they were able easily to navigate the website and locate all information they need. All participants reported that process were very intuitive and straightforward. Overall experience 7/7
Task 2
You want to buy Batman Super Friends Batcave Toy, but you need to be sure that you are making right choice for your kid. Can you show me how would you find details about the toy? (participants need to read description, zoom photos, find product size and read reviews...)
Major Findings
-
All participants were able to complete task easy and quickly, they were able easily to navigate the website and locate all information they need. All participants reported that process were very intuitive and straightforward. Overall experience 7/7
-
1 from 5 users made a minor mistake, but they recovered easy and quickly
Task 3
Put Batcave Toy toy in cart and proceed to checkout. Delete product from cart which is already there from before, or move it to wish list. Choose Gift Wrap option and complete order.
Major Findings
-
4 out of 5 users make mistakes trying to delete product from cart. They did not notice “Delete” and “Move to wish list” option because it was not visible enough. Font and color was same as everything else. They was trying to put 0 as quantity in order to delete product. It took them lot of time to spot “Delete” option.
-
All users was able easy to find and choose Gift Wrap option. Overall experience 5/7
Iteration
Based on findings from task 3, I wanted to increase user's satisfaction in the future and save time they would spent on locating "Delete" option. So, for higher visibility and easier detection I include icon or the trash bin, and change color of the font to distinguish this feature from the rest. How much this iteration was successful I will find out when I conduct another round of Usability Test.
NEXT STEPS
This is just beginning, there is so much more to be done!
The next steps for this project would be to conduct more usability testing after first iteration I made. After that I plan to explore different UI styles and create Brand Guide and Design System which will help me to refine visual design and make him more consistent and appealing, in order to present core values such as joy, happiness, fun, community relationship, simplicity...