Tim Hortons Catering —

How might we re-design Tim Hortons Catering to improve the ordering experience of customers?

How might we enhance the gym experience at the Tait Mckenzie Fitness Centre at York University?

Thumbnail_Timmies4

TYPE

UI/UX, Web Design, Product Design

TOOLS

Sketch, Principle, Pencil & Paper

TIMELINE

6 hours (August 2019)

The Problem

What is the current problem?


The current problems of the Tim Hortons Catering website consists of :

  • poor use of Tim Hortons' branding
  • poor typesetting, making it hard to read
  • poor hierarchy and structure
  • interface is complex and can be simplified

The Tait McKenzie Centre is the athletic centre at York University. Facilities inside include a pool area, a main gymnasium, and a fitness centre. The space has a welcoming and motivating atmosphere as they encourage inclusivity through signage, while also displaying athletic achievements throughout the space. The centre welcomes community members and York University students able to use the facilities on campus; users are mostly students and are both male and female. Activities at the centre include both individual and group activities, such as team practices or personal training. 

My team conducted an “AEIOU” to observe the Tait McKenzie Centre which can be found in detail below.

Above are screenshots of the current Tim Hortons Catering website, showcasing the problems identified in the experience as a whole.

The Solution

What is the current problem?

What is the current problem?

What is the current problem?

A re-design of the current Tim Hortons Catering website to create an interface that improves the ordering process by allowing easibility in customizing orders, finding store locations, and user-friendly food & drink menu.

Current issues this system will address include the lack of organization and student awareness of the facility services and fitness classes that the centre offers. It will also address the low involvement of students in programs less related to physical activity. Students will be able to access York’s athletic information along with their personal goals - compiling their activities and stats (done) within the fitness centre.Evident of the lack of organization is the problem of having to bring a bracelet/tag and student ID card to enter the fitness centre area, which can lead to frustration as you can’t enter if you have forgotten one of the above.

Understanding the User

What is the current problem?

What is the current problem?

What is the current problem?

user

Goals & Needs

1

When ordering, Olly needs to be able to easily adjust food quantity due to different sized meetings or lunches.

As a team, we listed out what requirements needed to be in the application. Beside this, we thought about the type of content that would be needed in this requirement and what sort of function and purpose it would serve. As we listed out these 10 requirements, it was helpful to understand what kind of features could be possible in our application.

2

Olly needs to be able to easily adjust and edit food orders by including dietary restrictions of team members.

As a team, we listed out what requirements needed to be in the application. Beside this, we thought about the type of content that would be needed in this requirement and what sort of function and purpose it would serve. As we listed out these 10 requirements, it was helpful to understand what kind of features could be possible in our application.

3

In order to receive the catering as soon as possible, Olly needs to find the closest Tim Hortons for short delivery time.

As a team, we listed out what requirements needed to be in the application. Beside this, we thought about the type of content that would be needed in this requirement and what sort of function and purpose it would serve. As we listed out these 10 requirements, it was helpful to understand what kind of features could be possible in our application.

Competitive Analysis

What are services/companies/experiences similar to Tim Hortons Catering?
skipthedishes, Uber Eats, platterz, Starbucks, and McDonald's.

 

After discovering the requirements in the application, we created a system map to show the different screens that would exist in the application. This allowed us to see how deep the system would be and what kinds of interfaces needed to be built.

LOCATION FINDING

POST-QUESTIONNAIRE

Through researching similar experiences and websites, I found a similar theme of having a search engine as the first prompt for the user to enter an address and as a result, showing a list of locations based on what was input.  I found this to be eliable, intuitive, easy, and fast.

We decided to choose 5 use cases based on the requirements we laid out earlier. For each use case, we created a flow to see the possible interactions and screen that would exist in order for the user to achieve the application’s requirement.

The 5 requirements we decided to base the use cases are:
#1 - The system prompts the user to sign in or create an account.
#2 - The system needs to allow users to tailor their experience based on personal preferences.
#3 - The system needs to allow users to view their fitness statistics and progress.
#4 - The system needs to allow users to sign up for classes and activities.
#5 - The system needs to allow users to challenge their friends.

