Call on the Go

Client

Call on the Go

Duration

3 weeks

Skills

UI design

Research

Data visualization

Prototyping

Deliverables

Style tiles

Mockups

Prototypes

Implementation roadmap

Style guide

Tools

Sketch

Photoshop

Illustrator

InVision

Overview

Call on the Go (COTG) is a Chicago-based startup that helps businesses boost sales by increasing call rates with their suite of products, a mobile auto dialer and desktop application. Inspired to make a difference in the sales space, founder and CEO, Mark Michuda, created Call on the Go when he found himself in the same predicament many salesmen find themselves in: feeling tied down to a landline or computer and having to dial each potential client manually. Their biggest milestone so far has been hitting over 10,000 account creations.

Seeking to improve his products, Mark previously worked with a Designation UX team focusing on the mobile auto dialer app. The UX team shed light on the opportunities Call on the Go had within the market and what users wanted. Using the research and the work they provided we sought to align the design throughout all platforms: the marketing website, desktop application, and the autodialer mobile application.

Getting to know the product

Before the kickoff, we did background research about the products offered by COTG.

We reviewed the work of our UX team, which included domain research, competitive analysis, user testing, and wireframes.

The wireframes gave us insight into what the users found most important: functionality and familiarity. Users wanted an app that performed and allowed the least amount of tasks so they can focus on their goal of calling as many clients as possible.

The marketing website was outdated and needed to better communicate information about the products COTG offers. The desktop and mobile application were disjointed and needed to better communicate that they worked together.

With our research at hand, we went to our kickoff meeting prepared to get a better understanding of the client’s goals for the product. Since we were focusing on the interface and Mark worked with a previous UX team, we wanted to ensure he was in a visual mindset. We prepared a gut test and word mapping exercise to get him thinking of visuals, but also to get a better understanding of his likes and dislikes, as well as his thoughts about the brand identity.

Mark was eager to work with us to give his products a more cohesive look. He stated that the application had gone through previous redesigns, but those didn’t result in the platforms speaking to one another. The biggest pain point for COTG was that it was unclear to users that in order to use the mobile auto dialer they have to start with the desktop application. Mark also had big aspirations to make his brand unique and seen as high-quality. He gave the analogy of a Porsche or Rolex, both iconic products. He felt that although COTG needed a facelift he didn’t want to devalue the functionality. It was clear after our meeting that Mark was user-centered, and gave us his full trust to create products that brought quality to the user experience.

Exploring the market

To get a better understanding of the market, we did a visual competitive analysis. Mark provided us a document with a list of competitors to help us identify direct and indirect competitors within the market as we were unfamiliar with the sales industry. But to give Mark the unique identity he wanted for his brand we also pulled some out-of-category products that used data visualization.

Direct Competitors

Indirect Competitors

Out-of-Category

Direct and indirect competitors: Kept true to the traditional corporate look and feel with blue color palettes and Excel-like tables. Out-of-category: Thoughtful use of color and UI elements for organization.

As we conducted our analysis it started to feel like deja vu; every platform was the same. This brought us to our takeaways;

Color Usage

Competitors used a similar color palette, specifically blue, green and orange. These colors instill a sense of professionalism and trust but gave us an opportunity to differentiate COTG from the crowd.

Data Visualization

Competitors displayed data analytics by using either a spreadsheet format or a stock UI kit with few microinteractions. The overwhelming amount of information felt too complex for our users. This presented an opportunity to differentiate by creating a digestible and visually efficient product.

Presentation

Competitors’ websites started to feel like Excel spreadsheets through complexity and content overload. Font usage was streamlined across the board to approachable yet decisive sans serifs, which we wanted to mirror.

These findings excited us because they presented opportunities to differentiate COTG from other products on the market. We wanted to push this even further and took a deeper dive into our out-of-category products which inspired our design explorations.

We found the missing pieces we were looking for. The out-of-category competitors used color with purpose and held consistent hierarchy. Layouts had the user in mind to provide information in a digestible manner by using familiar UI elements such as cards and soft drop shadows. The out-of-category competitors gave us the inspiration we needed to enhance the COTG experience.

Paving our design path

With all the information gathered it was time to develop our design principles. 

We took Mark’s Porsche analogy to heart; it spoke to what he wanted his brand to represent and stood for what the product should bring to users. With that in our back pocket and the analysis of the products on the market, we created our design principles to guide each designer in their individual style explorations.

