White labeling: Case study
PROBLEM
Wambi was a platform that used public recognition as a tool to help inspire healthcare workers and prevent burnout within the healthcare industry. It was essentially a social media tool that was bought by organizations who then distributed access to their employees. These clients would also give their patients limited access to Wambi, through our patient-facing portal, where they could give immediate feedback on their experience with their providers, and write sentimental statements regarding their impact.
One of our clients, Indiana University Health (IU), told us that their workers and patients were having issues with understanding Wambi, as it didn’t use IU’s brand colors, and felt like a separate product altogether. Because of this, IU asked our Product Team to find ways to better associate Wambi as a product being provided by IU.
Indiana University’s brand colors.
Objective
We had to meet a short deadline of applying a lot of red in a product that was primarily purple, without it looking like a big red error, and also keep the integrity of our brand. We were a small company, so snuffing out our primary color was a big cause for concern on the side of the marketing team.
Our platform featured a primarily monotone color scheme, and with Indiana’s colors being a dark red, it was not a possibility for everything to be a 1:1 transfer. We had to be very specific and thoughtful, otherwise our users would spend their time on our product literally seeing red.
Solution
My team and I started this process by identifying the color assignments that existed on the design side, and how they reflected on the developer’s library. This was important, because we wanted to reduce the amount of changes and descrepencies between what currently existed, as it would add a ton more time on the developers’ side overwriting existing code and assigned properties.
On the right is a screenshot of the color library that the development team referenced.
The code was tied to multiple parts spread throughout the multiple products that we built, including the primary product (seen below) and the patient portal, which was an external limited portal that patients would access to give input on their experience.
The mapping of Group Profile pages, both on desktop and mobile views,
We had to consider every feature within the platform. The image above shows what we referred to as “Group Profiles,” which were very inspired by Facebook group pages. Facebook was a platform our users were familiar with, and knowing the limited amount of time they have to allot to this product, familiarity was key for impactful usage.
Group Profiles housed group members and were heavily correlated with the location and teams that users were a part of. It also determined what appeared on a users’ newsfeed when they logged in or navigated to the home page.
This is the home page. This housed the newsfeed (center panel), sending a Wambi (basically writing a post, right panel). challenges (interacting with the platform, right panel), navigating to different groups (left panel), and celebrations within the organization. It also housed our search bar, menu, and notifications modals.
A big issue we ran into was that most of our product featured cool-tones throughout the entire experience, down to the shadows. This clashed heavily with the reds that were introduced by IU’s color palette. This awoke us to the fact that we desperately needed to neutralize our product’s color palette, so that when a client requested a whitelabel package, we wouldn’t need to go to this extent to create that for them. Scalability, folks!
Here you can see the issue with color clashing (particularly with the blurple shadows).
Another issue we ran into was the application of color. Even when we scaled back on the cool toned colors and shadow application, the pinky-red that was provided by IU’s marketing team was way too flashy, and hard to look at in the context of an interface. “Send a Wambi” either looked like a cup of barbecue sauce, or a nuclear bomb button.
Eventually we came across something that had us come back to the drawing board with our beloved clients. I did some exploring, and found out that IU’s color palette used on its website wasn’t as strict as the color palette marketing had shared with us.
The IUHealth website featured blues, purples, and oranges, and while the crimson that was shared with us was always present, it was clearly not the only color we could use with this whitelabel project. Woohoo!
After inquiring with the IU marketing team, they sent over the color palette that their developers used. So we jumped right into testing the new color swatches!
This iteration was the closest design with what we went forward with, minus the blue challenge circles.
The new colors ended up being a bigger long term issue, as it required double work from the developers’ end, and weren’t all the most flattering for IU’s logo and primary brand colors. I mainly focused on using neutral application, and bringing in darker variations of the primary color that was approved by their marketing team. This resulted in a design that wasn’t exactly 1:1 with what the developers had, but it helped us address some underlying issues within our color scheme and design library, and added a lot more opportunity for scalability once future clients (especially universities) will ask for this custom experience.
Final Results (Home PAGE)
As you can see, our company logo changed from blurple to black, as at one point, our client requested we remove our logo, as it was too distracting and clashed with their color scheme. We settled on reverting it to our black logo, which they were happy with. Yay, brand integrity!
These were the final colors that were utilized in our design and approved by our developers, internal marketing team, and clients.