Humana CRM

UX Design 
Project Type
UX Design 

The existing CRM service platform at Humana was based on a classic design, which posed challenges in terms of outdated UI, lack of consistency, and limited scalability that all led to a clunky user experience. The transition to the Salesforce Lightning version required a complete overhaul of the platform's design, including disconnected design changes brought to me by product owners. The design challenge was to ensure a smooth migration while maintaining design standards, addressing user needs and constraints, and satisfying business requirements.

‍

View the full project Case Study
Project Year
2023

My Role

As one of only two designers working across four project teams, I was responsible for a significant portion of the design work. I led the design efforts, collaborating closely with product owners, product managers, and developers. I not only executed design changes but also provided vital strategic input, argued for best practices, and ensured consistency in the design system being used. I also contributed to the company's design library, making the design system more robust by adding new components, thereby allowing future designers to work more efficiently.

I then created design solutions that not only adhered to Salesforce Lightning Design Standards but also incorporated Humana's internal UI standards, ensuring a cohesive and consistent user experience to meet both user and business needs. I also actively participated in discussions with product owners and product managers, advocating for best practices in UX design and providing constructive feedback on proposed changes. It is important to note that although very little user testing was feasible in this phase (the team was more focused on migration rather than feature enhancement at the time) I leveraged my expertise in UX Design principles and considered user needs and constraints in every decision made. Throughout the process, I worked closely with product owners and product managers using wireframes and prototypes to iterate on design solutions and gathered feedback from stakeholders to refine the designs further.


Screens Visualized

To illustrate my work I have included screenshots  of screens below that showcase the design changes I made, with annotated explanations highlighting improvements made to user flow and navigation of the CRM Service Platform.
For this design task, I was required to prototype the user flow of how a Humana Internal Agent would go about adding a new form of payment for a plan member. In order to create this prototype that effectively communicated the s process the Humana Agent would go through I had to work closely with my product owners to understand the user flow and then leverage my ability in Figma to prototype the flow.


Procedure Code Search

                                                                                                                                                              Procedure Code Search Screen (in Classic CRM Service)
                                                                                                      Procedure Code Search Screen as seen in the Lightning version of the CRM Platform
Making sure that the procedure code screen is up to UI SD Lightning standards. Created a completely novel screen to use in the Lightning CRM Service that improves upon the old procedure screen design by optimizing the users ability to use any required filters and search through and find the necessary items through a procedure code search. The old classic UI Procedure search (which can be seen in the first image) failed to take into account the users accessibility and navigability. The procedure code screen designed by me here allows the user far more affordability and for this reason is the current design in use in the CRM Service.
Interaction Panel
Creating this particular screen was an interesting task because it required visualizing an entirely new feature that simply did not exist in the classic version of the CRM Service Platform. A panel was required to be created such that Humana agents can manage and log interactions with callers while on the call with them. Specifications for this design ask were that the panel should not be blocking out important details on the rest of the screen and additionally should be easily accessible from a visual stand point when minimized and still allow the user to communicate certain important information. In order to gain a deeper understanding of the design specifications I ran through the user flow an agent would go through with my P.O’s in the event of a call and then design the panels accordingly. I produced  several different designs that took into account the specifications highlighted to me while still optimizing the real estate being used on the screen. After presenting the screens of the panel designs to my Product Owners they decided to have the lower set of designs developed for the current version of the platform as it optimized space without blocking out important information on the screen thereby offering an elegant solution to the problem.
Process History
                                                                            The highlighted section shows the screens I created
For this feature, the design ask required a Process History Panel to be created wherein the user can see all of the procedure changes being made to a specific members policy. The design required that a clear process timeline be visualized for the user to see all of the changes and for an alert icon to be created that would effectively communicate that there is an alert that needs to be addressed by the user. After speaking with the stakeholders to understand what the design problem was I was able to visualize a panel in the screen that clearly displayed a timeline of chronological changes and in addition to this I created several different alert types in order to see which would be most effective for the user and grab their attention.
Secure Payment Screen
For this design ask a way for the Humana Agent to be able to pay for their members billing items within a table containing their billing information had to be created. Users had to be able to click on the button in question which would then trigger a popup from which they could then pay for the billing items. Initially business had deemed it appropriate to use radio buttons to trigger this. I, however advocated for a more user-centered solution that made far more sense for a better and more comprehensive user experience which was to use some kind of button. As a result this is what I proposed to the pertinent stakeholders. However I needed to consult the Humana UI Standards as well as the Salesforce Standards before presenting this to all the relevant parties. Upon further study I arrived at using a linked Text within the table that met both the Humana and Salesforces standards which business was happy to accept. In this way I was able to ensure I was remaining consistent with both Humana and Salesforce Lightning Design Standards while enhancing the user experience.
Results
‍
The design changes implemented in the CRM Service Platform have had a significant impact on the usability and efficiency of the application. The improved user flow and navigation made it easier for internal Humana agents to  navigate the internal application and ultimately provide better customer service. The changes have also contributed to a more robust design system for future designers working on the platform, guaranteeing consistency. My efforts in arguing for best practices and organizing design files were well-received by stakeholders and contributions in enhancing the overall UX maturity within the company were also significant. The iterative design approach, wireframes, and prototypes used in the process helped in visually showcasing the design changes made, ensuring scalability of the platform.

