LOOPiN | Product Design

An App for Planning activities in a short time

My Role

Product Thinking, User Persona & Journey, User Flow, Wireframing, Visual Design, Prototyping and testing

Project Summary

Isn’t it hard to send individual text messages or create group chats to plan an activity on short notice? People can easily miss key points to an activity in group conversations where information gets lost in chat. “Where is the location again?” This might sound familiar.

The Goal

The goal of the LOOPiN app was to reduce the redundant conversations in group chats and keep planning an activity to the minimum by simplifying the journey for the users.

Challenge

I facilitated a workshop by bringing the stakeholders to share their assumptions and insights regarding the “Problem Statement” The major challenge was the difficulty to bring together a small group of people in a short amount of time. Thinking of young adults, tourists, people who are living in major cities who want to find an activity spontaneously, or bring a few friends together.

Solution

To create a user-centric design, it’s always important to focus on users' behavior, thoughts and feelings. For the ideation phase, I created a user persona and user journey in order to create a foundation for our brainstorming on the product’s key features. A user flow, sketching, and wireframing helped the stakeholders to visualize the idea.

User Persona & Journey

It’s always important to focus on a group of people as you’re designing. Creating a user persona would help not just designers, but also the stakeholders and developers to “empathize” with the users and remind themselves that they’re designing, planning, and developing a product for them.

I introduce two types of users based on listed user target, defined goals for them, and listed the primary activities they would go through in the app:

Create an activity with the least amount of effort
Share it with friends
Track who's attending the activity
Update participants with major information about the activity

We break down these activities into sub-activities that the user will have in their journey through the product. For each section, we went through how our presumed users would interact with touchpoints, how they would feel, and what their thoughts were.

Ideate

"Opportunities" are where we came up with potential features and solutions that could improve our users' feelings and solve their problems and challenges. We listed all the possible features and collaborate with the product manager and engineer to explore their feasibility and whether if they're aligned with our users' need and business goal.

User Flow & Wireframing

User flow and information architecture understood the hierarchy of information and how users would go through a journey using our app. The outcome was the initial wireframe of the main activities that users will go through.

Visual Design

In order to prepare the prototype for usability testing, a high-fidelity version was created by adding the visual design, colors, and typography. Following are a few dominant views of the app with a detailed description of the feature and section.

High-Fidelity Prototype

In order to prepare the prototype for usability testing, a high-fidelity version was created by adding the visual design, colors, and typography.

Usability Testing

I performed a series of usability testing with selected participants by the stakeholder. I briefed my testers and asked them to go through a few major tasks, “Create an Activity”, "Add a friend", and “Share an Activity"

I asked users to “Think out loud” as they were going through each task. In this way, I could also listen to their trains of thought as they’re tapping/sliding on the prototype. I took notes and recorded videos on a few tasks to better analyze them later on.

I listed all the changes and revised the mockup. In the next stage, I continued the user testing process in an online form.

Final Delivery

The very last stage was to apply all the changes from the user testing and other feedback and complete the high fidelity version. I completed the UI elements from color and icons; it improved the interactions and transitions based on the feedback. I've been constantly in touch with the developer to ensure all the features are feasible to be implemented. I delivered the final product via Figma platform. Check out the interactive prototype here or download the app Google Play and App Store.