If your software has a contact card as one of the key screens, then you’ll know that it’s not always easy presenting all the information in an intuitive manner. Sometimes there’s a lot of information and it can be difficult to present it all in a limited space. In this article, we’re going to take a look at how we went about designing an engaging contact card for CRM software.
For CRM and some other categories of software, contact cards can be one of the most important screens. This is especially true for sales representatives who are regularly in touch with prospects and use the contact card to record notes, schedule appointments and even manage tasks or automation.
Therefore, you want to provide a great experience so that contacts are easy to access and maintain. You also want to make it easy to add, edit and update contacts quickly.
Getting Started
Let’s take a look at how to design a great contact card for your CRM. I’m going to walk through how to approach and think about this. In doing so, I’m going to reference a contact card I recently designed for Swyft. Swyft is a CRM for real estate sales agents.
Originally, Swyft had a contact card that looked complex and messy. Some of the difficulty with this design was the overall scheme and layout. We also wanted to tidy up information and make it easier to read, edit and generally more enjoyable to use.
Let’s take a look at how you can go about doing this.
What is the goal?
Firstly, it’s important to define the goal clearly because it influences how you approach this design. I always think of this as a journey from A to B. At point A you might currently have a confusing contact card and the ideal outcome at point B might be to make the design more engaging and easier to use. Your route to get there will be understanding current users and what they find problematic about the current design.
I’ve found that in other design processes the end goal was to update the interface to make more impact on demos, making it easier to sell. This was also to simplify a contact card and make the most relevant information and tasks easier to access.
Understanding the Primary User
Understanding the primary user is critical in order to design a great experience for them. How do they use the contact card? In the case of Swyft, sales reps stationed at their desks work through lists of prospects or leads. They’re quite frequently going through contacts and usually phone them directly or send them an email. Often these emails have details of real estate properties the prospect or ‘investor’ might be interested in.
To satisfy these requirements we:
- Included left and right toggles to tab through contact cards
- Created a profile section with easy access to contact details
- Added a feature to pin relevant real estate that matches the contact’s interests to their profile.
It’s also important for sales agents to see a quick snapshot of the contact’s lead rating (whether they’re a cold or warm lead) and any tags that have been assigned to them to indicate a relevant category such as the source of this contact, or where they found them.
You can see how understanding the use case informs the designs. If it’s something you need more insight on, I’d recommend conducting user interviews and doing session recordings.
Hierarchy of information
In the real estate sales process, there is plenty of information that sales agents gather for their prospects. We want them to be able to store and track that information and easily access it when they need to. Additionally, we introduced tabs on this design with the main tab being an overview. After that, the tabs work in order of information hierarchy. They also emulate the typical sales process for an agent.
Colour Palette
Use bright colours to highlight actions and tasks. A muted background using light enables us to highlight several sections to help them stand out. Since we’re working with bright branding, the light tones enable us to keep the interface clean and modern while also highlighting actions and buttons by using bright and bolder colours. The trick here is to create a clean and pale palette with only minimal and selective use of these bright colours to bring contrast to the screen.
Use of Space
Space enables the brain to take in all of this information without overloading the senses. This screen is now actually doing a lot, whilst maintaining a simple and clean look and feel. This sense of space also separates important sections. I separated off the profile area which remains fixed whilst the sales agent can navigate through tabs to view or add any necessary information. This way, the most important contact details remain visible and accessible at all times. It also enables us to represent grouped information or sections on the page. For instance, we separated the profile section, important information and the tabs.
Designing for User Journeys
Finally, we wanted to make sure that we designed user journeys. It’s important to enable the sales agent to take any action they require wherever they are. Often they are looking at the contact card whilst on a call, so they might quickly want to send some information or log a note. We wanted to make the card so that this task is easy for them.
Conclusion
That’s how we design an engaging contact card. With most product design work, the key is in understanding your user, their use case and context for use too. Once you have a clear idea of that you can design the best experience for them. Wrapping that in great UX and UI work is really down to the design theory and expertise.
Need a hand?
If you need any help with UX/UI design for your software just reach out to us on our Work With Us page to answer a few questions to make sure we’re a good fit for what you need. That way, you can book a free 15 minute, no-obligation consult with us. Additionally, you can book now right here. We design interfaces that are aligned with business objectives in order to drive growth. Remember that working on key screens like the contact card is one way that you can improve your product, get more users and grow.
