Creo - A Unique Sales Tool
Company: WebMD
Tools: Figma, Adobe Illustrator, Adobe Photoshop, HTML, CSS
“We’ve got to be able to adapt and change our approach dependent on the individual customer’s needs. It’s never the same thing twice.”
This was the very first lesson that was stressed upon me as I sat across from three of WebMD’s infinitely talented sales professionals as they walked me through their current processes and challenges when it came to selling a WebMD Education Program.
You see, an Education Program was not a single product, or even a bundle of products. It was several different kinds of education products, all put together into a comprehensive, often multi-year program that customers (often pharmaceutical companies and various medical guilds) signed onto throughout the entire lifespan.
Our challenge was to create a visual, easily editable application for presenting not just the webpage, but the individual programs and their schedules to our many customers.
Each one has its own dedicated website where customers can access these educational programs (anything from live webinars and quizzes to articles and case studies) . Each product is only live for a set amount of time. Each one is tailored for each individual customer, to their specifications.
There are three core components to Creo:
Let’s talk about each one individually.
Curriculum
The curriculum page is, in many ways, the meat and potatoes of the application, allowing sales to add or remove products as they see fit. The products themselves come with a set amount of deliverables and their own timeline, so the card for each product, such as this Broadcast Dialogue, only needed to display those pieces of information in a nice way, as well what kind of credits a user would earn for engaging with the product.
Timeline
A screenshot of the zoomed-out timeline for Year 1 of a program. Click to enlarge.
As the user would add and remove programs in the Curriculum page, the Timeline and Live Preview pages would update their content to reflect that, making them valuable tools to demonstrate just how the customer’s program will change and evolve over time.
Live Preview
A screenshot of the curriculum page for Year 1 of a program. Click to enlarge.
This is a product card example for a broadcast dialogue. Each product has the initial content itself,
and several deliverables which users respond to in order to earn their credits.
The data from the deliverables are delivered to the customer at the end of each year, and the insights that provides are a huge selling point to having these programs, and to Medscape Education as a whole.
The timeline page was especially challenging; we needed to create a visual display of the products across time, how long said product was going to be live for, and when each deliverable could be expected for the customer. We achieved this by using color-coding for individual product types, as well as utilizing both zoomed-in (showing each deliverable), and zoomed out views (showing only the products themselves) across the timeline.
A screenshot of the zoomed-out timeline for Year 1 of a program. Click to enlarge.
A screenshot of a Live Preview page. Click to enlarge.
The live preview page is where it call comes together. On this page, sales is able to show customers an example of what their programs’ individual page will look like year after year. Any programs that they’ve added can all be seen here in a mocked-up (but not fully live, of course) simulation. In the editing interface for this page, the sales team member can choose which images they’d like to use, populate content descriptions, and add sponsor logos tailored to each individual customer.
A screenshot of one of the several editing pages for the Live Preview. Users can also edit the individual program names and descriptions, add their own panel of experts from the client, and several other aspects. Click to enlarge.
Learnings from Creo
“If you want to create a great product, you have to start by understanding the people who will use it.”
- Don Norman
Creo is a project that I am super grateful to have worked on, because of the incredibly unique opportunities it afforded. At no point in designing and putting Creo together did we ever feel like we knew what we were doing. Honestly, I still don’t. We had to spend a lot of time side-by-side with our users, the sales professionals of WebMD, in order to understand what this product needed to communicate, how best to present the information on hand, and how sales even functions within the company.
Thanks to having built this product by WebMD for WebMD, we were able to test in-house directly with the userbase we were targeting, and communicate frequently to tune our final designs to be exactly what they needed, exactly as they needed it.
The response to Creo has been incredibly successful, and I had a blast working on this one.