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.
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.
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.
We learned that the client had conducted prior user research to discover insights about their target audience.
After distilling two distinct empathy maps from our client's survey results, I found that most introverts had difficulties meeting new people due to feelings of anxiety, confusion, or awkwardness. However, they were motivated to expand their network and make new connections.
Most extroverts shared the same difficulties meeting new people, but their pain points lie in the stress of hosting events.
Keeping our client's user research results in mind, I created two user personas: Tyler, the introverted user looking to make friends, and Trisha, the extroverted creator looking to host social gatherings.
The team and I then created user stories based on our client's new features and the needs of our users.
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).
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!
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.
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:
When designing my screens, I made sure to focus on emphasizing clarity and visual consistency. Some features that I included are:
Zoom in to preview our lo-fi designs.
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.
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.
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.
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.
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.
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
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:
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.
.svg){kind=icon}
.svg){kind=icon}
.svg){kind=icon}