Female Funders

Website for an education platform

When
2018-2019
What
Information architecture, branding, SEO, interface/accessibility/responsive design, development

Summary

I redesigned and built a website for an educational platform, increasing SEO, accessibility, and conversion rates. This was a long-term project where I collaborated with other designers, directors, and marketers. I learned a lot about web strategy, site optimization, how to build scalable sites, and as well as many SEO methods. The resulting product had major performance and usability improvements, which generated leads and conversions.

View the site here.

The site's Lighthouse audit score is near perfect after the site was redesigned and deployed.

Background

Female Funders is an educational platform that empowers females to get into angel investing. After undergoing a relaunch in the Spring of 2018, the program has rapidly evolved, changing education material, networking events, and marketing strategies.

As a result of the changing needs, I worked closely with the program director to help shape and redesign the site, with the goal of improving the company brand and site performance.

We conducted research on our target audience and discovered potential customers were abandoning the site because they were feeling inadequate. Something as abstract as a user's feelings was hard to quantify, but it was important to address; we wanted the site to be more warm and welcoming.

The progression of the website throughout the project. The first image on the left is from Nov 2018, with the last from May 2019. View the higher resolution image here.

Measuring success

  • Improve the site branding. The related quantifiable metrics were:
    • Increase Time on Page by 50%. The existing average was less than 30 seconds.
    • Decrease bounce rates by 50%. There was an overwhelming amount of information, which made it difficult to understand what we were offering, and what the next steps were.
  • Increase SEO ratings. The site lacked certain meta tags, settings, and social media integrations.
  • Increase site speed. Image-heavy assets and non-optimized media assets slowed the site.
  • Make the site accessible and mobile-responsive. While the site could work on mobile and met most WCAG 2.0 (A) requirements, there were still improvements to be made, especially with buttons and form design.
  • Empower users to make informed decisions. One large page of text and data was intimidating and made it difficult to track user flow since there was only one page. By splitting the content, and offering multiple chances to Learn More, we could gather more metrics.

Designs

Figma artboards showing part of the design process for redesigning the home page. I worked with another designer and "ping-ponged" design iterations. View the higher resolution image here.

Visual identity

The key theme centered around empowering women, and there was a lot of effort put into finding the right imagery to set the tone to help visitors resonate with the site before reading a single word. I explored various themes and moods but ended up deciding to go with imagery that featured our target demographic. I added color treatment and photo-editing to compliment the rest of the site's colors.

The site's colors were also chosen with care: while the teal hue was associated with the original branding, it caused a few problems with accessibility due to how light it was. As a solution, the color value was adjusted slightly and subtle text-shadows were added to emphasize the contrast. We also wanted to de-emphasize the blue, since it's traditionally known for being cold, despite it being one of the most popular brand colors. The teal was feminine and helped set a more calming mood.

Site structure

The course, Angel Academy, was now the focus of the site, but the program's features were diluted by having competing information on the home page. I separated the content into sub-pages in order to have a more streamlined funnel of content. The initial goal was to get visitors to learn more about Angel Academy, not increase the raw number of sign-ups. This seems counter-intuitive at first since content became more difficult to access, but we actually found that we generated higher quality leads with a higher rate of application approval!

On each page under the Angel Academy section, the content was straight to the point and was followed up with 2 CTA's: Apply or Learn More. This was designed as a nudge, a filter, and as a data collection point. Being able to see where drop-offs occurred allows us to correct and optimize the issues.

The new sitemap had more pages due to the distribution of content.

Form optimization

For newsletter sign-ups, having fewer form inputs directly correlates to a higher completion rate, so at one point, I reduced the field inputs to only the email in order to increase the subscription count. However, like the previous section, it was more important to generate quality leads. We were receiving interest from people internationally, but our program only ran in the Americas, and we want to focus on this geographic area first. I eventually split up the form to the inputs below. This is definitely not the ideal case for all forms, but in our specific situation, it works.

The Female Funders newsletter subscription form had—gasp—5 input fields.

Development

I built most of the site by myself on React, with Contentful as a CMS tool for the copy and blog updates, combined with Netlify for deployment, and Zapier for workflow automation.

I also used Cypress for integration testing, which was especially useful for testing the Angel Academy Learn More funnel, and regression testing.

Results & reflections

Overall the designs underwent several iterations since we follow a lean and agile methodology at Highline Beta, but each iteration provided opportunities to learn and improve. By making well-informed hypotheses and adjusting based on the new data, the site update was a relative success.

Compared with the previous website design, the user's Time on Page went up by 80%, and the Bounce Rate decreased by 30%. Several other factors impact this data, such as traffic sources and press-releases, but it is a good start towards building better a website in this specific industry.