Legalshield - associates-only back office
Website ReDesign
Role: UX Designer with support from strategy, tech, and design teams
When: August 2017 - October 2017
Duration: 3 Months
What: Experience Research & Strategy
Objective
LegalShield, a corporation that sells legal service products through independent associates had a complex back office to serve their employees. Associates could track sales, access training materials, manage their teams, and more. However, the back office was difficult to navigate, and users often had trouble finding what they were looking for due to the information was spread across different sites. LegalShield asked for an updated, easy-to-navigate experience to help associates achieve their goals.
Mission
Create a cohesive, easily navigated back office experience for associates.
Market
LegalShield Associates of all levels looking to keep track of sales, promotions, and access training material.
Original Dashboard
Problem
LegalShield's online resources for their associates are spread across different websites. The associates have trouble finding what they need between the different sites and miss vital information to help them with their independent businesses.
Solution
Combine the different sites into a single, manageable experience and update the look and feel based on the redesign of LegalShield.com.
Redesigned Dashboard (top portion)
User Interviews
In order to understand user needs, we conducted interviews with a variety of associates. We spoke with everyone from top salespeople to newer associates in order to address a full spectrum of needs.
The process included having associates walk us through their daily processes, showing us the materials they needed to access and the paths they took to find those items. We also asked them to describe what pain points they had that we may not have seen, elements that they enjoyed, and features they would like to see. While we gained some insights based on what they liked and wanted to see, we learned the most by watching their process and the roundabout ways they took to find and process information.
The interviews confirmed our assumptions that users wanted immediate access to sales information, and they helped shape which information was most important to display. The interviews also confirmed our biggest assumption: the separated sites caused users to miss a lot of information, and they wanted a single experience for their needs.
Competitive User Flows
Next, I compared the path of a LegalShield associate to associates from competing companies. This process allowed us to see differences in journey length, opportunities for content simplification, and alternative options for how to present materials and statistics to associates.
For a deeper view into the LegalShield and Primerica comparison, view the PDF:
Site Architecture
After gaining a better understanding of what information users needed, I conducted an audit of the roughy 18 different back office sites. After finding duplications, opportunities to combine pages, and outdated materials, I created a proposed sitemap for the new back office. The new sitemap combined sites and offered high-level landing pages with easier paths to information.
Below are some examples of the larger, existing sitemaps, and my proposed condensed site map to the right. My proposal include the addition of a footer for items that required less frequent access, but still were helpful to have surfaced.
Wireframes
Once we had a sitemap in hand, and priorities in order I was able to move on to wireframes. Working closely with tech to understand feasibility, and design to ensure my solutions would translate to LegalShield's UI, I began with creating essential screens like the landing page or associate analytics pages. Once approved, I continued to make screens for all flows for all processes an associate would go through.
A selection of wireframes from the site can be seen below.
Handoff to Design and Tech
After the user flows were completed, I provided annotated screens to the development team so the designs could be built out with proper interactions. I was available to the tech team if changes needed to be made based on tech feasibility, and ensured any changes maintained the new and improved experience.
Once tech signed off, and the flows were approved by the LegalShield stakeholders, visual design took the wireframes and updated them to LegalShields UI. I made sure designs did not compromise the experience, or create new feasibility issues and was available if content needed to shift or change in order to maintain consistency.
Below, find some examples of annotated screen for developers, navigation notes for developors, in addition to some screens with completed UI
