SYNGENTA DIGITAL INNOVATION LAB WEBSITE

Promoting and educating conservative Syngenta about User Center Design

In summer 2018, I interned at Syngenta Digital Innovation lab at Champaign IL, as a UX Designer. I was working on the product design of the Syngenta's website for connecting Digital Innovation Lab to Syngenta itself and the GeoLocation app supporting the UK farmers in managing their spraying work.

In the 12 weeks, I worked with PMs, software engineers, and design mentors to create the seamless and meaningful user interfaces to support Syngenta's business.

Digital lab's website is one of two major projects in my summer internship

Date: 2018
My Role: UX Designer / Front-End developer

Design Challenge

Syngenta itself is a giant organization with conservative thinking and working process for their farming business. As one of the top agricultural companies, Syngenta is slow to learn new techniques of IT development and Design thinking. The mission of our Digital Innovation Lab is to support its mother, Syngenta, to evolve and adopt the User-Center Design approaches. Moreover, we help Syngenta absorbing the Agile/Lean process and transform its mindset. Our goal is to integrate the intelligent technology to farming and support framers to upgrade their work.

However, through the cooperation with other Syngenta departments and the stakeholders, we discovered lots of issues related to :

  • Syngenta employees don't understand our Lab's capability
  • Syngenta employees don't believe the value of UX design and don't have experience with the Agile development process.

According to the above issues, our lab faced lots of difficulties to communicate and work with these stakeholders. Thus, the Digital Innovation Lab needs a platform to show our abilities and demonstrate our works to these Syngenta employees, moreover, educate them about the User Center Design approaches.

Process

Considering the accessibility and convenience, we decided to focus on the web platform. And in order to display the needed information, I conducted the whole project and built up the tasks and timeline.

The overall process is:

Comparative Analysis

Function comparison
Visual design comparison

Interview

Interview Protocol
Note taking
Observation

Interpretation

Affinity notes
Affinity wall
Persona
Design principle

Ideation Wireframe

Information architecture
Functions
Wireframe
Visual design

Development

React
Styling (scss)
Before start designing the website, I like to know
WHAT INFORMATION IS LOST IN PREVIOUS COOPERATION

User Research

Interview

In order to comprehensively understand what information is needed during the communication with stakeholder, I collected different perspectives. I scheduled interviews with Digital Innovation Lab's lead and Syngenta's stakeholders. The focused questions are :

    To internal lab members:
  • Previous experience of cooperation and communication with global stakeholders
  • What material or resource are used to promote DILab capability?
  • The most challenged and difficult part for cooperation.
    To stakeholders:
  • How do they evaluate DILab's capability and make the decision for further cooperation?
  • How was previous cooperation experience?
  • How do they understand DILab's approaches?
affinity wall
persona

After the interview, I interpreted the feedback from the interviewees and create the persona and the affinity wall. The major discoveries include their desire and their frustration:

Frustration
  • DILab is a "black box".

    The cooperation process is not clear for the SH. During the project, sometimes SH not sure about the next steps. They don't know what happened in the Lab after they submitting their idea. The tasks and timeline are not clear but they always want the project to be finished as soon as possible.

  • The gap of understanding lad's approach

    Stakeholders(SHs) think that they understand lab’s process and approaches after learning the big picture from Lab lead’s introduction. But SHs just get a rough idea of the user-center design process.

  • How to demonstrate lab's skill based on SH's expectation

    SH like to shop around the external vendors and DL when they have an idea need to be created. They already imagine the product and wish to find an experienced partner to work for them.

Desgire:the information they want to learn before they contact us
  • SH like to know the timeline for their project. Thus, they could predict when will the product be launched.
  • SH like to know if Lab has worked on relevant projects before and if we have people to work on it.
Design principles

According to the affinity wall and the insight from research, I brainstormed several solutions for the pain points and transformed them to design principles.

At the first stage brainstorming, the brainstormed ideas were rough and high-level solutions. Design detail is lost. Or, the idea was too narrow to solve the wide problem. I classified all solution and summarised the goal that these ideas want to solve and transform it into the design principle for designing the website. Based on the design principle, I came out more feasible and detailed solution, including the way to present the information and the information architecture.

