ASO Site Mockup NO CAPTION.png

Team

my role

overview

Technologies

ASO

ASO is a third-party administrator of benefits specializing in multi-employer trust fund plans. 

For this project, I was tasked to redesign the full Administrative Services Only (ASO) website, making it easier for all 5 user types to login and to find the information they are in need of in a less overwhelming manner.

Figma

Bootstrap

Photoshop

Duration

1 Month

Team

Larry Sachs

Frankie Kastenbaum

role

UX/UI Freelancer, focused on redesigning the website to create a more professional feel.

 

01 research

why this redesign was necessary

Since  ASO was already a live website before I joined the team, I asked users to take a look at the site. Here is what they said.

ASO bubble 1.png
ASO bubble 3.png
ASO bubble 2.png

Users wanted a clearer representation of all the services that ASO offers and a less intimidating means of obtaining this information while maintaining a professional feel. 

02 Define

what was solved for

Individuals are currently finding it difficult to obtain needed information on ASO’s website. There is too much information on pages, causing users not to know where to look first.

 

How might we help individuals access their specific portal in an easier, less stressful manner? 

 

03 Design

the redesign through mid-fidelity wireframes

Using the same branded color palette and the feedback from users, I redesigned the website, showcasing the information in a more digestible manner. 

 

I began this process through mid-fidelity wireframes, as a means to test the functionality of the new site. I broke this project down into several screens, starting with the Homepage, and completing sprints for the Find A Dentist flow and Find A Form flow. 

new homepage

Users quickly and easily understood where to log in for their specific portal.

new find a form page

Users were confused by this terminology. They struggled to understand that this page would be located in the dropdown under Support.

new find a dentist page

Users found the optional field misleading as they felt they had already provided that information. They also felt their state was redundante from their zip code.

new find a participating dentist page

Users prefered this to say “My Prefrences” so they knew it was what they had already set. 

 

Users also wanted to be able to reset their preferences without having to start the flow over.

new office portal page

Users found this redundant since it was in the title. 

In summary, after testing the functionality of the site, I found that users wanted more obvious navigation, a simplified form for finding a dentist, and the ability to resubmit their preferences without restarting the flow.  

 

vs.

vs.

solution for user through hi-fidelity mockups

In order to solve for an easier way for users to log into their specific portals and to find their necessary information in a faster manner, I turned to hi-fidelity mockups to implement these changes. 

original homepage

new homepage

homepage comparison.png

The original Homepage. Users felt this login was hidden and that it was unclear as to which portal they were currently on.

The New Homepage. We designed the login portal front and center to alleviate users' pain points of feeling this was not obvious enough currently.  

original find a Form Page

new find a Form page

forms page comparison.png

vs.

The original Form page. Users had no idea where to select their specific plan. They felt completely overwhelmed by a large amount of information.

The New Find A Form page. We designed the page to only contain the dropdown for their plan, removing their confusion of not knowing where to sign in. 

original find A dentist Page

new find a dentist page

find a dentist comparison.png

vs.

The original Find A Dentist page. Since this was located on the same page as the Find A Form, users had the same pain points. 

The New Find A Dentist page. Similar to the Find A Form page, we created a new screen that allowed users to instantly input their information, in a clean and simplified manner.

original find A participating dentist Page

new find a participating dentist page

participating desntist comparison.png

vs.

The original Find A Participating Dentist page. Users were confused by the Dentist cards. They were unsure of what was clickable and what was not. 

The New Find A Participating Dentist page. We created simplified Dentist cards, using color to help create a hierarchy.  

vs.

aso%20mockup%202_edited.png

Dive into the platform

The screens above helped to showcase the design decisions that were made. To help provide a better understanding of the Find a Dentist flow I have created a walk-through video.

Mockup.png

04 reflect

Retrospective

Working on this website redesign taught me to see how Engineers and UX Designers have different, valid opinions as to what is important when building a website. I began this project with the understanding that my role was to recommend a solution that would create a more modernized and simplified website, with the only limitation being the branding colors. However, I quickly discovered that I too had to fulfill the requirements within a Bootstrap template. Although I was a little stifled at first since I had found the template to be quite constraining, I realized I was able to pivot by breaking down the components in the template and using the more modernized ones. Even though at times I felt this compromised the design, along with the fact that I could not test with target users, it made me realize the importance of having myself and the client define UX Design at the beginning of the project, in order to align our definitions and expectations of the role.