Website Redesign

The Leila Janah Foundation

A complete brand and website redesign for a nonprofit.

Platforms:
Web
Deliverables:
UI/UX Design, Branding, Site Build

Meet the Client: The Leila Janah Foundation

The Leila Janah Foundation is a nonprofit that supports entrepreneurs in Kenya and Uganda. The core program of the foundation is the Give Work Challenge — a business plan competition that awards grant funding and mentorship to innovative ventures.

The foundation was originally named Samasource, but was renamed after the founder, Leila Janah, passed away from a rare form of cancer in 2020.

Project Brief: Website & Brand Redesign

When the foundation was renamed to honor Leila, they reached out for help with a rebrand and new website.

Branding

I designed a visual identity for the foundation.

UI/UX Design

I defined the information architecture & hifi designs.

Site Build

I built the responsive website using EditorX.

Design Process

Since this was a full redesign, I worked with the team to build from the ground up, starting with defining the core users of they site.

1. User Personas

I talked with the LJF team to understand the distinct audiences for the site.

2. Information Architecture

I designed a sitemap that would make it easy for each audience to find the relevant content.

4. Wireframes

I created low fidelity wireframes to outline the sections on each page.

3. Branding

I worked with the team to design a logo and visual identity for the brand.

5. Hifi Designs & Copy

I created the final designs for the site, and wrote the copy for each page.

6. Site Build & Launch

I built the website, incorporating best practices in responsive web design and SEO.

1. User Personas

I talked with the LJF team to understand the distinct audiences for the site.

2. Information Architecture

I designed a sitemap that would make it easy for each audience to find the relevant content.

3. Branding

I worked with the team to design a logo and visual identity for the brand.

4. Wireframes

I created low fidelity wireframes to outline the sections on each page.

5. Hifi Designs & Copy

I created the final designs for the site, and wrote the copy for each page.

6. Site Build & Launch

I built the website, incorporating best practices in responsive web design and SEO.

User Personas

The site serves three types of users — foundation staff doing research related to grant making, individual donors looking to make online contributions, and entrepreneurs from Kenya and Uganda looking to participate in the Give Work Challenge.

M

Michael
Foundation Officer

Michael is a program officer at a corporate foundation. He is responsible for managing a portfolio of grantees, and for sourcing new organizations to support.

He uses the website to learn about the foundation's programs, team, and social impact. He is interested in impact statistics, but also wants to understand the human side of social impact — he wants see and hear from the beneficiaries themselves.

L

Lloyd
Individual Donor

Lloyd is a high net worth individual, who supports a number of nonprofits. He primarily gives once a year, at the end of the year.

Lloyd is a long-term supporter of the Leila Janah Foundation, and primarily visits the website when he receives an email blast.

His primary activities are to view the videos of recent beneficiaries, and to give money through the online donation form.

A

Alan
Program Applicant

Alan is an aspiring entrepreneur who lives in Gulu, Uganda. He wants to expand his biogas business, but needs funding to do so.

He recently heard about the Give Work Challenge, so he Googled it and arrived at the website through his search.

His primary objective is to learn whether the Give Work Challenge is a good fit for him, and to understand the application process.

Summary of User Objectives

1.

Learn about the organization activities, team, impact, and beneficiaries.

2.

Make online donations.

3.

Understand and apply to the Give Work Challenge.

Information Architecture

The primary consideration when designing the information architecture was that the site serves three distinct audiences, each with different goals. Additionally, the core program (The Give Work Challenge) has a different name from the foundation itself, which creates some brand confusion.

To keep things organized, I decided to nest everything related to the Give Work Challenge under a header of the same name. This provides easy navigation for prospective applicants, while also helping to reinforce for donors that this was the core programmatic effort of the foundation.

I opted to make the Donate page the primary CTA, since the other candidate (Applying to the Give Work Challenge) would be out of context on the top navigation.

Branding

In order to honor Leila's legacy, we carried over some of the design elements that she had selected as part of a previous rebranding effort for Sama, the for-profit sister organization that provides AI training data services. Sama had recently gone through another rebrand, so there were some design elements that were no longer in use.

Specifically, we kept the purple color, the fonts, and some abstract patterns. To build on this foundation, I selected some additional colors and modified one of the abstract patterns to create the logo.

Color Palette

Typography

The Leila Janah Foundation
Brown, Regular & Bold
The Leila Janah Foundation
Barlow Condensed Semibold

Logo

Buttons

Low Fidelity Wireframes

Since this was a complete redesign, I started with wireframes to ensure that the team was onboard with the sections and layouts before investing a lot of time in the aesthetics.

I used a UI wireframe kit for the standard layouts, which gave me more time to focus on the more bespoke pages.

High Fidelity Designs

For the visual direction, the team wanted to go with something light, friendly, and modern. Leila always preferred the startup look over the stuffy nonprofit aesthetic.

To achieve the light look, I used white boxes and a subtle drop shadow over a light grey background. This helped clearly define each section, without needing to transition between dark and light backgrounds. To keep things friendly, I used a large corner radius on the boxes, and pill-shaped buttons.

We didn't have a lot of high-quality photo assets, so I used the asymmetrical photo blobs, which work well lower resolution images. I also included some colored blobs to add visual interest.

Site Build & Launch

Once the designs were approved, I built the site on EditorX, which is Wix's new responsive site designer. I decided to use EditorX since the foundation was already using Wix to manage their domain registration, email marketing, and Google Suite. Staying in the ecosystem eliminated the need to transition to multiple different services.

While this reduced friction up front, I ended up regretting the decision since EditorX turned out to be very unstable and lacked the functionality to execute some design elements. Nevertheless, I was able to achieve about 90% of the design that I had initially envisioned in Figma.

View Live Site

Final Thoughts

Overall, the team and board of directors were pleased with the new brand and website. I was also happy with the outcome, although there are still areas I'd like to improve using some video assets, once those become available.

Challenges

Overall, the main challenges involved creating an intuitive information architecture, dealing with limited design assets, and implementing the site on a buggy platform. I think I was able to overcome the information architecture and design asset issues, but I do wish I had built it the site on Webflow instead of EditorX.

Opportunities

One area of opportunity that I can see is building out a members section of the website of the applicants and winners of the Give Work Challenge, which could house various resources, such as guides, webinar recordings, and a community discussion board. This type of one stop shop could really help to build the community, and give the different teams the opportunity to interact and support one another.

I also think that there is a lot of room for the winning teams to improve their profile pages, and I might add a section for them to post updates about their progress.

Finally, we haven't yet launched the blog, although it is ready to deploy once the team has content to share.

Contact Me

The best way to reach me is by email at jesse.bisignano@gmail.com, or schedule time directly on my Calendly.