Designing a "LinkedIn" for Pharmaceutical Companies
Product Designer – Komodo Health – June to September 2018
PROBLEM
MSL users have a really hard time networking and gaining intros to their target contact list.
SOLUTION
I redesigned a simple contact list into a professional networking tool, leveraging networks and connection influence to help users succeed in their engagements. In doing so, I designed a second list that helps users discover their contact's 2nd-degree connections (connections outside of a contact list). I also designed a modal that quickly identifies connections within a contact list.
OUTCOMES
Launched in late 2018. Resulted in NPS increase of 20 points and ~15% boost to weekly active users.
My Role
• User research and competitive audits
• Paper/pencil sketching and low-fidelity wireframes
• Using Sketch for high-fidelity mockups
• Prototypes using Principle & InVision
• Hosting cross-functional design critiques and reviews
• User testing and surveys
• Engineering handoff (via Zeplin) & deployment
Collaborators
• Product Designers
• Product Managers
• Full-Stack Engineers and Engineering Managers
• Customer Success Managers
Problem and Context
Research from user interviews show that the current tools, procedures, and communication methods that most MSLs use don't yield enough successful engagements. Many users simply Google search a doctor's contact information and cold contacts them – a not very effective strategy.
User Goals
• Successfully engage with target users
• Expand network of doctors
Business Goals
•Drive up product renewals
•Boost engagement on Lists product, measured via monthly active users
• Increase user satisfaction, measured via net promotor score
Understanding Users and Building Empathy
Guiding Questions
To kick start the research I needed to do to better understand these users, I used these guiding questions:
• How are users currently using this feature? To what extent do users use this feature effectively?
• Where do users become frustrated and why?
• What parts of the feature/interface are being used, and what's not?
Research Methods
I used a combination of four methods to gather qualitative context and quantitative data on our feature, build empathy, and build a stronger case for a redesign:
1. User Session Recordings through Fullstory
2. Usage Metrics/Click Data
3. User Interviews
4. Customer Success Manager 1:1s
Research findings helped me build out a user persona of a potential user to better summarize key user information
I conducted a design audit to identify usability issues, visual design hiccups, and heuristic violations
User Flows and Brainstorming/Sketches
I created a user flow map to capture the experience of using this feature and to map out interactions, emotions, and edge cases. This user flow map also helped identify gaps in the user experience that would need to be accounted for. While the original user flow map was rather simple, multiple workshops with CX and PM allowed me to further iterate.
I used Flowmapp to create this flowchart (click on button below to enlarge)
Selected Design Iterations
Layout Iterations
The original design had only one list – the engagement list. The new design included a second list of influential doctors whose networks could be leveraged, side-by-side with the original list. To explore ways of presenting a second list, I sketched 16 different initial layouts.
After evaluating designs with the design, product, and development teams, many of the original 16 designs did not make the cut because of usability or feasibility concerns.
After lengthy design meetings and critiques, I decided that the "Right-Panel Design" was the best layout option to explore. I proceeded to build out the "Right-Panel Design" in medium-fidelity. However, we found that the distribution of space was uneven and unbalanced.
Interaction Iterations
To make space for a second list, I had to find a way to remove the List Panel originally on the left of the screen. To keep every part of this new user experience approachable and understandable, I iterated on a number of micro-interactions expand and collapse the List Panel. After testing and feedback, I found that the third option (below) was the most preferred option for this particular interaction because it was explicitly clear both in copy and layout where the different elements were moving in and out of on the screen. There was also persistent copy (not just copy on hover), which helped improve understanding.
Prototype of list panel expand/collapse interaction
Visual Design Iterations
An important aspect of the user experience is using visual design (i.e. colors, typography, themes, etc.) to inform content and hierarchy. One such consideration that arose surrounded distinguishing between two similar-looking lists. The solution was to use two different colors, one corresponding to the larger list on the right and one corresponding to the smaller list on the left.
In choosing colors, we needed to keep in mind a number of factors, including :
• colorblindness
• contrast and readability
• display color profiles
• cultural meaning & significance
• existing color usage throughout the system
For instance, we steered clear of red hues because of their association with destructive actions and steered clear of blue hues because blue was already widely used throughout the system (so it had an already set meaning).
I ended up choosing Color Option D, or the orange option, because it provided the best accommodations for accessibility, contrast, and usage.
Evaluating and Testing Designs
Cross-Functional Design Workshops
To ensure cross-functional team visibility throughout the entire design process, I held weekly design workshops with my PM, CX lead, and key engineers. These half-hour sessions were focused on gaining open, broad ranges of feedback from scoping, usability, feasibility, and visual design.
Design Reviews
I held formal, hour-long review sessions with the entire product, engineering, and customer teams to inform those teams of near-final designs. Each discussion revolved around the priorities of each team and how the designs were or were not addressing those priorities.
Design Board
To collect asynchronous design feedback, I placed large poster boards in high-traffic office areas for 2 weeks to gather feedback. I included specific questions to help guide feedback and a pad of sticky notes to encourage team members to write down their thoughts.
Surveys
Micro-interactions and UI components required further quantitative testing, because the initial design intuition was not sufficient enough to land on an optimal user experience and build consensus. to address these concerns, I designed and distributed a survey through our customer team to gather feedback on interactions and WIP designs.
Outcomes and Final Design
Outcomes
This feature launched in late 2018, and resulted in a material impact on the product and business. The design resulted in a NPS increase in 20 points, and a boost in weekly active users of approximately 15%.
Lessons Learned and Retrospective
Lessons Learned
I learned how to very quickly ideate and evaluate dozens brand new design/interaction paradigms at once. I also learned how to juggle multiple different competing business, product, development, and user priorities – through a combination of open communication, design critique, and focused design evaluation.
What I'd Do Differently
I would gather insights from new users as opposed to just existing users, to make sure that the designs worked well and were usable to users who had no context on what the product was intended to do. I'd also scope down the number of changes to be implemented all at once – we had a small development team and designing a large number of changes at once made it difficult to ship in a timely manner. Doing so would also help product better understand the causality of specific design changes to metrics.