Platform Mobile App
Service Customer Support
Tool Adobe Xd
TALK.TIME - MESSAGING APP
Disclaimer: All the names and screenshots have been modified to comply with my non-disclosure agreement. This case study reflects my own opinions, not necessarily the view of the company.
OVERVIEW
Messaging app for customer service is not something new, neither it’s gonna get old any time soon, as the need for connection around the clock is greater than ever.
talk.time is a lightweight customer messaging app which delivers real-time messages from the website directly to cellphone’s screen of the website owners. The target audience is SMB owners who have already subscribed the marketing package from RocketMarket. Once the talk.time app is installed on the phone, subscribers’ contact data are pulled in and communication starts to be streamlined.
THE PROJECT
As product designer, I’m assigned to design a simple, user-centric message app that our end users can quickly jump in and use at ease. I also need to anticipate potential problems and come up with feasible solutions.
I was involved from the beginning and worked closely with the product team to produce sketches, wireframes and hi-fi prototypes.
ORIGINAL STATE
The messaging feature has already resided on the web version of RocketMarket. Any customer communication on the website is synced back into RocketMarket and manageable there. Introduction of the feature as a mobile app can provide greater flexibility and customer retention.
THE PREP
CUSTOMER JOURNEY
To develop a strong focus on what our end users really are, I started working on the Customer Journey.
At the same time, I drafted an app flow. The developers are more familiar with the app flow so they can identity the missing elements, which later are added to the journey and makes the picture much clearer.
WIREFRAME MOCKUP
After multiple iterations of feedback and revision between the product team and customer success team, we make it clear that the focus is about message and contact, so there are 3 main functionalities: Messages - Contacts - Settings
WORK BREAKDOWN
I chopped the wireframe above into 4 major pieces of work:
-
UI Components Library
-
Sign In
-
Messages
-
Contacts
-
Settings
THE WORK
UI COMPONENTS LIBRARY
The team decided to build a separate UI library for the mobile app since the framework used for the web app is tremendously flawed and soon to be replaced. Following the Atomic design, I started the library from the ground up.
SIGN IN SCREENS
We determined this app as MVP and we placed emphasis on instant install-and-use, so there is only a single Sign-in option using either the email or phone number users have registered in RocketMarket. We validated and secured the login via the OTP.
MESSAGES SCREENS
I did some researches on some well-liked message apps such as iMessage, WhatsApp and Telegram. As they are gaining only more popularity, I developed the templates following some of their UI pattern, there is no point inventing the wheel again and it also saves our end users from a long learning curve.
CONTACTS SCREENS
To support the scannability, the contact list is prominently sectioned in alphabetical order, with a minimalist touch. Each contact consists of 2 lines, one as primary text for displaying name, the other more subtle for displaying the metadata - email address.
SETTINGS SCREENS
Initially, we drew up quite a long list of the settings/configurations which we observed from https://uigarage.net. Then the team will debate on each setting if it’s necessary or not and why so. The list was cut in half.
In the second round, a meeting between the Product team and Customer Support team is conducted to refine the list further, so that only the basic and most crucial settings are made their way into the screen.
FINALIZATION AND HAND-OVER
After finishing the hi-fi prototype, I presented it to the Product Owner, Marketing and Development teams, and let them try interacting with the prototype.
After discussing back and forth, everyone was happy with the hi-fi prototype and I handed over the design specs to the developers via Zeplin.
Working on such a project provides me valuable insights into how a messaging application works in practice, and UX logics behind the screens which I usually take it for grant.
I used to find customer journey challenging (still does, to a lesser extent) as the first step in the design process, but as soon as I get the hang of it, the benefits definitely outweigh the hassle.