Heuristic and Usability Issues : Match between real world
The wording in the description is not user friendly and doesn’t give a clear indication of the purpose or objective of the website.
Create a means to use and search through the site, streamlining the various processes users complete through the website.
Solution:
The intent of this project was to streamline how users locate information, by focusing on hierarchy and primary navigation, to create a design solution to increase user engagement.
The current agriculture and agri-food website is not differentiated from canada.ca and requires users to go through multiple steps to complete simple tasks and lacks clarity.
Background
Problem:
UX Researcher, UX Designer, UI Designer
Role:
Agriculture & Agri-Food Canada Case Study
User Pain Points and Possible Solutions
Our user Matt is looking to branch out into horticulture, as taking on a new career path can be a financial risk, he needs a means to gain the right information and be connected with others with the experience and knowledge to help him. Currently the agency website doesn’t offer detail on any of the information Matt is looking for, he is frustrated at the amount of content he must read through in exchange for minimal information.
Additionally Matt is hoping to gain insight on farming best practices and gain information on financial support during off season. Currently trying to locate this information is causing Matt to read through a lot of content, as the search function of the website includes the whole of Canada.ca Matt is unable to conduct filtered searches to access the information needed efficiently
Possible Solutions:
To compete his goals, Matt needs a means of searching and filtering effectively, and have access to more in depth information that would justify using the agency website instead of conducting a google search for the same material.
Persona
User’s Motivation Hypothesis Statement
“We believe our user visits the Canadian Agriculture website to get contact information for the associations he’s looking to connect with and apply to because he wants to make organic produce affordable for everyone, and is passionate about farm to table cooking.”
“We believe our user visits the Canadian Agriculture website to get contact information for the associations he’s looking The wireflow demonstrates a typical path Matt would take when he’s searching for horticultural associations to get in contact with
Interactions to document are:
Amount of page scrolling
Number of clicks
Navigation’s ease of use
User’s Motivation Hypothesis Statement
Step 1: Locate Section
Step 2: Locate Subsection
Step 3: Select Province
Step 4: Locate Association
Step 5: Locate Contact Info
Step 6: Contact Head Office
User Testing Plan and Results
Objectives:
Observe how users interact with the site organically, focusing on how they overcome pain points and when they feel stuck
Determine if the user feels the effort made to yield the results is worth it or if they would seek out alternative search methods such at google direct searches
We conducted a total of 5 user interviews via zoom, directing users through a series of tasks to observe and record data with respect to our user interview questions.
From there we complied the data and started looking for patterns within the user insights.
Execution:
User Insights
Affinity Diagram
Usability and Heuristic Evaluation
Key Issues identified : After analyzing and synthesizing the data from the user testing with our heuristic evaluation and 2x2 matrix, we determined that the key issues were with the layout and navigation of the site, that is creating usability issues.
Considering the usability heuristics, the most common issues were with consistency, user control and freedom, and minimal design. All of our users indicated the the site was very text heavy and the major pain point was having or feeling like they needed to read through all of the content to complete their goal.
Colour Accessibility
After pulling the assets from the website, we ran the base colour palette through an accessibility checker and saw no issues.
Heuristic and Usability Issues : Control and freedom
The only navigation method is breadcrumbs and forces the user to user the browser navigation. Although the design is mostly text, it is not arranged in a way that directs the users eyes and provides the hierarchy needed
Heuristic and Usability Issues : Error recovery
There was no apparent error recovery. The only option for getting assistance is to complete a generic form. This is completely dependant on the user and does not provide visibility of system status for a reply.
Heuristic and Usability Issues : Consistency, recognition over recall, and flexibility and efficiency of use
This section presents users with many challenges. The lists are not all in alphabetical order. Additionally the breadcrumb navigation system makes it impossible for the user to navigate forward if they chick back to the previous page. The user is forced to either research or try using their browsers navigation.
Redline Annotation : Observations and solutions
The initials website presents many opportunities to be more inline with usability heuristic best practices. From the redline annotation for the navigation, the main issues I want to focus on for the redesign are consistency, recognition over recall, and ease of use.
Taking those principles and comparing them to the LATCH principles, Alphabet, Category, and Hierarchy are inconsistent throughout causing more work and confusing for the user. During testing I will be looking at how these issues affect the user.
Possible Solutions:
At first glance applying the LATCH principles to the usability issues identified will create a smoother system. Additionally the use of iconography will help minimize text and help users complete their goals faster.
User Testing: Plan, results and potential solutions
Objectives:
Observe how users interact with the site organically, focusing on how they overcome pain points and when they feel stuck
Determine if the user feels the effort made to yield the results is worth it or if they would seek out alternative search methods such as google direct searches
Results:
Users expressed issues and frustrations with the layout, hierarchy, and breadcrumb system for desktop. Both mobile users were unable to complete task one of re navigating to the homepage from the homepage
Users felt generally confused during testing showing the lack of recall and recognition and were unaware of their position within the site due to excessive content and scrolling
Solutions:
Remove breadcrumb system and implement a permanent nav bar specific to agriculture and agri-food with a search bar that is separate from canada.ca. Introduce a fixed logo to the homepage for mobile
Add iconography to cut down on text and add a top of page or fixed navigation element so users know where they are at all times
Card Sorting & Site Map Redesign
After completing my card sorting, I decided to revisit it and remove the tertiary navigation and decided it wasn’t in line with the minimal and clean design I was going for.
I also opted to add secondary navigation links to the About Us and Contact Us section as I believe this will help the user find information more efficiently rather than being directed to a general contact page and then having to scan through for the appropriate section.
I also opted to remove the logo from the footer, as I am thinking of having a fixed nav bar, as the website will still be content heavy.
Prototype Stage 1 & 2: Lo-fi to Mid-fi
My focus was to create a clean design using a 12 column system, I then added colours that passed accessibility testing, and opted to use the same fonts from the current site.
I would like to continue to iterate my navigation system to reflect changes needed as I proceed to redesign the sub pages and homepage. The goal will be to insure hierarchy is key and consistent throughout, to help users have a better experience. Additionaly creating a style guide will ensure consistency throughout the site and help to create hierarchy within the navigation.
Prototype Stage 3 & 4: Mid-fi to Hi-Fi & UI elements
After comparing V2 to other sites that utilize UI components, I created a style guide and applied those principles to my header and footer and created cards for my homepage.
Prototype Mobile Stage 1 to 4 : Lo-fi to Hi-fi
User Testing: Plan, Results & Solutions
Objectives:
Observe how users interact with the site organically, focusing on how they overcome pain points and when they feel stuck
Determine if the user feels the navigation system is straightforward and enables them to complete the tasks with ease
Results:
Trend 1:
Users expressed confusion with have two logos stacked on top of eachother, users also felt the footer looked a bit empty
Trend 2 :
Users felt the mobile website did not offer all the same information as the desktop site. Specifically covid information.
Solution 1:
Move the Canada.ca logo to the footer as well as additional links to the footer to make it feel more complete for future longer scroll spages.
Solution 2:
Ensure UI elements are consistent for desktop and mobile and apply RWD principles.
Key Learnings and Takeaways
Key Learnings:
Iterations enable you to empathize and better understand your user and should be reflective of user tests and usability issues you encounter
Getting a second opinion and trying to bring fresh eyes is better than spending hours on one element
Takeaways:
Continue to leverage and practice using components and assets to shift my focus to further iterations and be able to apply them quickly. Establish spacing during the wireframing process to cut down on resizing when working across multiple view ports.
Next Case Study: Coming Soon!
