Problem
Our client's existing web-app was meant to guide surgeons to a hemostat or sealant product recommendation but failed due to having too much content and a cumbersome user flow. Also, it looked outdated.
My role
I was the lead visual designer, art-directed a junior designer, co-created the UI/UX, and participated in user research.
Process
Talking to our users and working with our client
We started by conducting interviews with sales reps (the primary users) and two of the surgeons who are their customers. We learned a lot from them, including challenges like:
reps typically have under 3 minutes to meet with the surgeons, making it hard to get through everything
getting to a recommendation required way too much reading and too many steps
the amount of text made surgeons disengage, and made reps feel like they were reading to the surgeons rather than having a conversation, which is preferred
the web app felt more like an educational website, rather than a recommendation tool
no one liked the fact that it was multiple pages of forms
We had a workshop with the clients where we discussed what we learned from the reps and surgeons, and thoroughly reviewed the existing web app. We were able to identify a lot of potential solutions, start on a new content strategy, and discussed the need for a totally different experience.
Sketching and wireframing
I whiteboarded screens with a content strategist and an information architect. Using the new content strategy, we focused on which questions would most quickly get users to an accurate product recommendation, what that flow looked like, and how the screens could be laid out. We knew it had to be as fast and simple as possible and knowing that a form-based Q&A wasn’t engaging, I proposed an intuitive drag-and-drop interface. We agreed that by asking only 3 questions, an accurate recommendation could be made. We even timed ourselves against the 3-minute average the reps told us about to gauge how much faster it might be.
I designed the product recommendation pages to be highly engaging, with animated infographics and supportive copy that addressed only the most important information rather than using long, dense paragraphs more appropriate for an educational overview. I included a link to their product websites for customers who wanted to learn more. Click the arrow buttons to see the wireframes:
Visual Design
Beginning with the brand guidelines and working with a junior designer, I created the visual design of the app, including overall look and feel, styles, and established the direction for the animated infographics. Click the arrow buttons to navigate:
Outcome
We received an enthusiastic response from our client, the reps, and the surgeons. Our client felt that we more than met our objectives, and she recommended our team to other business units at the company, where we gained new contracts.
Internally, our team was asked to demo the web app for our agency, which led to our CEO demoing it at an annual parent-company meeting as best-in-class work done by our agency.