top of page

project beyond
an inclusive online platform to help people connect, genuinely.
macbook-pro-clay.png
Screen%20Shot%202020-07-11%20at%201.48_e


 

Overview

Project Beyond is a platform where students and professionals can authentically connect during the abrupt transition to digital communication. Responding to the surging demand for networking opportunities during Covid-19, we hope to help individuals foster nurturing mentoring relationships. The first MVP was launched in June 2020 and is currently in use with over 250 active users.

My Role

For this project, I am part of the founding team of 6 designers, PMs, and engineers. I led the ideation and the prototyping cycles for the landing page, and currently, direct the social media strategy for the Project Beyond brand.


 

Duration
March 2020 - Present

 

Team
Cherry Wu, Nicole Kim,
Victoria Peng, Hwanghah Jeong

Methods

User Research, UI/UX Design,

Rapid Prototyping, Usability Testing, Brand Identity, Design Systems, Social Media Strategy

Project Overview

The Context 

Since Covid-19, we watched meetings and gatherings move online in creative ways. People were willing to volunteer their time to mentor others and share their experiences in various virtual capacities. This generosity of spirit inspired our team at Beyond to spread compassion further and create a space for students and professionals to meet. As a team consisting of locals and internationals, we want to help the next generation connect with today's professionals in every field in a genuine manner.

As a designer, I am also pushed to contemplate the good of technology in this new era of opportunity:

 

1. How can socially-minded technologies provide people with an avenue to foster
    deep, sincere connections?

2. How might we remind our community to make relationships and mindfulness
    a little more tangible?

The Problem

Many students and new grads early in their careers are lost and facing unprecedented challenges during the season of Covid-19. After preliminary chats with college students, we realized that many are feeling unmotivated and uncertain about the future. We also noticed that students often turn to established platforms like Linked-in and cold-emailing to connect with professionals, however, are easily discouraged due to the lack of response or authentic conversations they experience.

Students in need of desperate help

Screenshot 2021-01-25 at 3.05.18 PM.png
Screenshot 2021-01-25 at 3.04.47 PM.png

Professionals willing to help 

Screenshot 2021-01-25 at 3.18.09 PM.png
Screenshot 2021-01-25 at 3.18.40 PM.png

Project Goal

  • Connecting those who need help, and those willing to help through a seamless experience.

  • Creating authentic moments where students can enjoy insightful and motivational conversations to reset their mindset.

Deliverables Preview

In June 2020, we launched our first MVP after rounds of testing and receiving feedback from our users. We reimagined the mentor and mentee matching experience and created a platform in which students and professionals can connect genuinely. Highlighted below are the key screens.

Beyond Homepage

Screen%20Shot%202020-07-11%20at%201.48_e

View All Mentors

Screenshot 2021-01-25 at 4.03.03 PM.png

Mentor Profile

Screenshot%202021-01-25%20at%2011.07_edi

User Research
 

User Interviews

Research Synthesis

We interviewed over 50 new graduates in the U.S and asked them to describe their current experiences with career preparation during Covid-19. We then focused on identifying factors that encourage or deter them from seeking support. 

 

Our findings indicate that many students are jobless or had their offers rescinded, and are actively seeking help from a senior, mentor, or career counselor. That being said, we also identified a gap between students seeking help and professionals willing to help.

 

To our surprise, there was a growing trend of individuals offering office-hour sessions to help those who are job searching and/or have been laid off. We also noticed that individuals preferred a less structured way of connecting–an experience that resonates with a coffee chat–where they can get to know their mentees/ mentors on a more personal level.

65%           86%           32%

Are currently jobless or had their offers rescinded.

Feels anxious about the prospects of their future.

Are actively seeking help from a senior, mentor, or a career counselor.

Cold emailing and Linked-in messaging are not personable.
 

I need advice on specific topics, e.g. international status, work visa, career pivots, etc.

 

Best mentorship experiences are authentic, genuine, and not overly professional!

Ideation

User flow

Iterative ideation

Refined design questions

To better understand our stakeholders, we identified the key call to action for mentors and mentees. This allowed us to pinpoint where Beyond's service would serve its best purpose. 

Screenshot 2021-01-25 at 4.07.07 PM.png

Design Objectives

