Africa No-Code

Africa No-Code is a community of Africans building mobile and web applications using no-code tools. Africa No-Code also provides workshops and consultation services for people interested in learning how to use no-code platforms.

Africa No-Code website mockup


Redesign the website for Africa No-Code.

My role

I am in charge of the entire website design process from the product definition to creating the final designs. 


I am working with 2 team members handling tech and research.




August 2021 - May 2022

Why the redesign?

The current website was put up as a one page to test the idea. Now that the company has more feedback from the users, there is a need for a fully built out website. The main goal of the website is to create awareness about the company and its services and to encourage people to sign up.

Final Design Overview

Africa No-Code Before
Africa No-Code After


Product Definition

The product definition stage involved discussions with multiple stakeholders to determine the value propositions and the business goals of Africa No-Code.

After having discussions with stakeholders, it was determined that the goals of Africa No-Code were: 

The goal of the website is to showcase these value propositions to create awareness of the offerings provided by ANC and to encourage people to sign up.

User Research and Key Findings

The main goals of the user research were to identify different types of users that would benefit from joining Africa No-Code, their needs, pain points, and goals. 

We had individual phone interviews with 6 users. 
Africa No-Code user research

Research Analysis

User segments

Based on the user research, I created 3 categories of user segments.
Africa No-Code user segments

Journey map

I created the journey map to show the whole experience of a user, from the first time they hear about Africa No-Code until they use it, and even after signing up.

The journey map also shows different feelings and thoughts the users will have throughout the process so that later we can reflect to them on the design.
Africa No-Code journey map

Ideating and Designing

Opportunities from Research

After completing the user research and analyzing user personas, we realized that there are a lot of opportunities to solve the pain points of our users. 

Below is a breakdown of some of the pain points and opportunities that would be implemented on the website page.

ANC pain points and solutions


Based on the opportunities from research, I came up with sketches with ideas for a website that would solve the users’ pain points and encourage them to sign up. 
Below are the initial and updated sketches.

Home page initial sketch
ANC home page sketch
Home page updated sketch
ANC updated home sketch


I used Figma to transform sketch 2 into wireframes that would help establish the structure and layout of the content. I reached out to the team and some users to get feedback.

Home page wireframes
Home page wireframes
Course page wireframes
Course page wireframes

Design and Brand Style Guide

I created the design and brand style guide to ensure consistency and cohesiveness of the high-fidelity designs.
Africa No-Code brand style guide

Landing page

Using the brand and design style guide, I created the high fidelity design for the landing page. Below is the side by side comparison of before and after redesign.

Africa No-Code Before
Africa No-Code After
I also designed the courses page to show how the courses will be displayed.
Below is the photo of the courses page wireframe and the design.
Courses wireframes
Courses hi-fi design

User Testing and Validation

After designing the website, I tested it with 5 users. Here is the feedback that we got:

What worked well

  • Prominent calls to action
  • Short and precise copy
  • Multiple calls to action

What could be improved

  • Poor visibility because of low color contrast. It was hard to skim through quickly.
  • The arrangement of courses in the courses page was a bit confusing. It was hard for users to tell which title belonged to the courses shown.

Final Designs

I used the feedback that I got about low contrast and course arrangement to iterate and come up with the final designs.
Below are the final designs for the home page and courses page.
Final Home Page Design
Final home page design
Final Courses Page Design
Final Courses Page Design

Personal Reflections and Learnings

This was an interesting project because even though we redesigned the website, we came to the conclusion that it would make more sense to use existing apps for the main features, that is creating the community and offering courses. Therefore, instead of building an app where the no-coders would interact, we decided to use WhatsApp group for the general community and Slack for the paying members. We are still looking into different e-learning platforms for the courses. Therefore, the website's primary use would be for marketing and to capture leads.

I learned that not every solution would be a new app. Utilizing existing solutions is sometimes the best option because it saves time and enables the team to focus on impactful tasks instead of reinventing the wheel.
Back to Top