Below are the user flows in detail of each use case. The flow is separated by screens (grey boxes), actions (purple boxes), and options (purple diamond). (Click to enlarge to see a more detailed view of the use cases)

VISUAL DESIGN

POST-QUESTIONNAIRE

Many interfaces are simple, clean, minimal with a structured use of white space within the content. Since it is a simple interface, it gives the user focus on the content and simplifies the action of ordering food by eliminating unnecessary elements and steps.

We decided to choose 5 use cases based on the requirements we laid out earlier. For each use case, we created a flow to see the possible interactions and screen that would exist in order for the user to achieve the application’s requirement.

The 5 requirements we decided to base the use cases are:
#1 - The system prompts the user to sign in or create an account.
#2 - The system needs to allow users to tailor their experience based on personal preferences.
#3 - The system needs to allow users to view their fitness statistics and progress.
#4 - The system needs to allow users to sign up for classes and activities.
#5 - The system needs to allow users to challenge their friends.

Below are the user flows in detail of each use case. The flow is separated by screens (grey boxes), actions (purple boxes), and options (purple diamond). (Click to enlarge to see a more detailed view of the use cases)

ORDERING

POST-QUESTIONNAIRE

Looking at different menu interfaces, I found that there were different ways of organizing a list of items, whether in a straightforward list or by using a grid. I also found that the use of categories made it easy to navigate through the list of items. Pictures were also useful to know what you were ordering before actually adding into the cart. Some interfaces include the checkout experience alongside the menu, while other interfaces keep it as a separate step.

We decided to choose 5 use cases based on the requirements we laid out earlier. For each use case, we created a flow to see the possible interactions and screen that would exist in order for the user to achieve the application’s requirement.

The 5 requirements we decided to base the use cases are:
#1 - The system prompts the user to sign in or create an account.
#2 - The system needs to allow users to tailor their experience based on personal preferences.
#3 - The system needs to allow users to view their fitness statistics and progress.
#4 - The system needs to allow users to sign up for classes and activities.
#5 - The system needs to allow users to challenge their friends.

Below are the user flows in detail of each use case. The flow is separated by screens (grey boxes), actions (purple boxes), and options (purple diamond). (Click to enlarge to see a more detailed view of the use cases)

Brainstorming

Sketching & Design Sprints

We decided to choose 5 use cases based on the requirements we laid out earlier. For each use case, we created a flow to see the possible interactions and screen that would exist in order for the user to achieve the application’s requirement.

The 5 requirements we decided to base the use cases are:
#1 - The system prompts the user to sign in or create an account.
#2 - The system needs to allow users to tailor their experience based on personal preferences.
#3 - The system needs to allow users to view their fitness statistics and progress.
#4 - The system needs to allow users to sign up for classes and activities.
#5 - The system needs to allow users to challenge their friends.

Below are the user flows in detail of each use case. The flow is separated by screens (grey boxes), actions (purple boxes), and options (purple diamond). (Click to enlarge to see a more detailed view of the use cases)

sketch1
sketch2

Due to a short timeline, I decided that one of the most useful ways to rapid brainstorm was through the design sprint "Crazy 8's". I folded a paper in 8 sections and for each section, I gave myself 1 minute to sketch out an idea for the interface correlating to the screens of the Tim Hortons Catering website (search, location finding, and menu).

These flows also helped us to understand and organize what screens to build when we reached the wireframing and prototyping phase.

Analyzing Sketches

analyzing

After getting all my ideas out on paper, I decided to analyze these sketches and determine the most successful directions and further explore those options. Above are sketches that are a bit more thought out and refined that the ideation sketches earlier. As I was analyzing the sketches, I was also thinking about the flow between screens and how might a user interact with the interface.

The direction that I found to be the most recognizable and easy for the user was to start the experience as a simple search input for the address, which leads to a list of the locations near the address. After finding a store location near them, they would verify they want to select this store and would lead them to the menu interface of the food & drinks at Tim Hortons.

As a group, we discussed and sketched out what each screen may look like based on the user flows that we created. This phase was crucial to do in a group so that each team member would have a full understanding of the application and as well as we were able to give input on what was working and what wasn’t. Below are some rough sketches we did together as a group before actually heading to the computer to design the interface.

Final Screens

HOME PAGE

POST-QUESTIONNAIRE

main

