Foodland Ontario
My Role
UI Designer
Tools
Figma, Miro, Adobe Illustrator
Timeframe
Fall 2023 (3 months)
Team
Me, Lucie Hunter, Elliott Wang, Kate McIntosh, Tom Croux
Summary
In FCD815 - Design Solutions Supercourse 1, my group was assigned to work with Foodland Ontario to improve their "Finding Local" and "Home" pages (mobile). Foodland Ontario is a consumer promotion program by the Ontario Ministry of Agriculture, Food and Rural Affairs, aimed at supporting the provincial agri-food industry by boosting sales of Ontario-grown products. Previously, their current website faced significant issues with accessibility and information presentation, leading to a decline in customer satisfaction. A redesign was needed as users struggled to navigate and find the information they wanted.
Activity 1
Finding the main Issues
We began our project with experiencing the website first-hand. Each of us wrote down our pros and cons of the website and aligned our findings with the critiques from ODS post card Sorting Excercise for Foodland Ontario.
The abundance of menu options complicates navigation, potentially causing user frustration and difficulty in finding desired sections
Cropped website and outdated design (text composition, layout, etc.) which could impact user engagement and overall aesthetic appeal
The Finding Local page only links to websites of other grocery stores and farms and no additional information on what they specifically sell and when > Missing opportunity to connect consumers to retailers
Information is being effectively communicated but pages suffer from overcrowding which is making it difficult to find desired sections
Homepage
local page
Activity 2
the target demographic
Before attending a meeting with Foodland, our team brainstormed and did research on the people shop for local instead of the generics? Who are they and what do they value?
Foodland Ontario also then shared their own research and divided the demographic into two segments:
“Receptive Value-Driven Consumers”
Freshness: preference for fresh products
Affordability: comparable pricing to imported equivalents
Healthiness: focus on healthier products
“On-The-Go Convenience-Oriented Suburbanites”On-The-Go Convenience-Oriented Suburbanites
Time efficient: easily accessible in their store
Nutrition: prioritize nutritionally balanced options
Cost: prefer cost-effective options
Activity 3
Creating personas
As part of our assignment, I was responsible with constructing two user personas that emodied our target dempgraphic’s characteristics and motivations. Since personas breathe life into the user data that we constructed, these fictional characters became our compass, helping us make design decisions that resonated with two user groups.
Activity 4
user flow
In case we run into any issues with how our user interacts with our prototype, we had to put ourselves in the user’s shoes and visualize the whole journey starting from the homepage and towards the finding local page. Using Figjam, we developed the basic userflow which helped us in creating and finalizing our wireframes.
Activity 5
wireframes
Our team developed multiple versions of the wireframes, ultimately combining the strengths of each to create a refined final version. Although we were unable to present the wireframes in person, we shared our initial demo presentation with the stakeholders. They provided feedback, noting a potential concern with the "Alert Bar," as it could introduce bias toward certain retailers. Additionally, they emphasized that the layout should align with the style of government websites, such as Ontario Wood 511, to ensure consistency and adherence to established design standards.
Activity 5
homepage redesign
We decided to keep the relevant tabs on the old website but organize it to increase its readability
Updated the information hierarchy with menu
1st Section: Featured – In Season Food, In Season Recipes/Recipes, Finding Local, Industry Feature
In Season Food – Alternating sub headings for each month
Recipe Spotlight – Monthly Recipes
Finding Local
Industry
Explore: Find and buy local, Farmer Stories
Activity 4
finding local redesign
- Enhanced searchability function – Filter map results / “Search Locations within __”, location, fruit/vegitable, retailer category
- Interactive Map
- Map/List Toggle
- Location Specific Information – Location, Open/Closed, Retail Hours
Activity 5
Accessibility and Stakeholder Considerations
In order for Foodland Ontario to launch a newly updated website, they must undergo a lengthy approval process to ensure it meets accessibility standards. To put into perspective, Foodland Ontario must go through the ODS (Ontario Digital Service) > Digital First Asessement, then the Ministers Office, then finally get approved by the Cabinet Office to launch these changes.
So when designing the prototype, some considerations we had to take into account were
Search function for locating retailers, with both visual and text-based results, while also addressing challenges associated with map design for accessibility.
Optimizing visual contrast and readability, utilizing Foodland’s color palette strategically, selecting a legible typeface, ensuring appropriate font sizes, and adhering to accessibility guidelines.
Enable FRE/ENG option
Accessibility Document
final Prototype
Based on the feedback from our client, the possibility to have a search page to be somewhat functional without all of the required data would be difficult to implement. So our recommended solution for Foodland Ontario is to incentize vendors and farmers to include their data into a database. This way, it would mitigate the costs for Foodland to collect the data themselves. An example of a similar search database is Sunlife’s Lumino Health.
Prototype
Reflection
Our team consisted of individuals from diverse backgrounds, including computer engineering, business, and new media. While none of us had professional experience in UX/UI, we successfully leveraged our unique strengths to collaborate effectively. Drawing from my prior experience on a different project in another class, I contributed to the technical aspects and the creation of our slide deck.
As part of our assignment, we compiled a comprehensive 35-page document that showcased our research, meeting minutes, feedback, and various other resources that informed the development of our first UX/UI project. Given the vast amount of information, our team’s capabilities, the limited timeframe, and having only two meetings with Foodland Ontario, I am extremely proud of our accomplishments. This experience has been invaluable and will inform my future UX projects.
Slide Deck