EmpowHerTo
Website Redesign
Learning
Mentorship
Non-Profit Organization

Website Redesign

1.1

Enhancing EmpowHerTo's website to increase outreach and optimize first-time user experiences.

My Roles
Overview
EmpowHerTo is a non-profit organization with a mission to support and empower young females. They partner with mentors, schools, and other organizations to create a safe community, and extend opportunities and support to young women. Members can find general mentorship, attend various workshops and events, or enroll in programs to learn about mental health and wellness, financial literacy, coding and design, and entrepreneurship.
The Goal 🎯
EmpowHerTo's largest user base are: 1) young females eager to learn about EmpowHerTo's community and programs and 2) individuals interested in teaching and mentoring young females. Our objectives were to increase and retain user interests in mentorship and menteeship. We focused on redeveloping and redesigning the organization's brand and how users experience learning about and joining their community.
DURATION
January 2024 - February 2024
(3 weeks)
TOOLS
Figma, Zoom, Slack, Google Suite
TEAM
Suzanne Nuyen (UXR)
Rubia Hermans (UXD/UID)
Ulzii Dorjbal (UXD/UID)
Payam Olfat (UXD/UID)
Austin Aguilar (UXR)
1. Overview
2. Research
3. Ideation
4. Designing
5. Delivery
2.1

Stakeholder Goals & Pain Points

Stakeholders aim for outreach, support, and collaboration.
I reached out to EmpowHerTo's U.S. team and organized for our team to meet with the Director and Board of People and Culture to learn more about their organization, vision, goals, and challenges. Stakeholders shared that they aim for outreach, support, and collaboration.

EmpowHerTo supports and empowers young ladies to break systemic barriers by being a vessel for their success. They want to spread the word about their values, mission, and programs to attract potential mentees and mentors with shared values.
Goals
Organization branding, promoting programs offered at each EmpowHerTo branch, and partnering with multiple school districts.
Challenges
Gaining mentor and mentee interest limited because current outreach efforts are mostly local community engagements and in-person appearances.
Vision
Streamline registration, membership, and program engagement to be increase accessibility and expand presence.
Achievements
Collaboration with school districts and local churches to raise awareness of the organization and its missions and opportunities.

Heuristic Evaluation

2.3
We conducted a heuristic evaluation to identify objective design and usability issues.

We went through each page and assessed the page's design consistency, accessibility, and hierarchy to determine and strategize which pages and sections could be improved. By understanding current design issues, we were able to identify focus areas for improvement.

Major problems identified were lack of color accessibility, button design inconsistency, type design inconsistency, and style inconsistency. Inaccessibility and inconsistency largely contribute to a poor user experience, so we kept these issues in mind and prioritized them in our redesign process.

The annotated visual below is our analysis of the "Home" page, and is only one part of our full analysis.

User Interviews

2.4
The research problem was understanding individuals' thought-processes and values towards programs and communities.

Interview and survey questions were developed around three core research objectives:

   ⊹ Accessibility: Understand what conveniences/
accommodations individuals look for/need from programs, communities, mentors, or instructors.
   ⊹ Approachability: Understand what makes individuals feel welcome and interested in an organization and their programs.
   ⊹ Value: Understand how individuals determine the long-term value of a company, community, or program.

Discovering user experiences around these three core objectives would give us a well-rounded understanding of how to prioritize, design, and frame organization's content in user-centric manner.

We screened for two user groups of interest: mentees and mentors. We conducted a total of six remote, moderated, semi-structured interviews via Zoom - three interviews of each user type.

Participants who qualified as "mentors" were individuals who had experience volunteering or working as a mentor and guided and/or supported one or multiple individual(s) towards personal, career, health, etc. development.

Participants who qualified as "mentees" were individuals who had experience being a mentee and had a mentor support and/or guide them towards their personal, career health, etc. goals.

Surveys were also distributed to gather qualitative and quantitative data. The survey included open-ended questions asking participants what their mentorship/menteeship experience was like, and if they didn't have any, what prevented them. We asked several multi-select questions to gather data on how to optimize outreach efforts.
Mentorship and menteeship experiences each vary in expectations and responsibilities. Interviews were semi-structured to take advantage of opportunities for unique insights.

Our team collaborated on the research plan, method, and script, and reviewed everything as a team to come to agreement and understanding for our moderating sessions.

We used Google Sheets to collect interview notes for each user group, and Figma to synthesize our qualitative data. It was important to discover themes and trends among individuals experienced in being mentees and mentors, and individuals interested in being first-time mentees and mentors. We used an affinity diagram to discover and categorize these trends around what our users' needs and pain points are.

