HANGTIGHT

Revamping onboarding flow for live app

Not your regular meetup. It's synchronicity.

Hangtight (updated name) is a social / lifestyle app with existing volume of users. The company decided to relaunch with new features and branding in 2023. As a team of four, we were assigned to redesign the current on-boarding flow and provide branding ideas for the new launch. Due to the timeline and project scope, I decided to take the lead on UI design. In addition, I collaborated with my teammates on app analysis, content strategy, prototypes. And shadowed on usability testing.

ROLE

UX/UI Design, Branding

Teammates: Nathaniel Lee, Grace Shen, Christian Samuel Enriquez Gomez 

TIMELINE

2 months / Jan - Feb 2023

PROJECT TYPE

Internship Project

OVERVIEW

GELLING AS A TEAM

THE CHALLENGE

“50% of the first-time users dropped during onboarding.”

Our goal for the project was to optimize the onboarding flow in order to lower the drop-off rate. It was implausible to hear that 50% of first-time users dropped during onboarding. As a frequent social app user and a designer, my curiosity was raised up immediately. This sounds like a simple route, but what could be *SO wrong that half of the users just decided to give up?

The momentum is strong. The team is ready to dig in.

ZOOM IN ON UI

WIREFRAME V1 - GO WITH THE NEW FLOW

We received some screen examples from HANGTIGHT indicating the vibe they like with temporary color scheme. And here are some problems we found out.

THE BEGINNING OF REVAMPING

Based on the new user flow, I created the initial onboarding flow with the existing color scheme in both dark and light modes. Although the company prefers the dark mode more. It was just an option that they wanted to provide to users. So we will be continuing to explore both options.

ORIGINAL APP ANALYSIS

The most important question on top of our mind is: Where and Why users dropped? The team downloaded the app and started to analysis. We came to three major assumptions here: （due to confidential reasons, original screens will not be showing）

  • 0 flexibility for users - No skip option

  • Long and tedious process till Homepage - 15 screens

  • Several screens that don’t provide explicit value - Welcome page, Info 1 (text example), Info 2 (Privacy statement)

THE DISCOVERY

In order to de-risk some of our assumptions, my teammate went out and did usability test on 14 participants. What we’ve found out, the problem is -

High commitment needed without knowing app’s function

PROPOSED FLOW

  1. User’s biggest drop-off point during the Original Flow is “PICKING INTERESTS” which takes 5-10 min at least per user according to our data. We noticed that users assumed they had to pick one from every category or simply wanted to look through every section to find stuff they liked. Thus we decided to move this section after the Home screen.

  2. We moved info screens upfront with new content of app features instead of privacy info statements, in order to increase user interest.

  3. We made “plan your first event” as a skippable option instead of part of the requested flow.

Based on these insights, the team mapped out a new proposed flow with the changes as below.

OPPORTUNITIES

  1. Users like the app more after playing around and seeing the app features ✅

  2. Confirmed we should move info screens before sign-in to give users context 

  3. Make flow more skip-friendly, allow users to explore on their own ✅

  4. Take out privacy info statement screen

PAINPOINTS

  1. Users are forced to give phone# right away without having info ✅

  2. Users have to pre-select interest plus create an event ✅

  3. Users have to add friends involuntarily

  4. Users don’t care about the privacy info statement

To break things down:

At this stage, me and my teammates are working on different tasks simultaneously toward the same goal. First, let’s stay on the topic of ui. My teammates took on the responsibility of switching temporary illustrations to our own design. And I will need to seek for the possibilities of a new color scheme.

WIREFRAME V2 - MAKE IT FUN MAKE IT FLY

COLOR PITCH ROUND 1

Color exploration started with the original palette on the right - used in current app. (I was hoping those colors still have potential to live) By bringing in a fourth or fifth accent color, I was trying to give a little more visual movement on each screen. At the same time, toning down the darkness from “black” will make the interface look less aggressive.

Stakeholder Feedback:

PROS: Like the “Teal blue” color popped on dark ground.

CONS: “Orange” + “Black” combo gives too much Halloween vibe.

We made the decision to drop both options.

“maybe not the Halloween vibe”

