Case Study - Health Profilers
These profilers were re-designed to be mobile-friendly. The bulk of the design happened in 2017-18. Here is the full case study for the project from start to finish.
UX Designer + Product Architect
Corey Maul, Product Manager + CTO
Cindy Campbell-Lashley, Information Architect + Product Architect
Megan Kelly, Information Architect + Copywriter
Analytics in 2016 showed users visiting with mobile devices 4:1 over desktops
With a mobile increase +332% in 2016 (over 2015) it was time to deliver a product with the mobile market at the forefront of design thinking.
I began by working with the team to define a Profiler users’ journey and all of the users touch points. From there I designed several prototypes in iterations, improving and revisiting the process as needed with each round of prototyping.
In order to best understand our users’ needs, I conducted inquiries with users based on their location, demographics, goals, and objectives. I wanted to understand where the current product could be re-imagined while identifying new opportunities in a mobile medium. In gathering this information, I was able to use design thinking to conceptualize a re-design of our Profilers that would positively suit users, of all levels of heath awareness, in a way that meets them where they are.
From here, I started to identify our new UI and created testable wireframes to verify the concepts we wanted to capture in the final app. As ideas started to stick, I converted Lo-Fi partial prototypes into Hi-Fi clickable prototypes. Working as a team we then tested, reviewed, and validated our prototypes until the applications were exceeding our users’ expectations.
This process involved rounds of client interviews, research with UX leaders, weekly group evaluations, and user test groups all working toward a hard-earned symbiosis between Information Architecture and Design.
We thank our users and partners greatly for their participation and for playing the most valuable role in our design journey.
The following case study outlines the complete mobile-first redesign of Medicom Health Profilers that I carried out for the bulk of 2017-’18.
Medicom Health Profilers are health and wellness software applications that identify at-risk populations through a series of evidence-based questions. Users receive a detailed report with a breakdown of their risk results, which they can share with health care providers. Profilers also give health care organizations a cost-effective way to identify at-risk consumers, connect them to service providers, enhance patient outcomes, and expand community outreach.
These Health Profilers are for anyone using an internet-connected device. Users can gain a deeper understanding of their current health status, or learn potential risks for any of the following 18 conditions:
Peripheral Artery Disease
Breast Cancer Risk
Prostate Cancer Risk
Colorectal Cancer Risk
Asthma Symptoms (Adults)
Asthma Symptoms (Children)
Weight-Loss Surgery Candidacy
Knee & Hip (Joint) functionality
Back & Neck functionality
Sleep Apnea Risk
Empathize And Define: Mobile
What we learned from our users about the existing mobile experience
Empathize And Define: Early Notes
Below: early thoughts driven by what we learned from our users about the existing mobile experience
Empathize And Define: Personas
What was learned from our users about the existing mobile experience
Our personas show how older generations are more likely to take interest in health education and have greater loyalty to their health care providers. We also initially assumed they were more likely to use desktop; however, our analytics showed that mobile is the primary screen for ALL age groups and desktop users exist in all age groups as well.
Our personas also exposed potential differences in user behavior based on device preference, age, gender, location, and relationship with healthcare. Because Profilers are available nationally to anyone with an internet-connected device, they are often used for community education, health care marketing, social media, and as online assessment tools for health care providers. Knowing this, we wanted to make sure we improved user satisfaction across every medium and for every purpose.
Ideate: Early Sketches
Early on, I knew we had to build a big mobile-friendly form with a risk result calculated at the end
Ideate: Early Wireframes
Our earliest wireframes utilized a design system of material design-style cards. These cards were developed as modules that flow down the page as the user scrolls.
Prototype: Early Iterations
I rapidly designed about a half-dozen partial prototypes to explore the questions as modules in a feed. This was an essential part of how I built our wireframes and went beyond the post-it notes for our early user research. I rendered our ideas into visuals so we could literally be on the same page for our team conversations.
Empathize And Define: “The Devil is in the Dropdowns”
On our sixth iteration, we realized one of our most important insights
We discovered that we needed to do much more than add a new skin to the old UI for mobile. Previous mobile products resized designs for a mouse and physical keyboard. This caused an excessive, unintended consequences for mobile users. Mobile users need a tactile, touch-friendly form, and we needed to minimize the appearances of the keyboards and scroll wheels in mobile OS.
Ideate And Prototype: Replacing Dropdowns
Replacing dropdowns with touch-friendly patterns
Prototype And Validate
I corrected our prototypes to eliminate dropdowns whenever possible
Making this change also prompted the need to eliminate the cards from the UI. I opted instead to promote the touch-friendly areas with contrast as the visually elevated target. Later, I added a light gray base behind the touchable UI to bring out the contrast of the tactile areas.
Prototype: Later Iterations
By now, our prototypes were starting to expose our solutions and bring them into focus. However it still took several iterations of Axure prototyping and user testing to work out all of the finer points until each interaction, UI elements, client requirements and content requirements reached an optimal usability balance, for all use cases.
Prototype And Validate: Splash Screens
I wanted splash screens to be atmospheric and mobile-friendly but not overly complicated for our clients to customize
After a few iterations I landed on an improved mobile design for splash screens. This new design helps health care clients customize their splash screens without needing a lot of design experience and it’s also exciting to see when health care clients take it to the next level of personalization.
Ideate: Final LoFi Wireframes
Ideate: Hifi Wireframes
When all was said and done, we had created and tested 40+ unique prototypes in the early design phase. Each round brought new challenges and insights which evolved the design toward the product we have today.
Our research highlighted several key areas of improvement that would please not only our clients, but the users they serve as well. Conversion to v3 began in November 2016 and continues to this day.
Key areas of improvement
• mobile-optimized and responsive designs
• clear, understandable content free of clinical jargon
• ADA-compliant views
• instant, personalized advice about current health concerns
• more customization on the client side
• an application that was more fun to use!
Team/roles & responsibilities
• Corey Maul, Product Manager + CTO
• Dave Koehler, Product Architect, UX + UI Designer
• Megan Kelly, Information Architect + Product Architect + Copywriter
• Cindy Campbell-Lashley, Information Architect + Product Architect
• Karlie Drinen, UX + UI Design Intern
Mobile-optimized splash screen and form views
Upon completing a Profiler, users receive a large, clear risk level and are emailed a comprehensive report
Features: Splash Screens
I wanted to give our health care clients more control than ever over their patient experience, so I designed customizable splash screens to be the “face” of every Profiler. With these, clients can customize their UX color, images, logo, header text, headline, disclaimer link, button text, and more.
We knew we wanted to make our products as accessible as possible. Following guidelines set forth by the Americans with Disabilities Act (ADA), I created an accessible version of our Health Profilers, which our clients can opt-in or opt-out of using at their discretion.
Features: Inline Feedback
One thing I found that would increase users’ pleasure was to include supportive and congratulatory messages throughout the Profiler experience.
These messages appear sporadically in the UI below the questions. This gives users an extra boost when filling out a long form.
These “delighter” messages help humanize the Profilers, remove some of the medical/clinical formality, and encourage users to complete the Profiler to get their results.
Clients can customize their in-line feedback color.
Validate: More Info
When we had to make a call on certain UI elements, we turned to A/B testing. In some cases there was no clear winner, so we implemented both options into the final design. One example of this is the “More Info” window. The More Info window acts as a modal on desktop, and acts as a sheet on both mobile and tablet. The window is summoned via the more info question mark icon or the underlined text link, which is related to the content in the More Info window. When users are done, the modal can be closed with a traditional but enlarged “X” or the “Close and Continue” link.
Tablet And Desktop
Though our user journeys and analytics brought us to a mobile mindset, we also wanted to improve the experience for our many desktop and tablet users. I designed our Profilers to be responsive at tablet and desktop breakpoints, but also created a Lightbox view specifically for the desktop version. The Lightbox view positions questions side-by-side in the UI. It also features a prominent progress bar.
Many hospitals and clinics still love to implement their Profilers using Lightbox on their website. To make the experience even better, we added a few special features in the Lightbox view for users visiting hospital sites on a larger screen. One such feature is the HTML sidebar that clients can customize as they desire.
Features: Desktop Progress Bars
Another special feature we added for desktop-lightbox implementations is the option for a large, prominent progress bar. We gave our hospital clients the power to select from 4 different versions, with the goal of boosting user satisfaction on desktop.
Our v3 Health Profilers surpassed our expectations by providing mobile-first design, less clinical jargon, more custom content areas for clients, and a more enjoyable application to use overall.
By updating the design and efficiency of our Profilers, users were more likely to complete Profilers and get connected with an appropriate health care provider.
• interactions optimized for touch
-thumb-friendly control surfaces
• less text, but larger text
• more white space
• tactile and flattened design
• faster load times
• simplified results
• fewer clinical questions
• less clinical language
• friendlier tone
• streamlined disclaimer options
• inline feedback/reward
• optional gamified progress indicators
• animated page transitions
More custom content areas
• splash screen
• optional custom sidebars
Average user completion rate increased from 27% to 50%. Contact information was provided by 50% of users, compared to 30% in v2. The average time it took users to complete a Profiler dropped from 6 minutes and 22 seconds in v2, to 2 minutes and 49 seconds in v3.
Provided Contact Info
Our health care clients are in control of how they use our Health Profilers. They can customize their Profilers as much or as little as they choose. Because clients use our assessments for a variety of reasons, we’ve made it easier for them to collect data and reach potential patients in the ways that are best for their business goals.
Our goal with user-facing elements is to inspire confidence and security when potential patients use our Profilers. We want to inform users of their health risks, while empowering them to take action to protect their health in the future. The best way for them to do so is to schedule an appointment with their health care provider to discuss a lifestyle or medical care plan.
While we don’t want users to feel intimidated, shamed, or defective based on their new knowledge, we do aim to motivate them to see a doctor or attend to lifestyle risks that can influence their health trajectory.
When our health care clients came to us looking for a better understanding of how to reach users who have completed a Profiler, we created a follow-up strategy guide for every v3 Profiler. This helps our clients make the most of the opportunity to reach the users who need them most.
Because risk results are based on genetics, demographics, and lifestyle factors, our Profilers have the potential to enrich lives by improving health, expanding longevity, and hopefully even saving some lives along the way. We could not be prouder that we rolled up our sleeves to get more Profilers infront of more users than ever.
Our v3 Health Profilers showcase an incredible amount of improvement upon our v2 product line. Our health care clients have enjoyed higher completion rates, optimized layouts for touch and mobile, ADA-compliant versions, improvements to the client portal, better data for CRM, and more customization options. Working on v3 also shed light on additional areas in our team’s workflow that required innovation, such as partial-protoyping, documentation in the prototypes, improved organization of Information Architecture and freer communication around technology and processes.