Tim Hortons Catering —

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

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

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

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 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 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

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

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?

The Solution

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.

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.

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.

Understanding the User

What is the current problem?

What is the current problem?

Understanding the User

user

Goals & Needs

1

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

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

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

2

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

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

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

3

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

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

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

Competitive Analysis

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

 

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

 

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

 

LOCATION FINDING

LOCATION FINDING

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.

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.

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.

VISUAL DESIGN

VISUAL DESIGN

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.

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.

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.

ORDERING

ORDERING

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.

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.

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.

Brainstorming

Sketching & Design Sprints

Sketching & Design Sprints

Sketching & Design Sprints

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).

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).

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).

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.

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.

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.

Final Screens

Final Screens

HOME PAGE

HOME PAGE

main

FINDING A LOCATION

FINDING A LOCATION

location

ORDERING MENU

ORDERING MENU

menu

Redesign

New vs. Old

New vs. Old

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. 

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. 

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. 

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.

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.

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.

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.

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.

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.

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.

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.

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.