Parsable Redesign
Parsable is a platform that connects frontline workers and helps manufacturers turn static procedures into dynamic systems with inline work instructions, rich media collaboration, execution tracking, and process analytics. The web application is used by process engineers and team admins to plan, deploy, and optimize their work processes. The mobile app is designed for frontline workers to execute daily work, and improve their safety, quality and efficiency. I led the redesign to enhance the multi-platform experiences and increase user adoption.
Field Research
We kicked off the project by conducting field research. I partnered with our product and customer success team, we visited one customer’s factory in New Jersey. Our goal is to learn about their work process and work environment through shadowing and observing users’ day-to-day patterns. At the factory, I discovered the frontline workers heavily rely on paper and printouts to track complicated work procedures.
We interviewed the process engineers and frontline operators to better understand their needs and challenges in their daily work. The problems faced by the process engineers include:
lots of paperwork for each process.
confusing web navigation.
lack of insights from work data.
persisting login issues prevent users from using the mobile app.
The challenges faced by the frontline workers are:
concerned about installing the app on their personal phones.
difficult to login in and log out from the shared company device.
poor text readability especially for senior users.
the app constantly goes offline and becomes unusable due to poor WiFi connection on the factory shop floor.
Insights and Opportunities
Based on the first-hand information from field research, I suggested some improvement ideas for a quick win.
For the Parsable web application:
Enhance navigation experience
Improve discoverability of new features
Surface powerful insights through visualising data in dashboards
For the Parsable mobile app:
Simplify the login process
Support device sharing
Support offline use as much as possible
Improve usability and accessibility
Web Navigation Redesign
On one hand, process engineers find it difficult to navigate to different templates and discover new features on Parsable web platform. On the other hand, our product team plans to introduce more features and there is insufficient space to display all core features on the main navigation bar.
I recognized that many users were using old workstations with small displays. It was important to make sure our website look good on those displays. To understand the space limitation for the navigation bar, I looked into user data. The New Relic report shows that 1024 px is the smallest browser size used by our current web users. It will be used as a breaking point for navigation redesign.
Option A: feature grouping
Instead of directly display each feature on the main navigation bar, further regroup the core features. I conduct card sorting exercise with the product team to categorize features and come up with 4 group names:
Build includes things to set up before jobs, such as Templates, Applets, Reference Sheets, Workflows.
Plan includes actual work, such as Jobs, Issues.
Analyze includes Dashboards and Reports.
Manage includes Teams and Permissions management.
Option B: sidebar navigation
By using the vertical space, the sidebar navigation can display the complete feature list without grouping. Compared to the horizontal layout, a vertical list is easier to scan. The flat hierarchy allows users to access any core feature with a single click. I also redesign the secondary navigation menu, put it as tab view below the page header, so that users can clearly know where they are at a glance.
Expanded sidebar by default when browser width larger than 1024 px
A/B testing and user feedback
Through task-based testing using clickable prototypes, we found Option B Sidebar Navigation is favoured by users. And the expanded sidebar is preferred than the collapsed icon-only view. Therefore, the expanded sidebar as default when the browser width is larger than 1024 px.
To improve the visual hierarchy, I added a light grey background for the main content block, which distinguishes the header and content area and makes it front and center. I also updated the data table component style to make it more scannable.
Another pain point for process engineers and supervisors was workflow data is difficult to digest and unhelpful in aiding the users to get insights into the work process. I redesigned the Analytics page by visualizing the crucial data in the dashboard view, which helps decision-makers quickly track and identify trends and opportunities across teams, sites, and more. The new design also supports users to create dashboards and configure reports from work records to get the exact information needed. To improve accessibility, I increased the minimum font size and adjusted our color contrast.
The redesign helps users quickly access features, gain insights on Parsable site, and make imporatant decisions based on that.
Mobile Device Sharing Experience
To address user concerns of installing the app on their personal phone, we must support multi-user login on mobile devices. For the first time user login,
Provide the additional option to sign in by scanning QR code which can reduce input time and prevent typing errors for long emails and passwords.
Allow multiple users signed in on one shared device, with the current user on the foreground.
During the initial login, the user sets up a PIN which will be used for subsequent login.
Only the first time users on the device are required to sign in with QR codes or email credentials.
For subsequent login experience,
Parsable app screen auto-locks after a timeout to protect user data.
from lock screen, the last user can quickly unlock with the PIN instead of using long email and password.
Log back in as last user
To switch user,
from lock screen, another user can tap “Switch User“ to view user list, choose the name and enter the PIN to quickly log back.
before the app auto locks, the current user is visible on the settings screen, where user can lock the session or tap “Switch User“ to view the user list.
users who have signed on the device are saved in the user list, enter PIN to quickly log back in. The credentials and data of all users who have signed in are saved locally, therefore users are still able to login in and use the app even when the app goes offline.
Switch user from lockscreen
User feedback and design iterations
We quickly implemented the design, and conducted beta testing. The mobile device sharing feature was well received by our customers. User benefits include:
the login process becomes much simpler and faster;
enable different users to complete various tasks on the same device;
increased accountability and traceability;
support user switch and work execution even offline!
Some user feedback mentioned it would be better to know the maximum number of concurrent users before reaching the limit. I took the feedback and add the user count in the UI when we release the feature to the public.
Outcome
The redesigned navigation makes the web platform more intuitive for process engineers. The refreshed web UI improves user satisfaction. The sidebar navigation is also more scalable for our development team, as we are introducing more features to the product. After we released the mobile device sharing and new web navigation, our user adoption rates were significantly increased. The mobile device sharing has reduced login friction, allow frontline workers to quickly resume work sessions instead of struggling with the login process. Because the feature brings more users to the app, they also discover better collaboration, faster response, ultimately improved efficiency, safety, and quality.
MORE PROJECTS
