Launched: 2015
Duration: ~3 months

Qosmy iOS Mobile App.


Background

Qosmy combines real-time communication and real-time feedback to build a customer service ratings and reviews platform, which connects businesses to social consumers in real-time. Consumer ratings and reviews would enable businesses to keep a pulse on agent performance and improve customer satisfaction.


Overview

As the visual designer, I worked with Qosmy's founder and lead mobile developer to design Qosmy's new communications platform for customer service feedback in the form of an iOS mobile app.

UX First

The core task flow was to design a seamless customer service experience that enabled people to:

  1. Search for a business' customer service number,
  2. Dial the customer service number,
  3. When the call is ended, the user rates and reviews the call experience, and can share the review with their social network.

With a set of wireframes already in place, we revisited and iterated on them to ensure we all understood the experience and intended interactions, which also surfaced questions and sticky points that may not have been previously addressed. Each intended interaction and feature introduced throughout the app was vetted by us to ensure it connected to the value and needs of our users.


Search Flow

Search experience from an empty state to entering a keyword, using the native iOS keypad, where results are loaded upon data entry. Results are bucketed with the most popular, national listings at the top and nearby/local listings below. To refine their search, users can sort and filter search criteria by category.


Dialing Flow

When a business is selected from the search results page, users are launched to that business' profile page where they can choose to begin their call experience. The biz profile page also includes the main customer service phone number, link to view other ratings/reviews of that business, and link to set a call reminder.


Rating & Review

After a call, users can launch into rating and reviewing their customer service experience. For rating, users answer simple Yes and No questions where a Yes response equals a star rating.

Color

Qosmy's “international orange” was the foundational color to develop the mobile app's overall color palette. To strike a balance between simple sophistication (harmony) and vibrancy (contrast), we layered grays with orange and a dominant white backdrop throughout different screens to create neutrality; and accents of blue, greens and yellows brought focus to call to actions.


Typography

When choosing typography, I needed to consider legibility, weights, special characters and license. So I decided to go with Open Sans as it has many weight options, is very clean and crisp and works well with flat color palettes. The font plays well with Qosmy's brand and on small screens, the font is legible, creating contrast and visual hierarchy of content.


Navigation

To bring focus to the main search task flow, as well as give users the ability to quickly jump to other relevant sections like Reviews, Calls, Reminders and More, we designed a custom mobile tab bar. The main Search function is placed prominently in the center with color and slight shadowing applied to draw the eye to it. And inactive nav items are muted gray to bring contrast to the selected nav item, enabling users to quickly know where they are located.


Delight

To inject delight and ease of use into the rating experience, we designed toggle buttons to support the intended interaction for answering Yes and No questions; star badges were designed that would animate based on the user's Yes and No selection; toggle sliders to easily turn social sharing on or off; and a custom sentiment control to allow users to share how they felt about a business.

Result

The result is a bright, clean, and visually engaging design built for giving customers a platform to be heard. Visual design artifacts over the course of the project included ~70 Photoshop files in both 750x1334 and 1080x1920 resolutions of each UI.

Like what you see?

Lets start talkin'

Copyright © 2013-17 Kat Estacio. All Rights Reserved.