De-mystifying financial wellness across multiple audiences
PayFlex had a site that hadn't been considered holistically in 15 years. Not only was it dated feeling, but the copy and tools were aimed at one user (not defined). They suspected that multiple types of users accessed their site but didn't have the data or tools to analyze who that was or what exactly their users were hoping to find. Since they were selling a fairly complicated set of plans they had created a variety of ways to present the information (including white papers, talks, videos, out of date power points) - they just kept posting it all. When you accessed the site the POV was unclear and the information was excessive and unclear.
The public facing fully responsive website of today is a culmination of 8 months of UX design work. The process started with asking questions - lots of questions to both PayFlex (the client) but more importantly to their users. Or who we thought might be their users? What were the users hoping to find? What was their path? Through interviews, persona work and more testing we got a lot closer. Then came the deconstruction of all that data & intel. Was it too much was it not enough, was it out of date (yes)? And we had to solve for different audiences. By self selection, we were able to customize the users experience (all the while allowing them to view other audiences). We created a site map that everyone bought in to and from there started breaking down pages in to wires. We paused to test the wires with their users and made adjustments. Simultaneously we got to work on bringing their look n feel to a more modern and sophisticated look that gave them flexibility as they bring on new product lines.
Lead UX designer (Collaborator, Creative Direction, UI designer, Researcher)
Taking the time to get to know every one of the PayFlex's users was immensely helpful. Each one had their own unique needs and desires for what the expected on the site.
SITE MAP / WIRE FRAMES
Creating a site map was essential in getting to the big picture of paths each user might take and helped to clearly define what pages were needed. Those pages were then defined by wire frames all the while getting by-in by the client and all the product managers representing each product line, their sales team, their marketing team (PayFlex).
The user is always right. Even though we had multiple audiences, they all thought of themselves as individuals (which I suppose, they are!) as seen in this heat map test below. Modifications were made to the design among other findings and good thing - it was only the wire stage. A great time to make changes.
We presented three design concepts to bring PayFlex in to the 21st century ;) After much deliberation they were willing to be bold just not that bold.
The final site that's live today works to solve all the issues that PayFlex came to us with. The audiences are clear, the information is clear, the tools are easy to use and there's a great balance between education without overload. The site was built using AEM components. We created a style guide that PayFlex can use moving forward so as their product lines grow, the site will still meet their needs.
PayFlex style guide