LegalZoom Lifeplan Responsive Website
Lifeplan was a fully responsive website launched as a zero-to-one business expansion for LegalZoom.
It gave B2B employees access to estate planning benefits and subscriptions for legal, tax, financial, and insurance advice. Through Lifeplan’s online tools, employees could track major life events, schedule advice sessions, and easily create, store, and share their estate plans.
Above: Home page responsive dashboard design was clean, simple, and allowed users to easily add and mange life events. Comps by Dan Harris, UI designer.
TLDR Overview
Role: Lead UX Designer
Team: 1 UX Designer, 1 Service Designer, 1-2 UI Designers, 1 Content/Copy/Marketing Manager, 1 Operations Manager, 1 Product Manager, 1 Analytics Manager, 5-8 Developers, 2 QA Engineers
Timeline: 4 months for MVP, 16 months of iterative improvements
Challenge: Redesign LegalZoom’s Lifeplan to work seamlessly across desktop, tablet, and mobile. The existing site was very basic and hard for customers manage their subscription benefits.
Focus Areas: Responsive IA, user flows, wireframes, usability testing, high-fidelity prototypes
Impact
Delivered a modern, responsive experience that:
Secured retention of the client with 45K employees.
Simplified navigation and increased customer confidence in accessing legal services
Positioned Lifeplan as a more attractive and user-friendly subscription product.
My Task
As Lead UX designer, I led the UX design and strategy from end-to-end that would:
Deliver a v2 website for client employees to log in and fully take advantage of the LifePlan benefit offerings
Guarantee the website responsively worked on desktop as well as mobile devices
Align business and sales-driven goals with those of the users of the website
Launch the MVP of the v2 website within an aggressive timeline of 4 months
Leverage data to inform improvements post-launch, and propose user-centric improvements
Our Situation
LifePlan was a newly-formed business expansion team at LegalZoom, with one major client contract requiring that we provide an online website for their 44,000 employees by January 1, 2018.
An initial version of the website existed, but it lacked the detailed content and new features planned for v2.
This meant we had just 4 months to conceive, redesign, build, QA, and launch the v2 site.
Challenges:
We had a design system that lacked many patterns, so we paved the way for several new patterns.
Our newly formed team underwent the Tuckman Model, and would quickly need to learn how to form, storm, norm and perform together.
With no dedicated UX Researcher, we conducted discovery and research methods on our own.
The website would need to smoothly and smartly integrate features from the current LegalZoom website.
My Actions
Lead Team Collaboration Session
When I joined the team, there was already a v1 of the site built, and our job was to create v2 using the same assumptions. With limited time, we prioritized rapid ideation over formal discovery, collaboratively defining the IA and flows to ensure we could align quickly and keep the project moving forward.
Below: I led a team worksession to layout the preliminary IA for the site to help generate discussions.
Below: Flowing out the feature to schedule a financial consultation with the party, Merrill Lynch.
Conduct Unmoderated Card Sort
The team disagreed on the navigation IA. To resolve and push us forward, I conducted unmoderated open card sorts using OptimalSort on Usertesting.com.
Below: This is the navigation that the team agreed upon after the user tests concluded.
Create CX (Customer Experience) Screenflows
To show when and how the CX (Customer Experience) related to the site, I made many screen flows.
Below: This one example shows how Member Advisors connected 3rd party advisors to LifePlan customers. I combined a screen flow of a user booking an attorney consultation using the existing app (steps 1–7), with a user journey flow describing the actions for the Attorney (step 8), Member Advisors (steps 10–12), and 3rd party vendor Wevorce (steps 13–14).
Sketch Concepts
The primary feature was a "Life Event" dashboard for users to create a timeline of events that occur in their life. For each life event, they could get tips and guidance from LifePlan.
Below: I quickly drew dashboard ideas to share with the team. They helped us choose which tiles to keep or remove and improve later.
Below: I quickly sketched my ideas for the Life Event feature on the desktop homepage’s top tile. Clicking a Life Event opened a modal where users could enter details and then have that event show on the tile. These sketches guided the final design I prototyped below.
Create Hi -Fidelity Prototype
Using Axure RP with the visual designers comps, I designed and prototyped a concept to help the tech team assess feasibility. I also planned to user-test this design but the team deferred the feature for the sake of time.
Below: I created this prototype in Axure using UI assets and comps by Dan Harris, UI designer.
The Result
1. Launched MVP Successfully
After lots of value-engineering, we successfully launched desktop and mobile MVP on time on January 1, 2018.
It was a relief to meet our contractual obligations to our clients and give users a benefit that many wished they had known about sooner.
*All comps designed by Daniel Harris, UI designer.
Below: Desktop and Mobile Dashboard Home Page
Below: Desktop and Mobile Book Advice Modal
Below: Desktop and Mobile Estate Planning Page
2. Set UX Pipeline Priorities
Next, leadership set our goal to increase our subscribers from 44k to 140K by January 2018 (9 months). I set my goal to improve the current experience.
To track ideas, I made a weighted matrix to recommend UX improvements for the pipeline. It showed that a consumer-facing Marketing site was the next priority.
Below: Weighted UX Backlog
Working with the Product team, who gave us a product backlog, I made a weighted matrix to prioritize each item. It shows a total priority score and the team's actual priority. This helped us decide what to work on next.
Below: UX Pipeline for Current and Completed Work
I created a matrix based on the UX Backlog to track my UX work and share it with my manager so she knew my bandwidth and priorites.
3. Mapped Data-Based Pain Points
Our Content Manager and UI team took on the Marketing Site, while I focused on research and discovery. I partnered with our Member Advisors to get a list of recorded customer problem calls. By listening to these calls, I could find their associated web session recorded in Quantum Metrics videos.
I also partnered with our Service Designer to create a phone survey for our Member Advisors to conduct for us. The results of this survey also informed us of any pain points.
When I heard or saw a user pain point, I documented it on an Affinity Map in Mural.
Below: Flow chart for Sales team requesting survey
I worked with the sales team to decide the best time to ask clients for feedback during support calls. This is the process I created and they used.
Below: SpeechMiner call recordings
The sales team used SpeechMiner to record client service calls. I reviewed selected calls with their lead, noting the date, time, and complaints.
Below: Quantum Metrics - screen recordings
Using the day, time, and complaints from Speechminer, I checked callers’ screen recordings in Quantum Metric. This often helped me understand their problems, especially when combined with their call recordings.
Below: Affinity mapping pain points
Using Mural, I recorded and sorted user problems. We used this to decide what to improve next in the MVP.
4. Recommended UX Improvements
The biggest pain point was the Login and account Activation sequence.
I made flows to compare the current experience vs the preferred experience, and gave the team recommendations.
Below: This is a short flow example of where a user pain point could be improved.
5. Facilitated Unmoderated User Tests
The team also disagreed on how to users should create new passwords. I researched it but found no definitive study, so we did our own.With UserTesting.com, I ran 10 users through unmoderated AB tests in creating a new password in a prototype I made in Axure.
Below: Actual UserTesting.com video from the unmoderated A/B test that I planned, executed, and analyzed. Unmute to hear the audio.
Below: We tracked observations on an affinity map matrix, and the test showed that 9/10 users preferred the 2 input field method, and all users saw that as the most commonly used input method.
6. The Project Is Ongoing
The tech team is now building the Activation improvements that I designed before I left LegalZoom.
We plan to build the password creation improvements in Q3/2019. We're excited to see how this improves our experience!
My Takeaway
I learned how to take an MVP from concept, launch, and iterative improvements. Key points that the team and I learned:
To define and align on the end-to-end system early, so that feature iterations fit within a coherent experience.
How to use tools such as video and voice recording to measure user pain points.
How to assess and rank UX improvements for the roadmap.
How and when to use tests methods such as card sorts and AB tests to settle disagreements among the team.
How to build hi fidelity Axure prototypes with Sketch to communicate and validate designs.