A Sales Cult Classic

An iconic design of where visual quality, functionality and style converge. This visual design will be instantly recognizable to users to inspire goal attainment. It’s not merely an improvement but instead an integral tool set to the sales process.

Consistency Across Platforms

The suite will create a visual set of designs that seamlessly complement and strengthen productivity between platforms. The design system will stay consistent between platforms with standardized UI elements, color usage, interactions, and overall brand aesthetic.

Visually Aided Efficiency

Users should be able to focus on their work without visual interference or distractions. The design system will aid in efficiency while still being familiar enough to the user. We will achieve this through simplistic graphics, intuitive design patterns, and purposeful color usage.

These principles spoke to our end goal of creating a brand that users can’t work without, an iconic sales product. This was a turning point, as a team we took a project that at first was seemingly dry and gave it a new life. Our design principles pushed and excited us to move forward and create the best design we could bring to the table.

Creating divergent concepts

My goal was to come up with three divergent style explorations. I felt that options would help show the variety of ways to represent the brand, while still maintaining its voice and adhering to the design principles.

The Modern Traditional: I wanted to start by showing our client a site that would be on the traditional side, but giving it a more modern approach. I used a lot of white space to keep the interface clean and chose colors that brought a sense of trust and professionalism by using tones of blue and green.

The Illustrative Take: Mark responded positively to illustrations shown during our gut test and I wanted to show him they could be used with his products. To keep a professional appearance I used illustrative icons only. Since Mark is fond of blue, I took a softer approach to increase the site’s approachability.

The Dark UI: Marked loved dark interfaces and mentioned that at one point the mobile app had a dark interface, but he felt users weren’t responsive to it. I wanted to challenge him with this exploration—when done improperly, dark interfaces lead to a bad user experience. To give it a softer feel I added a slight grey gradient in the background. I used softer edges for cards and bright colors to aid in visibility so users can find the information they need for data.

Mark was over the moon with the design concepts. He felt the designs spoke to the brand in ways he didn’t think were possible. Unlike my previous client, #BUILTBYGIRLS, Mark didn’t have a clear decision or specific design direction he preferred, so I went with the dark interface to give COTG the iconic factor Mark sought. My design direction typically leans toward a clean white interface that uses a lot of colors; translating that into a dark interface was a direction I wanted to take on to develop as a designer.

Defining the user experience

The next step was to conduct desirability testing to see if the design I chose was in line with the user experience. At the start of the project we were only given tested wireframes for the mobile application, so we decided to focus our key screens for user testing to the marketing website and desktop application. Since we had no wireframes we knew that during user testing we would run into UX-focused feedback. Although getting some UX feedback would help our client in the long run, we still wanted to get the most out of the testing and prepared an outline to help guide us as we moderated each testing session. Our outline focused on the look and feel of each screen and asked questions that directed the user to UI elements we wanted feedback about.

 

While building out my key screens I focused on functionality. I understood that users are “on the go” and need an intuitive product requiring them to think about what needs to be done. Abiding by the design principles, I developed a design system for color, I created a palette that was to be used within the marketing site and a separate palette for data visualization, selecting each color based on its vibrancy and contrast with the dark UI.

 

During our user tests we encountered a predicament: the users sourced by our client were unreliable and of the nine users scheduled only two showed up. We had to adapt to the situation and reached out to our own network of individuals within the sales industry. To our luck, we were able to source an additional two testers.

Screen 1: Marketing Site

This is the first touch point for both new and returning users to log in. The site needs to proficiently explain to new users what COTG is.

Be transparent— users felt the overall language worked in some areas; however, for the hero image they wanted a more contextual explanation of the product instead of the gimmicky content.

Icons tell a story— both icons and images were displayed to get an idea of user preference. Users liked the use of icons over images. Furthermore, they felt it was important the icons spoke to the content they represented.

Get to the point— users felt the page was longer than they would like. They preferred short websites instead of a long scrolling page.

Screen 2: Dashboard

The dashboard is the first screen desktop application users interact with. It should convey the necessary information to give a user an idea of how their calls have been going.

Sleek design— although it was a dark interface, the overall aesthetic tested positively among users. They felt the concept was sleek and visually pleasing.

Color with purpose— the use of bright colors complemented the interface and gave users a better sense of what the information represented.

User-friendly— users felt the design focused on function and was intuitive on what could be done. They appreciated being able to see all the graphs at once and the overview cards.

Screen 3: Contacts

