THE PROBLEM
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.
STYLE GUIDE
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.
What next?
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.
THE SOLUTION
YES, the updated design allowed for two templates, and the content was received well by users.
Decent's Broker/Partner Templates
RESEARCH
Study of previous usability studies & user feedback
Competitor Analysis
DEFINE
User Persona
Goals
IDEATE
Design needs
Proposed features
Sketches
Userflows
PROTOTYPE
Mid-fidelity
High-fidelity
Interactive
VALIDATE
User Testing
Team Input
Stakeholder Feedback
REFINE
Data Analysis
Document Findings
Apply changes
PROCESS
RESEARCH
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.
DEFINE
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
IDEATE
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.
PROTOTYPE
High-Fidelity Screens
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.
Style Guide
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.
FINDINGS
-
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.
REFLECTION
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:
-
Broker/Partner logo
-
'Enter Zip Code' section
-
Major health brands listed in our network
-
Provider directory link
-
Details about the plans
-
Contact CTAs
Added feature for Partner template:
-
Partner discount section
EARLY DESIGN CONCEPTS
VALIDATE
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
REFINE
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.
COPY ADJUSTMENTS
-
Made contact Broker/Partner more prominent
-
Gave more detail about the1% discount
-
Included language on how we’re competitive
DESIGN ADJUSTMENTS
-
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
VALIDATE REFINEMENTS
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.
FINDINGS
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
REDLINES
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.
COMPETITOR ANALYSIS
FINDINGS
-
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?
CONTEXT
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.
MY ROLE
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.
TEAM
UX Designer (Me!)
Design Lead
Product Lead
UX Researcher
Engineering Team
DURATION
8 weeks
TOOLS
Sketch
Zeplin
InVision