Bubbles Mobile App

I worked in a team of 6 UX/UI Designers to redesign the beta app, resolve usability issues, and create new screens for a social media mobile app. This was my first client project.

My Role

User Insights, UI Design, Visual Design
Tools

Figma, FigJam, Miro, Slack
Timeline

6 weeks (Sept. - Oct. 2022)

INTRO

Users are put off from an unappealing and confusing user interface 

Bubbles is a fun and playful social media app that revolves around creating community events and reaching out to others using personas or real identities. However, due to an unappealing UI and usability issues, users were leaving negative feedback for the app.

Our clients requested a redesign of their existing beta app screens. They also requested a design for five new features: select membership options, sell tickets for events, create event collectibles, include a challenge and reward system, and a persona identity system.

GOAL

How might we create a more appealing user interface, resolve crucial usability issues, and design intuitive new features?

Since there were many scopes for this project, we evenly divided wireframing among team members. My responsibilities included wireframing for the onboarding, home, profile, and alerts page, as well as creating screens for a challenge and reward system.

Taking inspiration from popular social media apps, I focused on improving the visual design by following UX best practices and industry trends, establishing more visual consistency, and better structuring the information hierarchy.

KEY INSIGHTS

Understanding our users 

We learned that the client had conducted prior user research to discover insights about their target audience. When summarizing their results, we found that:

Most users are university students (age 18-23) located in Greece.

Users mainly identified as "extremely introvert" or "extremely extrovert."

USER STORIES

Turning features into user stories

The team and I then created user stories based on our client's new features and the needs of our users.

  1. As an app user, I want to select between the free and paid subscriptions so I can choose the option that best suits my needs.
  2. As a content creator, I want to sell tickets for my event that I’m hosting in the Bubble community so I can make a profit.
  3. As a content creator, I want to utilize NFTs and collectibles so I can promote events that I am hosting.
  4. As an app user, I want to complete challenges and earn rewards so I can enhance my engagement in the app's social community.
  5. As an introvert, I want to join conversations with personas or my real identity so I can comfortably take part in discussions.

We then divided the user stories and turned them into user flows. For my portion, I focused on onboarding, the alerts screen, and user flow 4 (the reward system).

USER FLOWS

Mapping out onboarding and the coin collection feature

Currently, users don't have the option to claim all of their completed challenges at once. Having to redeem a large list of challenges can create a frustrating experience, so I included a "claim all" feature in addition to a regular "claim" button.

Zoom in to view my user flows!

EVALUATING

Analyzing current usability issues on the beta app

We were given access to the client's Figma files to evaluate their current existing designs. I made note of existing usability issues to keep in mind when designing our low fidelity wireframes.

BRAINSTORMING

Gathering inspiration from competitors

Before starting wireframes, my team and I looked at apps that the clients were inspired by, such as Eventbrite, Jodel, Yik Yak, and Discord. Some of the visual design patterns that we found include:

  • Using bright colors and rounded shapes to portray the brand in an inviting, friendly, and playful way.
  • Clearly organizing content and structure so users won't feel overwhelmed.

LOW Fidelity wireframes

Designing wireframes with usability in mind

When designing my screens, I made sure to focus on emphasizing clarity and visual consistency. Some features that I included are:

  • Adding input field labels
  • Creating blank state screens for the alerts page
  • Including a confirmation modal when redeeming rewards
  • Using 16px body text for increased legibility

Zoom in to preview our lo-fi designs.

STYLE GUIDE

Creating a system for visual consistency

We included a color palette, iconography, and typography that highlighted the brand attributes of fun, youth, and playfulness. The colors that we picked were adjusted from the client's original palette.

We have also included master components, UI elements, and grid sizing information.

UI ITERATIONS

Presenting different design directions

Each team member then created an iteration of the home screen using the style guide. We voted on the top three to send to the client.

I created iteration 1, which focused on using a bold but darker top-down gradient for increased contrast between icons and text elements. I opted to use a darker gradient so as to not overwhelm users with visual noise and increase readability. I also added an indicator in the bottom navigation to show which pages users would be on.

The client decided to move forward with Iteration 1.

HIGH FIDELITY WIREFRAMES V1

Adding colors and images

Portraying Bubbles with friendly, fun, and playful attributes was extremely emphasized by the client. As such, we aimed to use bright, bold colors and gradients. We also replaced the placeholder images with the client's provided visual assets.

Hifi version 1: applying colors and images.

CLIENT FEEDBACK

We went overboard with the colors...

The client expressed concerns about our color choices after reviewing our high fidelity wireframes. They specifically did not like the orange gradient used across our screens.

We realized that the gradients we used created too much visual noise, which could create a jarring experience for users. Additionally, some smaller text became hard to read due to the bold background.

HIGH FIDELITY WIREFRAMES V2

Cleaning up our previous design

I removed the orange gradient with an off-white color to tone down our color application. I also replaced the white logo with the colorful version on the login page to show color without overwhelming the user.

The result was a much cleaner user interface that was more pleasing to look at.

Hifi version 2: Creating a new account.

Logging in and viewing alerts.

User profile and claiming coins.

DEVELOPER HANDOFF

Providing clarity for the developers

As the project was nearing its deadline, we provided annotations for each screen, as well as measurements for height, width, padding, and distance of each component and element in our final wireframes. Our team aimed to be as thorough as possible to provide extra clarity for our clients and their developers.

An example of an annotated screen

LEARNINGS

Reflection upon project completion—UX is not just UI

Bubbles was my first client project, providing me with valuable exposure to working with fast time constraints and meeting stakeholder needs. There are many insights that I gained while working on this project:

  • The design process is not as simple as creating deliverables and handing them to clients—we will need to iterate, iterate, and iterate more.
  • Focusing on adding too many features can lead to a lack of cohesiveness. We all took over a user flow, which led to inconsistent screen designs.
  • UX is not just UI, I believe that there are still opportunities to integrate a more in-depth UX focus.

If I could extend this project, I would want to focus on usability testing for each user flow. I would like to ensure that our design decisions are contributing to a positive impact.