FIRST LANDING

Before we heading to the Branding game, the team presented wireframe V2 to the stakeholders with updated design strategy (will talk about this later), variations of intro animation style, idea for splash screen and potential color direction.

Stakeholder Feedback:

PROS:

  1. Stakeholders and the team enjoyed the vibe of SPLASH and INTRO SCREENS.

  2. Among all three illustration styles, the rocket on INTRO 3 aligned with stakeholders preference the most.

CONS:

  1. Illustration styles on INTRO 1 and INTRO 2 need to be simplified and unified.

  2. “Green” is a nice pop, but concerning it has a high similarity to Spotify’s brand color. It will be pending.

COLOR PITCH ROUND 2

While my teammates are recreating the intro animations. I modified the third option for color scheme and led to our final version.

  1. Maintain the “space-feeling” dark background while lighten the foreground “blue” to be lighter (indigo) - Enhance depth of field

  2. Bring back the “sea foam green” from existing color scheme and turn it into “robin egg” by lower the brightness (less neon) and the yellow undertone - Balance with other blues

“from meditation app to HANGTIGHT”

A comment from my teammate enlightened me for a decision - “It feels like a meditation app.” So I added the “orange” back in but with “sun bleached” version.

To give a pop. To inject the energy.

ABSTRACT OPTION FOR INTRO

I created this additional series of abstract animation inspired by each vital feature of the product - following the style and aesthetic of splash animation.

FINAL STYLE GUIDE

ZOOM IN ON UX

FROM WIREFRAME V1 TO V2 - HOW WE GOT THERE?

details that impact user psychology

After the presentation of wireframe V1, the team gathered together in order to finalize all the content on each screen. There was three primary key points informed our design strategy:

① Digging into our interview data again, we think that we should not only switch the order of the whole intro flow up to the front, but also rearrange the sequence of each product feature screen. For example, we presented our interview results to the product owners - showing users care about the functional experience (such as ride share, bill spilt and reservation) more than Orbit community (creating friend circle within app). After confirming, we landed on the final sequence.

② In order to create a “brainless” friendly flow for users, we think the choices of wording is also vital. Without much debate, the team agreed that we should change the title of each info screen from “word” to “short explanation sentence”. So we sat down together and came up with those short intro phrases.

③ The team had an interesting debate on if we need a “username”. Initially, when analyzing the original app, we thought “Enter a username” considered redundant information because the core idea of the product is to gather with people around you (assuming users already know the person by phone# when they added a friend). So we proposed to take out “username” from onboarding flow but give users option to change / add under profile. However, after the usability test we found out users actually prefer to set up “username“ upfront - due to the possibility that they only want to use “username” not real name on the app.

With Maze, our team did final round of unmoderated tests on 30 participants for both light and dark mode. The goal of this test is to assess task completion rate and impressions on branding.

And the outstanding results are:

THE OUTCOME

✓ 100% sign-up baseline

✓ reduced drop off before finishing creating event from 50% to 11.5%

✓ dark mode design has a clear lead

FINAL THOUGHTS

select options that align with future business needs

Our stakeholders were very encouraging during the whole project. Thus the team had a lot chances for explorations. But it’s important for us to catch the key words from them stakeholders during every conversation. We made our design decisions based on those key words and how can they benefit company’s future plan.

be the “edge” designer

During and after this project, I keep thinking how can you make the most out of yourself to improve efficiency in a team project? I think the answer is BE THE “EDGE” DESIGNER.

Why? Every designer knows how to use Figma and what’s design thinking. In most of the cases, we can all be on the same page on our user psychology. But in a short-term team project like this, we have limited time and resources. The best way to stand out is to utilize your past experience and invest your time in it. This will bring the team the most outcome and save tons of time from “wondering around". Everyone on this team has their own strengths, we partnered together for all the tasks but took the lead on our own strengths - which made this project had great outcome that both the team and stakeholders loved.

Know the things you are good at and make that a benefit for your team. It’s something I should keep thinking about and carrying on with.

Thank you for my teammates for such a fun project together -

Nathaniel Lee, Grace Shen, Christian Samuel Enriquez Gomez