Case Study Banner

Project Summary

This is a self service application with the goal of creating straightforward experiences that lessen the cognitive workload of users. I needed to create a system that could logically represent a wide breadth of services CPG offers, from updating personal information to giving admins the necessary resources for editing clients. It was important to create a user-friendly design with ease of use at the forefront of my work.

Designer
User Research
Illustration & Brand
Creative & Tech
Website Application

Project Details

Role :

Design Lead

Duration :

June 2020 - November 2022 (3.5 years)

Tools :

Figma, Sketch, Webflow, Invision, Agile, Wrike, Monday

Problem Icon

Problem:

Inundated with Customer Support Calls

Phone lines for customer support are always full, resulting in low user satisfaction. At this point, users do not have a way to update personal information for their pension benefits.

Solution Image
Problem Icon

Solution:

Create a Self Service Application

Now customers have the ability to keep their information updated, guaranteeing that they continue to receive the benefits they earned and deserve.

Solution Image

Requirements Mapping

Initially, due to the size and complexity of the new application, business teams were struggling to communicate effectively. This site map allowed us to visualize and understand the scope of the project through the business and developmental requirements. My initiative to create an all-encompassing map allowed us to launch the application earlier than its projected launch date.

Requirements Map
Requirements Map

New Employee Visioning

When I was made aware that our direction shifted to outsourcing our development, I quickly iterated mockups using business requirements and UI best practices to make a scalable, user-centered design within the 8 hour time constraint, which allowed us to choose a development firm within the coming week and keep to our projected launch date.

3 New Employee Screen Examples

Updated Dashboard

With a new style guide and design thinking, the user dashboard needed updating.

Goal:

  • Declutter the dense content
  • Apply new pattern library
  • Create new links where content was originally read only
  • Add info links to help lessen initial cognitive load
  • Emphasize important information and links

Original

Original Dashboard

Updated

Updated Dashboard

Fidelity Concepts

Concept Image

1. Low Fidelity

This low fidelity mockup was used to help each team understand how the business and development requirements might look, so we could have further discussions on user needs. With a few iterations, we were able to meet all requirements while making a user-friendly design.

2. Medium Fidelity

This was used to help the business and users understand how the potential design would look and feel, which allowed us to identify areas that needed further improvement before reaching the final design.

Concept Image
Concept Image

3. High Fidelity

The final look and feel is displayed through these screens, allowing them to be handed off for a thorough and successful development.

Results

Once logic and functionality were defined, the visual design process was straightforward. Using wireframes and the modular system, the UI was created following brand visual guidelines. A digital design outline was developed to help justify design decisions and manage alternative opinions within the team. All necessary materials, guidelines, and recommendations were handed off to developers, with further specifications being provided throughout the build phase to help it run smoothly.

Final Application

This high fidelity demo flow showcases, from start to finish, the final design and functionality of adding and editing a dependent within the newly developed application.

Final Application Examples

Design System and Style Guide

We created a design system that would not only build consistency but also save time for the client as they develop new features. This improves the overall process and experience of the website.

Goal:

  • Create a library encompassing all required specifications
  • Work with contract designers and developers to transition designs into updated CMS
  • Limit color palette, increasing link and CTA visibility
  • Simplify font family using typescale for readability
  • Introduce iconography for page scanning
Style Image
Style Image
Style Image
Style Image

Demos

Here are a few examples of flows I created for this application.

Thanks for looking

Continue viewing below

My Portfolio