Design Process

1. Discover

Since the project targets existing Time Out users, we conducted a survey to better gauge how the target demographic spend their leisure time with alone/with friends, find recommendations, and their behaviors around it.

We interviewed respondents who read Time Out, and we discovered the following patterns:

  • No one uses the Time Out application, even though some are aware that it exists.
  • Recommendations & events are shared with a screenshot or a URL via WhatsApp.
  • Users voice their frustration with Time Out current desktop and mobile website as “too crowded”.
Time Out readers find the interface crowded with noise

Most users admit that they use Time Out because it resourceful, however they leave the site and browse on other recommendation sites like The Nudge to find further information about the place/events they are interested in as the Time Out is flooded with noise.


Based on the survey results, we created Sami as our persona to represent our target demographic.

Sami — our users’ persona

2. Define

Problem Statement & Scenario:

Sami needs an easy way to find inspiration of what to do in her free time and be able to share the activity with her friend to arrange a up, in order to have a good time this weekend.

We decided to build a responsive website instead of a native application as we learned the following from our research:

  1. Besides surfing the web on desktop, users search for things to do on the browser on their phone, while they are on the go.
  2. They do not use the Time Out application.

3. Develop

We then conducted design studio to find solution to help Sami arrange a meet up with her friends.

Design Studios with the team

Originally, we defined Team Up as a meet up between individuals/groups with the goal to help Sami arrange a -to- meet up with friends/colleagues. After several ideations we still couldn’t settle on a design that meets Sami’s need. We realized that our definition for Team Up was not specific enough. We didn’t know what kind of meet ups are we setting for our users? The realization led us to question:

What is the motivation that for a person to arrange a meet up with somebody?

As a result, we didn’t limit Team Up only to the scenario of meeting with friends on the weekend, as users, in -, do experience several meet up scenarios — drink with friends, dinner with colleagues, concert with her clique, or joining a new group with a common interest on an activity. could team up with their friends on any kind of occasions. Despite framing a flow around a specific occasion they could be in, we created 3 user flows “Share/ Invite/ Join” Team Up, based on the aforementioned understanding of the multiple facets to a person’s life. As a result, the three tasks have become Team Up’s primary CTA’s that initiate a face-to-face meet up.

Share/Invite/Join — helped define “Team Up” and highlighted the kind of meet ups Sami could have.

Out of the 3 flows we discovered, we decided to focus on the path of Share. Our rationale is as follow:

  1. Share is the primary behavioral engagement to how users currently interacts with the contents they come across; they share post via WhatsApp/Facebook Messenger in the form of a screenshot or url.
  2. Also, Share overlaps with Invite as it initiates an invitation.

Deep dive into Sami’s Share user journey:

User journey — Share: Screenshot has no engagement, and url isn’t inviting.

Important information to help aid decision making such as date & time, venue, event/recommendation details, and pictures are dispersed in the chatroom. Users find themselves frustrated having to scroll through the chat history to refer back to those details. Hence, our concept of Team Up’s Share feature is to help elevate users’ sharing process by an instant gratification for them to engage and meet face to face.

4. Deliver

After deciding on our design concept, we then proceeded to work on the visual design.

Time Out Mood board & Style Guide

As for the visuals, Team Up is a new feature introduced as a new way to engage users and to leverage Time Out current service, therefore the visuals must be consistent with the brand’s current design.

Moving forward in the design process,

we conducted 3 rounds of usability testings with 5 Time Out readers/round. We tested the prototype and conducted the following iterations:


“What is Team Up?”

Team Up Button

In the paper prototype we named the CTA as Team Up as we wanted to have a direct association with the new concept Time Out is launching (1). However, after the initial round of user testing, we found that users were confused by the term “Team Up” and they didn’t understand what the button does. Therefore, we added an instruction on top of the button to explain that you can “Team up by inviting your friends” (2). Yet, users were still reluctant to press the button as it was not inviting. Hence we changed Team Up to Invite Friends, a straightforward CTA (3).

Another iteration on this screen was the addition of “Go to Time out app” (3). From our research, users did not know that Time Out has an application nor do they use the app even though they are aware of it. Since the application has been apart of the business but users were unaware of it, we wanted to raise awareness and engagement to the existing application. As a result, we added another CTA — “Go to TimeOut app” so users can be aware that Time Out has a mobile application. Also, it might been convenient for some users to view it on the app if it suits their preference.


“I filter events by location, cost, date”

The event list in the low fidelity prototype was a list of events curated by Time Out to their users once they click on a category they see on the homepage, for example Best Halloween Events.

Since there are multiple events within a category, and users already have their decision criteria in mind when it comes to searching for events, such as time, location, and cost. After learning that users look through the list with those criteria in mind, we added a filter to help them find the results they look for as searching through a list of events with no specificity is tedious and time consuming.


“Where am I?”

During the usability tests, when users clicked on “Invite Friends”, they were explicitly confused as the prototype directly took them to the platform they shared to such as WhatsApp, with no screen transition (1). A user said, “Am I still on Time Out?”

To eliminate the feeling that they are lost in the process and confusion, we added a transition message which says “Awesome, you are now being redirected to WhatsApp” to give them a cue that they are being redirected to another platform (2).


“How do I go back to the page I was on?”

During the usability tests, users were stuck with finding their way back to browsing the event they were on. Although iPhones have a button to go back to the previous app, the feature is device specific, and it is not applicable for other Time Out readers who use different devices. Taking the preceding points into consideration, we realized that the user flow in the earlier prototype was incomplete as there was no way to loop the users back to the app. Thus, in this iteration, we added a “Back to Time out” to help users continue browsing the event.


Here’s the walkthrough the product:


We believe that we are able to integrate real-time communication between users by capitalizing on readers’ behavioral convention that they use WhatsApp as their main communication platform.

Although the client wanted to build a real time communication between users in the Time Out app, our research found that the users’ behavior of communication does not support the idea. They are not interested in downloading the application since Time Out website is easily accessible on the web. Asking the users to communicate out of their conventional messaging app would mean higher barrier to building engagement [including arranging face to face meetings] with their friends as it limits sharing only to people with who use the Time Out application.

Source link


Please enter your comment!
Please enter your name here