We wanted to pinpoint the bigger questions that would better inform our design decisions and help differentiate us from other mentorship or recruitment platforms. 

HMW transform and redefine the existing notion of "mentorship"?

HMW story-tell the magical connection between a matched mentor and mentee?

Low/ Mid-Fidelity Sketches 

 

Wireframing

Iterative ideation

Based on the key insights from user research, we ideated on the Landing Page and the Mentorship Profiles which we believe consisted of key functions that are important for our first MVP launch. We also ensured that our designs accommodated the user needs of both the mentees and mentors.

 

For the Landing Page, we came up with two approaches and decided on the Action Approach that introduces the call to action 'Browse Mentors' and 'Offer Mentorship' in one glanceWhile most mentorship platforms tend to prioritize the 'Browse the Mentors' experience, we wanted to give equal leverage to both stakeholders (mentors and mentees) as we believe that both parties have meaningful experiences to share.

 

Narrative Approach Separate Pages for Mission + Landing Page

Landing Page.png
Mission Page (8).png

Action Approach – Combining Brand Mission + Call to Action

Mission Page (7).png
Group 254 (1).png

Mentors are people with stories to tell.  We wanted to allow mentors to tailor their unique journeys beyond just professional credentials on their profiles. Users are also able to browse through a wider range of mentors through the randomized card-sorting view. 

View All Mentors

Desktop - 192.png

Mentor Profile

Desktop - 185.png

Refined Design Objectives

 

1. HMW utilize the real estate of the landing page to communicate the Beyond brand mission?

2. HMW accommodate the user needs of both mentors and mentees?

3. HMW create an intuitive and non-intimidating networking experience?

We conducted several usability testing sessions with our mock-ups and asked groups of students to walk us through how they would use the platform. The findings were then synthesized into a comprehensive user journey to deduce the pain-points and design opportunities more clearly.

Iteration + User Testing

 

Digital prototyping (Figma)

Remote user testing

Screen Shot 2020-06-14 at 2.22.19 PM.png
Screen Shot 2020-06-14 at 2.22.33 PM.png
Screen Shot 2020-12-06 at 12.30.54 AM.pn
Screen Shot 2020-12-06 at 1.17.51 PM.png

The user testing informed changes we needed to make for a more intuitive user flow. 

  1. We needed to educate the user of the goal and the purpose of the platform 
    We would accomplish this by adding illustrated step-by-step instructions on the landing page to help guide the user through the Beyond experience. 
     

  2. Users preferred having more specific filters to find suitable mentors 
    Users should be able to find mentors by searching specific 'Knowledge Tags' related to their specific areas of expertise or life journeys (e.g international status, UI/UX, languages).

These insights allowed us to refine our product goals and informed a more detailed user journey encompassing pain-points and design opportunities covering the pre-during-and-post Project Beyond experience. Click to zoom in!

Group 8.png

High Fidelity Deliverables 

 

Working with developers

Core flow experience framework

Project Beyond MVP

To set the right expectations, we worked closely with the developers on the team using a detailed UI space and met bi-weekly for sprint reviews and planning. We shared bug fixes/ improvement ideas on slack channels #bugsnfeedback, standardized spacing, text size, UI components, made detailed annotations for frontend engineers, and experimented with Playground and high-fidelity prototypes.

Group 187.png
Frame 8.png

The Beyond platform intends to reimagine what a genuine mentorship experience should look like. The current MVP consists of: signing up as a mentee/ mentor, creating a mentor profile, browsing all mentors, Q&A, and our mission. We also revisited our design objectives to make sure our product responds to the needs addressed in user research and testing.

ezgif.com-gif-maker.gif

Core Flow Experience Framework

1. Learn, inspire, and be empowered
Empowered and encouraged to help and seek help

2. Search & find
Personalized mentor search using 'Knowledge Tags’

3. Create & share
Narrative-like mentor profiles showcasing unique personas

4. Interact & motivate
Connecting and scheduling made easy through Beyond!

01

Beyond Landing Page

Mentee vs. Mentor Call to Actions

Guiding Instructions + Illustrations

Mentor Network Overview + Testimonial

Screen Shot 2020-07-11 at 1.48.48 AM.png
Screen Shot 2020-07-11 at 1.48.52 AM.png
Screen Shot 2020-07-11 at 1.48.55 AM.png

