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.
Task
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.
Team
I am working with 2 team members handling tech and research.
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
Before
After
PROCESS
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:
- To provide courses and workshops that teach aspiring no-code builders how to build mobile and web applications using no-code apps
- To bring African no-code builders together and create a community
- To provide consultation services for clients interested in building mobile and web apps using no-code tools
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.
Research Analysis
User segments
Based on the user research, I created 3 categories of 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.
.png)
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.
Sketches
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
Home page updated sketch
Wireframes
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
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.
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.
Before
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.
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 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.
