UI design and front-end implementation of a Call Center Shopify app

Call Center Shopify App

Project

Call Center was a Shopify app that enables calls and SMS messages right from Shopify shop using Twilio number. This was a product I co-created with a software engineer, Scott Schecter at Schecter & Co.

For small business owners who use Shopify for their store front, the cost of providing customer support phone calls could be a costly and daunting task. We created a Call Center Shopify app to make it easy for shop owners to use a Twilio number as their business phone number. This allowed them to communicate with their customers through phone calls and SMS messages worldwide for a low-cost. The app also provided callbot IVR and SMS chatbot features to handle voice and text message responses automatically.

I designed the user interface and implemented the front-end code for the app and a product landing page. I also designed graphic pieces to be used on the web.

Involment
UI design
Front-end code
Shopify app
Date

2016 - 2017

Purchase a Twilio number

After installing the Call Center app on the Shopify store, the shop owner can choose the country of origin of their store and purchase a Twilio number.

Call Center Shopify App
Ability to search for the right Twilio number

The shop owners can search the phone number with voice and SMS capabilities by using a * as a wildcard indicator for the preferred local or toll-free phone number.

Call Center Shopify App
Dashboard

The shop owners had the ability to change the Twilio number and a receiving number. They can see the order number and make a call or send a message to their customers right from the dashboard.

Call Center Shopify App
Make a call

When making a call, shop owners can directly enter a phone number and type in a call connecting message. This message will be spoken or played to the caller when connecting the call. The URL for an audio file to be played can be entered as well. Supported audio types are: mp3, wav, aiff, gsm, or μ-law. The app will remember this value for all future calls and can be changed any time.

Call Center Shopify App
Send a message

To send a message, the phone number and a message can be put in and sent to a recipient.

Call Center Shopify App
Chat view message

A familiar messaging interface will be presented when clicking on the SMS button from the dashboard. The SMS message can be sent to selected customers as well as view a history of previous messages sent and received to that customer. This screen automatically updates with new messages as they are received.

Call Center Shopify App
Callbot

The callbot IVR can be set to answer incoming voice calls and allow callers to make selections from their phone keypad based on the options provided by spoken text or recorded audio messages.

Call Center Shopify App
Call Center Shopify App
Chatbot

The chatbot message can be set to automatically reply to incoming SMS messages if the message has the chatbot phrase included. If the incoming SMS message does not contain a chatbot phrase, the SMS message is delivered to the receiving phone number as normal.

Call Center Shopify App
Store hours settings

The auto-reply voice message can be set to have the Call Center app say a message, play an audio file, or dial another number in response to the incoming calls outside of the store hours.

The auto-reply text message can also be set to respond to SMS messages coming in when the store is closed.


Landing page

Call Center Shopify App

Web graphic

Call Center Shopify App
Call Center Shopify App
Call Center Shopify App
Call Center Shopify App
Call Center Shopify App Call Center Shopify App