BRIDGEGOOD Inclusion

The BRIDGEGOOD Inclusion feature seeks to provide resources to creatives who want to further educate themselves on inclusivity and accessibility, and how to incorporate these ideals into designs and ultimately everyday life.

Client: Formerly Oakland Digital Arts & Literacy Center, BRIDGEGOOD is a nonprofit organization that seeks to assist creatives from all backgrounds and allow them to work in design and tech.

Challenge

BRIDGEGOOD needs to administer ways to include principles of inclusivity for creatives. BRIDGEGOOD’s mission is centered around diversity, inclusion and social good; creatives will have access and resource to finding these principles and values.

Duration: 2 weeks

Deliverables: Assets, Lo/Mid-Fidelity Mockups, Hi-Fidelity Prototype, User Testing, Sitemap, User Flow, Task Analysis, Storyboard, Presentation Deck, Final XD & Illustrator files

Role

UX Designer: Being in charge with creating and refining the feature’s layout on Adobe XD. Wireframing, prototyping and changing when needed. As a team, we would ideate, create word content, research, user test and interview with the Product Manager and Engineer.

Our team lead, Sarrah, ensured we communicated effectively and entrusted in our skills to finish our tasks. Our voices were spoken and ideas projected — equal work from all of us were contributed into our feature.

Design Tools

Ideation: Miro, Slack, Trello, Procreate, Google Doc

Illustrations: Adobe Illustrator

Wireframing & Prototyping: Adobe XD

Problem Statement

BRIDGEGOOD needs to administer a reliable resource to help nurture creatives to become more conscious in design, tech, and everyday life. BRIDGEGOOD creatives need a feature where they can engage in learning and creating an inclusive design.

Solution

Design a feature within BRIDGEGOOD’s website to instill relevant principles of empathy and inclusion in tech and ultimately everyday life. Our feature implements ways of learning and creating inclusive design, and even allows for meaningful engagements through discussion.

Team

Designers/Researchers: Afua S, Sarrah S, Me

Product Manager: Shaun Tai

Program Managers: Shaun Tai, Yudy Orellana

Engineer: Trung Huynh

Preliminary

Step 1: Research & Design System

My team and fellow apprentices had to be accustomed to designing for brand standards and guidelines; to ensure an easier and quicker workflow, we created a design system during design sprints to familiarize and reference back to. We each created design systems from our previous teams that we can reference and help us identify what assets we can use going into our product.

One BRIDGEOOD Design System (created by me)

HMW statements created on Miro

Step 2: Storyboard and Persona

Knowing the direction of our feature, storyboards and personas were created for end users: current and new BRIDGEGOOD creatives and non-BRIDGEGOOD creatives.

The audience we are building the feature for are creatives looking to learn about and instill principles of inclusion and empathy into their works and ultimately incorporate them into everyday lifestyle.

Returning BRIDGEGOOD Creative (Illustrated by Me on Procreate)

New BRIDGEGOOD Creative (Illustrated by Sarrah S.)

Step 3: Low Fidelity Prototype

Further developing our idea into a low-fidelity prototype required us to elaborate on what information needed to be displayed most and how. As a team, we individually created how the feature would appear in a low/mid-fidelity models. After deciding on the name BRIDGEGOOD Inclusion, we created potential possibilities to go into the feature.

Low-Fidelity Prototype (illustrated by Me)

Step 4: Mid-Fidelity Prototype

Our original layout involved including a new tab on BRIDGEGOOD’s header titled “Community,” which would then lead users into the BG Inclusion feature following further tabs: Mission, Learn, Community, Design and Toolkit.

Original BG Inclusion Layout created on Adobe XD

Step 5: User Testing

Following the critique given by Slack designers and the Product/Program managers, some important feedback was about the design’s hierarchy and navigation — our focus needed to be addressed in lesser quantity, focusing on the quality of how it needed to be shared. Our team then created a sticky side navigation bar with narrowed-down tabs with really compact information.

As a team, we gathered participants and conducted 5 User Testing’s on current BRIDGEGOOD apprentices and creatives via Zoom. Throughout each session, pain points, pleasure points, and areas of improvement were noted and later prioritized as a group. (Key insights)

First round of User Interviews

After fleshing out another prototype to fix original concerns, user testing was conducted on 4 more participants (both BRIDGEGOOD creatives and non-BRIDGEGOOD users). Initial concerns this time were that text was too lengthy and hard to digest. To tackle on this issue, the word content was made more concise and more eye-grabbing phrases and titles were created.

