Moving The Goalposts Kilifi Portfolio Showcase

Moving The Goalposts Kilifi

An NGO based in the heart of Kilifi County, Kenya, using sports for development. Their reach of over 50,000 girls has impacted more than 20 communities in 3 counties, all by following their passion for football. The website needs to match this level of passion.

Web Design MTG(K) 2024 UX/UI, Development

Understanding The Brand

The brand sets to positively influence communities by working with them to provide skills and opportunities for girls and young women to achieve their full potential through football. The vision is to have a fair, just and inclusive world where girls and young women’s rights are acknowledged, respected and realized.

Site Review

To be able to redesign the site I first had to understand what elements of the site were not working for them, so as to make sure we do not circle back to having to redesign the site again in 5 years time.

A review of the header section of the site.
Breaking down the pros and cons of the main content and sidebar areas.
Starting to get inspiration as to what can be for the new design.

The Optimal User Journey

One of the primary objectives of a website for an NGO is to help with fund raising, and that means donors are always going to be part of the key target audience. I have assumed the role of a donor for this user journey to assist with mapping out user needs.

Try to understand where your users are coming from and make sure you can brand/control the content there.
This journey maps out the desired experience a donor would want to have if viewing on phone.
The Exit Strategy: always design for where the user needs to go next especially if they have not interacted with your content.

Sample Page Designs

I usually get the design right on first attempt but in this case I had to do 3 different versions just to ensure the right direction has been taken to appropriately represent the brand.

The extremely visual approach, tends to have difficulties scaling down to mobile.
With the heavy nagivation from the existing website a vertical navigation would work best if we want to go extremely visual.
Dark mode doesn't always have to be black..
An introduction to call to actions.
I wanted to close the page on an inspirational note as a just incase the user doesn't find what they need.
A horizontal nav with a modern approach to it.
Adding the background to the navigation does eat into the design but improves the UX for most of the TA.

Build Considerations

Client was currently using a custom CMS that made it difficult for them to have fun with the website and requested to switch to a wordpress CMS. It needed to be fast and simple to use. My view on this is to always go with a static HTML/CSS/JS site with 3rd party integrations for content (use instagram for images and LinkedIn for blog posts for example). But this has a skillset requirement to be able to make the one off changes.

Let your operational problems inform your design, and your design govern your development needs.
The most sustainable solution usually comes from making the best of what you currently have i.e. internall skillsets.