Product Design

Parsable Design System

Building out a visual and experience design system on web, iOS and Android platforms

Date
September 2017
Client
Parsable
Role
Senior Designer

Product Context

tldr: Parsable is a platform to help digitize and collaborate on work instructions, while collecting data in order to make continuous improvements

Parsable's mission is to create a platform for industrial teams to digitize their work processes, easily collaborate, and enable new data to be captured for analysis—all in the service of getting “Jobs done right, every time”. That means being able to get work done under all kinds of conditions. From managers on the go, to line operators, to remote inspectors in harsh environments, we had a lot of factors to keep in mind. 

As an early member of the product team, I had the opportunity to delve into complex user problems, prototype solutions, test and validate them with customers, and work with members of each department to bring the features to life; out in the field and in factories all over the world.

The focus of this case study is the implementation of a new and unified design system— a key necessity for any digital product.

UX Design Refresh: Problem to Solve

tldr: the experience and visual representation on each platform was clunky and highly inconsistent, leading to poor user experiences and internal inefficiencies

Not long before I started, the company had made a pivot from building their platform on wearable tech (with a focus on Google Glass) to mobile phones and tablets. When this transition occurred, the experience and visual representation on each platform (iOS, Android and Web) was left clunky and highly inconsistent. Many of these inconsistencies became part of an increasing pile of product debt that were also tied to major engineering efforts. 

Our product was in the type of feature-expansion that required a solid foundation to build upon, and the improvements we needed to make were nearly impossible to manage incrementally (at least without an initial push). 

To dig deeper, we analyzed our list of customer improvement requests, our product-team's list of design debt items and a slew of bugs in Jira, and were supported in making this a priority. The next steps were comparing and prioritizing user problems based on broadest impact, customer requests, and engineering complexity. With those in mind, we extracted these high-level problems:

• The product didn't meet minimum content accessibility standards

• Took too many taps/screens to expose important job information

• Training was difficult when mobile experiences were not aligned

• Iconography was unclear/confusing

• Internal process for utilizing design assets was sloppy and time-consuming

The Process

We finalized a list of work that we could plan and execute on

Once we had a list of user problems in-hand, we set specific objectives for the work to be done before touching any mocks or lines of code. After multiple vision and prioritization sessions with stakeholders from each role, we narrowed the list to 76 individual items (some larger than others). Putting aside some outliers, the list boiled down to the following goals:

• Improve readability and scan-ability across the app• Improve Information Architecture

• Make visual/functional experience consistent across platforms

• Provide more information to managers about work actively being done

• Provide developers a single library of assets to pull from for common patterns

Alongside our CEO and another Sr. Designer (cred: Shirley Ho), I led a "War Room" team of web, mobile and QA engineers to make a major dent in our debt across the product and codebase.

Though some of the styles were created in the weeks leading up to the sprint, many of them were finalized in the first few days. Once locked down, we got them properly formatted and stored in a working Sketch document as well as Invision for the developers to use for reference.

The style guide in it's final form was split into sections, namely: Color scheme, typography, text styles (for both web/mobile), iconography, buttons, mobile patterns, web patterns, and finally examples of use in context.

At the end of each day, we tracked our progress and made planning adjustments on the fly to account for new information (eg. a piece of legacy code that was harder to refactor than previously estimated). The weeks to follow flew by as we encountered a ton of unexpected hurdles, mostly codebase related. In response we adjusted the plan, re-scoped, prioritized and kept moving.

The Results

We were able to make major headway in improving the product experience on every screen and consistency across each platform

Some aspects of our redesign are still being assessed, validated and iterated on, such as the new Job list view. While qualitative data to support the improvement was hard to come by, we received a ton of great feedback from our sales reps, customer success team and directly from customers after the release. Theme's we continue to hear:

• Increased adoption rate and upward-trending NPS score

• Reduced training time by account managers for new operators and authors

• Design/Usability became a greater differentiator for our sales team to leverage

More Details to Come

In addition to working on the visual foundation, I led experience and visual design on a number of integral features; including the creation and collaboration of Issues (see top project on this portfolio), a notifications system, IA re-factoring and an analytics dashboard. Many of these features had components on multiple platforms, required various rounds of user testing, QA and milestones of customer validation.

OTHER Works

More Case Studies

View All Works

I'll paws for questions...

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form