BRIDGEGOOD
Inspire Oakland and Welcome Page Redesign
My team and I were challenged to redesign the Inspire Oakland and Welcome Page features on BRIDGEGOOD's website. Information about the Inspire Oakland Design Challenge was not clearly displayed on the website. For the Welcome Page, the perks, programs, and exposure to industry professionals needed to be made more apparent to showcase the benefits of using BRIDGEGOOD and to attract more users. To solve these issues, my team created a landing page for Inspire Oakland, where users can learn more about the design challenge—rather than read a PDF document—and redesigned the Welcome Page to show that BRIDGEGOOD is the best resource for users who are just starting their design career.
​
Client /
BRIDGEGOOD is an award-winning 501 ©(3) nonprofit organization, supported by Google and the Golden State Warriors, that provides equitable tech access, design opportunities, and professional resources to job seekers that are predominantly Black, Indigenous, and Women/People of Color.
Duration /
2 Weeks
Problem /
Inspire Oakland: How can we make information about the Inspire Oakland contest more accessible and make branding more apparent on BRIDGEGOOD.com?
​
Welcome Page: How might we make the welcome page reflect all that BRIDGEGOOD has to offer in a concise way?
Role /
UX Research, Interviews, Competitor Audit, Wireframe
Solution /
Inspire Oakland: Streamline the information about Inspire Oakland in a way that accurately reflects the tone and value of BRIDGEGOOD by creating a designated landing page to make information about the design challenge more accessible
Welcome Page: Position the main programs and exposure to industry professionals on the welcome page to highlight BRIDGEGOOD's main attractions
Result/Impact /
More students apply for the Inspire Oakland Design Challenge; People trust BRIDGEGOOD as a legitimate resource for starting their design careers.
Team /
Daniel Phounsavan, Julie Truong, Lani Viet
Lessons Learned/Next Step /
Collect user activity, account creation, and retention rates to measure the success of the redesign and improve accordingly
Research
Through interviewing Inspire Oakland participants, we found that designers participated in the design challenge to gain exposure in the industry, display their work, and network with other designers. Information about Inspire Oakland can be difficult to find and is located on a PDF document rather than a designated landing page.
Through our stakeholder interviews, we found that BRIDGEGOOD wants to be known for their programs and perks (UX Apprenticeship, Inspire Oakland, and networking) so redesigning the welcome page to highlight these main attractions is important to improve BRIDGEGOOD's program branding. Stakeholders also suggested BRIDGEGOOD use more visuals and less text by drawing inspiration from Stripe.com's layout when building the new webpage.
To gather data from new users, we first shadowed their activities by observing how they scrolled through BRIDGEGOOD's website and asked them to share their thoughts aloud. We found that the website appears professional and provides a clear idea of the products BRIDGEGOOD offers. However, we also found that certain sections and web titles make the navigation confusing. For example, the Hire BRIDGEGOOD Design Studio section does not make it clear who exactly is being hired. The Testimonials and Success Stories sections display similar content. The Shop section has a confusing title (#BRIDGEGOOD together.) and does not make a clear association with the store's merchandise. Finally, the Inspire Oakland Competition section needs a clearer description.
​
Open Card Sorting
To gain further insight from the new users, we used open card sorting to see if we needed to reorganize information on BRIDGEGOOD's website to make navigation easier.​​
We asked the new users to look at cards one at a time and place cards that belong together into piles.
-
Piles can be big or small
-
If users aren't sure about a card, they can put it in an "unsure" group
-
Users should not aim for a preset amount of piles
-
We let users know it is ok to change their mind as they work
The user names the groups
-
Give users blank cards and ask them to write down a name for the groups they created
We debriefed each user and asked:
-
Were any items easy or difficult to place?
-
Easy
-
User 1 - UX Design Apprenticeship / Learn More, Footer
-
User 2 - About BG, Purchases, Jobs and Careers, Events​
-
-
Medium​
-
User 2 - Portfolio - put in the wrong category first, Inclusive Design​
-
-
Difficult
-
Footer, BG.org, Ambassador​
-
-
-
Did any items seem to belong in 2 or more groups
-
User 1 - Merchandise → Resources, Engage in Diverse Communities, Inspire Oakland, Design Quizzes / Taking a Design Quiz​
-
User 2 - Not too much overlap
-
-
What thoughts do you have about the items left unsorted, if any?
-
User 2 - BG.org - confused about relationship to BG.com, Ambassador - it has a formal government connotation​
-
Competitor Analysis
We researched other design websites, such as those offered by Dribble, Behance, and Notion, to see how they formatted their web layouts to improve navigation and accessibility. We found that they used image-centric pages to visually engage their audience while providing improved accessibly via navigation bars that highlight their programs' main attractions. Dribble and Behance mainly use an image grid layout to highlight their website's offerings, while Notion uses a center-aligned layout to highlight important details.
​
How Might We's?
After compiling data for the user interviews and competitor audit, we came up with how might we statements to innovate solutions for problems found during user research and voted on the ones we liked best. The problem statements we generated were: "How can we make information about Inspire Oakland more accessible and make branding more apparent on BRIDGEGOOD.com?" and "How might we make the Welcome Page reflect all that BRIDGEGOOD has to offer in a concise way?"​
User Personas
We created user personas to understand the goals, frustrations, motivations, and the various backgrounds of BRIDGEGOOD's target demographic, which include current students, recent graduates, and career switchers.​
Current Student
​
Christine is a current undergraduate. She is 20 years old and a graphic design major looking to learn more about UX/UI. She discovered BRIDGEGOOD when Shaun and Yudy visited her class, researched the company via social media, and thought it seemed legitimate. Since she doesn’t have much money, she liked that the BRIDGEGOOD Apprenticeship program is free. Also, she wants to gain real-world industry experience to help her land her first job out of school
​
-
Goals
-
Wants real industry experience
-
Wants to switch into a UX design career
-
Wants to advance her career by attending a bootcamp
-
Explore UX as an interest
-
​
-
Frustrations
-
Planned to do a bootcamp, but they were too expensive
-
Has not heard of BG before and is unsure of its credibility
-
Recent College Graduate
​
Bob is a recent college graduate. He does not come from a design background. He does not like the degree he graduated with, and he wants to transition into a different field of work. He is unsure of his career path, but he stumbles upon advertising for different UX bootcamps. The bootcamps seem to be legitimate but are too expensive of an investment. He finds out about BRIDGEGOOD last minute from a former alum and applies to the program hoping to get a UX design education for free.
​
-
Goals
-
Wants to learn more about UX design because he is transitioning into UX from a non-design background
-
Wants to create a portfolio in order to apply to positions
-
Obtain a UX position, which is a high-stakes career shift
-
​
-
Frustrations
-
Bootcamps are too expensive
-
Limited knowledge of design principles and UX design
-
Finding internships in UX design without any experience in the field
-
User Journey
​
The user journey we created shows how the current user discovered BRIDGEGOOD and Inspire Oakland. Users tend to find out about BRIDGEGOOD via LinkedIn or Instagram, word of mouth, or through a school presentation and then visit either the BRIDGEOOD.com or BRIDGEGOOD.org Welcome Pages. The end destination for finding information about Inspire Oakland leads to a PDF rather than a landing page.​
Storyboard
The user's journey begins when they view a BRIDGEGOOD school presentation, visit either BRIDGEGOOD.com or BRIDGEGOOD.org, and then participate in the Inspire Oakland Design Challenge.​
Crazy 8's
We each sketched our own ideas for the website layout in 8 minutes before sketching the Lo-Fi Wireframes.​
Lo-Fi Wireframes
Our goals are to have the user understand BRIDGEGOOD, get designers to participate in Inspire Oakland, and portray BRIDGEGOOD as a professional resource for new designers to encourage them to sign up. To do so, we added four different tabs (About, Portfolios, Programs, and Growth) at the top to improve navigation and organized our Welcome Page layout into the following sections: Start your design career with BRIDGEGOOD, Create a Free Portfolio, Learn from BRIDGEGOOD, Design for Social Good, Hear from BRIDGEGOOD champions, Hire BRIDGEGOOD creatives, and Why BRIDGEGOOD? For our Inspire Oakland Page, we organized the layout for the landing page into the following sections: Hero image, About BG + Inspire Oakland, Why Inspire Oakland?, Dates and Deadlines, Eligibility, Expectations/Qualifications, Design Requirements + Criteria, Roles of BG, How to get started, Get involved with BG, and Our Sponsors.​
Hi-Fi Wireframes
Inspire Oakland
Welcome Page
Usability Testing ​
After determining what the final composition would look like, we conducted usability testing to determine how people felt about the redesign. We found that people were generally happier with the redesign and had an easier time navigating the website. Some users were confused about certain call-to-action buttons on the home page, while other users suggested different words be used for the tab categories.
Final Prototype Video
Improvements ​
Navigation Bar - allows users to quickly navigate through important information for Inspire Oakland and showcases what BRIDGEGOOD has to offer on its Welcome Page (About, Portfolio, Programs, and Growth)
​
Visuals - focus more on images than text to allow users to quickly scroll through the webpages, which also improves accessibility for designers with reading disabilities
​
Program Branding - the webpages clearly showcase what BRIDGEGOOD offers to designers starting their careers
Key Takeaways ​
We will need to collect user activity, account creation, and retention rates to measure the success of the redesign and improve accordingly. Redesigning the Welcome Page and creating a designed landing page for Inspire Oakland will not only benefit BRIDGEGOOD's program branding, but will also provide current students, recent graduates, and job switchers with a free way of networking with other designers, as well as a chance to showcase their work.