BRIDGEGOOD REDESIGN

Team lead of 2 other designers in redesigning the Portfolio and Resume page on the BRIDGEGOOD website to make it more resourceful for our users.

  • MY ROLE

    UI/UX Designer
    Team Lead

  • TEAM

    Christopher Cruz
    Autumn Yeung
    Guan Lao

  • TOOLS

    Adobe XD
    Adobe Illustrator
    Miro

  • DURATION

    3 Days Sprint

Project Overview

BRIDGEGOOD, a 501(c)(3) nonprofit organization backed by Google, empowers talented creatives with advanced tech skills, guiding them toward successful careers as design industry leaders. As one of the 19 apprentices in their User Experience Apprenticeship program, I participated in our final project: a rigorous 3-day design sprint to redesign their portfolio and resume features for desktop and mobile platforms.

Challenge

Analyze the current BRIDGEGOOD desktop and mobile portfolio page for any pain point that needs to be redesigned.

Solutions

Show Support to Creatives

Allow supporters to donate to BRIDGEGOOD creatives by adding an additional '‘Support' tab to help indicate that donations are going directly to the creatives and not to the BRIDGEGOOD platform.

Setting Changes

Allow users to add pronouns, and career status, and toggle social media interaction, which is the ability to like and comment on a creative's work. We learned from our usability testing that user wants to improve the professionalism of their portfolio, in order to land a job.

New Bio Tab

Creating a new tab called "BIO" to replace the cluster resume tab. In this new tab, users can leave testimonials for creators with whom they have collaborated. Also, moving the resume banner to the top as the profile background.

  • Before Redesign

  • After Redesign

1


2


Design Sprint Plan

3


4

Understanding the problem

Research: Usability Studies

To get a better understanding on the portfolio and resume feature. Our team conducted moderated usability testing of the current portfolio page with 8 BRIDGEGOOD current users and potential users, looking for any pain points as they navigated the page.

Some common feedbacks:

  • 5 out of 8 users want an option to display their pronoun near their name

  • 6 out of 8 users found the placement of the banner at the bottom to be weird, they do not understand why is the banner at the bottom of the resume page.

  • 6 out of 8 users want some kind of indication to show that they are looking for an internship, job, or hired. (Similar to Linkedin)

  • 5 out of 8 users found the donate button confusing, they do not know where the donation is going toward the creative or BRIDGEOOD.

How might we question

As a team, we collaborate to generate our "How Might We" questions to focus on based on our conversation with our users during the usability studies. Then we organized the HMW into common theme. Following this, we cast votes to select the top three HMW problems that we want to prioritize first.

Top three HMW questions that got the most votes from the team:

  • How might we get people to come back to the resume and update it? Making it more useful!

  • How might we make the donation more noticeable?

  • How might we give users the option to use pronouns?

Personas

  • Clarice - Recently graduated design student

    Wanted to look for job opportunities and assistance after completing her B.A. in design, but she does not yet have a resume or portfolio.

    Problem: Clarie is a student who needs a platform that could help her build a strong portfolio and resume because she is just starting her career and she needs every resource

  • Nicole - A supportive art director

    Intends to connect with BRIDGEGOOD creatives, aiming to kickstart their careers and provide them with valuable real-life experience. She has also heard that BRIDEGOOD allows users to donate to young creatives in need.

    Problem: Nicole is an art director who wants a clear way to donate to young creatives in need because she had trouble finding the donate button and was unsure if the donation goes directly to the student or the platform.

  • Joon - Recently graduated job seeker

    Seeking a job and would like to be able to add his pronouns to his professional profile. For him, this option is more than just a feature; it represents acknowledgment and validation of his gender identity.

    Problem: Joon is a designer who identifies as binary, who wants the option to include pronouns in their professional profile because this is significant for Joon as it ensures others address them using the correct pronouns, respecting their gender identity.

