Yara is the world’s leading crop nutrition company, and a provider of environmental and agricultural solutions.
Problem statement
The company’s product suite consisted of three distinct apps, each with its own product team, and I was was a UX designer for YaraConnect, one of the main products. Although I reported to a design manager, most of my routine comprised of collaborating with a senior designer on that product, and other mid-senior level designers across the company.
Onboarding was an interesting experience, as always. There was a lot to learn, as fast as possible. There were hundreds of screens spread across dozens of folders and Figma projects at any point in time. I constantly found myself wondering how the current team managed to get used to the system. How long did they require? Are they actually used to it or is everyone just winging it?
At first glance, i realized that I could contribute to improving:
- Project startup time
- Handovers and cross-functional communication
- Onboarding of new users
- Documentation and standardization
My role: A lot of my initial time went into studying the existing system, creating shortcuts and bookmarks to improve navigation and save me from getting lost in a sea of files whenever i had to jump on a project.
But a conversation with a few designers and other team members showed me that that i was not alone. The system could be optimized, and we were going to do it.
This project tied into a broader documentation process being carried out by the design systems team at the time. We decided to collaborated by sharing the results of our product’s design audit with design system team, engineering and design ops.
Lets run through a high level overview of the previous system:
- the company has 3 main products: product a, b, and c
- each product had 3 main folders for live designs, WIP, and archives
- each folder contained dozens of projects for several features and countries in no particular order
The project volume was outstanding, and we had to optimize the system in order to deliver the best work in terms of quality and quantity. Our objectives were to
- Improve project categorization and identify files faster
- Reduce clutter, streamline communication and handovers
- Maintain a trustworthy reference for all of our work
Design audit Process
First, collect existing designs. This was the most repetitive and tasking part of the project. I went through every page on every feature on the live app and collected screenshots of everything that crossed my path, recording the most critical user flows and processes. This meant testing critical user flows, touchpoint, and CTAs, exploring each dialog box and documenting the endpoints. This is a very effective testing scenario because in this case, I am an external party providing a comprehensive picture of the live application. If something looked funky or awkward, I fixed it, or made sure that it got to the right table.
Testing for consistency. Here, we did high-fi checks on everything, documenting inconsistencies ranged from spelling and copy issues to incorrect components. How did we respond to these inconsistencies? By creating a template and filing the screens under appropriate categories that determined the next action
An attempt to describe the organization:
- The product sits at the top of the tree. For simplicity, the work for each product is divided into folders such as archives, work-in-progress, and under Development.
- Each folder comprises of projects. For clarity, every feature is a project. So if we are working on a new onboarding flow, onboarding flow is a project that will begin its life in the WIP folder, and eventually end up in archives
- It is not unusual for features to vary by country. The differences could range from minor adjustments in user journeys to the complete absence of certain features according to region.
Implementation
- Figma was the primary tool for design. Confluence was used for documentation and task tracking.
- The first step taken to ensure consistency and completenes was creating a table of features and countries. This was useful for tracking the collection of existing designs and screenshots
By the time this was complete, we had:
- A single source of truth for the product. This was a collection of all existing figma designs, alongside screenshots from the live app and results from consistency tests
- An intuitive organization of folders, projects and countries for the product teams. Easy to navigate by anyone including external parties and newly onboarded team members
- A clear course of action for solving inconsistencies and contradictions
The impact of this project was worth it. Even at the early stages, there were signs of Project start-up time reduction, faster project launches, and improved cross-functional communication.
Good documentation contributed to the improvement of 14 complex features across 9 global markets and boosting System Usability Scale scores. It also helped reduce project startup times and accelerated product launches.
Documentation in design is essential for clear communication, consistency, and accountability, serving as a historical record for future reference and facilitating efficient collaboration among team members. It helps onboard new members quickly, manage changes effectively, maintain design systems, and meet legal and compliance requirements.
Good documentation improves the overall quality of the design process by providing a basis for feedback, iteration, and knowledge sharing, ultimately leading to more efficient business outcomes.