The contacts page holds the user’s list of contacts uploaded into the Call on the Go database. A user can organize their contacts into lists and see notes about how each call went.

Color coordination— users appreciated the color-coded list buttons and felt it helped make the contacts scannable.

Making it personal— users liked having the ability to add a photo. They felt when making a call being able to see the face of the person they speak with made it more personal.

Functionally focused— the user felt that the layout and the compartmentalized contacts made the page easy to follow.

Screen 4: Settings

This screen is where a user can make changes to their current account and access the API token.

Stark color difference— the delete account button was an abrupt addition and became an outlier in the color palette.

Giving the user control— since the dark UI is a preference, having the option to switch enhanced the platform and gave users the freedom to choose a layout that works best.

Easy to navigate— users liked the tabbed sections to keep the layout clean and simple.

Synthesizing the feedback from our desirability test gave us insights into what COTG users wanted out of the app.

The desirability test was insightful; users liked the dark interface and felt that the application was intuitive and easy to use. For the marketing site I displayed both stock images and iconography to better understand what users leaned toward, and to my surprise users preferred icons. I found this insight interesting, in my previous project I yielded the same result, which made me wonder why. I probed users with this question to gain further insight and found that users liked icons because they tell a story quickly. This was a key turning point, as predicted our users want to get information fast they do not want to look for or read more information, if a visual element can encompass the content it represent that was enough.

The pivot

Going into our second client meeting we were excited to present our insights from user testing and the potential screens for Mark’s site. As usual our client was ecstatic about our work thus far, however he had a UI kit that was previously purchased for the desktop application that he wanted to continue to use. This was difficult situation, our analysis and research of the market pushed us to steer away from the use of ui kits to keep COTG unique and ahead in the market. We discussed the research we had done and came up with a strategic plan to work within our client’s constraints. We decided to create an implementation roadmap for our client on how to apply changes to the platform in phases instead of working on screens for the mobile application. Since we were each going to create style guides, that would be enough information for a future designer to come in and apply it to the mobile application.

With our feedback from our desirability testing we went ahead and iterated on our screens to create prototypes for our final user testing sessions. Going into this week we decided to plan ahead and lined up retainer users for the following day in case we had a high dropout rate. We also prepared even further when creating our outline, since content copy was heavily remarked on last week we decided to all use the exact same content to ensure that users were not distracted by it this time. Another measure we took with the marketing site was to test the use of logos from companies that used the product over testimonials, one designer only showed testimonials, another showed only company logos, and I showed both. We wanted to see what user responded to, and to see the importance on where these elements were located on the screen. We tested 2 user flows the first was of a new user interacting with the marketing site and if they understood the multi-platform suite, and the second user flow was a returning user creating a contact list. By doing this we prepared ourselves to adapt to impromptu situations.

The prototype used for usability testing.

This yielded strong feedback. Users responded positively to my prototype the addition of company logos really spoke to the users on a trustworthy level. Many users felt the dark interface was sleek and brought a luxury sense to the brand. The use of standardized copy also helped focus users to the visual elements much more resulting in the exact feedback I needed to keep iterating on a better design. Being able to watch users interact with designs I came up with was rewarding, and helpful in my understanding of what was really important to them. I focused on functionality and color with purpose in my designs, I was able to watch how that helped the user and learn how I could further implement that system to take it to another level.

People know when they are getting sold to. It’s about transparency.

Linda, Sales Consultant

Our planning and methodology for tackling user tests for these session was a success. We tested 6 users that varied from past, existing, and potential users, and received valuable insight about the product. Users wanted a familiar approach to visiting the sight and appreciated modern elements, they felt it put the brand ahead of the market. Company logos were also important to users, they felt it showed transparency and legitimacy of the brand. Using standard copy across all three designs also helped us focus our users on the visual elements. For the desktop application, we still encountered major UX issues. Since we did not have wireframes, we built our designs off the current website. Users commented on numerous features, mainly customization of the dashboard and contacts sections. With these insights we reiterated our designs, and packaged our final deliverables to present to our client.

 

Final deliverables

I focused my iterations on the marketing website. Our client’s main concern was the disjoint communication about a multiplatform product and the marketing site is the first touch point for users to make this assumption. With that in mind, I prioritized the information on the website based on user feedback and took advantage of familiar design patterns to reduce the page scroll so users can find their information quickly. Navigation played a crucial role in information architecture and I accomplished this through a sticky navigation with clear calls to action. My end goal was to create a cohesive platform that mirrored throughout all three platforms. The style guide is a foundation for easy implementation for developers, but also for any future designers to come in and implement the design with future-facing platforms or marketing materials. Check out my final prototype and style guide to see the final results.