Decide / Solution

  • Give users the option to export resumes in PDF format so employers can download and save them.

  • Enable users to add their pronouns through the settings, providing an option that will be displayed in their profile.

  • Bring the footer image from your current resume to the top of the portfolio page as a profile banner.

  • Adding a new 'Bio' tab, moving Hobby, Q&A, and network section to the 'Bio' tab

Crazy eight Sketches

Based on our HMW and personas, we created a Crazy 8 sketch for possible options and key features we wanted to implement. In this ideation phase, we aimed for quantity, and not worry about making a beautiful layout. Then, we voted for the best options to move forward.

Big Picture Storyboard

A brief story or scenario of a potential user that helps highlight key moments and user experiences while using the feature. In this case, this storyboard focused on the emotion of Trevor in every stage from the anxiety of not having a ready portfolio and resume to landing a job as a graphic designer.

Wireframes

Sitemap

Before we start our wireframe. We have to reorganize the structure of each page. We have separated it into three parts; what you see when you are signed in viewing your own profile, signed out viewing another creative profile, and signed in but viewing another profile. As you can tell, users will have different options and user flow depending on their status.

Validate

Usability Testing

Common Theme:

  • It was observed that 5/5 participants mentioned that they wanted to incorporate some kind of icon to edit their profile in the home banner. "Hovering over the navbar is too much work".

  • It was observed that 4/5 participants wanted a way to edit the testimonial people gave you in the Bio tab. 

  • It was observed that 3/5 participants wanted the option to hide the social media aspect from the portfolio page such as likes and comments. 

Insights

  • An insight is users don't like the current way of accessing the settings in the navbar.

  • Users want more control over their pages where they can make more customization and display the testimonials that they like. 

  • The like and comments feature could make their portfolio less professional during job interviews.

Recommendations

  • Adding the edit/setting icon in the banner which people can easily access.

  • Allow users to edit the testimonial page, and arrange the testimonial from favorite to least favorite. Only the top three will show.

  • Adding the option to turn on/off social media interaction on the settings page. 

Final Prototype

Problem
01

Users were confused if they are making donation to the BRIDGEGOOD platform or directly to the creative.

To address this problem, add a ‘Support’ tab in the creative’s profile to allow supporters to donate to BRIDGEGOOD creatives. So it is clear that the donation are going directly to the creatives and not toward the platform.

Desktop view

Mobile View

Problem
02

Users want a way to add pronouns, edit career status, and make their portfolio more professional.

To address this problem, allow users to add pronouns, and career status such as if they are looking for hire or seeking for job opportunity. In addition, adding the ability to turn off social media interaction such as the option to like and comment.

Desktop view

Mobile View

Problem
03

Clustered Resume Tab, and there is an unnecessary banner at the bottom of the resume and testimonials.

To address this problem, add an additional 'Bio' tab within the profile. This tab would allow users to include testimonials, information about themselves, hobbies, and recently attended events. Consequently, the resume could solely emphasize experience, education, and skills, thereby ensuring a more professional and effective resume. Lastly, moving the banner to the top as the profile background.

Desktop view

Mobile View

Check out the Prototype

Reflection

This was my first collaboration UX project, and I had a great time working with the other team members. Prior to the BRIDGEGOOD program and this project, I was unsure of what I wanted to do with my career. As a result of this project, I discovered my passion and what I wanted to do as a career. I genuinely enjoy the design process and collaborating, ideating, and prototyping with other talented designers. It was extremely satisfying to complete the sprint in three days and present it to the stakeholders.

We hope that with the expanded portfolio feature, BRIDGEGOOD creatives will be able to use this platform to land job opportunities and gain more support. In addition, we also aim to observe retention rates because we want our users to continue to update their portfolio and resume tab. We also hope this redesign will give more reasons for larger donations to the BRIDGEGOOD platform and creatives. Lastly, we want to conduct more usability testing with our final prototype because the design process is iterative.

Check out similar projects that may interest you!