Reminder | Tango

UI/UX project

Conversation is all about content, and Tango value content a lot regardless of text, picture, video, music, or stickers. The problem here is people always forget, and that often cause more problems. Introducing Tango Reminders, a fast and simple way to keep people reminded of important events, tasks, or a quick favor.

Goal
It is our goal to provide our user a new option to set up quick reminders for life events. 

Smart Reminder:

  • Reminder others of important event: Birthday, Graduation, New Phone number, etc

  • Reminder for self: Game show time, pick up something on the way home

  • View of all Reminders: a list view in Chat settings page.

Tech:
Keyword matching: Date, Time frame, Action
Personal information: Birthday, Address update, achievements

Format:
Conversational Design

How it works
1 to 1: 
Example 1: a reminder from A to B, asking B to bring milk on the way home.
Example 2: a reminder to both parties whose share same plan.

1 to Multiple:
Example 1: reminder for users in the same group of doing project together. (teacher to students, bring homework/class reschedule)
Example 2: reminder for users in the same group of continuing the plan of doing something together.

1 to All:
Example 1: a reminder of A’s Birthday to all friends from System message.
Example 2: a reminder of A’s life event (i.e. Graduation etc) to all friends from System message.

Sample flowchart for Reminder:
I created a flowchart showcase in difference scenario for users to utilize this feature from beginning to end. There are two entry points where a user can either set a reminder with ongoing message content or directly create a reminder then input the content. There also needs to be a place to review and update existing reminders, along with the option to delete them.

The wireframe below showcases the entry point where a user can start a reminder from the options icon at the upper right corner of the chat history page. It is a bit hidden from users depends on how often people will need to set reminders. Another entry point by long tap the message itself to trigger the settings, which skip the step user has to input the reminder content.

We also explored with adding another row of input suggestion on top of the keyboard, where “Set Reminder” option will be available when a user started typing. Tap on this row will trigger the time settings followed by content input option and recipient list.

Android has a default component for time picker which is pretty cool. It shows up as an analog watch interface, where a user can simply tap on the hour and minutes to set the time. Compared with IOS default time picker, it’s fancier but lacks the ability to pick the date for reminder quickly.

We also explored a couple more interface prototype with more advanced settings. Features including message content, recipients list, time of the day, repeat, even calendar give user more choice and options. Along with new UI components for how it would look when the user finish setting the reminder and sent it out to a recipient.

When I was finalizing this flowchart, one question I kept asking myself was, am I making this feature too complicated?
Reminder to me should be a nice add-on feature for our users whenever they need to use it. It shouldn’t be more than a couple of steps. If something requires multiple steps to configure every aspect, then it should be done other than using a quick reminder.

Slim 
I decided to cut this project to a slim version where the Reminder fulfills user’s need without getting too bulky. I deleted the step for the user to input reminder content, removed calendar, also no more repeat option. Everything works together for one goal which is one reminder for one thing at one time.

I created a series of new wireframes to test some detail UI tweak. In this case, the Reminder icon will pop up on top of chat input bar when a user is texting, tapping on it will trigger the time settings. The reminder will send out as a regular message with system notification right below it showing it’s a reminder message with underlined link for reminder creator to edit it when necessary.

High-fidelity mock-up pages on adding a new panel in “chat info” for the reminder to show all the reminders in a list view, users can check, update, and delete each entry.

Different ideas on how reminder would look like to recipient showing below. The first two utilized Tango orange to bring its visibility, followed by two cleaner styles.

After A/B testing and discussion with developers, we finalized UI for each step of Reminder and presented with high-fidelity mock-up, introducing new components within a clean flow:

Result

Android version:

IOS version:

Reminder

Conversation is all about content, and Tango value content a lot regardless of text, picture, video, music, or stickers. The problem here is people always forget, and that often cause more problems. Introducing Tango Reminders, a fast and simple way to keep people reminded of important events, tasks, or a quick favor.

Project details

Work:   Tango Me
Category: Product Design
Date:     Augest 2016
Web:     www.tango.me