Redesigning a CRM

More than 48,000 real estate agents use ZapLabs’ customer relationship management (CRM) software to manage their contacts. A good CRM should enhance the value of managing contacts, but our CRM didn’t provide any ability to filter or search contacts within the page.

In order to improve usability, a complete redesign of the CRM’s contacts list view was in order. Here’s the story of how I lead the charge.

The challenge

Our users were comfortable using the CRM as it was, so getting them to switch to an entirely new system—one they’d have to spend time learning—was a huge deal. I’d need to back up my redesign proposal with data in order to convince everyone—especially my company—that we really did need to completely redesign our CRM and not just make some quick improvements.

Gathering data

“Our development team doesn’t have the bandwidth for this redesign—they’re way too busy building new features.”

“Why do we need a redesign? I don’t see any problems.”

“Are you sure a redesign is better than what we already have? Is it worth making the investment in time and effort?”

Without compelling data, don’t expect the naysayers to change their minds.

To get the data I needed, I went to our online community and searched for related questions and suggestions for improvement. I categorized them and identified problems, and then I sat down with product managers to go over the findings and my suggestions. This got people onboard, so I was able to move full speed ahead.

Identifying the problem

When users clicked on the contacts tab, there was a fly-out menu for different categories of contacts, such as starred contacts, leads, and prospects. But users often weren’t sure about where a contact might belong, so they’d default to all contacts. Users also couldn’t search within the list view and filter their contacts.

Sketching ideas

Based on community suggestions, I started to sketch out ideas on paper (see below). I went through a few rounds of different ideas and decided that version 4 was the best option for redesign round 1.

I removed the fly-out menu and replaced it with page tabs to switch contact types. I also put both filter and sort under the “all filter” button, added in a page search, and added in a new contact button.

Round 1: Version 1 sketches.

Round 1: Version 2 sketches.

Round 1: Version 3 sketches.

Round 1: Version 4 sketch—the winner.

User testing (Round 1)

Every redesign project should follow the development cycle: analyze user data and improve the designs, build the new designs, test them out again, define and analyze the new findings to plan out the next steps and iterate on designs.

Analyzing user testing data with my teammates.

In this stage, I:

Built a prototype. I created mockups based on the version 4 sketch and put a prototype together using InVision.

Created moderator guidelines. I listed out study goals and defined user testing questions.

Recruited participants. I segmented a group of participants and invited them to join a filter/sort study. I used Intercom to recruit users and track user activities.

Conducted prototype tests with colleagues/friends first to make sure everything worked as expected.

Conducted remote user testing. I talked to users to learn what worked well and what needed improvement.

Analyzed user testing data. I analyzed all findings with my teammates to highlight top issues and successes.

Created a user testing report. I documented all key findings, the task success rate, and next steps. I used it to define redesign success and walk everyone through what we learned and achieved.

User testing key findings.

After testing, I applied what we learned and started iterating.

More sketching

Because there were more filter requests from both our users and management, I had to think about how to add in a bunch of new filters without complicating the user flow. I then undertook another round of sketches to see which offered the best design (see below).

Round 2: Version 1 sketch.

Round 2: Version 2, option A.

Round 2: Version 2, option B.

Leveraging design principles

Here, I struggled with prioritizing efficiency versus clarity. I wanted to display the most popular filters upfront with radio buttons to reduce the number of task clicks required. But I soon realized that my initial concept wasn’t compatible with the massive amount of information required and that I could group such information better.

Clarity versus efficiency.

This was the perfect opportunity to apply our newly defined design principles in practice: I decided to prioritize clarity over efficiency. It meant that I had to make sure users can easily scan and discover information before they’re asked to do any tasks. Users won’t mind extra clicks as long as the system provides accurate feedback.

Iterating on designs—again

Development

During this stage, it’s up to your product team to decide whether to do a third round of user testing. We were confident with what we learned, and we needed to roll out the new features soon, so we just went straight to the next step.

Finalizing mockups

A redesign can’t happen without developers. As soon as your project gets developers assigned to it, connect with them. At this point in our redesign, I worked with our developers to figure out the best ways to implement the design and we were able to work together to make it happen.

Tip: Be your own advocate

While working on a project, you may have experienced this not-so-fun scenario: Your design decisions are suddenly no longer in line with what your manager wants. What do you do?

Stand up for yourself. As I mentioned before, use data to back up your ideas and get your team’s support. As designers, our goal shouldn’t just be to make our boss happy—it should be to create a better experience for users and a better product that generates more revenue.

Conclusion

Some of the most important lessons I learned from this project:

Data is a designer’s best friend. Do your homework before you jump into a redesign.

User testing is key. Moderated user test sessions can be draining. But the feeling of accomplishment at the end is worth it.

Jessie Chen, UI/UX DesignerJessie Chen currently works at ZapLabs, where she designs a CRM for real estate professionals. She enjoys gathering user feedback through user testing, and iterating on design ideas to solve usability issues. In her spare time, she shares ideas on Medium about how design impacts businesses.