top of page

Platform  Mobile App

Service Customer Support

Tool  Adobe Xd


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.


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.


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.

talk.time - messaging app

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.



To develop a strong focus on what our end users really are, I started working on the Customer Journey. 

Customer journey
App flow

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.



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

Wireframe mockup


I chopped the wireframe above into 4 major pieces of work:

  1. UI Components Library

  2. Sign In

  3. Messages

  4. Contacts

  5. Settings

Work breakdown


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. 

Atomic design illustration
talk.time UI Library


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. 

Sign in 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.

Messages 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.

Contacts screens


Initially, we drew up quite a long list of the settings/configurations which we observed from 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.

Settings screens


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.

Design handoff to 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.

bottom of page