3 weeks, November 2021
UX & UI developer
Stakeholder goals to hi-fi prototype
Design a system for monitoring and maintaining a series of automated planters.
Synthesize a given persona's needs with the stakeholder goals. Ideate, test, and refine. Build a UI kit. Create hi-fidelity screens from the UI kit. Discover a useful task flow, map it out, and prototype the screens to realize it.
My first action was to absorb the needs of the provided persona: a busy chef. She intended to spend the most minimal amount of time with the product possible while in-between other tasks, or in the field.
I synthesized the chef's needs into problem statements, which I ordered into a MoSCoW chart. I could see my four main needs clearly: a mobile interface, glanceable information, actionable progress indicators of the crop, and the current needs and status of the crop.
I conducted a visual analysis on direct competitors in the automated plant-growth space, as well as indirect competitors. What I learned from these apps that deal with data over long periods of time is of their:
As I tested these concepts with users using 5-Second Tests, I made a discovery. I was showing time in an absolute sense, but what was relevant to the user was time relative to the crop. Users in these interviews discussed how, given the prompt, the most important metric would be “when do I harvest this crop?”. I then began to ideate on this idea.
M first plan was a large, central ring representing the cycle from planting to harvesting, with each crop as a point on its path. The crops would progress along the path, and their color would indicate their need status.
After further AB testing, I realized I could combine the old with the new. I took the card based prototype that tested well with users, and gave each card a cycle. A harmony of information and simplicity was that much closer!
I went into detail annotating my use of the molecule.
There are four primary features here:
1. The containing box. The size is determined by the width of the screen - given two columns, with a gutter of 36 and a margin of 12, the box shall occupy the entirety of the collumn. The height should be a ratio of 5:6 to the width.
2. The title. Uses the standard - Artifika 28pt. 24px from the meanline to the top of the container.
3. The cycle. This circled arrow represents the passage of time, from sowing to harvesting. The time indicator moves along the arrow, indicating by position and text how far along the crop is.
4. The icons. Under normal conditions, the icon will represent the crop. I have included an icon library. When action is needed, a smaller icon representing that action will be presented, along with 12pt text explaining the action.
I have the plan for my main interactive element, the cycle button. I started to plan the rest of my elements, and codify them in a UI Kit.
Using the newly available component variations in Figma, I planned a molecule for each of my crops I would be demoing, in a 'good', 'will need attention', and 'needs attention now' state. I also created a depressed click state for each molecule.
I finalized my font sizes and use, and icon choice. In addition, I created a style kit for a list that would be used to manage all the devices attached to the app - complete with unknown and fail states.
I had two more steps to go: building the screen from the UI kit, and building the sub-menu drawer.
My final step is to build the Home Screen. Using the design layout I established in my mock-ups, and the molecules I crafted in the UI kit, I created a dashboard.
I designed this screen in a way that users of iOS or widgets will be immediately familiar. Cards are played out in two columns, and can be re-arranged with a long press. The cards have their title, a relevant icon, the Progress Cycle, and their background color indicating their status.
When I showed this screen to users, I got confused reactions. They didn't have a clear understanding of what the colors meant beyond an decorative choice. I tried to remedy this by including the tip section in the lower left. I learned from more testing that small, de-emphisized text is not the optimal method for teaching users.
I eventually better addressed this problem in my post examination by creating an onboarding flow.
This is the second primary state of the app, the information drawer.
Its purpose in the half state is to show all the secondary information - water temperature, amount, etc. This information is considered secondary because it is normally attended to by the sensors - however, the grow kit can only do so much and then a human must step in.
In the initial view, the five variables are shown and given a natural language description + a color. Echoing the main page, the color increases from green to yellow to red as the severity of the issue presents itself. If a variable is anything other than ‘good’, a chevron will appear by the name.
Clicking this indication will expand the drawer to its full height. Here we have a clear indication of the crop selected, the day of its progress, and the name of the variable selected. Below these are a short description of the variable, and a short video describing the variable, as well as how to react to different states in that plant. Below both of these are a large graph that shows the varibale over time, and a indication of where the value should be at any given point.
The user can then swipe left or right to see the other variables, swipe down partially to return to the half state, or swipe all the way down to return to the home page.
I decided on the dark background 1. because the colors I chose to represent alerts pop on this dark grey, and 2. to provide a clear distinction against the white of the main screen.
The app is done! Well, not quite. I mean, how do you use it? I noticed during interviews and tests that I was struggling against explaining too much. Though the user flow is simple and memorable, certain things have to be explained. As a final deliverable to bring the product beyond minimum viability, I created a guided onboarding process.
I created this onboarding like any good design project - by stripping away anything non-essential and building the interface in front of the user, piece by piece. Users are introduced to the molecule, then the states, and finally an interaction with the molecule. In this way, I could introduce the elements in a fun and digestible way.
I learned to be incredibly divergent from this project. Not one of my ‘first’ ideas made it into the final product. And that is okay!
I learned to simplify. I had a tendency to over-design - to make a bunch of bespoke componets. After building a UI Kit, I learned the power of paring down alike objects to just one. I was able to save time by resusing components, and built a much cleaner app as a result. A great lesson!
