Callr

Screen%20Shot%202020-09-26%20at%2010.14_

Project name - Callr

Project client - Callr.com

Project date - Jan, 2019

Overview

Callr is a web service that facilitates the process of connecting to conference calls. It integrates with either Google or Outlook calendars and connects to call events that its algorithm identifies. It grew out of frustrations with having to fumble through calendar events and emails right before each conference call. Began its service in 2013, and a redesign of its entire B2B application in 2019 with the vision of becoming the next biggest ads management platform, alongside Viber and Whatsup. 
 

My role

Product Designer 
For this particular project i am one of the four designers at Blen Corp. I was a part of the entire design team in developing user research, interaction, mostly working on the visual design, wireframing and prototyping. As we collaborate as a team on this particular project I have involved in most of the design processes. 

Background

Callr is a web service that facilitates the process of connecting to conference calls. It integrates with either Google or Outlook calendars and connects to call events that its algorithm identifies.

Any device, any where, any time
Group 91.png
The design process

We started the design process by studying the whole website to find out the most important elements to redesign and by researching and studying our users experience to create a solution to all the gaps. We aim to incorporate the key phases of discovery, definition, ideation and implementation in all of our project process.

Understanding the problem

To identify any usability issues with the design and prototype to determine the critical features to priorities for the next iteration of the product.

As some one who is busy it is expected to forget things and might loose great chances, that's where the need of a reminder comes as a question. We were not looking for a conference calling service replacement. We wanted to redesign a tool that simply worked with any and all conference calling services out there. At the same time it is known most companies and organizations are in try and error for a better communication services to their users. We wanted to validate these problems with users so we took the initiative to run focus group sessions  and we have learned the frustrations they have.

We decided to focus on the design based on the users interest in developing the website, as it is a relatively fast-growing demand where information can become quickly outdated where constant learning and upgrading is required to keep up to date with emerging needs. 

Target audience

Thetarget audience for the project are people who have business around United States. Age group is between 20 - 50. People who want to grow their business, people who want to make calls, video conferences and appointment reminders. Mostly use their mobile phons and people who have network.

Frame 9-2.png
User interviews

We conducted user interviews to dive deeper into the needs of wide range of people, including target users who use calling services on a daily basis and potential users who are interested in calling services and appointment reminders but haven't tried it yet. By learning about their motivations, frustrations, and needs, we were able to gain user insights.

User persona
Frame 5-4.png
Collecting information

The most important part in collecting information is what the user gives you. After collecting the recordings from the user interviews, I conducted affinity mapping with my teammate to synthesis the pains identified. The gathered information has to be sort out to group the main parts that needs work. We grouped these problems under common themes and features in the platform.

Storyboarding/Getting to know our persona
Frame 16-2.png
Emphaty map
Frame%207-4_edited.jpg
Information architecture
Desktop - 1-3.png
Wireframing

Before creating the wireframes we as a team discussed on the potential pain points and the potential problem to solve. Based on the problems identified, I worked towards addressing these pains by coming up with potential solutions. Which includes on the wireframes below by reducing the number of steps to minimize time to completion, creating a connection with selected applications, establishing clearer visual hierarchy by grouping related fields, a standardized styling and UI pattern for future wizards that I quickly mocked up some basic wireframes to gather feedback from product users.

Frame 3-8.png
Frame 4-5.png
Visual design

The visual design was developed by iterating from mood boards and style to the UI kit and finally to create a consistent color, typography, image style, symbols, branding and other forms of the visual element inside the product. Since the visual design is the main part where users interact, with we give emphasis in ideating the design flow in line with the users needs.

We give priority to consistence and sound of the design. Each element in the design is equally important when it comes to the visual design process therefore we balance all the visual elements as they should be.

Adding aesthetics to the design is where we focused in aligning with the usability of the design process.

Color palette typography and buttons 
Frame 1-5.png
Mockups
Frame 12.png
Frame 13.png
Accessibility

Accessibility is inclusive design. Designing accessibility in mind is the power of better design and it removes barriers to empower all users to be productive and connected. In accessible design whether it is permanent, temporary or situational disability all are experiencing limited mobility. I have put all the necessary effort to make the product accessible by people with disabilities and also by all equally. I have created the design elements and content of the website using the web content accessibility guidelines (WCAG) to the best of my knowledge to make it perceivable where people can see and hear the content, operable where people can use the product by type or voice, understandable where people can get clear and simple language, robust where people can use different assistive technologies. I have used text size, clear color contrast, focus state, grouping similar items, and multiple visible indicators to make the product accessible by everyone. After all inclusive design is simply a good design.

Solution and results

Since the implementation of the new build Callr tool, we have seen people with busy life got a better life style. The product is a tool to help people with  busy schedule at work, with tones of meetings and phone calls. It was an amazing experience to be a part of the entire process with the help of my team at Blen. I have seen people using the application helped themselves in growing better where time is an important aspect of busy life.

As a result of our design and  the solution we created we saw changes in peoples busy life. After multiple discussions we iterative and design focussing on process and progress.  Even if the process took more energy it is worth to share the process with its solution that I made.

After developing the core idea to focus on, sketching, wireframing and a number of meetings, we did dive in to designing the final product, we had multiple discussions to come up with the best solution. Multiple discussions brings the best solution.

smartmockups_kl76sbdb.png

Visit website