guideline

Ideation Section

Brainstorming, sketching and design
information architecture
Information Architecture

Since there is a mass of information needed to display, I categorized the desired information and split them into five major pages. I created the information tree and showed the hierarchy of content.

Three major features

  • MAKE DILab "TRANSPARENT"

    Stakeholder(SH) mentioned that DILab is a "black box". The cooperation process is not clear for the SHs

  • ONBOARD STAKEHOLDERS

    Erase the gap of understanding lad's approach

  • INCREASE DILab's COMPETITIVENESS

    Demonstrate DILab's skill based on SH's expectation

Designed Features

MAKE DILab "TRANSPARENT"

Stakeholder(SH) mentioned that DILab is a "black box". The cooperation process is not clear for the SHs

Demostrate the cooperation flow to stakeholders

According to the research, I discovered that DILab needs to inform SHs the overall cooperation process before starting the collaboration. DILab should not only talk about the applied approaches but also the way to communicate and exchange the information. Thus, the process page is required for explaining the detail and educate SH the UCD methods.

The process page demonstrates the way to connect DILab when SHs have ideas and what material and consideration they should prepare. Then, this page guides SHs to communicate with Lab step by step and provide detailed information for working together.

Process page
  • 1Show the way to contact us with the ideas/business discoveries.
  • 2Show how will lab communicate with them and clarify the project scope and plan.
  • 3Show the applied approaches for designing and developing the application.
  • 4Show the potential deliverables at the end of the project.( Help stakeholders to predict the outcome )
  • 5Show the future works. Tell stakeholders what we could help after launching the product.
Gif
Design element - Scroll indicator

The process page presents the flow in a long page. Thus, how to indicate user to scroll down for further information is important. I designed the trapezoidal background and the animated scroll indicator, the sidebar, to lure users into exploring the hidden information by scrolling down. When users scroll down to certain positions, the end of sections, the sidebar will downward extend and remind users that there is information below.

Gif
ONBOARD STAKEHOLDERS

Erase the gap of understanding lad's approach

png

Provide different layers of information

Part of SHs think that they understand and familiar with lab’s process and approaches. Part of them never heard about the applied methodologies. For these two kinds of audience, the website should provide different layers of information for them to explore.

Design element - Interactive cards

For the experienced users, they can recall their learned knowledge by browsing the first level information, the information showed on cards.

For the users just get a rough idea of the user-center design process or visit the first time, they could learn the detailed information from the second layer. Users can easily select and click a card and the card will be extended for providing second level's content. The second level provides lots of detailed information and educates stakeholders what are the inputs, tasks, and outcomes.

Gif
INCREASE DILab's COMPETITIVENESS

Demonstrate DILab's skill based on SH's expectation

(1) Streamline the exploration
Design element - Project Filter

In order to streamline the project/ capability exploration, I design the project filter for the project gallery. The filter could help SH target the interested projects efficiently and reduce the effort of searching for relevant information.

Gif
(2) Show the desired information

Gif

Interactive timeline
Design element - Interactive diagram for timeline and sprint detail

"Time" is one of the important criteria for SHs to evaluate Lab's capability and their cost since "time is the money". A clear timeline from the previous project can help SHs to predict the cost of time and estimate the schedule of their own project. I designed an interactive timeline that shows the finished tasks and the spent time. SHs can investigate each sprint's tasks and get the transparent information. It could help to erase the "black box" image.

Gif

Development

For this website, I was in charge of developing work. I use React framework to create the front-end part and use Scss, CSS extension language, to style the web pages.

How to structure the clean system

In order to create a clean code, I followed the react's concept, modeling the components, and classified the folder by shared components, screen, and container. This structure is easy to maintain and be understood by the other developers.

How to make it easy to maintain

Considering that the administrator who maintains and updates the content is usually a product manager, not a developer or designer. The website should be easy to edit the content without editing the code. Because of the project scope and timeline, our lad didn't build up the back-end system for this website. Thus, from front-end part, I classified all content files ( has javascript object format/ json format) into an isolated folder and help the managers to modify the web within the folder without changing the internal styling and JSX code.

Github Repository

Final Design