top of page
Project Vision
For my first UX project, I decided to make an app for my local arena that I work at part time. The Canadian Tire Centre app is a beneficial app for any event goers who want to make their experience at an event more seamless. Users can get notified on upcoming events so that they don’t miss any events they may have wanted to go to. With the CTC App, users can preorder food on their phone and wait less in lines, as well as see merchandise for concerts/events.
Challenges
1)
Getting acclimated with Figma
2)
Determining optimal navigation bars for users
3)
Ensuring Pictures and Icons would stand out
4)
Creating Payment Process
5)
Deciding which page users will start the flow
Research
In this Project, I took a goal-oriented design approach. I kicked off my research by creating a goal statement. This helped with maintaining a consistent framework during the design process. I then created a competitor audit in which I looked at different designs of similar competitors. I looked at the strengths and weaknesses of each design. This helped with brainstorming ideas for my app.
"Who will benefit from the app?"
"How can users complete their goal?"
"How many types of user journeys are there?"
"Who are the biggest competitors?"
"What tasks can be completed?
"What are some challenges?"
Competitor Analysis
I looked at some of the competing companies. I examined the elements I deemed were good and elements I thought needed more work. By doing this, I was able to see what elements would help the Canadian Tire Centre app gain popularity and be seamless experience for users.
Meet the Users
Jim
Age: 44
Occupation: Business Owner
Jim is a big fan of the team. He is a season ticket holder and very passionate about them. He goes to most games and encounters some issues. He does not enjoy the wait for food because he doesn’t want to miss any of the games. He also does not like how there is not enough space for him to comfortably sit in the stands.
Jeremy
Age: 23
Occupation: Retail Worker
Jeremy is a die hard fan of the team. However, he does not get to go to many games for a few reasons. He is a college student, so he doesn’t really have the time/money to go to games but when he does go it is special. He lives far from the arena and usually likes to take public transportation.
Imani
Age: 18
Occupation: Student
Imani is not a fan of the team. However, she loves going to see concerts and see her favorite music artists when they come to town. She likes to go with her friends. She would like to go, however she isn’t always aware of when artists come.
Brainstorming
To begin the design process, I constructed a information architecture to highlight the users journey. This showcases the users end goal being completed and the process they take to complete it.
Sketches
Wireframes
After sketching out my wireframes, I began making them digitally through Figma. This helped me begin my design process by having a good foundation of designs.
Iteration
After creating my low fidelity wireframes, I decided to test them out with people I work with at the Canadian Tire Centre, as well as friends and family. I was able to draw some insights on what I should do to edit the wireframes.
Better User Flow.
I found that users that were navigating through the prototype often had issues going back to the Homepage. I made sure to add more ways to go back.
Diversify Font.
On many pages of the prototype, users indicated that some of the fonts were too big, and needed to be smaller. They also explained that others needed to be bigger.
Show more info.
Users expressed they had difficulty understanding the full purpose of the page they were on, and that more detail would help with this issue.
Add Transportation.
Users who often go to see events pointed out that having a transportation tab would be very useful to help map out their journey.
Challenge 1
Deciding which page users will start the flow.
The first thing I received criticism for, was that users were not fond of the original first page of the user flow. It started out as a signup page, in which users could enter their details followed by turning on notifications. However, I decided this was unneeded and could just merge the idea into the homepage.
Challenge 2
Determining Optimal Navigation Bars for Users.
Once Users landed on the homepage, they pointed out how there was no navigation bar on the bottom. Having a bottom navigation bar is another way for users to have a seamless experience using the app.
Challenge 3
Creating Payment Process.
Making a payment process that was effortless for users was something that I did a lot of research on. I made sure users had the ability to customize their order as well as know the wait time and pickup location at the end of the purchase.
Challenge 4
Ensuring Pictures and Icons Stand Out.
Picking the right pictures and Icons were a crucial part of the design process. These are important because it helps users understand what the actions of those icons are.
Style Guide
The Canadian Tire Centre App colours represent the companies identity because it uses the same colours as the logo. These colours were used throughout the app in a synchronized manner throughout the app. I decided to use a sleek font in Lexend Deca which I believe contrasts well with the fonts.
Color
Type
Buttons
Takeaways
Creating the Canadian Tire Centre App was a very great learning experience in my UX design journey. I learned a lot about the different elements needed to be a UX designer. Doing research was very eye-opening because I realized understanding the value propositions competitors and analyzing their products are very important for the design of an app. Creating Wireframes as well as designing the app was a very engaging experience for me that I enjoyed. Looking back, I like looking at the progress that was made from the paper wireframes on day one to now. I enjoyed collaborating with the people who tested the product as well as creating insights based on their feedback. Overall, I had a very enjoyable experience creating the app and look forward to doing many more projects in the future.
bottom of page