Trinket Trove online shopfront — a retrospective
In December 2015, I was engaged to design a prototype for a hypothetical store - Trinket Trove new online shop front by fictional entrepreneurs, Hugo and Yoncé.
Trinket Trove, a toy store in Hawthorn, wanted website design that communicates their brand values and provides their customers with the in-store experience.
“Our business may grow, but we will never lose touch with the personal touch of the small shop that started it all.”
Techniques and tools
- Competitor research
- User research
- Information architecture design
- Wireframe design
- Iterate and test
- Low-fi designs
- Clickable prototype
- Further testing
Create a website that removes customer effort in shopping for toys whilst nurturing the customer experience. The website will be client-focused and will showcase new and recommended toys and provide affordable shipping and a click to collect purchasing option.
The project began researching competitors — assessing website structures, key features and navigation design.
I was trying to find a common thread between the sites and understand how they organised their information.
We’d been taught earlier in the week that information architecture and product taxonomy was like the taxonomy of the animal kingdom. So when I looked at sites seemed to post products twice or in a folder for ‘all toys’ I was feeling lost… surely classifying a loin in only an ‘animal’ folder was somewhat lazy.
Hugo and Yoncé provided three personas that reflected the behaviours and values of Trinket Trove’s customer base. The buying habits, high importance services and features where considered and applied throughout the remainder of the project.
Jason — I want quality, exclusivity and cool-factor of purchases. “If I get her the cool stuff, she thinks I’m a cool dad!”
Jenny — I want reliable service, I want to know if they stock specialist items. I need value for money. “He tells me what he wants — the hard part is finding it”.
Daniel — I need authenticity, exclusivity and showing-off purchases.
I moved on to user research where usability participants were then recruited to conduct consecutive card sorts.
“Card sorting is a quick and easy way to design an information architecture, workflow, menu structure or website navigation paths.”
Participants were asked to group toys as they would expect to find them in a toy store or on a website.
The open card sort allowed nine participants to group the toys as they wished and assign names or categories to them.
The hybrid asked them to group the toys into set categories whilst also allowing them to change or add categories as they wished.
I was surprised that despite only nine people participating in the open card sort that a stronger result didn’t appear. I was expecting the hybrid or closed card sort to simply validate my findings from the open card sort, not to provide a final result.
Whilst finding a home for each product, I felt confident enough to move into creating low fidelity wire-frames, ensuring I kept the global navigation blank.
Low fidelity wire-frames were designed and tested.
Small iterative changes were made based on feedback and design conventions.
With the results of the cards sorting, I was able to use the results as the basis of the information architecture.
This was tricky for me as didn’t feel comfortable with multiple homes for products within the structure. To me, Elmo wasn’t a junior toy - more of a figurine. I knew what I had in mind in creating the categories but unfortunately… or fortunately, the users had something else in mind. This in itself as a massive learning for me for my path to UX.
No… I’m not the user. No… I don’t know what the user thinks or wants… what have I been doing all this time?
With the bare bones design in ink and my IA in mind. I needed to ensure I had a path for the user and a plan for what I needed to implement. This brought on the user flow.
I approached the flow from a very high level, while I wanted to ensure the structure and flow met the personas needs I didn’t want to get too caught up in the details of their specific purchases.
From here, I created a clickable prototype and tested it with users. You can view the first iteration here: http://swaf0n.axshare.com/
Six participants were asked to participate in usability testing. The participants were introduced to the process with a quick overview of the project before being provided hypothetical scenarios.
Each participant was then given a two tasks to complete; find product X, follow the steps you would take to buy product X.
I was sure to observe aspects they appeared to look at, links they went to click and any comments made.
The results were below:
- 4/6 users were able to find the toy they were looking for
- 6/6 understood the payment process
- 2/6 users asked to find the ‘magic linking rings’ could not find them
- 5/6 neglected to see the new or returning customer buttons
Whilst a larger number of people neglected to see the new or returning customer buttons, I felt like the finalised design would overcome this issue along with error management techniques.
The fact that the only people asked to find the ‘magic linking rings’ could not locate them was a large concern for me and this formed the basis of my next iteration in the design.
I consulted UX specialists for an expert review of my information architecture and that’s when the new for sub categories and secondary and tertiary navigation presented itself.
I set out to complete a third card sort… another hybrid.
This card sort was excruciating to watch as there was little I could say without directing the taxonomy of the toys. I watched on as products were moved into new homes… some new homes that I questioned if they made sense.
No… I’m not the user. No… I don’t know what the user thinks or wants…
With the results of this card sort I created a new information architecture that focused for now, on the ‘magic linking rings’. I was reminded during this process that there were in fact more than the 30 products I was looking at… these 30 products were just phase one.
Below you can see how I housed the ‘magic linking rings’ in the end.
I was now more confident with where the project was going to land for my clients so finalised my clickable prototype, ready to hand over and pitch to my clients.
Here is the link to my clickable prototype I created in Axure: http://jhcjwm.axshare.com
- Further testing taxonomy of products with more users and full range of products
- Once an updated prototype is built further usability testing should be conducted to ensure the user flows are robust and effortless.
- Integration of response design
- Introduction of features requested by the personas
- Develop and measure
- I’m not the user… I don’t know what they want.
- Information architecture isn’t the same for everyone… As a designer you think you know the solution and what is best. UX has showed me that not everyone thinks the same.
- No, not everyone are idiots… but everyone can be users.
- My path to UX is set to provide many more challenges