Hearsay | Contacts Redesign
One of the largest undertakings during my time at Hearsay was executing a full redesign of the Contacts experience
When I began working for the Contacts team, there were four contacts pages siloed in each of Hearsay’s products. My objective was to unify these four pages into a singular, fluid experience, regardless of which products our customers were using
Challenges
Limited real estate
Integrating a design rebrand into the final designs
Constraints of designing for a table
Determining the most important data to show
Handling various user personas & product access
How to handle column wrapping
Action button inconsistencies
Agile design - creating an MVP that can be expanded upon
The four product pages that had siloed contacts included: Social, Mail, Relate, and Sites
Skills used
User research & interviews
Competitive research
Project planning and story prioritization
Micro-interaction design
Prototyping
Usability testing
Leveraging a design system
Discovery, Research, & Interviews
Discovery for the project played a large role. I needed to understand why there were 4 different contact pages and what was unique about each of them. To do this, I interviewed each of the product managers for each product area (Relate, Social, Mail, & Sites). Since this unification project involved four products, it involved cross-collaboration, strategic alignment, and buy-in. I needed to make sure that anything I designed didn’t adversely effect their products or flows.
In conjunction with these interviews, I created an “as-is” site map of the different Contacts pages. This established a visual asset that could be used in conversations with my product manager and scrum team. There were small nuances between the experiences, but I found out they existed for a reason. For instance, customers who uploaded contacts via an API or Salesforce sync were not allowed to edit or delete contacts in our product. These were the kind of small details I needed to know about and convey with my team.
While the site map was created to understand our current landscape, I also did competitive research on how contacts are displayed in other software tools. I looked to see if there were specific patterns in relation to the tables and their various micro-interactions.
Lastly, I interviewed individuals who matched our top two personas: financial advisors and insurance agents. I needed to learn what their journey was when it came to using contacts. The main focus of these interviews boiled down to:
Why and when were they coming to the contacts page?
Did we have enough data about each contact?
Were we showing the right information at the right time?
Were we providing users with the proper functionality that they would expect to have on a contacts page?
One of the big takeaways from the interviews was that we gained a priority list of data points we had in our system as well as data that our customers would like to see us support in the future.
Data we had (in order of importance)
Name
Phone number
Email
Opt-in status
Contact type
Birthday
Billing date
Renewal date
Lists
Data our users wanted (in order of importance)
Notes
Job title
Company
Interaction timeline
Home address
Location (city)
UX Design & Product Strategy
By utilizing the research from the discovery phase of this project, I started creating low-fidelity mockups that captured the most impactful changes that we could make. These mockups explored many different features. Some were small standardizations such as enabling sorting on a table, others were larger such as reimagining bulk actions and adding chip based filters.
Through sharing these mockups with my team, I partnered with my PM and tech lead to establish the highest value opportunities to pursue. Based on the insights I gathered, I needed to further designs on the column picker and action button, write and run usability tests, and work with the UI designer to establish rules around column wrapping and responsive breakpoints.
While the above were epic specific tasks, I also worked with the UI designer to ensure a smooth rollover to the updated branding and design system.
Prototypes & Testing
The first test that I ran was a column picker test. Since we were combining four different contact pages into one, we knew that if users had access to all 4 products, the table was going to become unruly with data. I had to solve for the most complex use case, because roughly 20% of our user base had access to all of our products. Additionally, from our research I knew that a column picker was an expected feature.
I tested two versions - one as a static column picker where users could only select which fields to show or hide. The second version involved the option to show and hide fields and allow users to reorder the fields. Both versions tested well with testers who matched our personas.
After technical discussions with my Scrum team, we decided to implement the static column picker first. Part of Agile design is being adaptable and iterative. With the amount of development hours it would take to implement the reordering capability, we decided as a team that our efforts would be better to introduce the missing table stake features first and then improve the experience in phase 2.
One of the biggest pain points I needed to address was designing the contacts table to scale and handle new fields. We were able to limit white space and perform column wrapping, but ultimately we still had horizontal scrolling. We tested a version that kept the name column frozen, however users were not able to find the contact actions. There was a significant cognitive load in finding where this was located.
Option A: Frozen column header with horizontal scrolling. Unchanged action bar
Option B: Static ellipsis at the end of the table
Option C: Row hover actions with keyboard shortcuts
By using mixed-method UX research, we confidently moved forward with the rower hover actions. Qualitatively, feedback from users was that they were familiar with this pattern. Quantitatively, in a time-to-task metric it was within .3 seconds of the ellipsis option. While it was a new pattern, it provided us with a scalable solution that could handle new data points being added to Hearsay.
To ensure that there were no cracks in this design, I worked very closely with front end engineers to ensure that this was responsive and accessible with keyboard shortcuts and screen reader capability. Ultimately our users picked up this pattern quickly.
As mentioned before, I worked with a UI designer to come up with rules regarding different break points for the table. We designed to multiple screen sizes and devices. We decided on a mix of column wrapping names, and truncating secondary data to give users the most information as possible while maintaining readability.
Outcome
Unifying the contacts into one page took 6 months to accomplish. This project was extremely complicated because of the numerous technical and design related challenges that we faced. Not only were we executing a full redesign, but we had to ensure that we had zero data loss and an efficient way to handle duplicate contacts. This project never seemed to have one perfect solution, and that makes perfect sense. We were creating a single experience for upwards of 6 user types across 4 product offerings. Thus we relied heavily on research and testing to get us to the best product to launch with. Upon release we only received 3 customer support tickets. These were easily addressed by the team. After some maintenance and bug fixes of the live release we began working on updating the filtering and expanding contact fields to further enhance our users experience.