A timeline of sales interactions

One of Nutshell's most frequently used features is the timeline. As a customer relationship manager (CRM), it’s important that people can see a constant flow of real-time updates: who’s speaking to whom, which leads are won and lost, new contacts, and any other events that are important to their business.

Everyone on the same account can view this timeline from their company’s dashboard.

In addition to the comprehensive timeline on the dashboard, each person, company, and lead stored in the CRM has a personalized timeline on their page, displaying only the entries related to them.

Scrolling through an individual timeline provides a quick understanding of the interactions that have occurred with any person, company, or lead.

The challenge

The original timeline, designed and built over a decade ago, mirrored the skeuomorphic design principles popular in the early 2010s.

Notes resembled legal pads, banners looked like real flags, and emails were decorated with a border resembling a classic airmail envelope.

During a rebrand in 2020, we had the opportunity to tone down some colors and eliminate the unnecessary decorations.

Notes, banners, and emails with fewer decorations and more muted colors.

While this was a step forward, the timeline remained one of the most outdated features of the app, both in terms of aesthetics and functionality. The old technology it was built on led to a subpar experience.

Time for a change

In January of 2022, Nutshell decided to rebuild the entire timeline from the ground up. Given the flexibility of today's technology, our design team had the opportunity to revisit the entire experience. We were finally able to address some of the major pain points our customers had been mentioning for years:

• Too much visual clutter
• Difficulty scanning for relevant information
• Inadequate filters

Modernizing the UI

We kicked off the design process with a "keep or toss" exercise. We gathered all stakeholders together and thoroughly examined the existing timeline, identifying elements that we liked and disliked. This effectively jump-started our design process.

Thumbs up for things to keep, thumbs down for things to toss, and question marks for other unknowns.

Next, we took a step back and identified the key elements of every timeline entry. Without worrying about other details, we could easily adjust things and determine the information hierarchy.

Determining which layout of UI elements felt like the correct higherarchy of information.

At this stage, inspiration began to strike. Through several exercises, we started to capture these ideas in sketches.

My first sketches exploring different UI approaches.

After translating these sketches into low-fidelity mockups in Figma, we could iterate even more quickly. It was at this point that we began to gravitate toward a particular structure, so we focused our iteration here.

Low fidelity iteration of potential timeline entry designs.

Eventually, we picked a favorite. The final design began to reveal itself, constrained by a structure that gave just the right amount of weight to all the important elements.

Higher fidelity iteration of potential timeline entry designs.

With the general layout determined, we began solidifying the design for all sorts of different timeline entries.

Each entry got an icon with distinct colors to improve scannability, and email entries were adorned with an additional icon to indicate whether they were inbound, outbound, or automated. One of the most exciting updates that came out of this redesign was the ability to react to timeline entries and comments.

An example timeline displaying multiple different entry types.

And finally, customers now had much greater control over which entries actually appeared thanks to significant updates to the timeline's filtering capabilities.

Customers could now filter by type of entry, related people, type of activity, and date range.

A feat of engineering

Our front-end engineers, Kendal and Bella, had to completely rebuild the timeline in React from the ground up. Their attention to detail was immaculate, and watching the project slowly come to life was a delight. At this point, my role became to answer any questions during the build process.

Impact & lessons learned

Following an extensive beta trial, the official launch of the new timeline marked a significant progression in Nutshell's evolution.

This trial allowed customers early access to the timeline, providing direct feedback within the app. This feedback helped us better understand the user experience, respond promptly to their suggestions, and make necessary enhancements to the feature.

The invitation people recieved to try the timeline early.

The positive responses confirmed our efforts:

“It’s perfect.”

“Love the updates so far!”

“I'm still getting used to it, but I like it more.”

“Overall functionality seems better, less buggy and easier to sort!”

Beyond the immediate improvement, this project underscored the importance of feedback in agile design and development processes. We gained insights about maintaining open dialogue with our users, iterative design, and the advantages of making incremental changes based on user feedback.