Modernized Legacy App, Enabled Acquisition
H5/Lighthouse | User Experience Designer & Manager
My Impact
Addressed 15 years of design debt by streamlining workflows, standardizing interactions, & introducing a design system
Reached a wider audience by hosting DART on the Relativity platform (think Salesforce for legal-tech)
Helped H5 get acquired by Lighthouse by modernizing application for the SaaS era
The Company
H5 eDiscovery was a pioneer of e-discovery, technology-assisted review, and e-discovery services. They provided highly accurate document review via their technology-assisted review service. Lighthouse Global acquired H5 eDiscovery in September 2021.
Lighthouse Global is the leading provider of e-discovery, technology-assisted review, and case preparation support. They help corporate counsel and their legal teams find the documents they need in the context of litigation, investigations and compliance, while ensuring that costs are contained, deadlines are met, and risk is minimized.
2005: Legacy desktop app
2023: Streamlined user-centered SaaS app
The Project
Transform an internal VPN-based legacy desktop application into a web-based Relativity-hosted SaaS product for external users.
Created in 2005, Document Analysis Review Tool (DART) was an internal desktop application for Search Strategists & Reviewers. Users could create subsets of data from larger datasets, create highly complex search queries, analyze documents, & take additional actions on documents before delivering them to clients. DART was only accessible via VPN on a virtual machine, which made it cumbersome in a number of ways.
My Role
As Lead UX Designer, I focused on all stages of design from November 2020 until January 2023. From user research to usability testing, and everything in between.
In addition to DART, I supported design for Matter Analytics while managing a mid-level designer who supported both teams.
Why Redesign DART?
Wider Audience: DART needed to be browser-based so it can be hosted on the Relativity platform
Design Debt: 16 years of development without UX research or design involvement has created usability issues
Current Issues:
Can only be accessed using VPN, causing reduced viewport
Significant design debt since H5 had never had a UX Designer
Internal tool, not directly tied to revenue
New Datasets from other H5 apps: DART needed new features to leverage data ingested from Matter Analytics
Desired Outcomes
Standardized workflows
Maintain or impove review velocity
Simplified collection creation
Intuitive query creation
Timeline
Surprise 1: DART Product Manager of 15 years leaves H5
Right in the middle of solving challenges iterating designs, our PM announced they were moving on from H5.
They graciously gave 2 months notice, which provided time for knowledge transfer & final workshopping. This allowed DART’s progress to continue in their absence with little disruption.
Surprise 2: Lighthouse Global acquires H5
Congratulations! But, at the same time, so many questions. What’s DART’s fate? What’s the fate of the H5 product suite?
Thankfully, Lighthouse had a great team & culture. I joined small but seasoned & supportive design team, resulting in faster iterations, varied perspectives, & solutions.
My Process
I generally approach design using the Double Diamond Design Thinking process.
Discover Issues: I identified pain points & opportunities by conducting user interviews
Define Challenges: I translated findings from customer interviews into tangible challenges to be addressed
Develop Answers: I collaboratively gathered input across teams, mapped user journeys, & analyzed tasks which informed our understanding of users
Deliver Solutions: I delivered consistent, standardized workflows, wireframes, interfaces, & prototypes for the complex needs of DART’s users
Image: The Design Council (2005)
Discover Issues
Image: Abbas, Nayyer (2023, May 15) 10 Usability Heuristics for User Interface Design
As with all my projects, I start by conducting a usability audit. I used Jakob Nielsen’s 10 Usability Heuristics for User Interface Design as a guide. I usually uncover a few trending usability issues, & dig deeper on those initial findings. I audited interactions, interface elements, color usage, workflows, and product architecture.
What I found:
The interface lacked consistency across various tasks (4: Consistency and Standards)
No error prevention (5: Error Prevention)
Didn’t help users with errors (9: Help Users Recognize, Diagnose, and Recover from Errors)
No documentation (10: Help and Documentation)
Additionally, the interface looked like Windows 3.1, but it was 2020.
click image to enlarge
User Research to Uncover Insights
After the usability audit, I conducted user research that revealed delights, pain points, workarounds, challenges, & utopia scenarios.
Delights: Double monitors, Ultra-compact display
Pain Points: Having to use VPN on a virtual machine & losing monitor screen real estate because of VPN
Workarounds: Collapsing panels
Challenges: Reviewing documents using only one monitor
Utopia Scenario: A lightning fast web-based, non-VPN experience that still utilized two monitors
A Persona to Guide Discussions
Personas can create a common language for Product Managers, Designers, & Engineers to discuss features and workflows. After conducting discovery research, I created a persona based on the aggregated findings.
Goals
Create document collections
Create advanced queries for various collections
Fast first and second reviews of document collections
Easy commenting, annotation, and marking for follow up
Frustrations
Collection creation is unintuitive, cumbersome
Advanced Query creation is clunky
Concerned new D.A.R.T. will not perform as fast in a browser than it did on desktop
Concerned they won’t be able to use double monitors like before
Define Challenges
We uncovered a lot of great findings during user research. Next, we categorized those findings & prioritized those challenges to be solved in our MVP.
MVP
User Challenges
Browser-based performance
Screen real estate concerns
Business Challenges
Reconcile 15 years of UX-less feature development
Redesign VPN & desktop-based application to browser-based SaaS product
New look & feel
Consistent workflows
Consistent interactions
Maintaining similar level of document loading performance in a browser
Designing the product to fit into the Relativity container interface
Design & Technical Constraints
Building for Relativity’s 3rd party platform
Designing for Relativity’s upcoming platform-wide UI redesign
Engineering teams were split between Matter Analytics + DART development
Redesigning the UI for DART & Matter Analytics at the same time
Develop Answers
Q. How might we make DART into a modern SaaS product that performs as well or better than the desktop version?
Some Answers:
Reconcile the entire tool including interface, interactions, workflows, use cases, visual language, design system
Redesign all interactions with consideration to browser performance issues
Redesign the user interface to fit in the context of Relativity platform wrapper (think Salesforce for legal-technology)
Audit the information architecture, interactions, interface elements, color usage, & workflows
Create and continuously iterate on a new visual language, design system, and UI kit
Conduct user research using clickable prototypes to ensure workflows and interactions meet user expectations
Iterate on designs at key points during the research series using the R.I.T.E. testing methodology (Rapid Iterative Testing & Evaluation)
My basic formula for developing answers is as follows:
Find Inspiration: Research apps
Explore Possibilities: Explore potential designs until you exhaust explorations
Research Explorations: Remember “Design is just a theory until it has been researched”
Iterate from Research Findings: Take what is learned from research, refine the designs
Research & Iterate Again (time permitting)
Find Inspiration
I researched products with similar complexity, a more modern design, and related industry. I was inspired by Salesforce and Relativity.
Salesforce
Bento box design separates content, provides context
Clean modern look and feel
Padding between elements allows data to breathe
Clear Information hierarchy, creates visual cues
click image to enlarge
Advanced High-Fidelity Explorations
“This is way better than what we’ve used for the last 10 years!”
click image to enlarge
Also uses bento box design
Provides example of screen real estate
Will blend with container interface
Color scheme is similar to H5/Lighthouse
Explore Possibilities
When I explore possibilities, I first focus on information architecture, work flows, and layout. I usually create a wireframe, which allows me to quickly explore without the visual design becoming a distraction. Much of that has changed with Figma and design systems being so readily available. However, pen and paper is a great place to start, and is the fastest way to document rough concepts.
Concurrently, I’m working on a design system that accounts for all the workflows and needed interface elements I’ve observed during the initial exploration phase.
Early Low-Fidelity Explorations
Initially, use the lowest fidelity possible, pen & paper (not shown).
Focusing on low-fidelity design allows early feedback without visual design becoming a distraction
Then use high-fidelity wire frames to gain alignment more easily
Refining user tasks for efficiency
Explore using high-fidelity designs
Focus on visuals now that workflows have been addressed
Refine the user interface for increased user acceptance rate
Begin to finalize design system. (Is it ever final? No.)
click image to enlarge
Research Explorations
As I always say, “Test early, test often". User research isn’t a one & done exercise. I’m constantly conducting research with users, leveraging sketches, low-fidelity wire frames, & clickable prototypes. This always testing mindset allows me to quickly answer the question, “Can users complete their tasks using the proposed designs?”
My other favorite design phrase is “Design is just a theory until research is conducted.“.
My favorite way to conduct user research is to use the R.I.T.E. methodology. R.I.T.E. stands for Rapid Iterative Testing & Evaluation. This method enables designs to be tested, iterated, & tested again within a single research series. It provides the fastest feedback and iteration loop possible. It’s also a great way to build rapport with users.
Iterate From Research Findings
Once the general concepts have been tested, I iterate on those designs. I incorporate early design system components, refining them as I get a clearer picture of how they will and won’t work with the work flows.
Iterations
Incorporates early components of new design system
Sets up design for high-fidelity mockups
Enables clickable prototype testing
Begins to finalize the design system
Research & Iterate Again
It always makes me happy when there is enough time to iterate and test again. This crucial, but often forgone step, yields refinements that can take a pretty usable product, and turn it into an interface that is obvious to all users.
Below, are findings and results from 2 separate rounds of R.I.T.E. testing for a formula builder in D.A.R.T.
click image to enlarge
Final Outcome
Here is an early screen of the final outcome from the Formula Builder research.
click image to enlarge
Relativity
Formula Builder: Session A - Starting & Iterated Screens
Issues Uncovered
Users had difficulty creating groups
Buttons had similar names, adding to the confusion
Formula move icon was mistaken for a menu icon
Red icons made users think there were errors
Iterations
Removed buttons from formula contents
Consolidated buttons to reduce information overload
Made remaining buttons more prominent
Used a different icon for the move icon
Removed color from the interface, except for CTAs
Results
80% of users
Located the group creation action
Successfully moved a formula row
Formula Builder: Session B - Starting & Iterated Screens
Issues Uncovered
Some users still had difficulty creating groups
Some micro tasks were unclear
Users misunderstood ability to edit selections
Target areas for some actions were too small
Iterations
Displayed uneditable fields using disabled state
De-emphasized buttons (Aligned to the Lighthouse DS)
Relocated buttons to be more contextual
Increased click/tap target of smaller icons
Results
100% of users
Located group creation button
Successfully moved formula rows on their own
Clearly understood how micro tasks work
Understood how and when to edit selections
Visual Design
Revised “New Condition” and “New Condition Group” buttons into text links, to avoid potential confusion between “Cancel” and “Next” CTA button styles.
Field highlighting guides users to currently active element on page.
Interaction Design
Call To Action button information hierarchy remains intact.
Fewer popup windows means user switches context less frequently.
Test-imonials
The feedback we got from users was validation of our efforts. Here are a few memorable quotes from our participants.
“Creating advanced queries is so much easier this way.”
“Finally! This app is desperately in need of an update!”
Deliver Solutions
Here are a small sample of screenshots that show the application before, during, and after the transformation to a SaaS app.
How it started
click image to enlarge
How it progressed
click image to enlarge
How it finished
click image to enlarge
Align to Lighthouse Design System and Products
Align to a New Design System
This project has been active for about a year and 10 months, and there’s still so much to do. Creating a design system was needed, but not budgeted, timewise, in the project. So, in addition to creating flows and redesigning the entire product from the ground up, I also produced a design system that addresses the needs of D.A.R.T. while accounting for other H5 products like H5 Matter Analytics. Once we were acquired by Lighthouse, I needed to align D.A.R.T. and Matter Analytics to the Lighthouse product design system.
Thankfully the new design team at lighthouse was awesome! I just gained a new UX tribe!
There were a few challenges though. It wasn’t as easy as turning on a light switch. H5’s products and design system were built in Adobe XD (and Photoshop before that). Lighthouse products and design systems were designed in Sketch. The world was adopting Figma. Redesigning H5 and Lighthouse products in Figma would have been the smartest plan going forward. But it wasn’t an option for the Lighthouse design team. The time it would take to redesign everything in Figma would slow our ability deliver on all current and future projects. So, we decided to stay in Adobe XD for H5 products, and Sketch for Lighthouse products.
Which meant, I had to redesign the Lighthouse Design System, called Kraken, in Adobe XD.
I partnered with the Lighthouse design system designer to align on color, layouts, icons, task flows, & interactions. We spent lots of time learning & refining design system components for both H5 and Lighthouse products.
I aligned the H5 design system to Lighthouse, including layouts, UI Kit, color palette, visual language, workflows, and interactions.
Due to Lighthouse products having minimal functionality, their design system was also minimal in nature. Ultimately, we ended up expanding the Lighthouse design system to account for features, interactions, workflows, & UI elements from DART & the rest of the H5 product suite.
Design System Alignment
Align everything to Lighthouse
Lighthouse Design System remains in Sketch, I built matching design system in Adobe XD
Design System Expansion
Lighthouse design system was built for simple use cases
The Lighthouse design system needed to be expanded to meet the needs of the H5 product suite
Close collaboration with the Lighthouse design system designer
Revise H5 Matter Analytics to ingest Lighthouse data sets for DART
DART uses datasets from Matter Analytics. In order conduct document review in DART, Lighthouse needed to integrate their datasets into Matter Analytics. While designing for DART, I also designed Matter Analytics features that aligned with and enabled admin users to set up data ingestion from new Lighthouse datasets.
Matter Analytics Feature Alignment
Analytics settings
Algorithm output
Folder structure
Data visualization
Outcomes
This project was transformational for H5. There were twists, turns, and surprise pivots. The D.A.R.T. Product Manager of 15 years left right when things were starting to get going. The design system was created in addition to the regular workload. H5 got acquired! It was an adventure, and we had a great, supportive team throughout.
Lots of outcomes from this project, including:
App now hosted on the Relativity platform
Wider potential customer base for D.A.R.T.
Simplified workflows
Consistent experiences
Greater feature discoverability
Reduced time to task completion
H5 got acquired!
What Did I Learn?
Things I Learned
Show, don’t tell. Alignment was easier when product managers, engineers, and even other designers had visual designs, or better yet, clickable prototypes.
Clickable prototypes won the day. Demonstrating interactions is the fastest way to get meaningful feedback on your designs.
Continuous inclusion reduces risk. Through continuous conversations with stakeholders and users, the product remains aligned with user expectations throughout the development lifecycle. This resulted in a successful product launch, and ultimately H5’s acquisition.
What Would I do Differently?
I would:
Conduct user research sooner. I spent a lot of time learning from the Product Manager before getting to speak with users.
Collaborate earlier with users and stakeholders. The earlier, the better to reduce project risk.
Include users throughout the entire process. This turns users into stakeholders and the biggest champions of the project outside of Product, Engineering, and Design.