Redesigning A More User Centric Online Toy Store

#UX #Design #UserResearch #InformationArchitecture #eCommerce #low-medfidelity #wireframe

Toys Etc. has been around since 1976. Their charismatic and community-focused brand created a loyal customer base. They differentiate themselves with their products and their quest to promote childhood development.

Problem:

Toys Etc’s website is very cluttered and difficult to shop. The amount of information slammed onto the landing page makes things look outdated and suspicious, eliminating any sort of trust that the user may feel while using the site. The website doesn’t assist the user to help find what they are looking for and/or purchase an item. Lastly, the website does not capture the in-store experience which is what constitutes the majority of its revenue.

Objective:

To redesign their website to create a more trustworthy and personable experience, and therefore, increase sales.

My Role:

UX Designer, Researcher, Information Architect.

Constraints:

10 days time. Beginner level Omnigraffle.

Process:

Introduction:

My only experience toy shopping was about 15 years ago so it seemed only necessary to orchestrate as much research as possible. The first steps I took were observing the Toys Etc Store in Lincoln Park, conducting user research, and contextual inquiry.

Research:

I was given three user personas by my client that encompassed their targeted audience. These helped highlight the main concerns, pain points, and context, but I needed more information.

By observing the store and interviewing its’ employees, I was able to unveil the inner workings the store had that made it so successful and kept it in business. Walking into the store was similar to the website because it was very colorful and “loud”. Unlike the website, the store used visual queues and signs to help guide the customer through to what they wanted, and the staff was always present from start to checkout, providing expertise and assistance.

“They typically ask us to help them find a toy by gender or age.”
“No one makes purchases on our website.”

The employees provided valuable insight into what the customers want out of them, which is help with finding quality toys for enriching their children’s development. Interviewing the shoppers had shown that their is a strong community feel to shopping at Toys Etc, and that they enjoy taking their kids there to find the right toy.

It was important to cross reference and find patterns within the user personas and store observations. By affinity mapping my notes , I began to assimilate and reconfigure the data.

list of observations and data.

I took my newly acquired data and began constructing affinity diagrams, which helped me find subtle similarities and insights that began to compound on one another. Looking for patterns and insights, I soon discovered the signal under the noise.

affinity diagram displaying the formation of an insight!

Discovery:

My design direction:

My user needs a more personable experience that adds value by offering guidance and assistance to the user.

was based off of my insights:

-The website is discouraging and does not evoke trust.
-The In-store experience offers guidance and expertise, and is personable. Shown by the staff always being available to answer any questions or suggest an item, and the layout of the store which helps funnel shoppers into the section they want to browse.
-Return visits are welcomed with reward points and easy checkouts.

Features/Concepts:

I began ideating and sketching some features and redesigns that I wanted to test with some prototypes. My first designs:

  • focused heavily on user profiles and how that data could help with future purchases.
  • I had designed the log in and sign up buttons to prompt the user directly to his or her profile.
Flow chart and lo-fi sketches.
  • I then added features for sharing reviews and feedback to make validating a purchase more user friendly.
  • By redesigning the cluttered landing page, I was able to focus more weight on directing the user to new and top rated products.
  • The newly redesigned home page also offered a more recognizable navigation bar to locate specific items and learn more information about the website and its offerings.
  • I also added a “share to your social media” feature to allow users to brag about their purchases or get some feedback from friends and family before purchasing.

Prototype:

I revisited my user personas and walked each individual through my user flow to see if their needs were met.

user flow showing the process of landing on the home page to finding a product and checking out.

There were many opportunities and areas to improve this website, but with the constraints and guidelines, I focused specifically on my design direction tasking me to make the website more personable and therefore easier to checkout. The main feature I decided to task my user testers was whether or not the profile feature would increase value driven content by helping the user find what they want with suggestions as well as establish a relationship by remembering their information to help the purchasing process be less time consuming.

After finishing my first prototype, it was time to conduct some usability testing to validate whether or not my added features and redesign were on par with my design directions.

Unfortunately, I ran into many problems with the user tests. A majority of my testers were confused and annoyed by having to fill out their profiles and input information for the system to learn and be proactive. I had created this profile feature to decrease any time spent when returning to purchase items. If the system remembers the user and their information, there will be less friction with having to input their payment method or shipping address.

After testing, I focused my attention to redesigning the profile feature. I decided to have the user sign in with their preferred social media account so that the website can auto-populate their information without the user having to do it manually.

Final Product:

https://projects.invisionapp.com/d/#/console/6191053/133071691/preview

The final product uses:

  • signing in with social media to establish a relationship and ensure a more speedy and easy checkout by storing/remembering user payment, shipping, and purchase history.
  • easy to read and submit reviews to provide social proof as to what others think about an item.
  • Social sharing feature to validate within one’s social communities.
  • a global “chat” feature to provide assistance and expertise throughout the entire website.
wire frames for final product.

What did I learn?

Conducting UX design and research is a challenge in itself. I learned how difficult it is to re design something without putting yourself or your preferences first.

I would like to set up another user test and task the user to sign up through their social media accounts. I would like to gain some better insight as to what value they see, if any, by signing in that way.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.