top of page

GJB is a passionate project where I explore how technology can help students establish connections with mentors and enhance their learning experience.

GOOD JOB BROTHER

The Challenge

The design challenge I've set for myself is to create an MVP that expands students' learning resources, enhances connections with mentors and studios, and brings the benefit of one-on-one tutoring even in group classroom settings. However, there are a few applications with a similar purpose.

Affinity Map From User Interviews

User control of app

User preferences: dance styles, skill level, instructors

Personalized recommendations

Scheduling and booking

Progress tracking

Practical application of material

Video tutorials: instructional videos, techniques, styles

Practice sessions: live or recorded

Music integration: 

popular and genre-specific

Performance opportunities

Material and exercises

Material and exercises

Warm-up and cool-down exercises

Technique drills

The Outcome

I designed GJB, an iOS native mobile application, to provide users with more opportunities to explore the breakdance culture and promote and educate the philosophy of breaking through the GJB Studio. The app aims to challenge the perception that "breaking is rebellious."

Registration


• Secured registration
• Simple collection of data for preference
• Only major information is collected

Matching

• Manual matching (selecting known mentors)

• Matching based on preferred elements

Features

Viewing and modifying the timetable of enrolled classes

Learning resources from dedicated mentors

Targeted mentor feedback

News and event registration from the studio

hand.png

Research Insights

Firstly, I conducted user research through desk research and user interviews to gain a deeper understanding of the issues at hand. In total, we received 20 survey responses and conducted 6 interviews. The following are key findings that influenced the GJB solution:

Persona 1.png

01

Themes, mentors, and learning outcomes are the top three factors people consider before participating in group instruction.

02

Access to up-to-date cultural information, personal performance, and additional learning resources are the top three elements students desire.

Persona 2.png

03

Due to Breaking/hip hop culture being traditionally associated with negative connotations in Hong Kong, most participants and parents are concerned about learning Breaking through less reputable channels.

04

Shy and introverted students express concerns about being overlooked by mentors and fear of asking questions.

GJB Focus

Based on the research findings, I have decided to focus the GJB solution on enhancing the connection between mentors and students, exploring additional structures and services that GJB can provide through communication. Taking these audiences into consideration, I have prioritized the following issues in the product:

How can students receive guidance from their mentors outside of class hours?

How can students track their progress and changes in their development?

How can we integrate information about the entire breaking culture?

Interaction Flows

As the MVP functionalities are being developed, I focused on three main stages of information architecture within GJB: personal management, connection with mentors, and connection with culture.

User Flow Diagram - Light.png

Visualising GJB

 

An initial process of sketching on Procreate, then user testing and wireframing allowed me to quickly iterate on how CoDin would look and catch any issues in the interface early on.

IMG_2025.PNG
IMG_2025.PNG

Register and matching

App experience 

IMG_2026.PNG
IMG_2026.PNG

Register and matching

iPhone 14 - 18.png
iPhone 14 - 20.png

App experience 

iPhone 14 - 33.png
iPhone 14 - 32.png
iPhone 14 - 31.png
iPhone 14 - 27.png
iPhone 14 - 29.png
iPhone 14 - 28.png
iPhone 14 - 25.png
iPhone 14 - 26.png
iPhone 14 - 30.png
iPhone 14 - 19.png
iPhone 14 - 21.png
iPhone 14 - 22.png
iPhone 14 - 24.png
iPhone 14 - 23.png

USABILITY TESTING

 

Shy and introverted students express concerns about being overlooked by mentors and fear of asking questions.

  • Observe points of friction and areas of delight

  • Decide which options to make available in the tab menu based on user expectations

​After categorizing the data, I used a rainbow spreadsheet to make better sense of what my priorities should be in the next iteration.

Observations

Unable to choose the option of not revealing gender

Difficulty arises in selecting due to unclear element names

The "good job brother" team page appears confusing

Would like to have a sense of completion

Positive

All important information can be found on the main page

Appreciation for the placement of the "next" button

Clear interface design

The functionality meets all needs

The comment feature is innovative and highly beneficial

User-friendly

Negative

Dislike the waiting symbol

Unwillingness to disclose real age

Matching results should come before the sign-in process

Reluctance to type on the age page

Only "Hello Bro" is present; there is no "sis" option

Errors

The term "Connect a tutor" is vague

Unable to find the registration location

螢幕截圖 2023-07-01 下午12.07.00.png

Style Guide & Accessibility 

I documented UI elements to ensure the look and tone of the app remain consistent. As I improve upon the design, the guidelines will have to be referred to and updated accordingly.

DESIGN LANGUAGE SYSTEMS.png
DESIGN LANGUAGE SYSTEMS 2.png

High-Fidelity & Further Iterations

Register and matching

App experience 

Final Designs

Here you can access the final CoDine Figma prototype!

display拷貝_edited.png

Retrospective & Next Steps

01

At the beginning of this project, I had a small idea about how technology could assist with GJB registrations and class scheduling. However, through conversations with users, I discovered greater complexities, and designing a great solution required multiple iterations!

02

As my first major design project, GJB taught me that I am not the user. My greatest insights came from my surveys and interviews, understanding how users interpreted my ideas. Overall, I realized how important user testing is in user experience design.

03

Based on user feedback, there are many areas in which GJB can continue to improve. For instance, incorporating a blog could be a valuable addition. Additionally, exploring the idea of a rewards system may also be worth considering.

bottom of page