Social platform for Gemmi

A brand new UGC experience for Gemmi App

UI/UX

B2C

0 - 1 Design

My Role

User research, Interaction design, UI design

The Team

1 Designer, 1 Product manager, 1 Front-end engineer, 1 Back-end engineer

Timeline

Mar. 2022 - Aug. 2022

What difference did we make?

Shipped the MVP for the UGC feature of the Gemmi app,potentially expanding its user base.

Gemmi is originally a music game app for music lovers who would like to support their favorite artists and musicians. Over time, its users evolve, and the demand for more interaction between artists and fans grows. In 2022, we set out to design a new social platform feature for Gemmi to meet the users’ needs.

Research & Insight

Hypothesis Statement

Setting the goal

Design iteration

Design deliverables

Retrospective

Research & Insight

I started with an online survey, gathering 100 responses, and conducted interviews with stakeholders to understand their perceptions of social platforms, their motivations, and what they hoped to gain from these experiences.

From the survey and interview, I gained some key insights:

Sharing

People prefer sharing updates about their lives within theirclose social circles, where they feel most comfortable.

Entertainment & learning

People use social media both for entertainment and learning, seeking quality content that's both relaxing and informative.

Find people with same interest

Users tend to stick to their preferences. While using social media, they rarely step out of their comfort zones, and they are eager to connect with people who share the same interests.

Seek feedback

People seek community feedback and inspiration to access resources unavailable in their offline networks.

Besides knowing our users, I also conducted a competitive analysis to have an overview of social platforms on the market.

In the analysis, I found out that although most of the apps have complete features for social media, they are almost identical. Most of them don’t have a specific theme or purpose that stand out. Therefore, users tend to use the app that have larger user base or more eye catching features.

Hypothesis Statement

Building on the insights from the research, our team formulated a hypothesis statement to guide our design goals:

We believe that a social platform focused on a specific topic and high-quality content will make people who love music and art feel unique and willing to engage more in the community.

The Design Challenge

After knowing our users and having several meetings with the stakeholders to identify their needs and expectation. We identify our challenges and limitations in this project.

Limited Time

The MVP must launch within 6 months to meet business and investor goals.

Technical Constraint

With just 2 engineers and limited time, we must balance stakeholder expectations with technical feasibility.

To meet users' needs and stakeholders' expectations, I use rapid prototyping and internal testing in my design process.

Rapid prototyping

Internal testing

I developed low-fidelity mockups to align design goals withstakeholders, created a prototype for internal testing, and refinedthe interface based on colleague feedback to better meet userneeds.

Low fidelity mockups for internal testing

Design iteration

Given time constraints, I prioritized core features over a full-functioneditor. Through multiple prototypes and internal testing, I optimizeduser flows of the editor to meet stakeholder needs. Additionally, Icollaborated with the engineer to discuss the feasibility of theinteractions and UI, ensuring the timeline was achievable.

Iterate user flow and interaction according to the testingresult.

The UGC editor is a complex feature that underwent multipleiterations to ensure both its usability and feasibility. I approachedits design by breaking the process into four key steps:

1.

Establish the editor's core functionality to enableusers to perform essential actions like reordering,deleting, and adding pages

2.

Develop tools for editing text, photos, and audio,empowering users to create personalized content.

3.

Adjusted the flow and interactions between tools,continuously iterating the design to ensure optimalusability

4.

Develop the publishing and sharing functionalities.

Finally, to ensure the best search experience for the editor’s library,I work closely with the teams to make sure the UI and interactionwork seamlessly with the backend.

Design deliverables

These are the key features of the MVP launch.

Home Feed

Our main focus is to create a delightful browsing experience for users to read and listens to quality art or words and music. Unlike the other mainstream social platform, we clean up all the distractions on the main feed to slow down the experience and let users have the opportunity to get inspired and relax.

We also add micro-interactions on the liked and saved buttons to give it an extra flare.

One of the core values of our product is to help artists and musicians grow. To help aspiring musicians gain more exposure, we emphasize the audio experience by letting the users to prelisten the music at first glance of the post. If they are interested in the post, they can expand the post to get the full experience.

In the expanded post, users can continue reading and listening without interruption while viewing comments and the post description.

Expand post

Read post comment

Read post description in full page

Editor

The editing feature is an essential part of the UGC platform. To make it easy to use, we simplified it into two main sections, the page editing section and the posting section.

The page editing section includes every tool that users can decorate their pages, including music, photos, text, filters, and background materials. Users can also add or delete pages with a simple click.

If users want to reorder the page, just simply drag and drop the canvas to where they want to place it.

The posting section let users preview the post and edit the description before sharing. There is also a toggle to manage the comments.

Music is an essential part of our product, In the discover page of the music tool, users can check out for recommendations and pre-listen to music they are interested in or simply search by themselves using the search bar.

Additionally, we introduced a tag system to help users easily search and switch between tags to find music. The save feature lets users organize favorite tracks, with saved archives accessible in the editor and profile page.

Music tool - discover page

Music tool - Search music

Music tool - Saved music

For musicians, audio creators, or users who want to use their own audio, the import feature allows them to use their own audio and music. It helps users unleash their creativity to create more interesting posts.

Music tool - Import audio file

Music tool - Choose audio file

post editing section with music imported

Music tool - Use audio file on the post

Library & Profile

In the library tab, users can browse the music and background materials and discover new stuff using tags. In the profile tab, users can see all the posts, and materials they upload or saved in one place.

Material tab

Profile tab

Retrospective

Creating feature this big is not easy for a small team like us. We face many obstacles not only on the development side but also on the business aspect. It is hard for us not to see the final launch. But it is still quite a journey for me, helping me understand more about different aspects of the design process and what will happen in real-life situations. I learn a lot about how to coordinate and communicate with the stakeholders and the engineers. I also learn how to digest others’ opinions and come up with solutions that everyone consents to.

Due to my love for music, it has been an honor to work on a project that can help musicians and artists grow. I hope to work on more creative projects like this in the future.

Special thanks to all the product team members Collie, Abby, and Micheal for their effort in this project.

Let's getin touch. Say hello.

Social platform for Gemmi

A brand new UGC experience for Gemmi App

What difference did we make?

Research & Insight

Hypothesis Statement

Setting the goal

Design iteration

Design deliverables

Retrospective

Research & Insight

Hypothesis Statement

The Design Challenge

Design iteration

1.

2.

3.

4.

Design deliverables

Retrospective

Let's get in touch. Say hello.

Let's get in touch. Say hello.

Let's get in touch. Say hello.

Let's get in touch. Say hello.

Let's getin touch. Say hello.

Let's getin touch. Say hello.

Let's getin touch. Say hello.

Let's getin touch. Say hello.