SCOPE
A Chrome extension that drives behavioral change by helping women avoid language that undermines their work, expertise, and pay scale.
Systems Design
UX | UI Design
Visual / Branding
Awarded best UI | UX at WWC Diversity Hackathon 2019
Just Buster
TOOLS
Competitive Analysis
Figma / Illustrator
PROJECT BRIEF
For Women Who Code's 2019 Hackathon we were encouraged to develop a project that creates meaningful impact and social change for diverse communities in tech.
Our team chose to tackle the gender pay gap by bringing awareness to the subtle ways in which we all undermine ourselves with language.
Although, our strategy and data focused mostly on the differences between men and women we understood that these disparities most likely applied to other non-binary and trans people as well.
CONSTRAINTS
After forming our teams, we were given 36 hours to conceptualize, design, and develop a minimal viable product to be shipped by the Hackathon's end.
THE CHALLENGE
From our experience we understood that:
Women unconsciously soften their language and negotiation strategies to avoid backlash and labels when they violate gender expectations.
Using linguistic moderators muddies the message and limits impact.
Behavior change is difficult—with unconscious tendencies and habits being particularly challenging to overcome.
help women avoid using language that undermines their work, expertise, and pay scale?
How might we...
SOLUTION
Just Buster is a chrome extension that helps people identify undermining language, ease the editing process, and create meaningful behavioral change through friendly coaching and goal setting tools.
USER GOALS
1 Gain Awareness
Be more informed of the language you use and how it affects you.
2 Own Your Expertise
Gain confidence while learning the language tools you need to become a better writer, speaker, and leader in your community.
Source: Center on Assets, Education & Inclusion (2013)
DISCOVERY
$0.79
The amount a woman earns compared to every $1 a man earns
The gender pay gap widens through the course of women's careers, and it is even worse for women of color. By age 45, only 2% of Asian, Black, and Hispanic women will make it to C-Suite compared to 3% of White women and 8% of White men. For those that do, they will still be paid significantly less than their male counterparts. On average, a Black female executive earns 27 percent less than a White male executive.
(payscale.com/data/gender-pay-gap)
COMPETITVE ANALYSIS
FEATURES WE LIKE FROM OUR COMPETITORS
Textio: Full highlight, corresponding colors, performance + neutrality rating
Grammarly: Goal setting + chrome extension pop-out interface
Language tool: Short onboarding + variety of better price points
STYLE TILES
Using Samantha Toy's concept of Style Tiles, we created three visual paths that we could then choose from to develop brand direction and asset creation.
WIREFRAMES + MOCKUPS
We started to create low-fidelity sketches to get a general idea of what the interface would look like. We worked our way up building high-fidelity wireframes and visual mockups in Figma later on.
NEARLY
Early sketches to plan out the interface.
Low-Fidelity Mockups
High-Fidelity Mockups
ATOMIC DESIGN SYSTEM
We built our style guide using Brad Frost's principles of Atomic Design Systems. This methodology is composed of 5 distinct stages that build on top of one another to form visual systems in a deliberate and hierarchical manner. The key idea is for small independent parts to form the larger parts of the molecular structure (reducing the need to code the same things over and over again).
VISUAL STYLE
Just Buster Chrome Extension Design System featuring typography, iconography, tabs, links, and buttons.
Brand and Design System colors chosen with AA accessibility standards in mind
Just Buster Chrome Extension Design System featuring typography, iconography, tabs, links, and buttons.
FINAL PRODUCT
TEAM LEARNINGS
From right to left: Noah Amar, Siri Sjoboen, Nicole Majeske, and Emma Zarate.
Figma is an amazing tool for collaborating in real-time! I was able to share my designs with the Front-end folks to communicate design logistics while making on-the-fly changes to ease constraints.
Chrome extensions are a little more complicated to style than we realized. We struggled to find a way to style a value with CSS in this context.
Check your colors for ADA compatibility before you start! This one is a given but, somehow in the rush of everything, we missed this step and ended up restyling everything to meet ADA compliance.
—Nicole Majeske
PRODUCT DESIGN
We learned how far we've come as developers and how far we still need to go! Some of us have only traversed our own single-page applications so it was really interesting seeing how to traverse the entire web! We learned to work with Google Extension APIs and how to deliver a MVP within these constraints.
—Joined statement from Siri Sjoboen, Emma Zarate, and Noah Amar