Context

Canadian Sheep Federation

Established in 1990, the Canadian Sheep Federation (CSF), was created to provide a "strong national body that represented the Canadian sheep industry on issues of national importance." Playing a central role in growing and prospering lamb producers and new entrants, the CSF innovates the industry as a whole.


During Summer 2023, I had the pleasure of working with the Canadian Sheep Federation on the design team, working cross-functionally, on website redesigns, and AI sheep face tracking.


The bulk of my work, resided in the design and delivery of a new and improved internal AgroLedger web app for tracking and managing livestock. I presented to, and received approval from senior leadership including the Executive Director, landing the designs on the team roadmap, to be built for 2024.

Role

UX/UI Design Intern

Team

2 Designers
2 AI Engineers

2 QA Engineers

5 Developers

1 Project Manager

Timeline

May - Jul 2023 (3 months)

Preview ~ Final Designs

  • #1 Before: Sheep Dashboard

  • #1 After: Sheep Dashboard

  • #2 Before: Registering Livestock

  • #2 After: Registering Livestock

  • #3 Before: Sheep Overview

  • #3 After: Sheep Overview

  • #4 Before: Log In

  • #4 After: Log In

  • #1 Before: Sheep Dashboard

  • #1 After: Sheep Dashboard

  • #2 Before: Registering Livestock

  • #2 After: Registering Livestock

  • #3 Before: Sheep Overview

  • #3 After: Sheep Overview

  • #4 Before: Log In

  • #4 After: Log In

  • #1 Before: Sheep Dashboard

  • #1 After: Sheep Dashboard

  • #2 Before: Registering Livestock

  • #2 After: Registering Livestock

  • #3 After: Sheep Overview

  • #4 Before: Log In

  • #4 After: Log In

Before & After

A few before and after comparisons to encapsulate the transformation and scale of change.

Before & After

A few before and after comparisons to encapsulate the transformation and scale of change.

Ideation & User Research

Leading the ideation and user research, it was important to familiarize ourselves with the current design of the web app and its functions, categorizing all the screens of the app, and commenting on areas of need. I had to learn the ins n' outs of sheep farming very quickly to understand the functions within the app, and empathize with the farmers on a deeper level.

We continued by creating prototypes for what we believed were the most important user tasks: signing up, registering livestock, and creating a new report.


Using these prototypes and an assortment of questions, we conducted asynchronous testing on 12 participants consisting of early product adopters and family/friends, collecting data on design effectiveness, user efficiency, and user satisfaction. This initial research was mainly to identify common pain points for users, usability issues, and general opinions to assist in creating the next iteration of the website. The results of the tests can be grouped into 3 main issues:

01

Repeating/confusing words and sections

02

Visual Clutter; hard to identify CTA's

03

Maze-like site traversal; didn't know where they were

From there we continued adding suggestions and comments based on our research before prioritizing screens for design.

Final Redesigns

For the sake of brevity, I've selected a few screens that I led and owned the designs for, to showcase the overarching design direction, concept and atmosphere.

Sheep Dashboard ~ Operator View

Where farmers keep track of their registered sheep, from any of their premises. The new redesign removes excessive features unrelated to their sheep and provides 2 different view preferences. The card view offers a swift, visually engaging, and informal means of browsing content, allowing users to scan through items. The list view provides a more "get-to-the-point" approach, enabling users to access a greater amount of information simultaneously, facilitating a more strategic viewing experience.

Reports

Find your relevant reports here. The new design adopts a consistent list component across the website, leveraging user familiarity and pre-established understanding to streamline their interaction.

Sheep Overview ~ Operator View

Get a comprehensive overview of your registered sheep, including all their details, related reports and documents. The new redesign condenses unimportant information when not needed, and provides a more visual experience for easy reading and identification of crucial information.

Log in & Sign Up

The first page users see. The new redesign eliminates unnecessary transition pages, buttons, and input information, also putting a stronger and cleaner emphasis on the CSF x AgroLedger brand.

Exploration & Iteration

To land on my final designs, I went through multiple iterations and ideas. Check out some before-and-after's of the old designs vs. new ones.

Before

The previous iteration of the search and filtration feature lacked the necessary depth and specificity, making it challenging to conduct searches with ease. It also occupied an incredible awkward and large space.

After

The new design streamlines this feature, making for a more intuitive experience and providing deeper search options. This design also allows for scalability if new search filters need to be added.

Before

When adding new livestock, users were faced with options to both add individually or in bulk, leading to confusion for which to do, and taking up unnecessary real estate. No pun intended it also felt very "bulky".

After

The new design, lessens the user's cognitive load, allowing them to choose only what they need. The user can easily switch forms, adding just one or multiple livestock.

Before

The previous version of the login page was cluttered with multiple call-to-action buttons that essentially performed the same action, but due to their different labels, created confusion for users.

After

The new design cleans up the login page, and gives more context to new users about the tool. The new design also make this page, the first page users see, instead of providing an intermediary page to choose between sign up and log in.

Results

I led a second round of user research with the new designs, to validate our decisions and see the change in our measured metrics of effectiveness, efficiency, and satisfaction. Below are some numbers at the end of my internship!

36+

screens redesigned

49%

decrease in time to create a report

36%

decrease in time to register livestock

19%

decrease in time to create a new account

82%

decrease in mis-click rate when creating a report

29%

decrease in mis-click rate when registering livestock

56%

decrease in unfinished livestock registrations

34%

increase in user perception of ease of use

18%

increase in user perception of interface

Reflection & Takeaways

Constraints

Working within certain guidelines and ensuring the feasibility of our designs proved to be a fascinating journey, oftentimes requiring the presentation of multiple design alternatives.

Defending Designs

I found it valuable to consistently have a well-founded rationale for my design choices, as it enabled me to defend and justify my decisions effectively.

Thanks for visiting my portfolio!

Best viewed on desktop.

© 2024 Chris Pan.