About the Project
Introduction
HESTIA (University of Oxford) is a scientific open-data platform designed to address the environmental impacts of agriculture. By offering robust datasets and tools, it empowers farms and supply chains to measure, communicate, and minimize their environmental impacts. All data provided by HESTIA is standardized, ensuring seamless comparisons and informed decision-making across the industry.
My Role
Lead UX/UI Designer, Brand Designer
Duration
Ongoing
Tools
Figma, Photoshop, Gitlab, Excel, Miro
Problem Statement
The Challenge
HESTIA has built a robust platform with over 50,000 production cycles, but its complexity limits accessibility and usability, hindering data-driven sustainable decision-making.
The Objective
Goal is to redesign the platform into a user-centered tool that enhances accessibility, usability, and design, enabling users to access and interpret the data effectively, ensuring it could be utilised to make informed decisions about sustainable agriculture.
User Research & UX/UI Audit
Research & Insights
The redesign process began with an in-depth UX/UI audit, followed by extensive user research to uncover key pain points, frictions and opportunities.
Key Findings
Four primary user groups were identified:
Researchers
Businesses
Media
General Public
With the help of affinity mapping, three key findings were found across the user groups:
Users found the platform difficult to navigate and lacked sufficient guidance.
Users had difficulty finding the data they were looking for.
Clearer explanations of core components were essential for user understanding.
Design Strategy
Personas
Taking the results evaluated from the user testing and interviews, four personas for each user group were created. Meet Ellen, Ben, Irena and José.
Design Strategy
User Journeys & Platform Architecture
Each persona went through a user journey which reflected the feedback from the user interviews and testing - highlighting both the high and low points, needs and frustrations as they navigated through the platform.
The platform lacked a clear defined structure. Reflecting on the needs from the users a new structure was created that streamlined the user flow, reducing friction and confusion. Dedicated pages for core components provided essential context and improved clarity.
With the platform architecture in place, the next step was to define a mood and style that aligned with HESTIA’s vision. While they didn’t have formal branding guidelines, they provided a logo and expressed interest in possibly incorporating a bold yellow accent.
To ensure the design reflected their professional, modern identity and appealed to their research-focused community, I presented two mood boards to help them choose a clear aesthetic direction. While both styles were well-received by the team, the mood board featuring the yellow accent was ultimately favored as the preferred direction.
Design Strategy
Mood Boards
Design Strategy
Design System
Building on the mood board’s style, a comprehensive design system was developed, including key components and a style guide. The system focuses on a clean, bold, and professional aesthetic that conveys a positive tone. It features a vibrant yellow and blue color palette, complemented by a modern, clean-cut font for a polished appearance. Agricultural imagery with a warm, bright feel enhances content engagement. Recognizing the platform’s data-driven nature, the system also includes design guidelines for tables, graphs, and charts, ensuring consistency and clarity across all elements.
Design Strategy
Design & Iterative Testing Process
Following the platform’s foundational development, I led the iterative design and testing of individual website sections. These sections fell into two primary categories: informative pages (e.g., landing page, about page) and data-focused pages (e.g., data explorer, upload dashboard). My approach for each involved collaborative brainstorming with the team, user testing, and continuous refinement, working closely with developers throughout.The Data Explorer’s development exemplifies this approach. Initial user testing revealed significant usability issues – specifically, users struggled with data retrieval and filtering. This sparked a cycle of:
Collaborative brainstorming with the development team.
Progressive wireframing in Figma, incorporating internal feedback at each stage.
External user testing to validate designs and identify areas for improvement.
Iterative design refinements based directly on user feedback.
Heuristic evaluations to proactively identify potential usability concerns
This iterative cycle, driven by continuous user feedback and internal reviews, ensured a user-centered final product. All identified issues were logged and tracked within our Gitlab project, enabling prioritized development and rapid iteration throughout the process. This same iterative methodology was consistently applied to the design and testing of all other platform pages, ensuring a cohesive and user-friendly experience across the entire site.
Results & Impact
The ongoing redesign is creating a dynamic, responsive platform that bridges the gap between complex data and actionable insights. Key achievements include:
Key Achievements
A bold and cohesive design system reflects HESTIA’s mission, ensuring the platform feels professional, approachable, and aligned with its vision.
A Strong Visual Identitiy
Features like the data explorer and dashboard enable users to seamlessly explore datasets, contribute new insights, and drive meaningful action.
Powerful Tools
Researchers, businesses, and policymakers now have streamlined access to the platform’s resources, making it easier than ever to harness the power of HESTIA’s data.
Enhanced Usability
The project remains active, with new pages, features, and refinements being added regularly. As the platform continues to evolve, it is already establishing itself as a powerful tool for addressing agriculture’s environmental impact—empowering its users to create meaningful change on a global scale.
Shout out to…
FOR GUIDANCE & SUPPORT IN THIS PROJECT
Joseph Poore, Guillaume Royer and the wonderful team at HESTIA
FOR THE BEAUTIFUL PHOTOS ON THIS PAGE
Mark Stebnicki, Christian Lunde, Katrin Bolovtsova, kaboompics.com, documerica, Lawrence Aritao, Carsten Kohler, DoDo Phanthamaly, Renzo D'souza, thanyakij-12, Graphictwister, user18266303, Luxuryguy, muharrif070401