Once data was sorted by themes, we wanted to dig deeper to understand how to design and deliver a user-centric experience that fulfills needs and resolves pain points. We used empathy maps to discuss, deep-dive, and map out insights hidden between context of interview conversations. What do users think? What do users say? What do users feel? What do users do? 

These interview findings were vital to developing actionable insights and design objectives. The diagrams are displayed in "Research Findings".
We understood that the organization had a rich community and plenty of opportunities of interest for potential mentees and mentors. However, we needed to redesign the website to communicate these opportunities, and showcase the organization's abilities.

Our qualitative and quantitative data provided us with rich insights to direct redesign objectives.

The figures on the right (Figure 1 - Figure 4) are affinity and empathy maps split into mentee and mentor user types.

In interview and survey data, we found a few conclusive user insights common amongst both groups:

Interviews Insights
   
Individuals want to be apart of communities of like-minded individuals.
    Individuals are more motivated to be an active member of a community/program/organization which displays organization and commitment.
    Individuals are more willing to be apart of a cause or organization that shows credibility and achievement.
    Individuals need to feel a sense of trust and safety to engage and succeed in any space.

Survey Insights
   
100% of participants with experience in a non-profit organization found it extremely fulfilling and rewarding.
    57% of participants have not recently been apart of a non-profit organization for women. 16% of them never saw an opportunity to.
    43% of participants with mentee/mentor experiences felt online interactions were limited.
Figure 1.   Mentee Affinity Diagram
Figure 2.   Mentee Empathy Map
Figure 3.   Mentor Affinity Diagram
Figure 4.   Mentor Empathy Diagram
2.5

I Like, I Wish, What If...

Mentee I Like, I Wish, What If...
Mentor I Like, I Wish, What If...

User Personas

2.6
Mentee Persona
Mentor Persona

Problem Statement & Pain Points

2.7
Elsa needs organization, community, trust, credibility, and relatability to confidently commit to a program and menteeship opportunity. How might we assure this through the EmpowHerTo website?
1. Difficulty finding program details.
User need a thorough overview of the opportunities offered so that they may quickly decide if they're interested.
2. Missing or out-dated event details.
Users need up-to-date event schedules and details so they don't miss out on opportunities of interest.
3. Lack of information about community of mentors and peers.
Users need to know about the community to see the organization's programs and space as trustworthy and safe.
4. Presentation of leadership could raise concerns about organization's integrity.
Diverse leadership can promote personal feelings of inclusion and increase organization credibility.
5. Lack of alumni testimonials.
Learning about alumni will increase organization's credibility and help users relate.
1. Lengthy Mission and Value Statements.
Users need a quick understanding of the organization's mission(s), values, and goals to determine whether and how they may support.
2. Job overviews contain unnecessary content, cluttering already lengthy job descriptions.
Users need a quick overview of job details to determine whether they are suitable applicants.
3. Slang and inconsistent imagery causes distrust in professionalism.
Users want to work with a professional organization to confidently fulfill their goals and contribute as a mentor.
4. Organization achievements are hidden and wordy.
Users need to easily identify achievements and successes to feel confident about working with an organization.
5. Issues with accessibility and scannability.
Users need an accessible, scannable website that clearly communicates the organization's purpose and opportunities.
In order to work with an organization as a mentor, Lauren needs relatability, simplicity, trust, transparency, and accessibility. How might we communicate this through the EmpowHerTo website?

Ideation

3.1
After discovering user journey pain points, we brainstormed solutions and design ideas.
Elsa's User Flow Opportunities
Reorganize Navigation & Information Architecture
    Create a dedicated "Programs" page
   Create dedicated pages for each program
   Program cards for engaging and quick comparison and understanding
   Program curriculum, duration, and sign-up within each program's page
Updated Event Info
   Create a reusable event card and page structure
   Clearly display title, date, and location of event
   Display visual infographic to attract attention
Community Transparency
   Introduce organization's background
   ⊹
Page displaying currently involved mentors, their occupation, accreditations, and mentorship skills
   ⊹
Create reusable cards to feature all mentors
   ⊹
Display professional photos of mentors to show diversity and build trust
Professionalism and Consistency
   Update leadership team's professional headshots
   ⊹
Redesign leadership team's biography cards for increased accessibility
   Introduce leadership team on "Home" page using a carousel
Increased Testimonials
    Testimonials for experiences with programs and/or mentorship
   Testimonials on different pages
Lauren's User Flow Opportunities
Clear Mission, Values, & CTAs
   ⊹
Refine copy and UI to accessibly display mission, values, and call-to-actions
   ⊹
Redesign UI for accessible and consistent CTA buttons to be paired aside value statements
   ⊹
Display organization values on a marquee for easy quick-scanning
    Follow grids and margins for scannability and consistency
