As the Lead Product Designer, I’m in charge of the UX research, UI design and prototyping.
I was brought into the FastTrack team as a contractor to redesign the website. This is a very broad ask and no direct problems were brought to my attention during the hiring, or during the first few discovery calls with the team. The company has several software engineering teams , but no product team. So this first thing I did was set up a series of workshops with members from the different departments to understand what expectations they had from the term “redesign” as well as what problems they have encountered or perceived to be a problem that users were facing. I also took the opportunity to create some empathy for users, discuss feedback loops, and initiate conversations about what metrics are important to the different teams.
My discussions included stakeholders from marketing, finance, customer service, engineering, CEO, the Co-founders and more. During our calls I walked everyone through a workshop aimed at
As I began making my way through all the feedback gathered internally, two themes began to appear that I categorized under expectations and concerns.
Easily access information in a logical way. Performance - speed / snappier better look and feel, more intuitive
More intuitive
More modern than hartford
Consistent with what the market wants
More up to date
Speed
be #1
Scalable - future product ready
Be a replacement for other internal tools
Considering all key stakeholders
That we forget the consumer
Critical decisions made with the right information
Enough time to reflect, view core principals, requirements, etc...
Over engineering something.
Have enough time for SWE to build, and also to select a design language that is consistent among different apps and portals.
Hartford was disappointing
Presentation
Over focus on "best practice"
Lack of presentation!
Ease of use
Lack of internal feedback and apply to platform
Get trapped in a design because of data structure
I was curious how, or if the team looked at users. Did they have a big backlog of UX research that needed to be looked at? Sadly no, but they were listening & thinking of users in their own way. I tried to see what they thought by asking the question “What do you think are some of the main user pain points?
System limitations
Configurability, allowing users to "control" some things on their own
Opportunity report in and out navigation data layout Advanced Search!
Create a letter is difficult to get to.
Modernize front-end user experience
Too much data on the UI extra buttons/icons/fields
Self reporting on an ad-hoc basis
Speed
What we chose do display and what we don't. Based on real estate limitations
Customization of the UI (what you want to see: reports, layout of a page) based on role (manager vs employee)
OCC matching needs to be updated/improved
Need to figure out core LTD claim mgmt
Limited products...significant opportunity to expand scope
Design / UX fragmented a lot of isolated components/features
no "Quick Actions" - you have to go into EVERYTHING!
Some of these might seem trivial, take "icons" for example. While I think most users wouldn't point to that as the most important pain point, the icons did look like they were from the 1990s MS paint era.
I decided to split such an obscure and tremendous task as "redesign" into several stages. Each high-level stage has also been broken down into specific steps and actions.
While this mostly follows the double diamond, it's nice to know the exact steps taken within each phase of the process, as well as included the alignment that is needed before the design process can start.
Stakeholder workshops to define:
One of the first things I did after receiving my credentials to the test environments was map out the entire site as it is. First, I did so visually (this comes in handy constantly), then a more structured site map. As we rework the information architecture, this will be updated.
All stakeholders agree we should have a “modern” look. But what does that look like? I gathered several products that I interpreted as modern and put them in front of stakeholders to have a discussion about the direction our design was headed.
To better understand how agents currently process claims and identify potential problems, I advocated for conducting user interviews first before diving into solutions. I also invited our developers to participate in mental mapping sessions with me, so that as a group, we can brainstorm solutions based on our findings.
I interviewed around 16 users who have used the platform for varying lengths in time, ranging from 1 month to 3 years. We found that:
Because of these difficulties, a number of users use additional tools to do the work that should be managed within the system; others end up not using the system at all, even when it would be more organized to do so.
After looking at the feedback on the current product I decided there would be three main themes that the design should focus on and impact during the initial redesign. Things such as “speed” “area X is difficult to use” and so on will be addressed as we are touching every part of this product, and through the below themes we will be able to make sure specific areas of concern are addressed in a data-backed method.
Each of the above pillars was looked at in-depth, here is an example of how I approached our creation of a modern product.
FastTrack defines modern as:
FastTrack will be described as a product capable of greater operational efficiency with a reduced time-to-market while being able to adapt to new technology. The experience will be consistent across verticals and provide a great deal of value to users.
"My company is using modern technology" - Our Users.
a product that advocates or practices a departure from monolithic styles or values.
To have actionable data on all of these things we defined as modern, we are going introduce several metrics:
Now that we have done initial user interviews, we have some insight into the typical paths our different user types are taking, so we worked to shorten that path to those common destinations, and bring forward the most used features. KPI: Clicks to complete task One test I conducted was on the users ability to make changes to client profiles. Average, Median & Range of Clicks to complete task in monolith: 11.25, 10.5, 10 Average, Median & Range of Clicks to complete task in Modern: 3.7, 3.5, 4
After reviewing and defining what “modern” looks like to stakeholders, I had enough information to begin working on our visual language. Here is an example of the monolith UI next to the updated up.
Multiple styles of tables, but no use cases to validate the different styles.
By building out our atomic design system we can have one table style that is capable of handling the different data types.
I needed to make sure we follow WCAG 2.1 AA standards. So I conducted an audit on the existing product and made sure the standards going forward resolved any of those issues that others may have missed.
Colors were being used inconsistently and without WCAG 2.1 AA compliance. This was an opportunity to set some standards and make sure we are in good standing with AA standards. Although our new palette has 45+ colors, there will only be 5 used in the majority of the design work. The others will be good for certain use cases(data visualization, system status, marketing, etc...).
These are base black and white color styles to quickly swap out if you need to.
Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.
The primary color is your "brand" color, and is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion.
Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as removing a user from your team.
Warning colors can communicate that an action is potentially destructive or "on-hold". These colors are commonly used in confirmations to grab the users' attention.
Success colors communicate a positive action, positive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green.
Administrators now have the ability to self-manage brand colors, logo, and fonts, and select from a light or dark theme. This frees up some engineering resources in the long run and reduces our time and effort when onboarding new clients.
With our new modernized look, we also have brought more modern functionalities into the mix. The system was previously using federated search, returning any and all matches with very little logic,
We conducted 2 rounds of usability testing where we assessed 12 target users has the ability to complete several tasks from the user flows. We evaluated based on the metrics of effectiveness, efficiency, and satisfaction.
