Each Broker and Partner that works with Decent receives their very own unique landing page/URL for their clients, but only one design template existed. Decent needs to give all Partners the ability to provide discounts, and leadership expressed a desire to create two new design templates: one for Brokers, and one for Partners. Also, information hierarchy, page layout, and page content needed a scrub.
Anders and I experimented with a few different color pallets, and landed on a mix of purple and blue. We wanted the colors to pop and contain an energy related to being outdoors.
After the redlines and assets were handed off to the development team, the new design went live just weeks later.
So...did it work?
EARLIER PROBLEM STATEMENT
Decent needed to give all Partners the ability to provide discounts, and one template wasn't enough for both Parters and Brokers. Also, information hierarchy, page layout, and page content needed a scrub.
YES, the updated design allowed for two templates, and the content was received well by users.
Decent's Broker/Partner Templates
Study of previous usability studies & user feedback
I worked closely with the UX Researcher and Product Lead to examine previous studies on the broker/partner page. Users wanted more information about the plans, and felt the current design had too much whitespace. These broker/partner landing pages were unique, and only the broker/partner’s client would be able to view them. I did a brief competitor analysis, taking some layout and content hierarchy inspiration from a few insurance broker landing pages.
Using the data we pulled from our current user base and competitor research, I designed three personas that summarize the basic goals and needs of Brokers, Partners, and Shoppers.
Our team aligned on the following goals:
To get a quote and sign up easily
Find major health brands in network
Understand the major benefits of the plans plus discounts
Know who to contact for help
The user flow for this project starts out with the shopper directly landing on the broker/shopper page. From there, they enter their zip code to 'get a quote' and 'sign up' (which was another project all together).
My team and I (Product Lead and Visual Lead) met together to brainstorm features and ideas. We came up with a list that we felt achieved most or all of the 3 personas goals and needs.
After scribbles and sketches on pen and paper, I used the Sketch App to design a mid-fidelity mobile version. I then synced the screen to Zeplin (we used this as a collaboration tool) so my team could leave comments and suggestions. Throughout the many mobile iterations, some team feedback included: amplifying the CTAs by making sure all four are at the top OR bottom of the page, an approach we could take that limits scrolling, and how to optionally include information that is Partner-specific.
For the theme and color of the page, I leveraged the current style guide and made sure to stay consistent with how we've been designing other pages on the site. For some projects, I don't add the color till closer to testing or after testing a black and white prototype; however, this sprint was moving a bit faster, and it made sense to add color to mid-fidelity screens right away.
Mobile tested better than desktop (which is no surprise since we designed mobile first)
Desktop had too much white space and overall participants didn't find it visually pleasing.
How our plans are competitive was lacking and users noticed that plan pricing was missing.
Users didn't understand the benefit of contacting the Broker/Partner service.
"Check out our custom built plans" verbiage made users think they could customize their own plan, which was not the case.
What challenges did I encounter?
My team and I were too set on the mobile version in the beginning, and it was hard translating that design to desktop. Instead of going back to the drawing board, we chose to push the design out for testing anyway. We realized this was a mistake, and I should have spent more time on the design before testing it.
What did I learn?
I learned the importance of responsive design, and creating something that adapts well to all devices (mobile, desktop, and tablet).
What did I try that didn’t work?
Aside from the desktop debacle, I tried multiple ways to frame the contact CTA’s. I had pitched placing it at the bottom, but the Product Lead explained the positive effects of placing all CTA’s near each other (and in our case they were all at the top). It ended up testing well.
What did I accomplish?
The design went live on mobile, tablet, and desktop, and our brokers and partners are dispersing their unique pages/URLs to their clients.
Features for both templates:
'Enter Zip Code' section
Major health brands listed in our network
Provider directory link
Details about the plans
Added feature for Partner template:
Partner discount section
EARLY DESIGN CONCEPTS
The UX Researcher took the InVision prototype I created and tested it on 20 participants via UserTesting.com. Some feedback surprised us, and others we were expecting. I noticed early on the desktop design looked elongated, but with a rush on time, we sent it for testing anyway.
"How did the plans you see today compare to the plan you have now?"
"The plan I have now is more expensive."
"Very similar, with the exception virtual."
"What was the most frustrating aspect of the site you saw today?"
"The plan names seemed vague."
"I was not able to compare plans or sort."
"What would you do to improve the plans you saw today?"
"I would like to be able to filter the rows on the Plan Details page to hide the categories that I don't believe I would use."
"I would want to be able to compare them to make a quicker/easier decision."
"What was the best aspect of the site you saw today?"
"I like the layout of the site. It is easy to understand and navigate. I was not surprised by anything."
"The plan page gives me the impression that the company is transparent and does not try to hide anything about their plans from the customer."
POST - TEST QUESTIONNAIRE COMMON RESPONSES
My team and I met to discuss the feedback, and decided there were many things that needed to change. We went back to the drawing board to edit some copy and reexamine the page hierarchy.
Made contact Broker/Partner more prominent
Gave more detail about the1% discount
Included language on how we’re competitive
Less white space and scrolling on desktop
More visual elements to break up text
Less boxy and less elongated sections
Incorporate 'get a quote CTA' into heading with more info
Made contact section a big deal, more prominent
My approach was different this time. Instead of placing attention on just mobile, I designed a desktop, tablet, and mobile version side by side. That way, I knew early on if an iteration didn't work on all three. After landing on a few versions I liked, I met with my team to narrow it down.
The final versions of the two templates only had one difference:
The Partner template copy near the top says "1% discount..." with discount information below.
The Broker template copy near the top says "Up to 40% cheaper..." with competitive information below.
We went back to Usertesting.com and received the following feedback from another 20 participants.
Mobile and desktop tested equally positive
Users loved seeing the 3 benefits right at the top
Users were curious about the links to learn more
No problems with white space, design received great feedback from testers
My team and I met one last time to read through the feedback in detail, and decided no changes were needed for the time being. My last step was to redline and grab the assets for the engineers.
More information was needed for users to make a decision
Excessive scrolling was a pain, and multiple users claimed there was too much white space.
User didn't know who to contact. Was it Decent, or the Broker / Partner?
Decent is a health insurance startup. The company mission is to offer affordable and comprehensible health insurance to the self-employed in Austin, Texas. Decent works with 80+ Brokers and Partners within Texas, and each Broker and Partner receives their very own unique landing page for their clients (but only one template design exists). Partners wanted to offer their clients discounts, and my mission was to do a content scrub, redesign, and split one template into two.
I worked collaboratively within a cross-functional team, and led the competitor analysis, user persona, ideation, design, prototyping, and refinements. I worked closely with the UX Researcher to gather data on previous usability studies and prepare her to implement usability testing, with the Product Lead and Visual Lead to define design goals and branding, and with the Engineering Team to define project scope, feasibility and restrictions.
UX Designer (Me!)