The Beyond landing page is designed to offer both options of sign up as a mentor or mentee with equal priority. After several design iterations, we wanted to craft an onboarding experience with a clear and immediate call to action relevant to the user's needs, and one that reflects our brand mission
– kindness and genuine connection. The landing page is followed by instructions and educational content that illustrates the Beyond process with corresponding graphics.

02

Browse Mentors + Schedule a Beyond Session

Mentor Profile

Screenshot%202021-01-25%20at%2011.07_edi
Screenshot 2021-01-25 at 4.03.03 PM.png

View All Mentors

The updated View All Mentors page also features the respective mentors in an interactive card view. The cards are sorted in random order with the intent to underline our diverse cohort on our platform. Each mentor can customize their own set of ‘Knowledge Tags’ that connote their areas of specialty. Mentees can then conduct a more accurate search based on the relevant fields. 

Scheduling a Beyond Session

Desktop - 172.png
Desktop - 173.png

Confirmation Dialogue

Desktop - 174.png

The user will be prompted to schedule a Beyond session in two simple steps – they are given the agency to select a preferred time and to share any questions, specific topics, and meeting goals that would help facilitate the conversation. 

03

Q&A Page

Desktop - 193.png
Desktop - 191.png

The Q&A page allows users to find answers to any questions in mind while being able to read through others’ perspectives as well. Ultimately, our goal is to foster a sense of community and offer help to those who seek it in a structured and efficient manner.

Answer a Question

Ask a Question

Brand Identity & Tone

Brand personality spectrum

Design system

Illustrations and visuals

We aligned our visions for the product by conducting blind testing sessions using a Brand Personality Spectrum. The indicators informed the tone and voice of our design and prompted us to discuss how our expectations met or differed. 

Frame 1.png

Design System

Screenshot 2021-01-25 at 5.20.22 PM.png
Screenshot 2021-01-25 at 5.20.15 PM.png

Graphics and Visual Personality

We intend to create an enlightening experience that is visually engaging and fun to navigate through. As such, I crafted a series of scalable illustrations and motion graphics recreating the 'wow' moment that occurs when two individuals connect and interact – the beginning of a relationship! I also tactfully planned out social media content on FB and Instagram to help spread the word.

Frame 2.png
Frame 2.png
ezgif.com-video-to-gif (2).gif
ezgif.com-video-to-gif (3).gif

Growth Strategy

Social media

Leading the brand direction of Beyond, my goal is to ensure all graphics and illustrations are cohesive across the different platforms including the website UI/UX, social media, and email newsletters. The overall use of playful colors and organic rhythmic shapes aligns with the Beyond mission to spark curiosity, joy, and inspiration.


The main goal of the graphics is to highlight the cross-disciplinary network of Beyond mentors coming from all walks of life, and subsequently, reinforce our value proposition of authentic mentorship.

iPhone 21.png
Frame 59.png
iPhone 22 2.png
Group 329.png

Mentor spotlights featured on the Beyond Instagram and Facebook platforms.

Shoes 16.png
Shoes 15.png
Shoes 12.png
Shoes 13.png

Takeaways

My main focus for this project
Crafting a growth-oriented brand personality for Beyond and translating it across the user interfaces and marketing strategies. 


My biggest takeaways
Coordinating and launching a platform with a remote team of designers, developers, and brand strategists from scratch. We had to be intentional with sprint planning and reviews to meet project goals. I also learned how to conduct Beta Testing sessions with users to pinpoint areas of improvement for our MVP.
 

The next steps
Our long term goal is to cultivate an online network of knowledge and support exchange by focusing on the user experience of community-building. As such, we set up product roadmaps to plan for future features and iterations, including video system integration, mentor appreciations, and mobile view. We also intend to expand and diversify our mentor base by reaching out to senior professionals, academic practitioners, and international graduate students!

Group 410 (1).png
Screen Shot 2020-07-12 at 9.38 2 (1).png

The Project Beyond MVP was officially launched in June 2020, and has helped over 100 pairs of mentors and mentees connect and grow!

Meet the Project Beyond Team!

3.3.png
3.2.png

Our team consists of students and professionals from all around the world in U.S, Seoul, and Hong Kong. We are a group of creatives passionate about inspiring the next generation to keep the meaningful conversations going!

bottom of page