Selino V
UI Design + Development

Turning Marketing Managers into Rockstars!

How we designed micro-reports for our customers' customers.

Image alt tag

Product

Clariture Health was a digital marketing agency with a custom ads platform built for health care marketing managers. The software allowed a traditionally "non-technical" person, a healthcare marketing manager, tasked with using Facebook & Google ads platform to find the right patients for their facilities.

Problem Definition

  • Hospital and clinic executives need to monitor the pulse of their facilities marketing campaigns without becoming bogged down in the small daily details.

  • Marketing Managers have been struggling for years to balance the demands of their ad campaigns while also making the reports accessible to executive teams with little time or tech skills at their disposal.

Research
Turning Marketing Managers into Rockstars!

Contextual Interviews

As a startup we had an excellent group of first adopters with a vested interest in the product design and functionality. We had previously spent a lot of time working with them in google hangout sessions running tests of the prototypes built in Invision.

Our on hand personas and contextual interviews helped us focus on the specific needs of our users and their points of concern. We isolated the specific problems and determined we needed to solve the following:

  1. Consistent and automated generation of reports

  2. Clear data visualization

  3. Self-contained reports that could also be entered into an existing spreadsheet or database

5
Rockstars
1
Reports
Per Week
100%
Need Excel
Compatibility
Ideation
Hand sketching helped me focus on ideas instead of presentation details.

Hand sketching helped me focus on ideas instead of presentation details.

Sketches

I usually start with a doodling process to get the brain juices flowing.

  • Hand drawn sketch notes prevent me from defaulting to comfortable patterns within digital design tools.

  • This is where our regular communication with our customers comes in handy. They've told us that they want speed of insight over depth of knowledge for this.

  • Here Tori, my lead engineer, and I are bouncing thoughts off each other and keeping our minds open to inspiration.

  • We consider using classic tables, human readable paragraphs, and data visualization approaches.

  • Data visualizations would most likely convey insight in the least amount of time. The brain processes symbols faster than lines of text.

  • Our customers "think in service lines" so we could stack each of their active lines in a vertical column allowing them to scroll as needed.

  • A summary of all their data could be planted at the top. This would give them enough info to decide to investigate an anomaly or close the report without reading further.

  • Sketching with the developer can give them an idea of what data and tools may be needed.

Turning Marketing Managers into Rockstars!

Wireframes

At the beginning of my design process I created wireframes for stake holder buy-in and testing purposes.

  • These are low fidelity and avoid focused examples of sample data. These are Sketch files but I pull back from too much detail. Successful wireframes reveal major flaws but avoid going into the weeds.

  • This is the optimal time for stake holders to sound any alarms.

  • I added a CSV Download button after follow up with users. All of them wanted a visual report to show their managers but desired import into Excel.

Testing Multiple Options

Testing… mostly pass but some fails.

Using Invision and Google Hangouts, I launched a small test using a high fidelity prototypes to identify the strengths and weaknesses of my designs.

Feedback

  • Generally the concept was easy to grasp for testers regardless of their familiarity with the healthcare marketing space.

  • The master graph at the top seemed to confuse people. The complexity of the charts seemed to require them to "figure out" what the data was saying. There was no insight, just cognitive dissonance. 😖

  • The body of the report did well with the simple metric points with clear labeling.

The major takeaway was the fact that users got stuck on the master graph. All three versions pulled them into the weeds of the data in the graph instead of the insight that it was supposed to convey. I needed to simplify it drastically in order for people to get value so we switched to the Donut. These graphs have gained popularity for their super fast cognition rates. They are super easy to read.

Compromises

Usability doesn't always mesh with business needs and compromise is part of life. While the "speak in threes" rule tested well in the service line body sections, we decided that we needed to have more than three metrics in each of the areas. This was a top down decision and I've learned to choose my battles. Having 5-6 metrics in the body was not going to break the feature. Yes, it adds friction but it doesn't stop the show and we can always iterate if performance wanes.

Delivering Designs, Assets, and Code.
A designer that codes is like a painter that reads. The disciplines inform each other and open possibilities that otherwise could be missed.

A designer that codes is like a painter that reads. The disciplines inform each other and open possibilities that otherwise could be missed.

Produce the Assets

After some tweaks the design is finalized I deliver all the assets that Tori would need to create as many of these automated reports as possible. Headers and icons for any service line I could imagine are handed off in an optimized format for an email.

Code the Template

Tori is a full stack developer. Her time is valuable to her and us so having her spend it crafting HTML templates would have been a waste. Having me design and code the template layout saves resources and ensures that the designer's vision is executed… because the designer coded it. When issues crop up during the coding phase I can quickly adapt the assets or propose additional changes to optimize the feature.

“True collaboration isn’t throwing designs over the wall. It’s designers, engineers, and the rest of the team sharing the responsibility to build a quality product. Reduce the barriers, support and empower them, and designers who code will become the norm.”
Diana Mounter, Product Designer & Coder @ Etsy
Results

Final Product

In the end we delivered a weekly mailer that extended the functionality and experience of our web application. On top of that we crafted a scalable system for delivering the same quality product to our customers every single week.

Learning

Our greatest bit of learning and growth through this project were the tools Tori implemented to render and send emails. Developing tools for the Clariture Health Team is familiar after three years of crafting features with several different engineering teams. 

In meeting the need for generated reports to be emailed to healthcare managers and executives we discovered a world of opportunity for us to deliver more value to our customers. As we have worked together with our Rockstar team in the research process and over the years as our clients, we have helped them evolve into comfortable users of modern digital consumer user experiences.

They often demanded the aesthetic, ease, and insight of our reporting platform, but with a traditional email delivery. Tori’s work made it easy to replicate this render & email technology across our various app interfaces.