Jester's Toy Box - A redesign concept of Playthings A Plenty's website
Background
My second project during my UX design studies at General Assembly. The purpose was to determine any problems users experienced while visiting the current website and find a way to solve them.
My Role
This was a solo project. I conducted and analyzed all research, identified and defined the problem, then designed a solution in the form of a fictional website.
The Original Website
Research Process
Usability Testing
I found four people to test the original website. They were given the task of visiting the shop online section and selecting a product, then proceeding to the checkout section.
Some key takeaways from usability testing:
• Too many categories
• The current layout is very busy
• Text is small and hard to read
• Product pictures and descriptions lack visibility
• Differences between mobile and web versions of the site
User Interviews
I interviewed the same four people following their visit to the website. I asked them a series of questions about the experience. For example: How often do you shop for toys online? What is your ideal online toy shopping experience? What items do you search for when shopping online?
Some key takeaways from the interviews were:
• I shop online very often, even for toys
• I like to see customer reviews before buying
• I’ll buy everything I can online to avoid going to a store
• I like to see clear descriptions and images of products before buying
Affinity Mapping
I wrote the key takeaways from the interviews with each person on different colored Post-It notes (one color per user), then placed them into groupings according to the similarity of each issue. Some key insights gained from this process were: Users wanted design improvements, search bar functionality, customer reviews section and better clarification in the categories section.
Card Sorting
Based on the data groupings from the Affinity Map, I determined that Card Sorting would help narrow down some of the issues the users faced. I started with an open card sort for the categories on the website. This allowed the users to place the existing categories into groups and rename each group as a new category. I then conducted a hybrid card sort for the product inventory on the site. This meant that the users placed the products under categories I provided for them, but were welcome to create a new category of their choice as well. This process helped narrow the categories down from over 30 to 10, and helped with understanding how the users wanted to see the products listed under each category.
User Personas
Based on the research data, two user personas were created for this project. The purpose of having two personas is to demonstrate two different demographics. They represent the needs of the people most likely to shop for toys online. The primary user persona is named Alex, a father of two young kids, who works from home and shops online frequently. The secondary persona is named Kathy, a single woman in her thirties who prefers to shop in an actual store, but is concerned about Covid-19 risks. She has a niece and a nephew that she likes to spoil.
Comparative & Competitive Analysis
Comparative
I researched other independently operated toy stores to discover the ways they handle their online shopping processes and inventories. Some of them were Fat Brain Toys, Fishpond and eBeanstalk, just to name a few. I discovered that most of them had a much more streamlined process for placing orders and most of them provided customer reviews for products.
Competitive
I then looked at larger retail companies that sell toys, but also many other products. Target, Walmart and Toys R Us were the main sites I researched. I looked at the ways they streamline the online shopping process and considered ways to implement them into a smaller business model.
Sketching & Wireframing
Now that the problem was defined, I began to work on the solution. I began with sketching to determine the look of the new site. Since this was a fictional site, I decided to give my design a new brand complete with a new logo design. I chose a simple, 3 color palette and created a mascot character. I began wireframing in black and white, then quickly moved into color designs. I wanted to give the new design the charm of visiting a toy store, but with an online shopping experience more like that of a larger retailer.
The Tools I Used
Aside from good old fashioned pencil and paper, the tools I used for this project were Adobe Illustrator, Photoshop, Sketch and Invision. I started by creating graphics in Illustrator. I used Photoshop to crop photos, then placed them into Illustrator. Once I had my designs ready, I imported them into Sketch and began creating the prototype. From there I uploaded the file to Invsion and brought the prototype to life!
The Prototype In Action
The prototype was built with the primary persona user flow in mind. During usability testing the users were not given these detailed instructions.
Here are the steps:
- Click the arrows three times on the header images until returning to holiday sale. 2. Click on shop by category. 3. Click on girls. 4. Click on dolls and figures. 5. Click on the logo to go back to the home page. 6. Click on the baby Yoda doll. 7. Click add to cart. 8. Click on the logo to go back. 9. Scroll down to the Care Bear on the home page. 10. Click add to cart. 11. Click on the cart icon at the top. The about us and contact & events pages are also functional, but were not included in the user flow.
Next Steps
I conducted more usability testing on the prototype. Here are some of the further iterations that would be made moving forward.
• Reduce the size of the shopping cart icon
• Live chat feature
• Tighter alignment on the checkout section
• A section for personal info that links from the checkout section