Quick-Scan of Work Responsibilities  
   Reduce unnecessary content on page
   ⊹
Redesign UI style with a new, accessible color palette
   ⊹
Refine copy and reduce text for clearness and conciseness
Reduce Slang and Increase Brand Professionalism
   Use writing and language that is professional but also welcoming for young audiences aged 14-21 years old
   Create avatars to choose from if members or leadership don't have professional photos
Quick Display of Organization Achievements & Goals
   Reduce wordy display of achievements and goals
   ⊹
Display achievements and goals visually
Improve Accessibility, Scannability, and IA
   Reorganize sitemap for more intuitive user flows
   ⊹
Briefly present valuable information followed by call-to-action buttons to learn more, donate, or join
   Design a new UI style guide to create consistent and accessible state buttons and color palettes

Information Architecture & User Flows

4.1
We began the design phase with redesigning the information architecture. The current navigation and information architecture was confusing and missing important information. The existing structure didn't offer the real estate needed to meet some design goals, as defined through the research and ideation phase. As a solution, we decided to create pages such as Programs, Workshops, and Events. We conducted card sorting to redesign the navigation experience in alignment with user needs and stakeholder goals. The redesigned structure is more accessible, intuitive, and productively informative.
We defined the user flow for each of our user groups to visualize what the process would look like for them to achieve their goals on the website. They are the likely experiences that each user group might have upon learning about the organization and applying as a mentee or mentor. This helped us detail the areas for testing and designing.

Wireflow

4.2
After some team discussion, we all agreed that given our timeline, we would have to rescope our feature development. As researchers and designers, we decided it was most important to prioritize main user flow features and redesigns. Main priorities include development and redesign for the landing/home page, organization mission and team, programs and program details, and volunteer/career opportunities.

We developed mid-fi prototypes based on our research findings. Below are the wireflows that each user group will experience when learning about the organization and applying as a mentee or mentor.

Usability Tests

4.3
We tested the mid-fidelity prototype between two user groups: mentees and mentors. I designed usability test plans for both user groups to see whether user goals could be met, and to discover opportunities for improvement in our user flows and design solutions.

Mentees' user scenario was: A young woman interested in finding trustworthy communities and opportunities to learn and grow from.

Mentees' usability tests were comprised of two tasks:

Task 1: Discover the organization's achievements for 2023.
Task 2: Sign up for the Tech4Her program.

Mentors' user scenario was: An adult who is looking to volunteer with a credible organization to mentor, teach, and share their skills and experiences with young women.

Mentors' usability tests were comprised of two tasks:

Task 1: Discover the organization's achievements for 2023.
Task 2: Sign up to become a volunteer mentor with the organization.

Seven usability tests were conducted: three mentee usability tests and four mentor usability tests. Both mentee and mentor user groups completed all of their tasks with 100% success rates. Using a semi-structured method, we were also able to receive valuable qualitative data on the mid-fidelity prototypes. We used all the usability testing data to direct improvements for the high-fidelity prototype at this scope.
Qualititative Data

Moodboard & Style Guide

4.4
We created a moodboard to inspire the design and brand direction for the high-fidelity prototype.
After drawing some inspiration, we tested out different color combinations, font pairings, accents, imagery, and layouts. Our high-fidelity mock-up was designed with intention to be an accessible, engaging, and user-centric experience.
After drawing some inspiration, we tested out different color combinations, font pairings, accents, imagery, and layouts. Our high-fidelity mock-up was designed with intention to be an accessible, engaging, and user-centric user experience.

Final Prototype

5.1
Our high-fidelity prototype comprehensively considers and solves all main user flow pain points discovered in the early research and discovery phases. It connects with all target user audiences, clearly depicts EmpowHerTo's mission, and offers an informative and seamless user journey calling users to act.

Reflecting

This project was exciting as there was so much room for growth and creativity. We had rich data and insight on how we could go about creating a product to provide young females like Elsa with exciting educational opportunities and an empowering community and mentors like Lauren with a passionate, like-minded team to work with. Understanding stakeholder goals and challenges helped us define and focus on a very specific part of the user experience - increasing user interest and registration. Therefore, we focused on those developments for this three-week project.

Despite discovering rich, diverse ideas rooted in our research, we unfortunately couldn't develop all the ideas and spread ourselves thin. Instead, we opted to optimize a select few features in this phase. In future developments, priorities would be to find opportunities for improving and flushing out details from this first iteration. It would be helpful to conduct more benchmark tests, usability tests, interviews, and persona development. We would also like to integrate more features to create a much richer and more valuable experience for all users. Our research revealed that event notification, event registration, web-based application, and program registration are aspects we could later improve to enhance the user journey and retain user interest and participation in the organization.