Notes taken during user testing on Miro

Step 6: Hi-fidelity Prototype

Part 1: Creating Assets

The assets going into the Inclusion feature were created and illustrated by our team lead, Sarrah, on Adobe Illustrator. We decided to go with this creative decision because Sarrah’s illustrations were unique with her signature single-line technique method; illustrations like these are found all throughout the feature.

Illustration Assets (illustrated by Sarrah S. on Adobe Illustrator)

Part 2: Word Content (Google Doc)

Team collaboration was necessary in depicting accurate and engaging content to pique user and viewer interests; our goal was to inform users on accessibility and inclusivity in design and ways to achieve so.

In our feature, we created an ABCs of Inclusivity, which hone in on quickly informing terms of inclusion. Word content was created on a Google Doc to aid the engineer, Trung, to insert and build the feature. Our word content found throughout the feature had to be precise and not too lengthy.

Part 3: Prototype

We problem solved to better layout how we might address earlier critiques given from Slack designers, Product manager and user interviews. Our BRIDGEGOOD Inclusion feature focused on 3 tabs: Learn About Inclusivity, Create Inclusive Design, and Participate in a Discussion.

Being in charge of layout and content organization, here is the final layout after some collaborating.

Hi-Fidelity Prototype

Final Prototype

Part 1: Learn About Inclusivity

The first page of BRIDGEGOOD Inclusion focuses on some basics of inclusivity and empathy — users can easily skim and learn some important facts and become more knowledgeable in the matter.

The second portion of this page are the ABC’s of Inclusivity, users can interact with each letter (card) and learn more about the definition of the word provided (i.e. A = Accessible).

Learn About Inclusivity page

ABC’s of Inclusivity flip cards

Part 2: Create Inclusive Design

The second part of the feature contains 3 parts: Inclusive Design Interactive cards, a design resource toolkit, and a quiz portion.

The quiz is to help users understand the differences between what is accessible and non-accessible in design; explanations are mentioned if users click the wrong option (no score is provided, it is meant for fun).

Create Inclusive Design page, featuring flip cards

Quiz portion, showing Correct and Wrong answer

Part 3: Participate in a Discussion

The final page in the feature is a forum for creatives to discuss and communicate amongst each other — to share any thoughts, experiences and/or questions concerning design, inclusivity or resources. Current and signed-in BRIDGEGOOD creatives can create or participate in ongoing discussions; non-BRIDGEGOOD users can view threads, but don’t have the option to participate.

Users will also have access to one’s BRIDGEGOOD portfolio and can follow them through the icons.

Discussion pop up

Part 4: Mobile & Tablet View

While creating the desktop view, simultaneously the mobile and tablet views were also created and revised to better fit the brand guidelines and for mobile/tablet standards.

Mobile view

Tablet view

Part 5: Admin View

An admin view was created in the final file in our Adobe XD in order for the product manager, Shaun, to easily access and make any edits or adjustments as needed. For example, the ABCs of Inclusivity, quiz questions, and text can be changed. Admins have the power to monitor and delete comments or entire threads in the Discussion portion entirely if there are indications of harassment or violation of any code of conduct.

Part 6: User Flow

Provided is a video taking a user through the entirety of the feature on the desktop.

Conclusion

Working within BRIDGEGOOD’s UX Apprenticeship helped me grow as a designer and person in various ways. As a team, we problem-solved and helped one another via Zoom or Slack whenever changes needed to be made or if we felt stuck or challenged. Within a short duration, we accomplished many successful user testing, prototype editing, and group meetings. Together we created a product true to BRIDGEGOOD’s mission statement while retaining the design to fit their brand guidelines.

• This feature is accessible to 8,000 student creatives.

• Impacted designers from all different backgrounds (people of color, disabilities, etc).

• Under-resourced students become more well-versed in design principles.

Final Product: BRIDGEGOOD.com/inclusion

BRIDGEGOOD Inclusion mock up

Key Takeaways

1) I learned how to design with a strong inclusive mindset; when designing it is important to keep in mind how to create designs accessible to a multitude of audiences.

2) Working with an engineer demonstrated how much thought and energy goes into creating the product in the back-end; communication was key in order to format our design just right to be able to be officially created.

3) Receiving feedback is critical, but sharing your point of view with stakeholders helps them to understand what is being created. They respect your ideas and process.