81cents
81cents
Helping marginalized communities negotiate in the workplace
Helping marginalized communities negotiate in the workplace
Client
81cents
My Role
UX Designer
Team
2 founders, graphic designer
Duration
12 weeks
Background
Over the summer of 2019, I volunteered to redesign the website of 81cents, a company that aims to reduce the gender wage gap by empowering members of historically marginalized groups to negotiate their compensations. They do this by providing personalized compensation reports with inputs from top professionals and recruiters in the field.
Problem
81¢
In the United States, the average woman earns $0.81 for each dollar earned by her male counterpart and the average black woman earns $0.61 for each dollar earned by the average white man:
Members of historically marginalized groups receive lower pay for doing the same work.
How might we use the website to better communicate the intent of this product to help these communities and build trust?
My role
For this project, I redesigned the homepage and created the Testimonials and Product pages by leveraging data from previous surveys & conducting design reviews and competitive analyses. I also worked on the copy and created several infographics & illustrations.
My process
Initial stakeholder meeting
Following the initial meeting with the founders of the company, it was clear that since the company was in its initial stages of development, I would need to work on developing a brand for it so that users would trust it.
Increase user conversion so that they place an order after visiting the website
Improve the visual design using the existing style guide
Create testimonials and product pages to lend credibility to the product
Doing the research
I started out by understanding how users perceive, use and interact with the website in its current state.
Since the client had already conducted surveys and interviews with users to assess the impact of the product and the website, I decided to focus on design critiques and competitive analysis of other commercial websites and use everything together to inform the final design.
👩🏼🎨 Design Critiques
Conducted critique sessions with 3 designers to gauge their reactions to the website and identify usability problems related to the flow and information architecture.
📊 Competitive Analysis
Looked at ways in which other SaaS companies marketed their products and framed their CTAs such as Figma, InVision, AppFolio, etc.
📝 Existing data from surveys and interviews
Analyzed data collected previously from users in surveys and interviews regarding the website and product.
There were some general themes that emerged from the research:
1. Information Architecture
- Information needs to be provided sequentially in a hierarchy
- Show info about current customers to lend credibility
- Highlight the process of getting the report earlier on a page since it's a new product
- For testimonials, more important to highlight the role & company rather than their name (as it was before)
2. Visual design & layout
- Ensure consistency wrt to typography & colour choice
- Add illustrations and icons to make all that info easier to digest
- Hero image should align with the mission of the company
3. Call to Action buttons
- CTAs need to be clear and to the point about their intent
- Frame the text around them as questions such that it makes users want to click on it to know more
- Should be present in every section so that the user can take the appropriate action whenever new info is presented to them
01 Homepage redesign
I started by creating sketches of the new homepage based on inputs from both the research & existing content.
I created multiple iterations of the final design in Sketch. I always kept the founders in the loop about every design decision and involved them in the discussions.
Here is the final screen I created. You can also check it out on the real website (although, it has been changed a little since I last worked on it)
02 Testimonials page
This page was created to add credibility by highlighting the product's impact on people around the country hailing from different ethnic backgrounds & working in a variety of roles.
Testimonials serve to provide information about the experiences of other people. Users want to see why someone had a good experience and why that person's opinion matters i.e. here that can be conveyed through the person's job title & company.
I created four different layouts. After many discussions, we all decided on the last option because:
- The layout is clear & brings attention to the most important information
- Information flows for each testimonial from left to right, top to down
Initial explorations
Chosen design with rationale
Hi-fidelity versions of the explorations:
Reflection & conclusion
This was my first experience working on a product that was already on the market. This influenced the way I made decisions because they needed to be evaluated not only based on UX but also on their business impact. Small things like the placement of CTAs had the potential to influence the way a user would be converted to a buyer.
Working with a real client taught me the importance of communicating clearly and backing every single design with a reason. It wasn't useful to have an element on the page there just because I wanted it -- it needed to be there to serve a purpose for the user. I also learned that briefs can differ many times from what is actually desired and to be prepared to make the necessary changes at the last minute.
Another important yet frustrating aspect was working within the technical constraints of Squarespace to implement the exact designs I created. I had to learn to think on the fly and make compromises to my designs in order to accommodate them.