PlantDemand is an expert tool, helping asphalt plants with their supply chain management. In the past pdf exports of excel sheets had to be emailed around to keep track of changes. PlantDemand keeps the entire team up to date through a single online environment as a responsive website, iSO & Android app. The goal is to redesign the complete tool and optimize through user testing.

See Figma File

The Dynamics

PlantDemand is a side project we work on with a remote team. We have weekly calls to talk about progress, identify what needs to be done and flag blockers.  Once a year we meet in person to discuss long term strategy.

The team

Daniel  Mekis: Subject matter expert and sales. He makes sure the business requirements are always taken into account.

Dennis Schaaf: Full-stack developer with a deep understanding of the design process and scrum workflow. (a former colleague at frog)

Me: All-round designer, UX researcher, and occasional front-end dev.

PlantDemand team Indonesia
user journey mapping during our yearly meetup in Lombok

user journey mapping during our yearly meetup in Lombok

Outsourcing

We can’t execute in the speed that we would like to with just the core team. Therefore we are outsourcing part of the work in fixed scope fixed budget projects. We got one external team building our Android app and another react team building the web redesign.

We set the scope by:

  • Writing user stories in Jira
  • Create a definition of done
  • Add design in the user stories
  • Add animation studies in Jira when needed
  • Create one Figma art-board with everything in the scope.
    • This also caters for redlines since anybody can inspect the design

The approach

PlantDemand is a tool that was built and designed in code in 2014. It started with an MVP with just a few features. The amount of features has organically grown over the years. This means that some of them are not living in the ideal place anymore and the overall interaction & visual design can use a revamp to be future proof. We’ll also take some existing feature requests into account. 

Goal: Refresh and improve. No need to reinvent the tool cause the core is good. Just make it stand the test of time while doing subtle restructuring in the IA and navigation model.

How Might We
Restructure PlantDemand to improve the interaction & navigation model?

Update the look and feel without the existing users feeling lost?
Create a cross-platform tool that looks and feels like it belongs on every platform?

The process:

Gathering data / Immersion

  • Survey Monkey questionnaire
  • Data-driven decisions using Google Analytics
  • Gathering existing feature requests
  • Opportunity area mapping on the old design

Execution

  • Interaction design
  • Visual design
  • Cross-platform approach
  • Light rebranding
  • System thinking

Validating

  • Prototyping
  • User testing
PlantDemand Survey

Survey insights from our customers

Data Driven Decisions

Analytics is very important in any website but especially in an expert tool. It has helped me define priority in places that would otherwise be impossible as  a non-user of the tool and non-expert of the asphalt industry

Some insights:

  • The default view of the calendar (From compact to detailed)
  • Order of the “add note” categories
  • Understand where in the on-boarding users leave the flow 

Opportunity area mapping on the old design

Based on all the information that came in from the survey, Google Analytics and existing feature requests and previously gathered data; I started mapping out opportunity areas on the existing design. This was used as a starting point for restructuring the existing IA and the ideation sketches for the navigation model.

IA photo

Created print-outs of the old AI with the old design to identify opportunity areas

old design PlantDemand
The account page is misaligned and visually downplayed.
Tentative orders are too prominent and too high in the hierarchy. They are a sub element from the view “calendar overview” yet if I would switch to the activity log, these tentative orders would still be there.
Adding a new order is the primary CTA on this page. It doesn’t carry enough weight for the importance of the CTA
Settings are too hidden and it’s unclear wether it will open the asphalt plant settings or the personal settings.
Every order is rendered in its own “pill”. This is not space efficient and the overview adds more value when the user can sort them by material or client.
No context around the error on that day. Is the plant overproducing or is it closed that day or doesn’t it have enough oil in their inventory? Depending on how critical the error is this information should be surfaced.
Secondary navigation is mixed in with filters options that belong under a specific item in the secondary navigation. E.g. “Calendar view” and “List View” are both a toggle for the “order view”.
Report CTA lives in the primary navigation in the top. It clutters the filter option of this specifc view and doesn’t belong in that position in the hierarchy.
Depending on the device the user uses to visit the website we can prompt the correct app to the user. No need to keep a iOS app download button at all times in the primary navigation. Use your marketing channels to make users aware of new app releases and trigger their devices to show native download banners in the correct context
The logo doesn’t scale down to small sizes very well and the symbolism represents a factory, which is not the same as an asphalt plant

Interaction design

Based on all the gathered information I started to rethink the existing IA and the Navigation Model. I focussed on keeping a clear hierarchy between the first, second and third level navigation. Here are a couple of things I kept in mind while sketching ideas.

  • Create less distributed settings (global, plant and account settings)
  • Users value high information density
  • Shorten the on-boarding flow
  • The detailed calendar view is used more frequently than the compact view
PlantDemand ia sketches

Rethinking the IA

PlantDemand wires sketch

Early sketches on how to solve the navigation model

For the mobile apps, it was a bit easier to create the IA since we offer a lot fewer functions in the app. That’s why I created the IA in combination with the screen design. This helps the third party development company to wrap their heads around the app.

IA-android app

IA in combination with the “final” design in Figma for the Android app

