Project: Less Annoying CRM
Less Annoying CRM is a simple, yet effective CRM for small business owners. Their focus is to provide users a low-tech way to manage their contacts without all the extra + unnecessary features major CRM companies provide.
With customer satisfaction + information density at the forefront of the company’s focus, the overall design of the admin page for the internal team was a second though. The company approached this page as a “show everything” element so the team can quickly assist the customer, but failed to think through the experience for the team.
The goal was to design a cleaner admin page that still allowed the internal team to be power users + quickly access all information they need to assist customers without taking too much time.
Role + Scope
I worked as the Product Designer on this project over the course of four (4) months.
The Design Process
The primary users of this page are members of the customer support team (known as CRM Coaches), while other administrators occasionally access this page.
To further understand the needs of the user, I conducted user interviews (11 total) over the course of 2 months. The aim with my interviews was to gain a deeper understanding of:
Pain point 1: Clutter Originally designed for power use, every action + piece of information is shown on the page. Diving deeper, as new features + information became available, they were added to the page wherever space allowed without putting thought into this. This lead to a cluttered page that, while powerful, overwhelms the user + is a major learning curve during onboarding.
Pain point 2: Scrolling One of the major points that were brought up in all interviews was the need to scroll down the page to access information. This coupled with the cluttered nature of the page made the time a user could assist a customer longer than necessary.
Pain point 3: Flow + Hierarchy With much of the text + headers being the same size + color, many components throughout the page all blend together. This didn’t support a productive workflow for the user, nor did it help establish a hierarchy of information throughout the page.
I started with a low fidelity wireframe to help place the information on the page. My goal here was to set a good foundation to then lay out all the information for the page.
Within my wireframe, I prioritized user information as that was typically the detail needed to take any action on the page.
From there I also focused on ensuring the various actions that could be taken on an account were categorized + displayed in an easy to skim way.
Overall my goal was to use as much space on the page as possible, but position the elements to feel more spaced out + give all the information the breathing room it needs.
High Fidelity Mockup Attempt 1
In my first attempt to design this page, I deviated from the original wireframe. The insight that lead to this was that on the original page, the entire top row of information was information the CRM Coaches were used to parsing. With this in mind, I wanted to ensure that the first row of information still provided all the context they needed to move forward on the account.
Additionally, while this design worked in some ways, it didn’t fully enhance the user experience for the CRM Coaches. Through self editing + feedback from the team, here are some missteps I made in this design:
– Icons aren’t super helpful. The original page barely had icons throughout, but my addition of them in this design didn’t provide value or reference as much as they should have.
– Still not nailing the hierarchy. Looking back on this design, I relied heavily on bolded text to establish hierarchy throughout this page. The bolding didn’t do what I had hoped + instead continued to make this page feel cluttered.
– Missing information association. One of the points that came up was associating elements with actions + links that are relevant to that information. For example, the option to “clear email address” should be close to the email, not necessarily in a mass list of actions. In this design I missed the opportunity to do this.
– Future thinking. I was very focused on trying to make the layout flow better with this design that I didn’t consider how + where future additions would be on the page.
High Fidelity Mockup Attempt 2
In my second attempt, I relied heavily on dialogs to hide unnecessary actions or information that a CRM Coach may not need at first glance. This allowed me to end up with a design that was extremely condensed + still extremely powerful.
While I was very happy with this design, it was missing a level of refinement to truly take it to the next level. The information, while better than the original, was still extremely compact throughout the different areas. I was creating a better user experience, but the interface needed to be edited. With my final attempt I wanted really take this design from “better than what we had” to “well thought out + well designed” outright.