Field Trials Web Portal
Improving data presentation
As a Product Designer, I spearheaded the expansion of a SaaS app through enhanced data visualization, improved experiential flows, and strategic feature implementation for a forward-thinking AgTech team.
Problem Statement
Inadequate data representation and accessibility were hindering stakeholders from gaining clear insights into field performances. It was essential to address this to ensure the stakeholders could make informed decisions based on the trial data provided.
Team Composition
1 Product Manager
1 Product Designer
2+ Software Engineers
Stakeholders on Team
MY IMPACT
Introduced a design process with emphasis on strategy
Improved the interaction patterns of new features
Worked directly with developers on feasibility
Employed end-to-end design thinking methodologies
Enhancing Trial Data Visualization
I improved the data visualization and user experience of an agriculture technology (AgTech) web portal by leveraging my experience and subject matter expertise and previous work in AgTech. I was brought on to a distributed team as a Product Designer to help a technology team refine and ship a scalable experience to growers and stakeholders on an AgTech SaaS platform. Enterprises that release agricultural products and treatments on a trial basis use this platform to work directly with growers and agronomists to understand the viability and yield of their products in practice, all across the US.
Strategic Design Leadership
I fully embraced my role as a strategic Product Designer in this project, associating my ideas and thought processes with the goals of the SaaS app and the needs of its customers through empathy.
My goal was to enhance stakeholders' overview of field performance and make trials’ efficacy more intuitive, enabling informed decision-making. This initiative would foster a better understanding and control over outcomes, providing a significant value proposition to the stakeholders and customers involved. It was also important to find repeatable and generic features that can scale with the target audience in the SaaS environment; I made a conscious effort to be business- and customer-focused.
Introducing a Design Process
The team had not worked with a dedicated Product Designer on the platform in the past. I wanted to elevate design’s position in the company and show them how design could turn strategy into insights by identifying product needs, acting as a soundboard for new features, introducing processes and a path toward product improvement, and understanding the business’ needs and their customers’ goals.
Process Improvement
The team had not worked with a Product Designer in the past and relied on front-end developers to implement the components and interactions. My goal was to introduce a proper design process via collaboration and design thinking methodologies, starting with indelible empathy for customers.
By identifying pain points and creating a compelling narrative with the data presented to ensure the app's scalability, I sought to upscale the SaaS app while delivering tangible value at every stage of its evolution. I did this by fostering cross-functional collaboration with the team and taking copious notes, securing my role as a subject matter expert. I advocated for design by striking a balance between the 20,000-ft view of the product’s strategy, and the low-level needs of the interaction patterns that would lead to improved satisfaction of enterprise customers.
Empathize: Seek to understand the audience you are designing for by engaging with them to understand their experiences, emotions, and needs. Utilize observational techniques, interviews, and other research methods to gather insights.
Define: Clearly articulate the problem you aim to solve based on the insights gathered during the empathy stage. Craft a problem statement that is user-centered and business-focused to ensure both sides are being considered.
Ideate: Generate a wide range of possible solutions to the defined problem. Encourage brainstorming and the free flow of ideas, withholding judgment to foster creativity.
Prototype: Create low-fidelity prototypes of potential solutions to explore how they might work. These prototypes should be quick and cheap to make, allowing for rapid iteration based on feedback.
Test: Share your prototypes with a broader audience and gather feedback. Observe how users interact with the prototypes and listen to their feedback to understand how well the solutions meet their needs.
Iterate: Based on the feedback received during the testing phase, make necessary adjustments to the prototypes or the problem definition. Repeat the ideate, prototype, and test steps as necessary until a satisfactory solution is reached.
A Tailored Interface
I addressed the layout for better data organization, user experience, and accessibility. Introducing a full-size map, refining the data filters, and improving the navigational hierarchy were strategic moves toward creating a more intuitive and likable user interface. The newly introduced features were implemented to streamline the process of accessing and interpreting data, making it easier for high-level users to spot trendlines across more data points and compare treatment efficacy across fields, quickly and efficiently.
In addition to changes across charts, graphs, and data visualization, I introduced a ‘sticky‘ left navigation bar that contained the filters and conditional parameters that would allow users to more easily refine their data set, no matter where they were in the process or which tab they switched to. The conditionality of the filters was controlled by an icon and drawer that reduced clutter when not in use. In addition to this card, I utilized the left-hand space to callout which fields were being represented in a max-height, scrollable card, with the ability to expand on field context at any time.
I redesigned the map to be a full-width implementation, instead of a small, fixed-size map. I fashioned a brand-centric interface in Mapbox and incorporated fine details such as refined typography, redesigned tooltips with more context, and absolute-position elements such as a legend and search bar. I have multiple variants, designed in Figma, to help delineate interaction patterns.
One of the integral graphs in the dashboard was the yield comparison chart, which shows how yields fared relative to treatments across fields. The leftmost chart was cumbersome when dealing with many products, and took up an odd amount of space on the page. I refined the interface to capture a half-width card with a more focused look to show yields and addressed the hover state as well.
The ability to view yield by field existed in a scrollable chart; however, stakeholders could not easily view more than 8 fields at a time and could not see the data points for more than one field at a time due to hovering. I sought to improve the interaction pattern by introducing ‘cards‘ for each field which could stack vertically and conditionally show relative data of yield across treatments.
Ongoing Impact
End-to-end Design
I employed an empathetic, user-centric approach, harnessing iterative design techniques and incorporating feedback to craft meaningful solutions. This method allowed me to remain aligned with the user's needs while striving for a design that solved the core issues at hand.
The improvement in chart displays was the first step in providing clearer representation of treatment performances. This was pivotal in ensuring that the data told a compelling story that was easily decipherable and actionable for comparing yields and determining product efficacy.
In this project, I am aiming to achieve higher standards to meet the paying users' expectations. The progress thus far has established a foundation for continuous improvement, with a focus on delivering value and driving user engagement. The continuous refinements will lead to a platform that is robust and a valuable asset to the stakeholders.
Outcomes and Results
The effort led to enhanced data visualization and user interaction. This project has set a solid foundation for ongoing improvements, showcasing the potential for further refinements in the user experience and data representation.
Disclaimer: Work shown was created while employed at Nearby Creative and displayed with permission. Header image from Unsplash.
