Outty - Move, Meet, and Mingle

Project Overview

Began as a 2 week hackathon-style sprint meant to channel our creativity and have fun, without external constraints. It evolved into a 2.5-month project, allowing me to experiment with new interaction paradigms, innovate on features, and flex my prototyping skills. All to transform a mere idea into a comprehensive experience.

‍

Outcome

Outty is a platform that facilitates real-time interactions with new people in your immediate surroundings, inspired by the communal spirit of Pokémon Go and the proximity-based data sharing of Airdrop.

A user builds a profile detailing their interests and media preferences, then checks into a location. Using this data, Outty pairs them with individuals having aligned personalities, media interests, or hobbies. Compatibility is visually represented through icons and gradients consistently throughout the user experience.

‍

‍

My Responsibilities

Within a three-member team, I took the lead in shaping the interaction design alongside a senior interaction designer. By the end of two weeks, I was the sole active member. I had daily check-ins with the senior designer to present my work, receive feedback, and ask a ton of questions. This close collaboration provided me with invaluable mentorship that allowed me to hone in and expand my interaction design skills.

The visual designer on our team established a strong visual identity the first two weeks. This foundation allowed me to further enhance my UI skills as I continued the project.

‍

Our Process:  Figure out(ty) what in the world to make!

‍

Given the freedom to design any experience, our concepting experience got a little ~weird~ as we took inspiration from Black Mirror and current technologies that exist.

‍

After a day of brain storming, we landed on the idea to connect with new people, but not from the comfort of your couch. Our team wanted users of Outty to be already out and about while searching for a companion they are compatible with.

‍

Detailing Product Requirements & User Flow

A platform to meet compatible strangers in real time requires user engagement with profiles, meeting arrangements, scheduling, messaging, and safety measures. We determined which parts of the user flow were crucial to design and which features we were most excited to develop.

‍

‍

Converged Team Vision

We envisioned the app's layout to evoke a sense of spaciousness and exploration, leading us to choose a "bubbles" theme. Visually, a dark mode paired with bright colors and gradients provided a modern and trendy look that would also be easy on the eyes during a fun night out.

‍

Explore Page: From Sketch to Final Look

Final Interaction: Drag around to explore and tap to peak at a profile preview

‍

‍

‍

Interaction Design Challenges

‍

1. View Profile Experience: Scroll vs Tap

Initially, I designed the profile page as a single scrollable section. However, as we incorporated more customized content, the length became overwhelming. This led us to explore various tap interactions for navigating the profile. For example, clicking on icons related to media or hobbies would change the displayed content- but that didn't feel like we were taking the users through an intentional journey of what the profile is about.

Inspired by popular social media behaviors, like Snapchat and Instagram Stories, we designed the profile experience to feed pieces of the profile little by little by tapping back and forth. This interaction allow users to either skim over a profile or delve deeper at their leisure.

‍

‍

In subsequent designs, I included an option for users to bypass the full profile view and directly send an invite, by adding a "send invite" CTA that persists.

‍

Tap Interaction: Tap to view each page of the profile or click CTA to send an invite immediately

‍

‍

2.  Design of Invitations

Exploring interactions to view your received and matched invites: Tapping on a profile, swiping up/down, or swiping through a carousel. To allow users to easily move back and forth to view invitation cards without requiring to accept or decline an invite at first glance, I designed a carousel with dots beneath to indicate where in the sequence the user is.

‍

‍

Iterating on the card design for a "Received" invite, I wrestled with information hierarchy as well as wanting a user to feel intrigued with the suggested destination. I pursued the card design that features an image of the suggested location, along with the star rating.

‍

‍

The personality gradient is a consistent motif throughout the platform. I designed the "Matched" profile cards to highlight the personality gradients as part of its visual design.

‍

Final Screens: Choosing Version 3

Interaction: Slide to view invites and tap to switch invite category

‍

‍

‍

Additional Features

‍

Keep Your Profile Updated

Important to keep your profile up to date and accurate so Outty can find the best matches for you.

Interaction: Adding interests to your profile

‍

‍

‍

Set Your Status

Log in and immediately check in to a location. Let the people know where you're at, what you're up to, and who you're with.

‍

Interaction: Log in leads you to set status

Inspired by ride-sharing applications. Knowing a user's location. how can the design lead the user to check in and set their status.