image 35.png

COMMUNITY

SOCIAL MEDIA

TYPE
Concept project

ROLE
UX/UI Designer

TIMELINE

2 Weeks

Creating a community of like minded individuals

VIBELY

Vibely Mockup
 
 

Design Challenge

The first part of the take-home assignment was to find a way to increase the number of challenges completed within the app. The second part was to design a vibrant user interface that evokes a fun and positive environment for their targeted audience.

TARGET AUDIENCE

The targeted audience for Vibely is Generation Z, a.k.a the Mobile Generation.

In my research, I learned:

  • Easy to engage with - Harder to retain

  • Thrive on social media attention

  • Don't want to be treated as a 'type' - Prefer to be fluid

  • High expectations for mobile apps

  • Low Attention span

  • Prefer positivity, fun, interaction/engagement, bright/contrast colors when it comes to design

Group 6831.png

TARGET AUDIENCE

During the target audience research, I came across a few keywords that I compiled into a mind map. The map was used to generate ideas and creativity by laying out the foundation of the user's preference: to be fluid.

How does the UI design allow users to be fluid? Customization.

DESIGN CHALLENGE :: PART ONE

Increase the number
of challenges completed

Solution - Gamify the users experience by adding:
 

  • Add a progress bar around the profile photo so it can be viewed throughout the app.

  • Add a progress status section next to the number of completed challenges, so the user knows how many more challenges they have to complete to level up.

  • Add a 'Challenges' section for the user to easily see what challenges they've completed, and which ones they can partake in.

Behind the Design

With limitless options, the Gen-Z users can express themselves in various ways through the app redesign.

PROFILE

The profile allows users to customize their profile in the backend of the app. Within limitless options, the Gen-Z user can express themselves in various ways. The status bar will also change colors, so as you'll see in the messaging portion, their self-expression is seen throughout the app!

Vibely Mockup
Vibely Mockup

DESIGN CHALLENGE :: PART TWO

Design a vibrant UI toevoke fun & positivity

Solution - Allow the users to customize their experience by:
 

  • Individual users can select their choice of gradient combination for their profile and profile photo progress bar. Why? Allowing them to express themselves.

  • Content creators can customize the color of their profiles and group messaging to align with their individual brand colors.

GROUP MESSAGING

Since the app is centered around influencers and their followers, I branded the individual messaging groups by adding their colors and a place for a hero image.

Vibely Mockup
Vibely Mockup

Outcome

DELIVERABLES

Designed and prototyped screens that align with the two main users (Audience & Content Creators), and encourage them to interact more within the design.

VALUES

Understanding your audience is a key component when you want your product to speak to them directly.