NovBee - Brian Ho Yiu Chun

NovBee - A Redesign to Merge Platforms and Promote Local Artists through Music Collaboration

Overview

Prototype

I worked for Novbee, a Hong Kong start-up music community production company, to redesign their entire platform to further improve its accessibility to Hong Kong’s local artists. I developed a well-reviewed app prototype with designers and tech development interns, and I was responsible for the UI designs that ensured a seamless user experience for the platform’s present and future audiences.

Time

June 2023 - July 2023

Role

UI/UX Design Intern

User research, Interaction, Visual design,

Prototyping & Testing

Highlights

Website retention rate

+42%

Customer satisfaction

+50%

Total MVPs reviewed

3 in 2 months

Background

NovBee is a Hong Kong-based music community production platform that helps local music artists start/advance their careers, by enabling collaboration between local composers, lyricists, and singers to release original music. Learn more about what NovBee does.

From this internship, I have learnt and evolved a lot as a UI/UX designer. Here are some key achievements from this project:

Merged two platforms into one: This helped the company to use one single domain without redirecting to another site to enable the same features

Implemented project design process: This creates structure and makes our workflow easier for us but also allows more robust communication with other teams.

Established a design kit: This gives a long-term consistency for the company’s look in different platforms.

Established a design system: This has helped the tech development team and the marketing team to understand the reasons why we implemented several components on our prototype.

Understanding the Problem

Before NovBee hired a group of interns for the summer, the website was designed using a simple Wix site by the founder with very few functions to be done. The previous website was created without any user testing and few considerations for the features the company intended to provide.

I have conducted research with primary users as well as fellow interns to uncover any issues and features to be added to the website.

My research mainly focused on:

Understanding user/website needs
Uncovering bugs and pain paths with the existing user journey
Determine whether tasks to be done are successful/failure

Before NovBee hired a group of interns for the summer, the website was designed using a simple Wix site by the founder with very few functions to be done.

The previous website was created without any user testing and few considerations for the features the company intended to provide.

I have conducted research with primary users as well as fellow interns to uncover any issues and features to be added to the website.

My research mainly focused on:

Understanding user/website needs
Uncovering bugs and pain paths with the existing user journey
Determine whether tasks to be done are successful/failure

Gathering Insights

During the research, we applied the Happy/non-happy path test plan to locate any pain paths while testing the previous website and inserted data into a sheet.

Prioritisation of issues

User profiles, song upload features, as well as the lack of notifications for website features, are critical issues found during our testing of the Wix website. The website itself consists of a redirected link to an app for the features. We discussed this with the company and confirmed redesigning the website while implementing the app functions into the website as well.

Defining the MVP

I conducted meetings with the team, as well as the business analysis team to develop the user flow of the prototype. We also further study users' paths and compile them into a Cordapp Design Language (CDL) flowchart for different specific tasks.

We identified the following features of the website:

User login and customisation. Allow users to set up their profile for saving progress for features, as well as customization of user profile (username, password etc.)
Our music, and artist page. Include the company’s artists as well as newly released music for easy access to new audiences.
Vocal, music, and lyrics upload interface. Import previous app features into the site. This allows easier access to tools, more convenient for users,
FAQs and community posts. Increase engagement of users, allow the users to provide feedback, and discuss website features.

During the process, technical considerations are needed for AI-generated features for the lyrics generator, Our proposed designs were required to be discussed with the developers based on their simplicity, and workability.

We identified the following features of the website:

User login and customisation. Allow users to set up their profile for saving progress for features, as well as customization of user profile (username, password etc.)
Our music, and artist page. Include the company’s artists as well as newly released music for easy access to new audiences.
Vocal, music, and lyrics upload interface. Import previous app features into the site. This allows easier access to tools, more convenient for users,
FAQs and community posts. Increase engagement of users, allow the users to provide feedback, and discuss website features.

Designs/Lo-Fidelity Prototypes

