top of page
Project Vision
The main exercise of this project was to create a desktop version of the Canadian Tire Centre App. This allows for users to access it through their computer or a phone. The Desktop version of the Canadian Tire Centre is a great way for users to get informed on the main Ottawa arena where they can watch their favourite artists, and watch their hockey team. Users can also look at planning their visit, viewing restaurant/concession options, viewing and purchasing merchandise, and arena information.
Challenges
1)
Deciding what to put on Homepage
2)
How to divide sections
3)
Ensuring Pictures and Icons would stand out
4)
Upgrading look of the current website
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
After designing the app, I updated the information architecture such that it is more fitting for the desktop version. I decided to split up the events and hockey tabs from the app to have their own pages. I also changed transportation to 'Plan Visit'. Finally, I added a seperate page dedicated to 'The Arena', where users can see more details on Arena information.
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.
Organizing Homepage.
Users pointed out that the homepage could be organized better. Some elements were removed and added into a different page.
Better use of Font.
Users expressed some of the fonts used did not seem to mesh well with the overall look of the design, as well as some fonts needing to be larger.
Declutter information.
Users stated it was hard to complete certain objectives because there was too much information to look at. I removed excessive text to give a more simple look.
Better use of Colour.
Users explained the use of colour was confusing and did not look appealing to the eye. I changed some of the colours so they wouldn't stand out as much.
Challenges
Challenge 1
Deciding what to put on the homepage.
Because there are so many different activities, inquiries and information to look at, it was difficult to decide what to actually put on the homepage. I finally decided that the 2 main activities people are looking to do is inquire on events and hockey. This is why they are the 2 main components of the Homepage. I also added a carousel with all the upcoming events to show the user what events will be happening in the immediate future.
Challenge 2
How to divide sections.
Because of how much information is needed to create an arena website, I had to plan out how to divide the different sections so that it would look clean and organized. I did this by using dividers, as well as large text to indicate a new section
Challenge 3
Ensuring pictures and icons stand out.
In order for the wireframes to look better, I had to ensure the icons and pictures would stand out. I did this by using cards. I added pictures that fit the section as well as added an icon so it would be easily understood by the user.
Challenge 4
Upgrading look of the current website.
While researching for the design of the website, I looked at what I could improve from the existing website. I believe the existing website could use a complete new look because it looks outdated. I challenged myself to make some of the pages look more visually appealing for users.
Current Design
New Design
Style Guide
The Canadian Tire Centre Desktop colours represent the companies identity because it uses the same colours as the logo. I decided to use a similar style guide to the app so that it doesn't seem off brand. These colours were used throughout the app in a synchronized manner throughout the website. I decided to use a sleek font in Lexend Deca which I believe contrasts well with the fonts.
Takeaways
I believe creating the Canadian Tire Centre Website was a great learning experience because I learned how to transfer from one screen to another. Doing research for the website was different from the app because this time I was able to compare my designs with the current website that is up. 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 website and look forward to doing many more projects in the future.
bottom of page