THE JOURNEY TO A WHITE LABEL APP
Transform the Hospital Visiting Experience
Healthgrades is the leading online resource for comprehensive information about physicians and hospitals. It has amassed information on over 3 million U.S. health care providers and receives millions of site visitors from across the U.S. Aiming to promote its large database of health content, Heathgrades asked us to create a fully customizable app for its partner hospitals. This app would allow the hospitals’ patients to access millions of articles on health conditions. From the start, the million dollar questions for us was: would users download a hospital app?
I was the lead designer for this project, collaborating with one information architect and one researcher. Our team also included a content strategist and a product manager.
I have omitted confidential information in this case study to comply with my non-disclosure agreement. All information reflects my own opinion and does not necessarily indicate the views of the employer.
The Challenge
Apps have been the new software gold rush. Starting in 2010, we’ve seen the markets saturated with all manner of games, commerce, social media and literally everything in between. There is almost an app for everything and everyone.
The honest truth is our users are tired of apps. From a consumer perspective, there are just too many apps. New apps, by in large, are most simply replicate existing experiences with a story of a better design. Even when an app is downloaded and tried out initially, more often, it does not provide nearly enough value for consumers to come back.
The Discovery
The researcher and I decided to first step back and evaluate the market needs. We visited three local hospitals and selected random visitors to interview. They were particularly asked if they would find value in a hospital-specific app that allows them to browse through articles related to their conditions. They were also queried as to how often they would use such an app.
The research confirmed our initial concern on app fatigue. People are less inclined to download a hospital-specific app just for medical content access. And, even when they are willing to download the app, they are not likely to make full use of it.
We realized that the first essential problem to solve was how to elevate the app so it provided enough value to spur user adoption.
The Approach
Using the “Jobs to be Done” framework, we started interviewing more consumers to determine the top items they would look for in a hospital app. Through 60-plus data points, encompassing a wide range of demographics, we identified the following common activities and pain-points for most visitors:
-
ER waiting time is always unknown.
-
Locating where you are and finding where you need to go can be challenging within a hospital.
-
Doctors and condition experts are hard to find and consumers know very little about their performance.
Our hypothesis was that if our app could solve all these issues for people, it was more likely they would not only download this app, but also continue to use it. With users reliant on the app for those purposes, we could also incorporate Healthgrades useful medical content customized to their needs. It became obvious that such a digital attempt could only be successful when it is fully integrated; allowing the patients to experience and solve real problems that they are faced with while visiting local hospitals.
The Navigation Hierarchy
Identifying the problems to be solved was just the first step.
Home screen featuring the ER waiting time (Left), Visitor Info Center (Middle) and My Saves for user to aggregate content for quick access (Right)
While it was clear that consumers would like to know ER waiting times and be able to perform self-service on simple tasks, solving these issues was more easily said than done. If we wanted to satisfy both the consumer’s needs and the client’s goal to promote content, we needed to find a way to to introduce and organize these functions without overwhelming our users. We therefore needed to determine which functions should be emphasized and prioritized.
Among all these considerations we also had to bear in mind that anyone visiting ER is faced not only with incredible anxiety, but also a potentially life-threatening condition. We knew that our app had to give them the info they needed right away without adding another layer of stress. From the start, we decided that ER waiting times and check-in ability should be displayed on the home page prominently. For other non-emergency needs, we divided the app to three other sections:
-
Visitor Information: General hospital and department information, along with maps to guide visitors to their desired location.
-
Right Care: Syndicated with Healthgrades content platform, so users can enjoying volumes of free articles on health condition
-
Doctors: List of all hospital affiliated physicians that users can not only directly contact, but also rate and review other patients’ comments.
We also believed the value of an app is amplified when it’s personalized.
Therefore, in each of the three sections, we provided a “My Saves” feature. In this way users could flag valuable information and have easy access to things that mattered to them. For example, as a consumer continued to use the app, he or she could save her favorite doctors, health articles and mostly visited departments info their “My Saves” area for quick access.
The newly designed charges search interface by default (Top), by simple keywords (Middle) and by using combined search criteria (Bottom)
The Technology
By nature, our app was quite simple and only required small periodic transfers of data. However, an essential part of the experience relied on an acute awareness of the user’s location. Based on these two factors, iBeacon became the ideal option for this app at the time. This tool was cost-effective and had low power consumption due to the underlying technology Bluetooth Low Energy.
iBeacon allows mobile apps to listen for signals from beacons in the physical world and react accordingly. The mobile apps can understand their location on a micro-local scale, and deliver hyper-contextual content to users based on location.
Using an iBeacon network, we were able to understand exactly where a customer was in the hospital environment. This allowed us to send customers highly contextual and meaningful messages on their smartphones. In our design, the partnered hospital would have beacons installed at critical locations, such as main entrance, ER waiting areas, and other treatment-specific zones. When a patient enters the hospital, Beacons that contain packets of data will be “discovered” by the phone and trigger massages . For example, If the system detected a user arriving at the hospital during out-of-normal hours, a message couldbe sent to ask if he or she is looking for the ER, along with real-time waiting times. If confirmed, a form would then be provided to the user for self-check in. In another instance, if a patient was detected at the radiology center, Beacons could send prompts for articles on radiology protection and other frequently asked questions.
Leveraging this technology, we were able to extend our app experience into the physical world and bring about a paradigm shift in the way our app communicated with our users that felt more personal and effortless.
The Visual
Alongside the interactive features of the app, I also explored various visual look-and-feels. The first question that came to mind was whether we should give different hospitals the ability to customize the color palette as a white label app. While I knew that most of our hospital clients would prefer this flexibility, I also knew that it could be dangerous and compromise the overall design esthetic to leave the paintbrush in the hospital’s hand.
After I re-visited the branding of Healthgrades and many of its partnered hospitals, I realized that most of them, in fact, use blue as part of their visual identities. This was advantageous for my plan to find a common color theme to fit the larger group.
After a few draft iterations on this style, in the end, I was able to create a design that embodied the attributes I was seeking: clean, trustworthy and friendly. The app design also employs light and thinly-lined style icons, larger fonts and nice imagery to show its modern side.
Now the design question became, could one solution really work for everyone? What about hospitals whose existing brandings deviated from our pre-set blue theme? While offering customizable palettes may give away some control from the designer’s hands, I decided that offering a secondary, neutral color palette would solve the needs of these hospitals and still maintain the visual intention and consistency.
I started with black and dark grey for the second theme. However, I soon became concerned that this color theme might be an unconscious burden on our user’s mind,considering the circumstances of this app. We wanted our app to not only be helpful, but also be a positive agent in people’s daily life. Seeking to create a sense of warmness, I ended up choosing a beige with a light touch of the shade of yellow..
We can only build a valuable and desirable digital experience if we start with the right problem to solve.
The Takeaways
When we were asked to build an app to promote health content, it was fortunate that we didn’t jump into a solution right away. Instead, we took a step back from the request and asked ourselves: what are the real problems here? How can we make a successful product and solve these problems at the same time? Because we didn’t rush to any prescribed conclusions, we were able to avoid offering the app market another instance of a repetitive and non-value product that adds to consumer fatigue. The lesson here is to always begin each project by identifying the real needs of the users, regardless of what clients or product managers may tell you.