Enterprise User Dashboard

Background

My experience on this project was partnering with an internal group consisting of stakeholders, subject matter experts, business analysts, and developers.

Role

Senior UX/UI Designer

Tools

Figma
Slack, JIRA, Zoom
Miroboard (Whiteboarding)
Design System hosted on Invision

Team

3 Stake holders: Head of Technology, Policy Lead for Insruance, Head of Design
2 Subject Matter Experts
3 Business Analysts
3 Lead Developers, numerous others in Dev team

EIS Group, Inc. provides cutting edge digital software solutions to enhance the entire insurance lifecycle for sales agents.

Context

Creating this application would include a dashboard experience for sales agent. the agent would need to be able to seamlessly manage quoting, customers, billing, tasks, notes, and search all in one application.

My Task

To initiate a design kick-off with stakeholders and business analysts as the lead designer on the project. To start ideation, gathering requirements, wireframing, to final prototype and hand off.

Design Kick-off and Exploration

Held an In person design workshop with lead engineer, stakeholders, and policy experts

Whiteboarding brainstorming on Miro
Persona Development
User Journeys
Low Fidelity Wireframes

Lean UX Strategy and a Lean Person boards were created on Miro board to quickly understand the user, goals, challengers, and differentiators. These collection of post it notes were collected in real time from stakeholders and policy experts.

User Journey

The goals were not only to communicate the user's experience, but also to create checkpoints where we could confidentially, securely, and efficiently collect sensitive user information.

This user flow is organized in multiple swim lanes, to not only communicate what the user would be experiencing through the interface of the applicatio.

Low Fidelity Wireframes

Before my in person meeting with policy experts and stakeholders, I made a quick run down of my design strategy for this session. I wanted to keep this as lean as possible since most of these colleagues were not familiar about UX and we only had a very limit amount of time. Understanding the user, goals for the product, creating a userflow, and a lo-fi wireframe were top priority for me.

Design System

Using the EIS Design system, mockups were finalized to be development ready. These mockups were used by the sales team, as well as development to have pixel perfect designs ready for implementation.

Dev team used the design system to create tokens and utilize in their Storybook Library.

FOUNDATIONS

Text Syles, Colors,
Grid

Consistent use of grid system provides the foundation for harmoniously and consistently positioning elements onscreen. Designing to the grid helps create an experience that facilitates understanding and brings order to the pages.

Primary Blue colors are used for contextual text links and informative elements. It is also used to signify states in EIS Group, as well as buttons, quick search, highlights on forms, selected checkmarks, and radio buttons. Other colors are utilized for alerts, notifications and other emphasis.

Text styles provide a clear readable experience across the EIS system, and provide consistency in headers, labels, paragraphs, ect.

Example of primary colors which is a foundational principle in EIS Design system.

Components

Icons Navigation, Form Elements,
Cards, Tables, Popovers...

Components are built upon our foundation. Utilizing our layout rules, colors, and typography we create usable web components.

These components are more complex and allow users to interact with the interface and achieve their tasks.

Example of one our more complex components. Info card which is below the header and provides information about the customer, policy, billing, ect. to the agent.

Development

Tokens and Storybook

Our design system was created hand in hand with development team. As design team created and reviewed components, we handed them off to Dev team who can inspect them in Figma or Invision. They are able to review the margins, padding, and colors, and create these components in storybook which is a reusable development library.

Example of a component which is linked to storybook. This code can be grabbed by development for quicker and more consistent implementation.

Mockups

Putting it all together

After user journey, lo-fi wireframes were made, these mockups went through a series of iterations with stakeholder, policy, business analyst approval.

This shows the basic journey of a sales representative for example Geico or Allstate, creating quotes, and purchasing through communication of a broker or customer.

Agent Dashboard

• This CSR agent will see their list of tasks, customer, and cases
‍
• Graphics will keep track of their stats for cases, tasks, and customers which is a priority for an agent.
‍
•Global nav bar will have profile, search, menu for customers, creating quotes, and any other specific information such as billing, and claims

Product Selection

• Wide range of products are available are specific for a client and their offerings
‍
• Insurance products grouped on commercial, Group (company insurance), and personal.
‍
• User can muli select different quotes and get a range of prices for the customer
‍

Quotes

• Quotes are compiled once the agent has entered in customer specific data, such as state, enrollment dates, pricing, ect
‍
• User can click into quotes and be navigated to that product and customize it further
‍
•Selecting the quotes the user cna take different actions and go through the purchasing experience.
‍

Billing and Purchasing

• Traditional shopping cart experience is used for the billing experience
‍
• Product/quote cards are summarized on the right

Additonal Features for Agent

These features such as tasks, notes, history, documents, are all located in a slide out side panel for easy access for a sales representative. The benefit of a side bar is the user can access from anywhere or any page on the application, while not having to leave the page they are currently working on.

These features were are essential to helping this persona complete their communications and sales process with ease while all being located in an easy access sidebar throughout the application.

View and Create Tasks

• Tasks are important measurement of completion of sales and to-dos
‍
• Agents often will rely on their tasts to remain organize and prioritze their workday or leads.
‍

Documents

• Agents are constantly creating and receiving important documentation throughout their sales process.
‍
• User can remain on the same page working on a customer while being able to access their documents and refrence them in a side bar.
‍
• Due to the volume of documents, search and filtering was critical

History Timeline

• Agents can handle hundreds of quotes in a day or work with dozens of customers
‍
• Being able to see their past actions for refrence for themselves, another agent, or manager was critical