Designing e-commerce online store experience
How to think in a disrupted way about the future of e-retail and UX design for e-commerce web store selling smart toys? The aim of this case study is to consolidate all research and work towards creating a high fidelity prototype for smart toy e-commerce website supported by a deep analysis and research to find the best strategy. The first part of the study analyses the current trends in the market for smart toys and emerging trends. It also reflects on the usage of smart toys in the kids’ development lifecycle. The second part presents the goals, subgoals and its relevant objectives for creating a successful e-commerce website. The last part presents the process of designing a website and showcases the design choices based on the research and latest market analysis for online retail patterns.
The goal
How to think in a disrupted way about the future of e-retail and UX design for e-commerce web store selling Create a trustworthy, high-profitable, renovated, and intuitive e-commerce website for the US market with pre-acclaimed/ pre-tested/ award-winning educational toys for different profiles of kids between 3 to 13 years old.
Subgoals
– Help parents/ busy people/ educators/ institutions/ relatives make the best choice when selecting the toy based on the child’s profile and age
– Make the website very easy to navigate and explore so people have a great shopping experience
– Display products in the most engaging and informative way
– Create a webpage with a customer in mind, providing all the support client needs 24/7
– Create a renovated, recognisable and trustworthy brand in the space of e-commerce toy stores
– Create a progressive, influential, disruptive environment to promote innovative smart toys that help kids develop/ learn in a better way
– Be transparent about how the selection is made and the process of certification and the quality of the products displayed in the shop
– Create a good relationship with the new customers who are new to this environment and also people who have certain knowledge about the educational toys and want to learn more
– Generate quality leads/returns to the store
– Create seamless, exciting and intuitive mobile shopping experience that helps customers find exactly what they need on the go and purchase it very easily
– Be the leader in online shopping user experience in terms of the innovative approach
Teamwork
I have collaborated with two other classmates on this project: Lili Raghian and Chrissy Yu. The project lasted 2 months and the results I would like to share with you.
Research points regarding the concept for the e-commerce website
Importance of toys in the child’s development
The digitalization of everyday life
What makes a smart toy smart?
What type of toys parents would most likely be interested in purchasing
How to create a curated selection of certified toys?
How to engage with the audience more effectively and how to build a community
Market research about the online retail and toy industry
Major concerns regarding smart toys and how to find solutions for them while designing a web store
Research points regarding the UX e-commerce website patterns
A trend we have researched is the momentum toward greater use of interactive content. We have found that interactive content does a much better job of engagement than static or passive content: quizzes, assessments, calculators, even videos that accept viewer input to determine what is shown – Shopify
People are in this discovery mind-set [on Instagram] and they want to go further. So what we’ve done is remove that friction and just allow you to, when you’re interested, to quickly go and explore further — What instagram shopping means for frictionless commerce
E-commerce website trends & patterns
Check out innovations
Shopping experience trends
Subscription models
Shipping options
Return models
Content strategy
Payment methods
After checkout engagement models
How to easily discover and explore products on the website
Redefining the meaning of rating the products and finding new ways for meaningful rating
Innovative ways to display the product and finding a way to reconnect with influencers and search for new channels of influence
Seamless shopping experience from mobile to desktop and vice versa
User needs based on the interviews and user persona
Indicate what is the material the toy is made from
Write about what are the current trends for toys and inform people about the smart toys
People expect good shipping options
People want easy returns and a guidance on it
Discounts, rewards program
People expect to see ratings not only for the toys but for the shop itself
Customers want to read reviews of the toys
Reliability of the products, the impact of toys on a child’s development
How the toys sold in the shop are popular on social media
Wireframes
I first designed our low-fidelity prototype to determine information architecture, key features and functionalities, and user flow.
Final design
As we continued our research, we moved to high-fidelity prototypes and went through various design iterations.
Intuitive search
In order to save time to find the right toy I have come up with the extended search where when you click on the search field you get navigated to the most used parts of the search results. So, for example, you are not sure exactly what you are looking for but the sale section caught your eye so you can easily get there.
Hotspots
I added interactive images which are currently being used on Instagram. Each image displayed on the webpage would have hotspots connecting products on the image with the products in the store. On hover, you would be able to see the name of the product and its price. It shortens the path of the product discoverability and allows the user to purchase the right away.
Basket as a shortcut
Whenever you hover over the basket it allows you to search for the toys within a click of one button. This functionality as you will later see is very handy for the mobile users and for the shopping experience itself. Empty state of the basket requires a call to action, it should encourage people to go and purchase a toy.
VUI search
As we move more towards the conversation interfaces the step towards Voice interfaces almost feels unavoidable. I think saying out loud what you are looking for without clicking on your screens seems like a very intuitive Human Computer Interaction. That's why I thought that we should enable this functionality in our store. Soon after you say loud what you are looking for you are being redirected to the search results. The same applies to mobile users who can easily without using their gestures too much just say loud what they are looking for and within seconds get what they want.
Homepage as extended search
I wanted to allow people to discover the content of the store and navigate them through enjoyable manner. The main page would include three sections which would navigate the users through the main categories of the products. Two first sections would be bestsellers and new items. The third section would contain features of main categories. Right among the main categories of the toys I have embedded an option to receive 20% off from the first purchase which I hope would encourage users to make their decisions about their first toy.
Highlight what makes you special
I wanted to make it visible that we are offering free delivery options, gift wrapping and reward program. I think people want to know what they can get extra with this shop and feel like this shop is taking care of their customers. Subscription models are also becoming increasingly popular as people have less time to shop and secondly they want to try out new things with fewer costs. They want to be surprised and is getting a delivery organized for you every once or two months is very convenient.
Build your community
At last, the community area starts. As first I have included a blog section where experts can write about smart toys. We could also display blog entries from parents who make reviews about the toys. Underneath you can find testimonials area where customers talk about their experiences with smartkidz. In the last section, I included Instagram posts from the community, customers, kids interacting with the toys purchased at the shop. At the bottom of the page, I placed a button for the 24/7 chat with an expert. The footer should include certificates and badges that inform the clients about the reliability of the store and the security.
Search results
In the results page, you will be given a set of filters to help you navigate through the selection of toys. You can also sort the products according to the price, alphabetically, by new or bestselling products.
Introducing a toy
The toy should be marked with the certificates, award badges. As we are providing a curated selection of smart toys it is important for us to show that the items you see in the store are reliable, are educating and enhancing the development of many different skills which otherwise would be hard to teach a kid. As the market for smart toys poses many obstacles, concerns the certificates can create a more trustworthy impression and highlight their education, safety aspects.
Another important aspect that should be found next the toy description is the dimensions of the toy, from what material the toy has been made, what are the main features of the toy and what types of skills development the toy promotes.
Reviews made by customers
The product page should include high-quality images of the product with a video review that could be created by a child youtuber, vlogger or a video made by the company releasing a smart toy. Videos made by kids at the same age as the target audience using the toy is the best way to advertise the product, hear the impressions, watch the kid using this toy or even unboxing it. Peers of the same age will definitely point out the most crucial aspects of the toy encouraging to purchase this toy. This way the product review seems to be authentic and less influenced due to the marketing reasons.
New customer reviews
I would like to introduce a new way of rating a product. I have been thinking lately that the standard star rating doesn’t really work anymore. One of the reasons is that we don’t want to show products with low ratings on our page. So automatically products with low rating would be removed. Which means that I am aiming for showing products with a good rating only. And besides that, we are showing a curated selection so I thought I need to come up with another way of rating/ reviewing the products. A rating that could provide meaning to the customers and help them with making their choices. Additionally, long extensive reviews are also not working, they are hard to read and take lots of space.
So I came up with a new way of rating products which allows customers to upvote for a review that another customer left if they authenticate with it. They can also create their own review. Each of the reviews would consist of a limited amount of words to shorten the time of reading the content and to allow the customers just to skim through the reviews and get the most of it.
Shopping through a basket
I think the big problem with online retails stores is the breaking shopping experience where you have to leave your product exploration in order to jump to your basket to see what you already got there. I think basket should be viewable at any time and should be easily editable. At any time you should be able to adjust the amount of the products that you have in there or change the color of the product or even seamlessly go to the checkout procedure.
Multiplatform checkout
Checkout process happens in three stages. The purpose of the first stage is to gather the information about the customer and also to offer a fast checkout option. The options here are the most recognizable ways to check out such as Google pay, Apple pay and Paypal. The second step is to give information about the shipping method and the last one is a payment method. In the payment method section, you can either choose to pay with credit card, PayPal or use cryptocurrency. That is a new thing provided by Coinbase who has released Coinbase commerce services where a customer can pay for goods using their cryptocurrency which they hold in their digital wallets.
Face ID checkout
The mobile shopping experience has become largely popular among people and therefore the shopping enhancing technologies are evolving simultaneously. The Face ID checkout is a very easy solution to quickly confirm our purchase. It stores information about our identity and has an access to our funds. It does skip the long and mundane process of typing our personal details, shipping adresses, and account information. I think the same technology can be easily applied to web checkout.
New funnel to increase leads
After a successful order, it would be a good idea to present the customer with a discount code to encourage them to purchase at a shop next time. Thank you message would be also advisable as well information about their purchase and the order number.
Link to the full case study
