The Problem
Understanding the nutritional value of a Subway sandwich
Summary
Company & Backstory
Subway Canada defines themselves as “[a] leading choice for people seeking quick, nutritious meals that the whole family can enjoy”. This philosophy promotes the sandwich chain as being a nutritious alternative and aligning the brand with the healthy food movement. Transparency is a key value for the brand. Subway provides nutritional information which allows customers to determine, choose, and maintain their dietary needs and health plans.
Role
Researcher
Personal Project
Timeline
1 month
Process
Listening to your customers at all stages of a business is key to success. Social data has been proven to provide businesses with authentic reactions to their products and a virtual goldmine of feedback. For the customer evaluations portion of the report, I focused on online interactions
Quick Links
Research
Client Demographics
To give better context to reevaluating the priority of comments, I employed user demographics for Subway. I leveraged business data platforms including Statista and Dun & Bradstreet to better understand who is actually using Subway’s services and create user personas to help me stay anchored on the users.
This data showed that over a three month period two main user age groups made up 75% of subways traffic: 18-29 years old (36.05%) and 30-49 years old (30-49 %). This was in line with user data from the commentators online. I cross-referenced this data with a study from the School of Public Health to better understand who out of these people would be using a nutritional calculator.
The study’s data showed that groups with the following demographics were more likely to read Nutrition Facts:
Women
People with high education and income
People who are physically active
People classified as overweight
People who were trying to lose, gain or maintain weight
Extra nugget: The research also showed adults who did read Nutrition Facts labels more frequently were most interested in sugars, calories, and serving size.
Sample User Profile
Grace
Age: 28
Location: Toronto
Occupation: Account Manager
Behaviours:
She works 9 am-5 pm and sometimes overtimes during the week.
She has started taking a yoga class at the local gym and hikes on weekends.
She cares about her image and has an active social life.
She has started to meal prep her dinners but doesn’t love to cook.
Needs & Goals
She wants to have a healthier lifestyle.
She wants to track her calories in what she is eating.
She has a short lunch break so wants something fast and healthy to eat.
Client Insights
I started by aggregating data in the form of quotes and comments from users and tracking what public data was available on their account. Looking over these 40 interactions, three main pain points arose:
Difficulty finding the calculator
Consistently customers mentioned “accidentally” finding the calculator. While there is a short paragraph at the top of the nutrition page, consider adding a larger call out button or adding the calculator into the nutrition drop down header as a spotlight feature.
Quote: I love that calculator. I stumbled by accident one day to it. It helped me cut a sandwich that was easily 900 calories 6 inch sub to about 650.
Allergy Question
A common request was for individual subs or ingredients to have easier-to-find allergy information and for it to be more apparent when they are choosing options to calculate nutrition of their subs. Consider adding an allergen section at the bottom of the calculator to let customers know this information in one place, or have the ability to grey out ingredients that contain particular allergens.
Quote: Is allergy information for the Veggie Party sub available? It's not on the site and trying to find out if it contains egg.
Doubling items
Listed on Subway’s menu is the option to double the meat or cheese. However this is not an option you can select in the nutrition calculator. Having the calculator reflect all ordering options allows customers to have a more seamless experience between the menu and their nutrition options.
Quote: Hi all I was looking at subway's website and I found that some options, calories, and other changes were made. for instance, I can't double the meat and various numbers like their roast beef are much lower now
Website Structure Audit
Decreasing load time
While on desktop, there is an average 3.4 second load time; the mobile load time is nearly 12 seconds. The BBC found that for every extra second of page load time, 10% of users will leave. Opportunities to speed up load times would include:
Eliminate render-blocking resource: There is a list of URLs all blocking the first paint of your page. The goal is to reduce the impact of these render-blocking URLs by inlining critical resources, deferring non-critical resources, and removing anything unused.
Ensure text remains visible during web font load: Leverage the font-display CSS feature to ensure text is user-visible while web fonts are loading.
Setting explicit width and height on image elements: This will reduce layout shifts and improve cumulative layout shifts.
Reduce the number of clicks
To reduce the number of clicks and the number of pages on the website, integrate a proteins option into a single nutritional calculator rather than a calculator on each sandwich page. This allows the customers to have a single interaction point to customize their sandwich and compare their options for each sandwich.
Leveraging the Subway U.S.
Consider leveraging the base design assets from the Subway United States website. The photo assets available feel more in line with the current brand and feel fresh, crisp, and modern. The structure ( widgets, buttons etc.) feels more current in terms of website design.
Highlights From Accessibility Audit
Drop Downs
The drop downs go semi-transparent when trying select an option. While each link is still selectable, the inability to read the content reduces people’s ability to select the right option for them.
Colour Contrast
For the nutrition information section of each sandwich page, the colour of the text on the background green does not meet sufficient contrast ratios. Given this is the key information customers are looking for, having it easy to read is paramount.
Keyboard Focusable
For the most part, there is great keyboard focusing on the website, however, on the sandwich pages certain links have been dropped for the set including the “MyWay” subway reward button and “Own a Franchise” button. Having good keyboard navigation to all aspects of the site is vital.
Navigation
For the navigation bar at the top of the page, any link that results in a drop down does not have a unique ID so a screen reader could properly interact with it. This will cause the screen reader to read only the first item and not access the later elements in the list.
Top 3 Recommendations
Accessibility
This is a key item that needs to be updated to show that Subway is inclusive of all its customers. From a legal perspective, as Subway Canada operates in Ontario it needs to comply with AODA (Accessibility for Ontarians with Disabilities Act) regulations and meet WCAG 2.0 level AA accessibility guidelines.
Reduce the number of clicks
Subway has a great nutrition calculator. Reducing the number of clicks to access it and putting it in the nutrition drop-down on the main page will increase ease of finding the existing application.
Mirroring the in-shop experience
Update the calculator to have the same categories as the in-shop experience (bread, cheese, filling, toppings, sauce) and the ability to double items if they get extra on their order. This will help build an experience that feels intuitive.