CallApp Call Recording – Case Study

CallApp Call Recording

How we integrated a massive new feature into an already jam packed app.

It’s never an easy task incorporating a massive new feature into an already fully functioning app, especially when the feature could be a standalone app itself.

This was the exact problem we faced when we were deciding whether to add Call Recording to the roster of CallApp’s features.

We chose to approach the Call Recorder as the MVP, which had its own set of unique challenges and would ultimately make for an exciting, interesting task.

What needed to be done:

  • Take all the restrictions and turn them into advantages
  • Repurpose the structure, screens and menus
  • Plan the behavior and accessibility of all the call recording elements and how it would react with the pre-existing CallApp features.

Our goal was to have an organic and seamless integration; which would then allow the user to enjoy the new feature, without losing the benefit of our familiar surroundings.

The following is our journey of how we conquered Call Recording.

UNDERSTANDING THE USER’S PAIN

Research & Justification

The first step was to justify adding a Call Recording feature to the roster of CallApp’s features.

Any time we want to add a new feature we apply it to the overall Product strategy.

Meaning, that the feature must serve two major objectives:

  • To address pains users encounter in the general realm of Caller ID or CallApp itself.
  • To advance and to further establish CallApp, as a one of a kind in the Caller ID market.

We started by determining if this was a common user’s problem.

A quick search on the Google Play Store for Caller ID and Call Recording shows that:

  • 1. There is a vast number of apps offering single solutions in each of these categories.
  • 2. The demand for these two services is growing.
  • 3. No app was offering a complete solution containing both Call Recording and Caller ID.
Call Recording apps on Google Play Store
Google Play Store

Further research showed that users were encountering many problems while using the Caller ID and Call Recording apps separately. Primarily of confusion, frustration and loss of precious time.

GOALS

How the Call Recording Feature Advances CallApp

Based on our research, we decided to fill this void and make CallApp the first of its kind by combining both Caller ID and Call Recording under one roof.

This achieved our two goals:

  • Solving a major pain for our users
  • Make CallApp unique among other Caller ID apps

SCOPE

The “Must Have” Functions

The Call Recording feature, unlike our app’s other features, is a condensed version of a standalone application. Therefore, it was to be implemented incrementally.

After a quick brainstorm session, we came up with:

  • A list of desired features the Call Recorder should include
  • Possible design and technical challenges
  • The initial timeline

This helped us to assess the complexity of the whole package and to understand that we will have to aim to implement the feature in more than just one phase. We would need to concentrate our efforts on a lean and condensed version for the initial release.

CallApp Call Recording Scope
CallApp Call Recording Scope

The initial scope of the Call Recording feature consisted of a number of “must have” functions:

  • Record the call
  • Play the recording
  • Save the recording
  • An option to take relevant action (share, add to favorites, delete, send)

The key word here is simplicity.

DESIGN PROCESS

USER JOURNEY

The first step is a user journey.

We needed to determine:

  • The user’s path through the feature
  • Events / interactions the user meets / makes along the way
  • The experiences (positive, negative & neutral) that the feature provides.

At this point we realized having a pre-existing screenflow is a two-sided coin.
Meaning that on one side, it’s easier when you have a pre-existing frame to build upon. On the other side, your user’s journey is also restricted by the need to navigate only through CallApp’s existing screens and features.

In other words, our map was already set, but we needed to find a way to navigate new and existing users through it.

Accordingly, two of the major junctions on this map are our ”Incoming Call” and “Post-Call” screens. This double screen feature served as central point in the Call Recording user journey.

We had to acknowledge the fact that this is a critical point in user’s interaction with our app.

A user, especially a new one, can feel a real discomfort meeting new and unfamiliar screens. Therefore, adding the Call Recording feature to this screen provides additional positive experience, which can help to overcome this obstacle.

CallApp Call Recording User Journey
CallApp Call Recording User Journey

HAND SKETCHES

Hand sketches for me are an essential part to any design process. I have to contain a primal chaos of visual ideas and combine it with an established narrative of the user journey. It can be very rough or as with the case of Call Recording, very detailed sketches.

At this stage, I laid the foundation of the Wireframe:

  • Basic screenflow
  • Initial look & feel of the feature
  • Structure of on-screen elements

I hand sketched a whole feature based on the user journey; which allowed me to link wireframes directly to each respective sketch.

CallApp Call Recording hand sketches
CallApp Call Recording hand sketches

WIREFRAMES

Our wireframes allowed us to have an open in-depth discussion with the development team based on the visual representation of:

  • All the user touch points
  • The exact scope and all the Call Recording desired features
  • Exact screen flow

It was an immensely important step in terms of saving time and money. This was needed essentially to understand what is possible and at what cost.

For example, an early discussion with the development team helped us to condense and redesign our Call Recorder’s setting screen to better fit into CallApp’s technological environment.

CallApp Call Recording wireframes

DESIGN

Naturally, I enjoy the design stage the most. It’s enormously satisfying to see a project take its final form. However, to get there I had to tackle some challenges:

  • Discoverability of the feature within the app
  • Design stand out elements into an already developed visual language of the app
  • Visual continuity of the Call Recording screen sequence
  • Easy to understand iconography

Once again, these challenges are best to be illustrated in the “In — Call” / “Post — Call” screen sequence, a major junction in our user journey.
These screens contain a large amount of user information in the form of a card-view, as well as actions users can take during and after the call.

We decided to place the Call Recording button on the Incoming Call screen and subsequently a recording playback option on the Post Call and Contact Details screens.

CallApp Call Recording design

The main challenge here was the integration of a multitude of pre-existing actions. We also had to examine how we could educate users on the value of this new feature and which loops were needed to make sure that the user came back to the Call Recording feature.

We had to create a direct route between CallApp’s main screens and the Call Recorder. We accomplished this through a Recording playback card menu and by using the Recording Calls screen, which is a screen the user can perform multiple actions on.

CallApp Call Recording screens

Eventually, on the Recording Details dialog, we gave the user access to multiple recording formats. As well as the possibility to calibrate other recording settings.

The whole progression of Product and Development departments were synchronized via Spec.

SPEC

The Spec is a living, almost sentient being. It grows and changes alongside the advancement of the design process. Wireframes are being replaced by designs, then further edited designs, and then by final designs. New in-depth descriptions of screens and functionality are added and replaced.

All of this is done, while holding a constant conversation with the development team.

Needless to say, this ever expanding and changing of Spec, is not only a essential tool for conveying UX narrative between the product and development teams, but it also has a direct impact on the design itself.

CONCLUSION

We succeeded in becoming a one of a kind Caller ID application by seamlessly implementing a massive new feature into our app.

The final result is an organic and easy integration, which allows CallApp to stand out in the world of Caller ID apps. Giving our users an opportunity to record their calls directly from our app gives them a safe and powerful new tool.

But our journey does not end here…

We keep moving forward every day.
Each update we’re Improving our Call Recording feature alongside of our other features. We do this with the goal of increasing user engagement in our ever evolving and continuously growing app.

Thank You for reading this article. You can find CallApp on the Google Play store.


Maxim Grishkan

Maxim Grishkan

Senior Product Designer at CallApp