woman-holding-iphone-xs-mockup-perspecti

Hey,
Down Here!

Redefining what it means to hangout | Let's Hang

Let's Hang was an app that a college friend and I had. It's an event creation app that redefines what it means to hang out. There is plenty to discover, and there is no better way to explore than with others. Unfortunately, we never got to it and ended splitting up.

 

After five years, graduating from college and completing my UX/UI Design Course, this was a perfect opportunity to show my growth.

Wanna Hangout? 🤙

First pic.jpg

Roles

UX Researcher

UI Designer

Interaction Designer 

Programs Used 

Google Analytics 

Affinity Publisher

Adobe Suite

Figma

Timeline

3 Weeks

What's the plan stan?

(1) Research

- Competitive Analysis
- User Surveys

(2) Structure

- Product Roadmap 

- Sitemap

- User Flows 

(3) Design 

- Initial Prototype

- Rapid Design Prototyping
- High Fidelity Wireframe

-UI Kit

(4) Iterate

- Usability Findings
- Final Product

 
 

"Supposing is good, but [researching] is better" - Mark Twain

What are others doing? 🤷

At the time, my research showed that more cities are putting stricter stay-at-home orders, making people turned to video chatting apps/programs, such as zoom, google hangouts, etc. To gain a better understanding, I looked at some activity-focused apps such as Bunch and Houseparty. 

Why are people using these apps?

  1. People need our social interaction; how might we bring that seem physical excitement onto a digital platform?

  2. Drawn to apps that focused more on the activity than the chat function.

Houseparty

Karaoke, engages the users, in a fun & simple way

Users can send emojis or reactions.

Can see the people whom they are playing against (social interaction)

Bunch

How has Covid affected the way we interact?

My thought process behind conducting user surveys was to understand how staying at home has affected people's social iteration. Everyone deals with it differently. The survey helped tremendously with understanding what people are currently doing and figuring out which features and/or pain points they were having. 

What we learned

  1.  People miss social interacting with one another

  2.  Users gravitate to the path of least resistance (how easy it is to use)

  3. How might we make it easier to schedule a hangout that fits with everybody's schedules?

  4. How might we make the video calling experience one that people focus more on the activity?

 

From our research, HMW structure out our business, user, and technical goals?

What are our (people & app) priorities?

I prioritized what my research showed me, listing out all the different screens and possible ways of going about it. Starting b r o a d helped me see what areas I need to address, then I could sort out which features have more importance. This enabled me to have a clearer set of tasks to achieve.

Challenge Accepted:

Figuring out how I could incorporate all these features while having the video chat/chat elements into a mobile interface.

Product Roadmap

How do we give enough information while making function and look nice?

*I later narrowed it down to Dashboard, hangtime creation, and a couple of games due to time constraints.

Tuser Flow.png

Yes, No, Alternate Flow

  • Wanted to understand:

    • What's the user trying to accomplish with this product?

    • How can the product help them accomplish this goal? 

  • Furthermore, I focused on the activities, and hangtime creation 

 

Design is 🤔 made visual.

thinking

Back in 2017, I attempted to make some GUI's.

Back in the dark ages, I used Affinity Designer to sketch out my GUIs. When sketching, my brain works by idea dumping.

" When you stick on an old tap, it runs out muddy water for about a minute, and then it starts flowing clean water."

- Ed Sheeran

My team and I will have "muddy water" to rinse out, but it enables us to find ideas both in and outside of the hammock.

I'm dyslexic; I tackle obstacles through visual & kinesthetic experiences. 

As UX designers we are constantly trying to come up with ways to create a seamless user experience. I have the dyslexia challenge and opportunity. I think more in pictures than words, quickly finding I excelled best through visual learning growing up..  

Rapid Design Prototype

What's going on in Louis' 🧠:

Doing it this way allows me to easily get my ideas onto paper because there will be less remember and look at this design. When prototyping, I first worry about the function. Then once that works, the form will come—function over form. 

Big vs. mini Onboarding Process 

High-Fidelity Wireframe

When conducted research skype stood out because they did in their onboarding process as fake video calls. By using an activity to test out if the user's cameras work, it improved the app's learnability and memorability. 

Also found that apps with a familiar face/helper (like a mini onboard) helped improve the user's learnability by 40%. Hence adding "Sloth." 

Hello,
I'm Sloth!

UI KIT.png

UI Kit

I decided to keep the colors in the blues and magentas because they are soothing colors to the eye, and many companies are using those colors. I didn't focus much on the logo because I felt that the sloth by itself represented the brand enough.

 

Information & iteration are the 🔑s to successful design.

What did the users like and HMW improve our prototype?

5 users completed the test

Gain points:

They all like the sloth's friendliness and how it would pop up when a new function was introduced.

  • The app flowed from one screen to the next, especially on the yoga class.

  • Most thought it was a great way to make yoga fun.

    • "I would love to see that sort of interaction in more apps."

Pain points:

  1. The user's screen should be larger on the yoga class to see what they are doing.

  2. The movie page should be an extension of the movie. Everyone has the ability to pause the movie, but it should be able to connect to other devices and have the phone as a connector.

  3. Find another way to integrate more games or other activities (outdoors)

final product.jpg

Let's hangout! 🤙

 

Sign Up

Through the use of social media, the user can easily sign up and connect with friends from the get-go. Allowing them to build friendships and have a base behind them. 

Gamifying (🎮) Onboarding

For the onboarding process, we designed a Skype-like experience where using a fake activity allows new users to make sure settings are working before the real deal; ensuring learnability. It's a free practice before the main race. This was a great opportunity to bringing in a friendly face that the user can connect to. This helper pops up along the way, guiding the user's experience.

Hangtime Creation

When creating a hangtime, everyone's schedules must be accounted for to ensure that everyone can hang out. Our goal was to create an intuitive layout that enables the user to create hangtimes in no time!

Movie (🎬) Game

Movie + Game integration = endless fun. Our main focus was to focus on the activity versus the video chat. Shown is a 🍹 game that will be automatically made to whichever movie.

 

Other possible games could be an interactive movie where the people in the event can choose a specific story. The sky the limit!

Yoga (🧘) Class

Namaste. Welcome to the Let's Hang yoga class! Compete versus others to see who will rise to the top as the Yoga Master. By completing certain poses, you will be rewarded points. The more points, the better you will do. Whom will it be?

Let's Hang 🦥!!

Redefining Hangouts