Conditional Logic
Happy customers and millions of dollars in churn avoidance.
Customers want to write procedures, such as inspection protocols, that can reveal hidden content based on real-time inputs from operators in mobile apps.
The primary challenge is to balance a focused experience in the apps while communicating necessary changes or additional steps to operators.
Industry
Enterprise (B2B) SaaS for manufacturing
Role
Senior Product Designer
Team
Senior Product Manager
Front-end Development Lead
Back-end Architect
Year
2022
Timeline
2 months
Deliverables
Executive Presentation
Userflows
Prototypes
Final specs
Context
Procedures written by authors, carried out by operators
Parsable platform has two main users: author and operator.
Authors publish procedures that will be carried out by operators. A simple example is writing a maintenance procedure for machine X. The job gets assigned to an operator to do daily maintenance to machine X. Every day they open the operator mobile app and go through the job steps and mark it complete.
Loud and distracting factory environment
Based on a customer visit to a factory, I learned that factory operator environment can be loud with low visibility and distracting.
Factory Environment
Operators could be wearing different gadgets based on the job. They need to be aware of the surroundings as machines can be running or driving. Low visibility and hot factory is a challenge.
The image captures the common gadget they need to wear most of the time.
Scope
Prototyping to align with product and development
I created prototypes in Framer to try possible interaction models for the conditional logic behavior.
The reason is to align the product and engineering on possible design direction in order to define scope, feasibility and shared understanding.
Representation of early prototype
UX Vision
Show loading indicator at the same location where content will appear
Initially I tried the loading indicator next to the input itself (option #2). However, that spot is already used for the “syncing” feature.
I picked option #1, because it communicate that content is about to load in that exact location.
Loading indicator experimentation.
Detour
An input or step will only trigger content in subsequent steps
The authoring platform team decided to allow non-linear relation between a conditional input and the content being shown. For example, an input step 4 can reveal content in step 2.
I made the case that the design should enforce linear direction. For instance, a conditional input in step 4 will only show content in subsequent steps, it will never reveal content in a previous step.
Few reasons for the linear direction:
The overall feature is new to users, we will introduce complexity if we go the non-linear approach.
If we implement the linear approach, we can always introduce a non-linear direction in an upcoming update. The opposite will be messy.
Our engineering partners agreed that this will introduce complexity in the mobile apps experience and wasn’t feasible at the time.
Linear direction
Deliverables
Avoid blocking developers using detailed design specs
The main purpose of those workflows is to make it clear for developers what needs to be changed and improved, because this feature touches existing screens.
I created specs for 18 different workflows, I will only share 2 flows here.
Mobile
Showing a hidden step:
Revealing a second step based on text input in the first step.
Desktop
Showing a hidden step:
Revealing a second step based on text input in the first step.
Video Prototype
Prototype shows a user triggering a conditional logic.
If Temperature equals or greater than 120, we will show two inputs (input A, Input B). Also, the prototype shows the workflow if the user wants to undo their action (reverting from 120 to 80)
Closing
Making customers happy and laying the ground for future improvements
Customer churn avoidance was guaranteed by the of launching the conditional logic feature along with another feature.
I made sure this design can lay the ground for complex feature improvements. I also defined the workflow of how the user can “undo” such conditional action.
What I learned is that with an unfamiliar problem, experimentation is key. It’s key for alignment and for keeping the project momentum.