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
The best way to propose redesign ideas is with convincing data in hand.
Have you ever wondered why your redesign ideas get rejected? Perhaps this feedback sounds familiar to you:
- “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.
“Without compelling data, don’t expect the naysayers to change their minds.”
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.
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.
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.
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).
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.
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.
If you ever have trouble making design tradeoffs, just leverage your design principles. Design principles can vary depending on your product, there are no fixed rules. If your team doesn’t have any principles, check out Design Principles FTW for inspiration.
I made all filters drop-down menus for the following reasons:
- To save vertical space—especially on tablets. The filters drop-down menu will expand and push down the Contacts list view.
- We don’t have data to decide which filter options we should display up front
- This grouping made more sense and was easier to scan and discover
Additionally, I removed the contacts relationship tabs and grouped them under an optional “relationship” dropdown.
User testing (Round 2)
Here’s what I did:
- Built a prototype and created new mockups based on version 4
- Repeated everything I did during round 1
Iterating on designs—again
Better design doesn’t happen overnight—it goes through the cycle of user testing, design, and iteration.
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.
“Better design doesn’t happen overnight.”
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.
Related: Designing with your developer in mind
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.
- Document what you learned and achieved. Don’t just talk about what you can do—show what you’ve done.
- Be organized. Make sure you know where and how to find files to support your design thinking.
- Be grateful. If you think you can handle an entire redesign alone, you’re wrong. Collaboration is everything.
The secret to leading a redesign: Stay patient and plan out your journey. Make it easy for everyone on the team to envision how redesigns are going to increase return on investment, and you’ll get everyone on board.
ZapLabs’ redesigned CRM launches December 2.
by Jessie Chen
Jessie 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.