The Design Problem

29-36 year olds are very active users of media streaming apps (ex: Spotify, Netflix, Hulu, etc.). However, their work-schedules limit the time they can  spend searching for new content. Our teams goal was to improve how content is found and filtered to help these users reach an informed decision quicker, providing them with more time to relax and unwind. Though there are more than plenty of movie and video streaming apps available on the market such as YouTube and Spotify. Most of the apps are lacking in some way or the other in that they do not provide an intuitive way of curating and personalizing the viewing experience of their users.

User Insights: Online Research

The team and I first set about doing some research online, into popular streaming apps in order to gain a basic understanding of the problems that users are facing when using streaming apps.  We started by looking into forums  and websites that showed us important user information and pain points. From our online research we found that :
- Millennials are more likely than older age groups to have watched a video online in the previous 24 hours and visit social media sites several times a day.
- Study highlights that Millennials prefer new tech because it helps them use time more effectively
- Spotify Usage Data shows that 29% users are males 25-34, and that over half of the users are male.
This information demonstrates to us that these users are habitual and very active

User Insights: User Stories

Reddit Forum
A major pain point for millennials is that they are presented with inaccurate recommendations on their feeds that are not relevant to the content that they engage with
Spofity Forum
A major pain point for millennials is that they are presented with inaccurate recommendations on their feeds that are not relevant to the content that they engage with
Hulu Community Forums
-Users express issues with being able to navigate the Hulu UI (not being able to locate the content that they want to watch)

User Insights: User Stories

- Millennials are more likely than older age groups to have watched a video online in the previous 24 hours and visit social media sites several times a day.
- Study highlights that Millennials prefer new tech because it helps them use time more effectively
- Spotify Usage Data shows that 29% users are males 25-34, and that over half of the users are male.
At this point our team began to create two unique user personas that most appropriately captured , the target market as well as the issues that they are encountering with streaming apps.

User Stories Personas

User Personas
We categorized our We categorized our user personas into the users core Needs and Frustrations

Storyboarding - User Journeys

Having identified the different types of users that would be using streaming apps (as well as their pain points) our team then began to shape our user story. We took into account the issues outlined from our insights and attempted to figure out how we would fix them (outlined in our storyboards).
Story Board #1
Story Board #2

Storyboard Insights

After having drawn up what we want our user journeys to ideally look like, we then began to interview potential users that fit the demographic that we are targeting. We asked them how each of the user journeys that we sketched made them feel and their reactions to how we were going about solving the pain points.

Storyboard #1

Storyboard #2

Insights

“ The ‘For you’ options are helpful like from what you're telling about hulu this sounds good, I like having the options like here's what  hulu recommends for you and what we generally have. I feel I can relate to this one, a little more, the idea of like oh my lunch break, let me just see what I can do for after work. And feeling like I don't want to have to go through things  that might not necessarily be my style I do appreciate that I like that, before your concept to me, makes a lot of sense, especially if you're trying to do this on a time crunch like do this quick because you know, even if it's after work you don't have all the time in the world, do you want to go home and relax and start relaxing as soon as you can” - JuanPablo, 30
‘‘I really like the option of having the ability to search through my saved videos. I would even go a step further and also being able to search through the videos by tags, or having an additional option to sort through the videos by date.”     -Larry Arriaza (Undergraduate), 29

Summary

Our interviewee Juan Pablo, found that the situation we presented in our storyboard was relatable and that he could put himself in the shoes of the main character. He found the “For You” tab to be helpful so that you are able to switch different types of levels of personalized content. Having all of it located in one place can feel overwhelming, but dividing general content and personalized content may help users organize their choices and inform their decision quicker.
Our interviewee Larry Arriaza , found the ability to be able to search through curate content was very useful. Allowing the user to have more accessibility and control over their curated content will allow them to have a more seamless and immersive experience when using the application.

Wireframing

After having identified potential solutions as well as mapping a user journey I then set about creating some low-fidelity sketches. I focused mostly on how to make curated content more accessible to the user as well trying to personalize the entire experience by adding a shuffle button that would randomize any of the content available on the app and play it for the user when they are having trouble deciding on what content to watch or when they feel that the content being presented to them is not to their taste. In addition to this in my low-fidelity sketches I included the ability to search through ones playlists in an attempt to give users more control over their curated content. I also included different ways for users to search through their playlists such as being able to use tags.
One of my main goals while drawing out my low-fidelity sketches was to have an idea of what the home page should look like as well as how users should navigate from the homepages to different tabs