FINDING A LOCATION

POST-QUESTIONNAIRE

location

ORDERING MENU

POST-QUESTIONNAIRE

menu

Redesign

New vs. Old

We imported our screens to InVision to create the prototype application. Throughout this process, we went through multiple revisions until we felt that it would be appropriate to start user testing. Since we had a deep application system, we decided to break up the sections within each team member. I was responsible for creating the dashboard, schedule, and goals section. Below are some of the screens input into Invision ready to prototype.

Walkthrough Video

Above is a walkthrough video showing the flow of the final screens, as well as the interactions/animations that would exist as the user navigates to order catering from Tim Hortons. 

After finishing the screens and using InVision to prototype the application, we decided that it was time to user test our application. We prepared for this by writing up a script and several tasks that each person would perform in our application. During user testing, each member had a role whether is was: talking/reading the script, filming the user study, or writing down notes.

Before we started user testing with each person, we gave them a pre-questionnaire to fill out so that we could better understand the demographics and different situations/experiences. After this, we asked each person to interact with the digital prototype and to “think-aloud” while they perform the tasks that we ask to do.

Reflection

Outcomes & Results

Before coming into this project, I never realized that the Tim Hortons Catering was even designed this way and looked completely different than what I was used to seeing in their marketing in-person. Navigating through their Catering website was rather difficult because there were so many aspects that almost ruined the experience: such as typesetting, unneccessary elements, and overall - an interface that could be much more simplified. Although the content seemed like it would an easy interface in my head, it was much more challenging than I thought to create an interface with a large list of items on the menu while still making it easy to edit specific orders (such as dietary restrictions). Shown below is my first try at including a section to edit dietary restrictions, but found it to be too vague and complicated for not only the user, but for the employee creating the order at Tim Hortons.

Creating a deep systemed application
After creating the requirements of the application, we realized that the application’s potential of having a deep system. Working on a deep systemed application was challenging at times since we had to carefully  think out the flow of the entire system. To work on things more productively, we ended up splitting up sections so that each person was responsible for a number of screens. Although we split the screens up, we were still very much involved with the entire system altogether through constant discussions and feedback giving.

Since we split up the screens, another challenging aspect to a deep systemed application was making the application look unified in style and interface. Our initial mockup (shown below) of our prototype really proved this as the visual style was not all unified and it was almost obvious that the application was split up between people.

Screen Shot 2019-09-17 at 2.56.59 PM

Given that I had such a short timeline to complete this project, this enabled me to really focus on the goals of the project and what the interface and experience absolutely needed to have. This really helped me to make sure that I was including the appropriate actions that would help the user in their situation (for example: editing dietary restrictions or adding different quantities of food). I would definitely want to adopt this kind of thinking in my longer projects - to focus on the goals of the project, which would help me to think about the interactions the user would have to go through to get what they want. 

In the future, I'd definitely want to further explore this project and think about how it would continue into the checkout experience. I would also want to user test my redesign to see if there could be any areas that I can improve in.

Creating a deep systemed application
After creating the requirements of the application, we realized that the application’s potential of having a deep system. Working on a deep systemed application was challenging at times since we had to carefully  think out the flow of the entire system. To work on things more productively, we ended up splitting up sections so that each person was responsible for a number of screens. Although we split the screens up, we were still very much involved with the entire system altogether through constant discussions and feedback giving.

Since we split up the screens, another challenging aspect to a deep systemed application was making the application look unified in style and interface. Our initial mockup (shown below) of our prototype really proved this as the visual style was not all unified and it was almost obvious that the application was split up between people.

Success Metrics

If Tim Hortons were to incorporate this redesign into their Catering website, a way of measuring success could definitely be through a short survey after a user orders catering. This survey could measure how satisfied they were as a customer, as well as give them a chance to talk about their frustrations with the experience. This could also be done through user testing that would give more insight about the user's perspective. The ultimate measures of success would be determined not only by customer satisfaction, but also by the amount of returning companies/people using the product regularly.

User Testing
After user testing, we decided to make a few revisions based on the feedback and experiences. If I were to further improve the application, I would try another round of user testing to test out the revisions made. Since we only got to user test with 6 people, I would try user testing with more people this time with different backgrounds and experiences.