Women of Tomorrow

Role: User Experience Designer

Client: Women of Tomorrow

Women of Tomorrow provides group mentoring for young women in public high school by successful women in their community and grant scholarships to mentees to make college or vocational education more affordable. The fall of 2017 marks the nonprofit organization’s 20th anniversary. The organization operates in South Florida, Detroit, and Philadelphia.

philly mentees and mentors on field trip

Problem:

The website did not reflect the quality of the organization and did not meet any user goals for mentors, donors, or the mentees. The site had the following problems when my colleague and I were hired:

  • Multiple Top Navigation Bars: There were two, separate levels of main navigation as well as the complete sitemap presented as a sidebar on every web page
  • Lack of Information Architecture: The site had over 300 pages; locating information was difficult
  • Inconsistent Styling Across Site: Lack of a consistent color palette and typefaces chosen, no consistent formatting of content, and some text was uploaded as images
  • No Responsive Web Design: the site did not resize to be read on tablet or mobile devices>/li>
  • Outdated Information: Some sections of the site had not been updated for at least two years

legacy website of women of tomorrow

Solution:

I fostered the client relationship and brought on a colleague specializing in UX design and development, Louise Whitaker, to collaborate and rebuild the site. After research, designing, and testing we delivered a custom built WordPress theme surpassing client expectations. I managed the client relationship, conducted the research, and together with my colleague, we designed the structure of the new site. We ensured the technical capabilities did not exceed Women of Tomorrow’s abilities, so they could maintain and use the platform for furthering their mission.

Process:

Create Project Plan:

The Gantt Chart takes individual tasks and maps their duration in the sequence of the project timeline. This plan kept the project on schedule and allowed the client to reference how the project will run, so they know the expected completion date.

gantt chart for women of tomorrow project plan

Stakeholder Interview:

I first met with the CEO, Head of Marketing, and CFO to learn about Women of Tomorrow and their needs. By establishing goals, priorities, the resources I had to work with I set my requirements to accept the project, which included access to users for research. From here we set the redesign deadlines for the summer before their 20th anniversary. The client’s passion for providing opportunities through mentorship to the next generation was evident, but they lacked the technical staff to manage their current, “complicated” website. However, there was excellent rebranding potential and options for social media engagement which I looked forward to proposing.

Heuristic Review:

I evaluated the legacy site using Nielsen Norman’s 10 Heuristics for Usability Design and documented the initial problems after the stakeholder meeting. This study illuminated broken best practices and gave me an in-depth understanding of their website. I shared my findings with the client, and we agreed to fix these faults in the new site.
heuristic review

Focus Group:

During my first week with the client, I created a moderator guide and conducted a focus group with the South Florida mentors during their bi-annual meeting. I started to understand their needs and current frustrations. This probing conversation showed improvement opportunities for their experience. They wanted more awareness and additional donors for the organization. They noted the existing website “is useless” and “has no content I need or want to share with others.”

User Interviews:

Women of Tomorrow operates in three locations with different personalities. Staggered through the design process, I conducted twelve individual interviews across the offices with mentors and school coordinators to determine user requirements. The participants varied in organization tenure and levels of engagement to gather diverse perspectives. Highlights from the research are as follows:

  • “Focus on getting information quickly.”
  • “I Would like a calendar that displays event information.”
  • “Ideally the site would be informational with testimonials, what we do, views of our social media.”

User Tasks

Before designing, I needed to know who this website served and their goals while using the site. The interviews conducted and business goals determined the primary users and their tasks:

Donors

  • Understand the mission through a compelling narrative
  • See the donate button
  • Find ways to get involved with the organization

Mentors

  • Find specific location page information relevant to them
  • Experience cohesive branding across Women of Tomorrow
  • Learn about local events for the academic year

Internal Staff

  • Feel comfortable navigating website to update content
  • Update the event calendar for each location
  • Edit chapter information
  • Specify sponsor information

Card Sort:

I needed to know how users familiar with the Women of Tomorrow would organize the current site on their own as well as what content they would add and delete from the website as it stood. I conducted five open card sorts with mentors and school coordinators and found a need for detailed information about each location separated from universally applicable knowledge. Below is the similarity matrix and a sample grouping from the card sorts:

similarity matrix from card sorts women of tomorrow
card sort grouping

Rebranding The Style Guide:

The existing site lacked consistency in style, so we entered Women of Tomorrow into Philadthropy. I wrote the goals and brief for the student’s initiative and discussed with the stakeholders about a logo redesign. The logo was staying so that the branding would accommodate the logo. University of Miami advertising students came up with a style guide to share between the three national offices and branded social media campaign.
My partner and I tweaked the student-created design to a font easily downloaded from the internet. The guide provides a consistent and clean look that was still as serious as the work the organization conducts.

women of tomorrow colors for branding gudie

body text typography for women of tomorrow branding guide

Sitemap:

Constructing a lean information architecture reflected in a purposeful sitemap was imperative to the redesign’s success. The legacy site had over 500 pages, so my partner and I had several whiteboard sessions where we ran through organizational options while keeping in mind user goals from our research and asking questions of the client.

We accomplished the removal of unnecessary content, simplification of information, prioritized content users based on user goals. Specifically, we removed the dual sets of navigation and renamed material with intuitive labels based on the card sorts.

women of tomorrow redesigned site map

Sketching:

With a first sitemap iteration, we sketched what content would live on pages together. I had calls with the client three to four days each week. These helped answer questions to content that could be removed from the site and provided clarity and context to research since we were working on a short timeline. Having open communication with the Women of Tomorrow staff mitigated misunderstanding in priorities and client expectations so I could progress through the design phase and meet deadlines.

sketches for women of tomorrow redesign

sketching women of tomorrow redesign ideas

Testing:

While designing, we continued our research by conducting iterative usability tests on our prototypes. This helped us make improvements on each version and catch mistakes only those familiar with the organization would know. We moderated three usability tests. We also got input from the South Florida Director, CEO, VP of Development, and Founder of Women of tomorrow throughout the process.

women of tomorrow wireframe highlight

The Prototype

Implementation:

The client required a system that was easy to update and manage. We chose WordPress because it allowed us to block access to structure and style while allowing the client to edit content.

My partner used the starter template Sage by Roots built on Bootstrap for development. Her use of Advanced Custom Forms created a system that the client could easily use to change out content without touching the styling.