Moodboard

Our team created a Moodboard in order for us to gain some inspiration for the later stages in our design process. Our Moodboard gave us a clear understanding of the feeling we wished to evoke in our users and helped formalize the aesthetic we needed to use to do so. The Moodboard also helped us stay consistent in our designs throughout the project .

Style guide

Based on our moodboard our team arrived at the style guide below.  Our team was keen on the aesthetic provided that came from using a cool color pallete that used light purples and violets.
We arrived at a color scheme that would use cool colors such as those that included light shades of purple and blue that would contrast well with a dark background.

Developing the High Fidelity Prototype

After concretizing a style guide, moodboard and come up with some wireframes. My team and I began to create some high-fidelity sketched of what we wanted the interface of our app to look like.
Here I visualize how the home page will look as well how the app will curate content for the users taste by creating a survey option built into the app
Here I visualize how the home page will look as well how the app will curate content for the users taste by creating a survey option built into the app

The Final High Fidelity Prototype

The Home Page
Searching by Tags
Taste Curation
Content generated by a Curation Quiz that gauges users’ interests. Users are able to refine their curation again if they do not like their picks and can even be taken to randomized content through our Randomizer.
Randomizer
Playlist Creation
The Playlist Creation Feauture allows users to refine their selection in their saved content list. Gives the option to save content into playlists so users can further personalize their viewing experience and have content saved in advance for specific occasions
Saved Content Filter
This feature allows users to be able to search within their saved content (TV shows, etc.) by tagging the genre they are searching for.

Competitive Analysis

How do we stack up against our competitors?

Usability Testing and User Comments

After having created our high fidelity prototype we then began to test our prototype with users who matched the target demographic that the app was being designed for.
During our user testing we interviewed three participants who fell within our target user scope and had them walk through a few of the unique core features within our app. Testing began with our ‘For You tab’ feature.

Feature #1

For You Tab
I like the level of personalization the for you tab provides however I feel like the taste curator should be integrated with it”  - Lorenzo Arriaza , 32

3/3 of our interviewees found the ‘For You’ tab to be both convenient and time saving and agreed that -having something more personalized would help make the selection process easier.

Feature #2

Content Filter
“It's kind of nice that I’m not scrolling  through a thousand items I don’t even need to look at, so it’s a time saver” - Guillermo Mata, 36

INSIGHTS:
Our usability testing revealed to us that:-our users really like this feature and believe that  it would help filter and access niche interests they may have-3/3 of the interviewees agreed that this was definitely a feature they believed was necessary to incorporate within streaming apps

Feature #3

Saved Content Filter
“I think it’s convenient especially since my queue on different streaming sites is pretty large and I’d like to be able to filter it when I have time to go back and see what I’ve saved” - Jose Vasquez
Our last feature that was tested by our users was our saved content filter/playlist.
Two of our interviewees remarked that this feature was:
-Unique concept
-Can help save time when wanting to binge certain genres/titles

Improvements Made

Based off our user testing there were a couple insights about our playlist feature and randomizer button that led our team to make a few size and location changes. For our playlist feature we decompressed the overall look and increased the font size to help users locate it as well as resizing & relocating our randomizer button to the top of the ‘For You tab’ for clearer accessibility.
Improvement #1
Improvement #2

Further Improvements to Consider

These are some potential additional features that we would include:

Autoplay option
More advanced filter options, like an attention gauge, content, and length
These are some potential additional features that we would include:

A nugget of insight that we gleaned from one of our teams interviews was the fact that many  users oftentimes use their streaming apps just as background noise for when their energy is directed towards a task that requires a high cognitive load. As a result of how commonly this was said among the users, our team believed that one of the filters that should be included for both saved content (content specifically saved for the user) as well as within their own curated playlists was an attention gauge. Increasing the attention gauge will yield results specifically from genre that has been tagged. For example, if the user wants to view something where they can afford to pay attention , they can interact with the meter, dragging it towards the right. Searching with this tag will then result in action movies that require a high amount of attention.

Real Life Applications

Around the same time we were developing our interface for MeTime, Spotify released an update that allowed for users to search through their playlists by mood. Essentially allowing their users to tag whatever genre they are feeling and add it to their ‘Find in playlist’ search bar. This would then yield results for that specific genre from the playlist they are searching through . This is very similar to our ‘search by tag’ filters for our ‘Saved Content’ tab, which allows our users to search through their curated content by genre. More on this feature can be found here:   https://newsroom.spotify.com/2021-02-25/how-to-sort-your-favorite-songs-with-spotifys-new-genre-and-mood-filters/

