Exploring Online Competition
Competition for quality online stores is scarce and hand curating toy stores are almost non-existent or incredibly niche (Little Pnuts). Big corporate stores like Toys "R" Us have a huge selection, but lack vintage toys and the personal touch that a brick-and-mortar store brings. There are a few subscription based online services like Lootcrate that send hand curated toys, however do not give the customer an option to choose their own products.
I further researched companies that do well and have toys such as best buy and amazon.com to find common design patterns and confirm best practices. I also drew UI inspiration from Spotify because its platform that thrives on discovery.
Matching business goals with customer needs
We were provided with three personas with varying goals and purchasing cycles us to help define our Toy Store.
I focused on Daniel as my primary persona because of his short purchase cycle and as the persona with the most opportunities to resolve because of the resources of the toy shop. He knows exactly what he wants and his social media savviness could lead the store in the right direction.
I chose Jason as my secondary persona because he is big on discovery and looking for recommendations for his daughter. I designed the website so that a shopper with any level of tech empathy could easily navigate the store.
E-commerce patterns & Best Practices
Ways the stores succeed in positive experiences
Big prominent images a picture is worth thousand words and with an online store its the closest thing to holding an item in your hand. Especially nice with 360º views or multiple angles.
Calls to action could encourage shoppers to act and purchase even more so when combined with detailed information of stock or when stock becomes limited. Scarcity is known to compel action.
Price comparison or at least info of the retail/list price.
Customer reviews and rating systems are Digital version of word of mouth.
Product descriptions by real people for real people which the store already excels in.
Social media options to spread the word. It is said with social media people are now 4.74 degrees apart.
Easy checkout system in 4-steps or less.
Strong information architecture to assist the customer to find items and discover items new to them in a disorienting, engaging way (i.e no endless lists, lack of breadcrumbs or tags).
Designing for a feeling of handpicked toys
People don't like to be given the run around in stores or online. To gain a better understanding of peoples expectations, I performed an open card sort with 5 participants. The open card sorts helped guide the structure of my site, decide what needed to be on the homepage and possible secondary navigation categories.
After the card sorts I had a clearer view of how people described the toys, where to expect them and toys that could be placed in multiple categories. I attempted to combine the information from the card sort with the toy store's goal to promote their hand curated items and provide a logical information architecture.
Transitioning to Wireframes
Prior to taking my course at General Assembly I had taken a few tutorials on Bohemian Sketch 3, however this was my first time designing task flows, a prototype and logo within this software. I was surprised at how simple it was to adjust and duplicate multiple artboard to help me make my adjustments.
In sketch the center prominent search bar took up too much real estate and drew focus away from the hand picked recommendations. I wanted for people to focus on the hero image for the stores marketing purposes or on the time invested handpicked toys.
Below the hand curated toys most stores I was inspired by the toy stores I researched that had featured brands, testimonials for social proof and some story telling to build customer trust.
Testing for way finding
I tested a few of my classmates on the "kid-in-us"
prototype. I gave asked them to find the he-man toy in and go through the check out. I observed where they clicks were missed and adjusted my prototype based on their feedback. I previously hadn't noticed that the total price looked unpaid at the because it was on the last checkout screen. To prevent customers from feeling trapped or disorientated, I inserted breadcrumbs below the global navigation. Overall there were very few issues that surfaced during my usability testing.
With more time I would've continued higher-fidelity wireframes that I started here.
My proposed solution heavily focuses on the promotion of item discovery and the store's hand curated items. I believe the personal, detailed offerings is what separates the store from its competition and enhances its customer experience. I designed the store with best practices in mind and tried to always give the user multiple paths to reach the same items. If given more time, I would like to add customer recommendations based on past history, wish lists and maybe a public wish lists to share things you would like as gifts.