Screenshot of AgroLedger homepage

Web App Redesign

AgroLedger

UI Design Internship at the Canadian Sheep Federation

What is AgroLedger?

AgroLedger is a software created by the Canadian Sheep Federation. It is a new and innovative system designed to manage livestock traceability. It is a unique software in the agriculture technology world because farmers are heavily involved in the process of design.

3 images, 1 of a sheep, 1 of a bio tag and 1 of the Canadian Sheep Federation Logo
2 screenshots, 1 of the old Agroledger sign in page and 1 of the new design

What was the challenge?

Coming into the project, the website had already been built but it was confusing and unappealing. Our team was tasked to redesign the AgroLedger web app to make it more intuitive, user friendly and aesthetically appealing.

What were the role, scope, and constraints?

Role: UI Designer
Timeline: 8 Weeks
Platform: Web App
Team: Ali Brown and Murtaza Mehdi

Research

Because the website had already been built, we did not have a full research process. With the information we had received we had created 3 personas to help us understand our audience.

persona 1, Brandon Macauley
persona 2, Ronaldo De León
Persona 3, Sarah Lewis

General Challenges to Focus On

After creating the personas we were able to conceptualize what were the major challenges that needed to be focused on. These would be the driving force behind the AgroLedger redesign.

1

Responsive

Mobile use is important because the users will be using AgroLedger out in the field.

3

Ease of use

Make it as easy as possible to use and navigate.

2

Unfamiliar

These users aren’t familiar with technology (farmers).

4

Focus on farming

Users don’t want to waste their time digitally tracking their animals.

Style Guide

Colours used for the new AgroLedger design

Colours

We decided to start with the green colour from the already existing AgroLedger logo. Then we experimented with different hues of green. The decision behind the green colours were made by checking the contrast between the light and dark greens to make sure no matter what colour we used it would be visible to all users.

The type used for AgroLedger, bold example and regular example.

Typography

We chose to keep the same font the original website had. Roboto is a neo-grotesque sans-serif typeface, it is an open sourced font developed by Google.

Buttons

all the buttons used in the new AgroLedger design

Navigation Elements

Elements from the nav bar. Including buttons and dropdowns.

Key Pages

3 screens to show the responsive versions of the new AgroLedger homepage.
The old agroledger homepage.

Home Page

The homepage operates as a dashboard with access to all the pages on AgroLedger.

2 screens, 1 of the operations page and 1 of the operations updates page.
2 screens, 1 of the old operations page and 1 of the old operations updates page.

Operations and Operations Updates Pages

The operations page is a one of the holdings pages. It functions as a database of the different operations inputed by the users. Different accounts have access to different operation information.

2 screens of the sheep dashboard and sheep details page.

Sheep Dashboard

The sheep dashboard functions as a database for all the sheep in the system. The users can find a specific sheep they’re looking for and find all the information about them through the here.

2 screens of the old sheep dashboard and old sheep details page.

Making large amounts of data responsive.

AgroLedger has alot of large amounts of data. This can be difficult to make responsive but it’s important to make sure AgroLedger is accessible for all devices.

the old sheep per premises page
3 screens that shows how the sheep per premises is responsive
extra screens not shown, displayed in a grid with a white gradient.