Three MVPs were done during the period of the internship. Throughout the project, user testing was conducted in an iterative manner at each milestone to identify the most significant challenges or difficulties experienced by users in the current version.

For the design of the website, I want to keep the company's design system, however, make it interactive and apply to the new features and pages that did not exist in the previous version.

Landing Page

I want a landing page that is simple and conveys the main mission/value of the company to our target users.

Sign-up Page

A sign-up page that allows users to easily register and log in through Google, Apple ID, and Facebook.

Explore Page

Once users sign up, this page guides users to explore the features of Novbee as well as the events occurring during the month.

Our Music, Our Artists/Artist Page

Users can explore the music Novbee produced and the artists they have collaborated with, further encouraging users to learn about the company and what they can provide to the users.

Help & FAQs Page

The FAQs page allows topic discussion between users on updates, issues, and fixes. The page consists of upvoting topics and allows the company to review bugs/problems of website features.

Working with developers

I worked closely with 5 front and back-end developer interns on developing the design for the MVPS. We discussed the product requirements, and components interaction for the website. I also suggested third-party plugins to speed up the process for the development team.

App Prototype

After creating prototypes/MVPs of the website, we further made prototypes for the app version of the website. All features are implemented into the app's design, with added notifications/steps during onboarding.

Onboarding flow

Added the overview of the app and how it can benefit users, allowing users to obtain a clear concept of the app, as well as how to contribute to the platform.

App Prototype

Onboarding flow

Added the overview of the app and how it can benefit users, allowing users to obtain a clear concept of the app, as well as how to contribute to the platform.

App Prototype

Onboarding flow

Added the overview of the app and how it can benefit users, allowing users to obtain a clear concept of the app, as well as how to contribute to the platform.

What I learned

After testing the prototype using Ballpark, we have seen significant pain points from heat maps from our designs. After refining them, and continuing to do tests with users, we successfully made a prototype that simplifies the flow of the website with working features for the company, as well as implemented into a user-friendly app prototype.

After this internship, I have some key takeaways from the experience:

1

Involve and consider from an engineering standpoint.

When making designs, I should communicate more with the tech development team to know whether they can create the designs I made, and tune down the complexity of website interactions when necessary.

1

Involve and consider from an engineering standpoint.

When making designs, I should communicate more with the tech development team to know whether they can create the designs I made, and tune down the complexity of website interactions when necessary.

1

Involve and consider from an engineering standpoint.

When making designs, I should communicate more with the tech development team to know whether they can create the designs I made, and tune down the complexity of website interactions when necessary.

2

Every project consists of ongoing user testing.

After finishing the first MVP, instead of collecting user feedback for once, it is crucial to keep refining the designs and continuous conduct user testing.

2

Every project consists of ongoing user testing.

After finishing the first MVP, instead of collecting user feedback for once, it is crucial to keep refining the designs and continuous conduct user testing.

2

Every project consists of ongoing user testing.

After finishing the first MVP, instead of collecting user feedback for once, it is crucial to keep refining the designs and continuous conduct user testing.

3

Focus on building one MVP.

During our project, we have made three MVPs for every two weeks. Instead of making different versions of the design, the involvement in user testing is much more needed for a prototype.

3

Focus on building one MVP.

During our project, we have made three MVPs for every two weeks. Instead of making different versions of the design, the involvement in user testing is much more needed for a prototype.

3

Focus on building one MVP.

During our project, we have made three MVPs for every two weeks. Instead of making different versions of the design, the involvement in user testing is much more needed for a prototype.

Other Selected Works

Foodnote

Simplifying Meal Decision Making for Students

Foodnote

Simplifying Meal Decision Making for Students

Foodnote

Simplifying Meal Decision Making for Students

Fashion Clinic

Illustrations and Graphics for Brand Collaborations

Fashion Clinic

Illustrations and Graphics for Brand Collaborations

Fashion Clinic

Illustrations and Graphics for Brand Collaborations