A new homepage for the CallRail web app
Reducing latency, increasing usefulness, and applying new content guidelines (while defining a new UX content/design partnership model)
What
A homepage for the CallRail web app, to serve as the new default landing page and dashboard instead of having customers land on the Call Log.
Why
While proposals for a dashboard-style homepage had been floating around the UX org for a few years, this project was driven, fundamentally, by an urgent technical performance need: CallRail’s previous default landing page, the Call Log, was getting overloaded, leading to latency issues for our larger accounts. Directing customers to a new landing page would help alleviate that load.
The UX team bonus
In 2022, the UX team at CallRail was transitioning from post-design, fill-in-the-blanks copywriting to a co-creative content and design partnership. I was hired to help drive this transition from the content side, and UX leadership saw an opportunity for me to partner with our lead UX designer (who is now CallRail’s UX Principal) to define and demonstrate this new working model.
The content guidelines bonus
This project presented two key opportunities for the UX content guidelines I was creating:
A starting point for our eventual transition from title case to sentence case
A chance to apply new accessibility best practices I’d drafted by removing sensory verbs (“see,” “view,” etc.), platform-dependent interaction verbs (“click,” “tap”) and locational language (“here,” “above,” etc)
How we worked
Historical context and early design
Because organizational transitions are always incremental, I was brought onboard after this project was already underway. Based on past research and design concepts, the Lead UX Designer had created a V1 design in preparation for user interviews.
The research version, where accessibility and sentence case updates had yet to be made
The research timeline was tight, so my content design input was limited to some label copywriting tweaks, but I was able to leverage my past UXR ops experience to shape the interview questions and co-lead interviews. Research was conducted in two parts: 1) by the UX team and PM, with existing CallRail users, and 2) by UserTesting, with professional marketers who were not CallRail users.
Research takeaways
The interviews revealed five main takeaways:
Overall, the new design was useful and exciting, especially to existing customers (who had been pining for just such a dashboard).
“Leads” was not a well-understood term, and users would rather know how many first-time callers they were getting.
A list of recent exports wasn’t the kind of valuable-at-a-glance material folks were looking for in a dashboard.
Interviewees wanted some way to more granularly understand the types of calls (incoming, outgoing, missed, etc.) they were receiving in a day.
The navigation from modules was unclear and didn’t inspire confidence or an immediate understanding of usefulness.
Iterating and defining a story
Research findings allowed my design partner and I to reset and begin the co-creative process.
We worked together to create a lo-fi wireframe that captured the updated story of what the dashboard needed to say, then took the design to hi-fi.
The new story: good-bye “Total Leads,” hello ”First-time callers”; arrivederci “Exports,” benvenuto “Call status”
3 Content design morsels
Enhancing navigation
I turned the navigation icons into link CTAs that echo the top nav menu in order to increase accessibility and help contextually educate users on our product architecture.
The previous navigation offered no signpost for the user, leaving them uncertain of link destination
Increasing category label clarity
Link CTAs increased clarity while also interweaving with and reinforcing the top-nav app architecture
I pushed a change to the label of the “Missed Calls” module and the “Missed Calls Report” to which it links.
Why? CallRail defines 3 categories of formerly-known-as-”missed” calls: 1) "missed calls” (calls that ring for more than 15 seconds without an answer); 2) “voicemails” (including those that didn’t ring); and 3) “abandoned calls” (when the caller hangs up within 15 seconds). Under the previous content architecture, “Missed Calls” was the label of both a category and a sub-category. “Unanswered calls” tells a clearer tale.
Increasing category label clarity
Lastly, balancing need with constraints, I created a low-scope initial rollout campaign consisting of:
a spotlight module on the homepage that linked to an onboarding tour
a top alert on the former landing page to raise awareness of the new homepage for users who had bookmarked the older landing page and wouldn’t automatically be directed to the new one.
Engineering constraints meant I needed to rely on basic Pendo modals for the onboarding tour, so I tried to balance content length with usefulness, relying on a question-and-answer construction to drive the narrative. I also consolidated the original request for 9 steps into a more digestible 4 steps.
How did it do?
The new homepage exceeded business goals.
On the one hand, total visits on the Call Log fell 20%, and performance issues were abated. In other words, only people who wanted to go to the Call Log were visiting that page.
On the other hand, our sales team now had a dashboard to showcase for prospective customers who were cross-shopping.
But beyond these goals, traffic to key reports increased by up to 80%, and traffic to account alerts by 543%, respectively. The increased alerts engagement lead to increased phone number creation, which reliably correlates to increased retention and revenue.
From a design systems perspective, the new homepage began a cascade of accessibility-focused improvements to headers and footers and served as the first step in a move to sentence case across the app.
This project also set a new precedent for UXC/UXD partnership at CallRail, inspiring workshops with UX leadership about how to grow the UX team’s collaborative practice and paving the way for my involvement in the bulk Google Ads integration project and other leadership initiatives.