Visual Design

The PlantDemand team did some 2 x 2 mapping to identify the visual design direction by looking at different online tools. These tools are not related to our industry but they were purely looked at from a look and feel point of view. This resulted in a visual design that is minimal, clean yet playful in the details. I also did a light rebranding of the logo (more on that later). As the design matured I had to think about animation studies as well. I ended up with quite a high navigation bar with the filters. How would this scale down to tablet and mobile? Will it change in height? Which part is sticky? Some answers to those questions can be found in this animation (build in Principle):

PlantDemand top header filter scroll state

Cross-platform approach

PlantDemand is represented as a responsive website, Android app and iPhone app.
For the website, I’m designing desktop first but I’m making everything scale down to the phone. For the app design, I’m trying to stick to native elements to stay close to the ecosystem that the user knows. This also makes development easier and less expensive since we are outsourcing the apps. Some functions are reduced on the phone. This same strategy applies to the apps. We try to minimize features in the apps. For the following reasons, the needs of the customers are different when they are not in the office:

    • Focus on consuming data instead of editing.
    • Fewer features = more focus, therefore it becomes easier to use on the go.
    • Complex tasks are often executed by office roles. (e.g. sales)
    • A responsive website on the web is a backup.
Download the Android app

Light Rebranding

I’m not often dipping my toes into branding, however, I felt it was needed here. I  gave the logo a fresh new look. Not trying to reinvent the wheel, just trying to improve the symbolism in the logo. Another point of improvement was the typography and improve legibility on smaller printouts. Another good example of where I try to let the brand shine is in some of the custom icons. Colorful, playful yet to the point.

logo redesign

System thinking

In order to keep everything consistent and neatly organized I created a component library based on atomic design. By doing this it became much easier for me to be consistent with the use of styles, margins across platforms, typography and Icons. By using the instance’s option in Figma I reduce the ripple effect of small changes that impact every screen. Have a look at the Figma file to see how it’s structured. 

Validating

Prototyping

By now we’ve defined clear opportunity areas based on existing data and feature requests. We’ve restructured the IA and did initial sketches to improve the navigation model and applied a visual design direction we were all happy with. It was time to put it to the test and validate the design decisions with the customers. First off I build a prototype in Figma. The prototype page uses just Instances of screens so that the prototype updates automatically whenever I make any change to the design

Check Out The Figma Prototype
Figma PlantDemand prototype

The Figma prototype. Every screen is an instance so it updates automatically when I make any changes in the design.

User Testing

I do the remote user testing through sessions using zoom and the Figma prototype. I prepare a script depending on what we want to validate. We dial in the customer and give them remote access via Zoom and have them use the prototype while I ask the questions. We do these sessions continually at least once a week.

PlantDemand user testing session remote
Interview guideline in Google Docs
Prototype in Figma. The participant controls it with my laptop using remote access through zoom. (this way they don’t have to install anything)
Customer dialed in through Zoom
Unbiased mindset. Always go into a session with the mindset to learn something.
Keeping track of feedback, suggestions and quotes, through notes

We Collect

Quotes
Pain Points
Feature Requests

We Synthesize

Cluster
Prioritize

We Implement

Adjust Design
Update Script
Repeat

Outcome

So how did all of this work impact the design? Below you can find the order overview, which is one of the main screens of PlantDemand, with annotations of all the improvements. Obviously, there are a lot more screens (adding orders and viewing reports, settings, etc.) but this page gives a clear overview of some of the high impact changes. If you want to see an overview of all the pages you can go here, and have a look at the Figma file.

PlatDemand hero shot
Primary Navigation lives in a side bar. This way not all the navigation is horizontally stacked.
Sticky secondary navigation
The primary CTA has a spot in the sticky header bar and is visually prominent with a high contrast color.
Plant Settings live in link with the plant name. It also has a label now to be clearer what settings page you’ll enter.
Filter bar which is not sticky and has a different background color then the secondary navigation in order to differentiate it.
Different order views are added in because of feature requests and are the first item in the filter bar since it impacts some of the other filters.
Alerts get more context with a description
Account settings has it’s own spot in the primary navigation model now. This helps too differentiate between account settings and plant settings.
Paving planning is not somethings that has been designed yet but it shows the scalability of the first level navigation.
Clearer and more compact grouping of orders. It reduces the cognotive load and helps to scan the order overview faster.
High contrast in night shift orders.

And now what?

As with any product, it is never finished. From the design side, I have re-designed around half of the existing features. (there are many more on the backlog) A third party company is busy building our Android app and another company is helping us role out the first scope of the web redesign. My role is now jumping between QA the work that they produce and answer any questions they have around my designs. I am still designing new features to complete the web redesign. And we keep doing user tests to validate the designs before we have them build.

PlantDemand is one of my favorite and most challenging projects because of the team size and the pro-active attitude it takes to push things through. Nobody is telling us what to do. We are our own stakeholders. We communicate with each other and our customers, define priority and we execute. It has the perfect structure for me to practice my interaction design, visual design, user testing, communicating my designs, scoping and at times even front-end skills. It’s a lot, but it’s a lot of fun!