AGRIDIGITAL

PRODUCT DESIGN - DESIGN SYSTEMS - 2022

AgriDigital is an AgTech startup that built a grain management platform for Growers, Site Operators, Brokers and Traders. Following a successful rebranding initiative, the need to redesign the platform by creating a brand new design system arose. This would increase customer satisfaction, and reduce brand confusion.

ROLE

Led the end-to-end design process, working closely with Product and Engineering

GOALS

  • Create a design system
  • Give customers a consistent experience
  • Reduce brand confusion and improve brand perception

RESULTS

  • Accelerated development process through the implementation of a comprehensive design system.
  • Successfully redesigned the AgriDigital platform with improved usability.
  • Enhanced collaboration and alignment between design, product, and engineering teams.

40

components built from scratch

150+

component styles to allow for consistency and flexibility

55%

reduction in design effort

Researching and Documenting the current platform

documenting existing components

  • What components are currently being used?
  • Where are these components used?
  • Why are they used?

This quickly made me uncover usability issues. It was clear that there was a lack of consistency across the platform, with different primary or disabled buttons being used, different states, and a lack of layout hierarchy.

This highlighted the importance of documenting everything, as it ensured nothing was missed and that we could build a holistic and usable design system.

Researching Trends and Best Practices

I conducted extensive research on current design trends and industry best practices. I analysed and referred to several accessible design systems such as Material Design, Decathlon, or IBM. These had some good practices, guidelines and tools that I could apply in our design system.

Building a new design system

Fostering a Collaborative Environment

I engaged in weekly meetings with product and engineering teams to review and align on design components. I facilitated discussions to ensure consensus on design decisions. Some questions that often needed to be answered as a team were:

  • Are we able to design this component from scratch?
  • Are we limited by any front end library?
  • Does the redesign of this component align with our product vision?

Fixing Usability Issues by Ensuring Consistency

Colours

  • Using brand guidelines, I adapted the colours so they could be part of the design system
  • I defined and expended the colour palettes to help designing for different components, states and use cases
  • Ensured the accessibility of each colour

Typography

  • Just like Colours, I used the brand guidelines as a base, and built coherent text styles to ensure hierarchy within the platform.

Buttons

  • These were the most inconsistent existing components on the platform and broke Consistency and Standards heuristic.
  • I ensured the use cases were defined prior to designing, making sure they would be implemented coherently on the platform and accommodate future features and enhancements
  • I used this as an opportunity to audit and rename button labels as there was previously no consistency. All buttons now follow the same patterns and wordings.

Thorough Documentation of Components

I documented design components and guidelines comprehensively in Figma and Confluence, ensuring transparency and accessibility for all stakeholders.
This included:

  • Usage, hierarchy & placement
  • Best practices
  • Component anatomy
  • Component specifications

Implementing the Design System

Assisting with Implementation

I collaborated closely with engineers to assist in implementing the new design system.

I provided guidance and support throughout the implementation process to ensure fidelity to design specifications. Regular check in meeting where held to address last minute issues during the implementation and work through them as a team.

design qa

  • Identified a lack of consistency which was solved before the redesign release to customers
  • As the final step, it helped ensuring the seamless integration of the new design system

redesigned platform

tables

  • New button types create hierarchy within the page, making it easier for users knowing where to look and where to navigate
  • Accentuated contrast on table rows improves readability

forms

  • Input fields have different states - including an active state, which helps users scanning the page and knowing which fields need to be filled
  • Accentuated contrast makes reading through form sections easier

empty state

  • Empty state now includes steps for users to know what to do next
  • Use of new branded illustration makes it feel more friendly, improving brand perceivability

using the design system

designing a new feature

This feature allowing users to share an artefact was created using components previously created in the design system. Buttons, modals supporting different scenarios, tooltips and banners were used the way they had been built. By incorporating diverse styles and states in the design system, we accommodated the specific requirements of this feature without compromising consistency or usability.

impact on the platform

  • During user testing, 100% users found it very easy and intuitive to use; because it looks like what they know and have been using on the platform
  • It creates a consistent experience and can be seamlessly implemented
  • It accelerates the design process

KEY TAKEWAYS

  • This project was my first one at AgriDigital and provided valuable insights into platform intricacies and collaboration dynamics, reinforcing the importance of adaptability and clear communication.