The final prototype after iterating on user feedback. I focused most of my changes to the marketing site as it was the top priority for Mark.

Since the marketing site was the first solution our client is able to implement our implementation roadmap focused on that in conjunction with our individual style guides. I did further research and discussed how best to accomplish this with developers. With that information we produced an overview of the roadmap and focused most the details in our style guide.

The implementation breaks down how to slowly make changes to the marketing site. Mark felt that with all the new assets it would be hard to drastically change the site on users and wanted to do so in small steps.

Next steps

We worked on products Call on the Go had no UX research done, and this was apparent throughout the process. The main takeaway we had and learned a lot about was the importance of UX research for the success of the product. Between the two user testing sessions we adapted to the copy concern we initially ran into by standardizing it across all three design concepts, but through testing realized how essential having the appropriate copy was to users. From our initial kick-off, Mark was adamant about ensuring the marketing site portrayed that this was a multiplatform product. Through testing this was still an issue we ran into conveying to users, we felt that it could be resolved with appropriate copy, but also an opportunity to improve user onboarding.

The desktop application was difficult to test with little to no research at hand. Further UX research and testing would immensely benefit the experience and introduce a better understanding of how current users interact with the platform. Lastly, users loved having control over what they saw. Customization of features in the desktop application was a sentiment brought up amongst all users as their needs change depending on their industry.

 

By implementing these next steps it will achieve Mark’s goal of creating an iconic product that a salesperson would need in their toolkit.

What I learned

Step away from your comfort zone.

I don’t come from a sales background if anything it was an area I intentionally would steer clear of— so this project was a challenge to wrap my head around. By creating for an industry I was not familiar with kept me on my toes and improved my communication with the stakeholder. Being cognizant of my own constraints and asking the right questions was vital to my understanding of how best approach my designs. My transparency and curiosity showed Mark my genuine interest in working with the user and that helped create an open communication platform for us.

I also took a leap of faith when I decided to pursue the dark interface. Our client showed interest in it and I took the opportunity to explore it for myself as a designer. The experience was rewarding and I learned a lot about the world of dark interfaces. I have always been someone that appreciates a challenge and prefer to be challenged in the work I do, applying this as a designer has been impactful in my growth and skill development. I was pushed to do more outside research and inspiration to better understand the industry standards for successful implementation of a dark interface.

 

The foundation isn’t always there.

Going into this project we only had wireframes to the mobile application. We ended up only focusing on the elements that did not have the wireframes. This led us to have to grab at thin air to find the answers we needed to create interfaces with the user in mind. That was ok! Design is dirty, sometimes you have to work with what you have and test the concept to see if you were right, it’s the process of research and finding answers as a designer.

 

Pivots are inevitable, relax.

The pivot we experienced was a key moment in realizing how important applicable all experiences I have until my starting point as a designer are to being a designer. It is the beauty of real-world experience, it something that cannot be taught in a textbook and is what puts me ahead of curve in being a well-rounded designer.

 

Teamwork is essential in design.

I have always valued working collaboratively with other individuals. Seeing others points of view and getting ideas I would not have thought of is always exhilarating. However, this project gave it another meaning for me. As UI designers we tend to bury our heads in our sketch files and create and iterate until our fingers fall off. To make this project successful my team and I had to work together to successfully achieve the insight and produce the concepts we designed. Although we collaborated a lot, our individual deliverables were divergent and strong concepts for our client. They were so strong he plans on implementing all three and testing them on his site in the future get even more insights.

I learned a lot about my process as a designer in this project and pushed myself to learn more and collaborate to produce an impactful product. I am proud of the designs I created and am excited to see the final implementation.

Sarah is not only a wonderful communicator, a pleasure to work with, has a great work ethic, awesome attitude and creative, but her design talent is top notch, especially for UI and UX, and her insights are priceless. Sarah did a fantastic job helping me with CallOnTheGo’s design.

Mark Michuda, CEO of Call on the Go

  • LinkedIn
  • Twitteer
  • Instagram
  • Dribbble
I'D LOVE TO HEAR FROM YOU

Interested in working together or grabbing coffee

Hit me up at

© 2019 by Sarah Sharara