top of page
justemailwindowmockup.png

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
Women_Stats.jpeg
$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
Textio Competitive Analysis.png
Grammerly Competitive Analysis.png

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
Just_buster_Wire_Sketches.jpg

Early sketches to plan out the interface.

Wireframe 1.5.png
Wireframe 1.3.png

Low-Fidelity Mockups

Pop-Up no hover.png
Card 2.png

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).

Atomic_Design.png
VISUAL STYLE
FINAL PRODUCT
BothBrowswerWindows.png
TEAM LEARNINGS
Image from iOS.jpg

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

FRONT END 
bottom of page