The Design Problem

For this project I worked on creating a new homepage for UCSD’s HAO LAB. The lab integrates biology, engineering and computer science, in their studies. The Lab is doing riveting work in cutting-edge exciting fields such as anti-aging, stressing and narrowing down the pathology of diseases. For a lab that is doing such novel work, it only follows that their homepage should reflect this. In this light, the Principal Investigator of the lab and his development team reached out to me, requesting me to help redefine the overall look of the website and as a result elevate the branding of the LAB as well as help inform visitors to the website.

Homepage

Devoid of much life and character as it stands
The P.I Nan Hao, communicated to me that he wanted the landing page to truly capture the futuristic nature of the work being done at the lab. As a result in my conversation with the client he requested that I create a 3-D interactive environment that would look visually appealing and at the same time engage the visitors of the web page in such a way that would compel them to explore the work being done by the lab. With this in mind I began to ideate and come up with different environments which captures the essence of what it feels like to be in a LAB environment and leaves the visitor with an almost child-like feeling of awe and wonder making them want to explore the rest of the work that is being done in the lab, on the website.

DNA Helix Strands

My first idea was to experiment with the DNA Helix strands and to create a 3D animation that would capture the attention of the visitors of the web page. For the purpose of the seamless integration into a website, I chose to use an online 3-D software called Spline.
After having created the strands I then took this model of the DNA Helix Strands to my client in order to get some feedback about the design.The P.I Nan Hao had some insightful feedback about the Helix Strands. The feedback has been summarized in the notes below:    


 'I like the way that the light that goes along the DNA strands. I don’t particularly like the colors of the Helix and I would like the helix to be more clearly illuminated. I would like the rotation of the animation to be looped, and not mirrored. It would be nice if the strands had an almost holographic glow effect so that they stood out more.'

Improved Helix Design and Animation:

After having taken the feedback from my client into consideration, I then began to iterate upon this DNA Strand. I started off by changing the textures of the helix strands so that they appeared to be more luminous and glowing so that an ethereal effect was achieved. I also changed the animation so that the strands did a continuous 360 rotation rather than a 180 which was then mirrored and reversed.

The final design can be seen below:

The Science LAB:

After having finalized the DNA strand design and animation, my client informed me that in addition to the Helix Strands he wanted there to be an interactive environment in the homepage that conveyed the feeling of being in a LAB.  With this in mind I set about creating an open science lab which visitors of the web page could explore and feel as though they were truly looking and interacting at all of the different aspects of a science lab. I started off by iterating and creating the skeleton for the model of the science lab, modeling just the walls and floor of the lab.
Having created a base model, I then began to add different lighting as well as colors to make the room feel as though it was a science lab. I lightened and extended the size of the walls and added a work bench and floor tiling to give the room a more clean and clinical feeling:

HAO Lab 2nd Iteration

fter having a better idea of what the room should feel and look like, I began to add more specific objects to the room that are characteristic of a science lab. In order to create a an accurate model of a science lab , I visited the HAO Lab in order to gain a better understanding of how the lab should look and the necessary features of the lab that go into making it a science lab. For example, I decided to model and add test-tubes, a microscope, a whiteboard as well as books and a shelf. This can be seen here:

HAO Lab 3rd Iteration

After having finished the 2nd iteration I showed the design to the P.I. The P.I suggested design changes to help  communicate to the user what they are seeing. The P.I suggested:

‍
- The logo of the Lab (HAO LAB should be in a location that is more visible to the viewer. I want it to be the first that thing that the visitor on the website sees.
‍
- There are no actual test tubes used in the lab.
- The user needs to be directed to three different pages from the home screen.
- The buttons need to be accessible and should directed the visitor aforementioned pages‍

Taking my client’s feedback gave into into account coupled with having to account for certain constraints of the software; I was forced to change certain models and objects that were too heavy and caused loading issues in the textures when the environment had to be embedded into the website. In place of the different pieces of equipment such as the sink, microscope and test tubes I instead created a model of a Burette and Burette Holder.

In order to keep the viewers attention I also incorporated the Helix and its animation into the scene to keep the viewers attention. I decided to place the HAO Lab Logo and the three buttons (which when clicked will direct the visitor of the website to the pertinent Webpage) together, directly in front of the camera so that the visitor would know exactly where they are and how they can access the web pages concerned with the different work that the lab is doing on their website.

The image of the 3-D environment can be seen below:

FINAL DESIGN

After finalizing the 3D interactive environment of the Lab with my client, I then embedded the 3D Environment onto their website using webflow. This is what the new homepage of the website looks like!. To view the website itself: https://haolab.webflow.io/

Other Projects

AR APP
MeTime
Uflo
Hao Lab Design

Let's Work Together!

If you are interested in working with me, take a minute to fill out this form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.