Project overview
Play the role of the "Expert UX Consultant" for students in the Visual Merchandising Program by creating an improved in-store shopping experience for Canadian Tires.
The Problem
Canadian Tire is a store that offers a variety of merchandise. However, the core focus that my partner and I decided to build our design solution around is the toy section, specifically toys revolving around Ride-On Cars and RC Cars. As kids, when presented with the opportunity to pick a toy to take home, it can be an exciting but overwhelming experience with the chance to select the perfect one. Of course, with so much variety to choose from, you would want the one you pick to be the right one, but unfortunately, there’s only trial and error after taking it home to know if it was the right fit for your child.
The solution
One of our main goals for this problem space is to build up our buyer’s confidence. Through concept illustration and mobile application implementation, we aimed to design a circuit within the store so that buyers could test out the product before buying it. In addition, we aimed to build a solution that made the process interactive for both child and parent creating a better experience when shopping through the store. Incorporating a mobile app into the design solution would help bridge the gap between the home and in-store experience.
The vision:
After conducting a consulting session with my partner from the visual merchandising program, we created a plan and provided a clear vision of what to execute for the project. Our goal was to provide kids with an interactive experience by implementing a mobile app and utilizing it within the in-store experience. With this goal in mind, we aimed to create a more straightforward process for picking out toy cars that would take the weight off parents' shoulders as they assess their children's needs.
UX Research
For this project scope, I utilized the Double Diamond method to break down the qualitative and quantitative data and streamlined my findings to narrow my focus to a problem space that my design solutions could effectively solve.
data collection
usability test
Each task was recorded to analyze the completion time. Based on personal judgment and personal time completion, I set designated time duration of 1:30 minutes per task. If users were to finish a task past this appointed time, it would be considered unsuccessful. I put a designated time because, through my assumption and belief, if it takes the user longer than 1 minute 30 seconds, the user's navigation flow has failed the user in helping them find what they needed. Here I can dissect more information on what had gone wrong for the user and how it could be improved so that they don't have to spend much time searching for a specific item on the interface.
Task #1: Add a 12V Lamborghini Sian Kids’ Ride-On Car
Since the project focuses on merchandise relating to toy cars for kids, I wanted to see the navigation flow of finding one of the products listed in the prototype. With the insights collected, it will be noted and taken accounted for in the design process.
Task #2: Search for the closest Canadian Tire near
you and find the address
The second task is to mimic parts of the online buying experience when picking up a specific item that the user may want to order.
Thinking about the exterior experience the user might go through before even approaching the physical store, I wanted to see if there was any difficulty in finding the most convenient way for the user to travel from their home to the store. Traveling is already a hassle for some people, so by analyzing the navigation flow, I can make some adjustments to the final design to make the user’s life easier when transitioning to
digital to physical experience.
Task #3: Find the flyer section and look for the ProForm
City L6 Folding Treadmill
The primary purpose of this task was to see how the user would engage with finding sales for specific items. The mindset that I had when creating this task was that, since parents are going to be buying these products for their children or perhaps other children, searching
in the sales section could benefit them with a little bit of money-saving. Therefore, I wanted to observe how the user would interact with finding the flyer and engaging with it to find specific items.
Usability Test Findings
After assessing the usability test with the users, there were many commonalities as well as differences that each user encountered when navigating through the application:
Common Points:
-
Users still prioritized the search bar to find specific items rather than going through the categorized tabs
-
Users didn’t spend time scrolling through the pages to see what they needed
-
Preferred the mobile over the website after testing out both devices
Differences:
-
A preference for the Website and Mobile were different amongst the users
-
one component was more information was displayed on the desktop, while the other preferred the mobile because it was easier to read
-
User 2 had difficulty searching for the location
-
User 2 had more difficulty with the app than the website
1st Issue:
For the mobile application, users found that the product page for the merchandise was a bit confusing to look at compared to viewing it on the desktop version.
2nd Issue:
When presented with a cluster of products together, users felt overwhelmed and confused about where to look precisely, resulting in scrolling past the product they're looking for.
After assessing and collecting the data on what worked and didn't work, I relayed the findings to the design process to create a solution that would help solve these issues.
Journey Map
By laying out the structure and journey of the customer, I was able to pinpoint areas where elements within the mobile app could improve. This process helps me identify areas that could improve the experience when interacting with the brands. By mapping out the user’s journey, I was able to seek and identify areas that could potentially be enhanced by the new design solution built.
How might we statements
Problem
HMW
Solution
Leaving the decision up to the child to choose their favorite toy can be a long process.
How might we make purchasing the merchandise a fun experience for both parents and children?
Creating a fun interactive process involving parents and children finding the best fit toy together.
With so many toys on the shelves, it can be an overwhelming experience for the child to pick the right one.
How might we make the picking process easier for kids?
Create an in-store experience that allows kids to test and play with the toys they desire to ensure they don't want away feeling like they chose the wrong one.
Not being able to see the true scale of the merchandise when purchasing online
How might we help parents/kids visualize the merchandise from their own home?
Provide buyers with a AR feature that allows them to see a 1:1 scale of what they are purchasing
As we began to come closer to the design stage of the mobile application, I brainstormed some “HMW” statements. Then, I placed potential solutions to generate some features I could add to the wireframe process.
personas
By considering the different types of families and other individuals, I built potential personas that might work for our solution.
Final Problem Statement
Parents with children need a shopping experience that creates an interactive component between the store and online experience to help them find the toy that best fits the child’s needs because during the stage of choosing which toy is best, it’s hard for the parents and child to not become overwhelmed with the vast amount of options to choose from.
wireframes
Final Mockups
Homepage:
The main screen is to display 3 core components that will help bridge the gap between the in-store and online shopping experience.
First component: The quiz
The quiz will have a series of questions that will be prompted to the user to gather insightful data, which will result in a result that is specifically tailored to them.
Second Component: Ride-On Challenge
The Ride-On Challenge is a feature that will have the user utilize during the testing area of the store.
Third Component: The Flyer
At the end of the day, majority of the toys being purchased are by the parents. By having a flyer that's catered to what they are looking for, it could help parents find deals to save money on their purchase.
Starting the Quiz
Prior to entering the quiz, fundamental questions are prompted so that the system can start to filter out the specifics. The two main categories that user's will be picking from is the Ride-on Car and the RC Vehicles, they are then prompted with age selection so that the results they receive can be accessible to the appropriate age.
Vehicle Terrain Selection
User selecting the Ride-On car will be presented with terrain selection. This would also be apart of the filtering process that the user will go through, this will be the initial step of allowing the user to have a feel of what type of RC car they are looking to receive through the results
RC Question
RC Question
RC Question
RC/Ride On Question
Ride-On Question
RC Toy Car Questions:
The main element to keep in mind was making sure that the quiz wasn't too long. When designing this feature, I utilized a progress preview to have the user know how much more they would have to do.
Each question is related to real stats of each toy vehicle in the Canadian Tire Catalogue. Each input that the user activates throughout the quiz will be matched to the right toy matching the selecting that they've pressed.
Different questions will be displayed depending on what the user chooses between the Ride-On and RC toy vehicle.
Toy Vehicle Recommendation:
After completing the quiz, users are then prompt to reveal their results.
The key element added in the product page is the additional visualization of that stats of the toy vehicle. User's can gain a sense of speed compared to the other suggest toy cars with a yellow stat bar indicating the difference in performance. User's then have the option to add it straight to their cart or enter into AR mode which would allow them to either view it in their own home or have the user direct them to the location of the toy within the store. Other components that make the product page more easily digestible is the key features that are streamlined with simple icons and quick info titles below.
AR Implementation:
User's are able to navigate to their toy car reveal results at the bottom within the navigation bar so that they can refer back to the cars at any point of time.
The AR component utilizes an in-app camera feature to showcase a 1:1 scale of the toy they are purchasing as well as a simple navigation within the store to find the product they are looking for based off the results the user receives.
The In-store Experience:
For the Ride-On Challenge, the parents can help their child navigate through the in-store driving course and complete the challenges prompted within the application. After completing the challenges, user's can get access to the custom Ride-On License and License Plate for their Ride-On Vehicle, both of these components would be printable so that the user's could have a physical copy to add to their toy vehicle.
Reflection
Constraints:
1. Resources
In the role of "UX Consultant," to start any process, I would need assets and resources which my partner needed to provide first so that I could start and create a good foundation for the design thinking process. Though, in the beginning, it was difficult for my partner to create the vision that they wanted to execute, I assisted them in breaking down the needs and helped them understand the problem space that they wanted to tackle. By provoking the 5 whys and learning about the details of what my partner was trying to execute, I extracted data and information to start the foundations.
2. Scheduling
This current project required us to work with another student from a different program. Balancing our schedules and workload was challenging at first, but we could compromise days that would benefit both parties. But due to the limited times to meet, It was challenging to work on the project simultaneously. Solutions to this problem were to update each other via WhatsApp to ensure the progress and status met their deadlines to execute the project successfully.
Final Statement
Retrospective Adjustments:
1. Interview More Parents
Though I was able to grab data from one of my interviewee with children, I would've liked to explore more of the path of gathering more data from different sets of parents. I feel that this would provide me with deeper insight into the problem space that could potentially provide me with a more impactful solution.
2. More people for usability test
Though three people were able to do the usability test, I feel that being able to grab more participants would help me validate the priorities within the issues needed fixing/changed.
In conclusion, this project provided me with great experience to hone my research skillset and data organization. A significant component of what makes the project different than others is collaborating with someone from a different program. They opened my mindset on the visual merchandising section of the user experience and allowed me to learn more about the buyer's experience.