Tiisetso Ntsoane

AboutProjectsContact

ByAfrica School


Online Learning Platform

UI/UX

New Design


ByAfrica School main display project showcase image

Company

ByAfrica School

My Role

Lead Designer and Frontend Developer

Timeline

4 months

Responsibilities

Design Research

Design Direction

Visual Design

Prototyping

Frontend Development

Overview

ByAfrica School, an innovative educational platform startup, brings together instructors from diverse backgrounds to craft and host courses. Through meticulously structured programs and instructor-led cohorts, ByAfrica supports enthusiasts, operators, and professionals in honing their skills, facilitating effective application for success in their careers.

See it live

Project link icon

Crafted with simplicity in mind, the platform's design effortlessly aligns with the preferences of both students and tutors. The aesthetic appeal speaks directly to users, drawing them into the course details. This cohesive integration enhances the learning experience, providing a sleek and contemporary design that emphasizes both clarity and simplicity.

[ Homepage High-Feditity Desing ]

High-fidelity prototype overview for ByAfrica School Platform.

[ Landing Page Section ]

Prototype of ByAfrica School's landing page section.

[ Landing Page Overview ]

High-fidelity prototype showcasing one of ByAfrica Platform landing section overview.

[ Courses Page ]

High-fidelity prototype showing an overview of courses being offered by ByAfrica School online platform.

The Design Strategy

In today's fast-paced environment, people often lack the time and patience to extensively read through content on a website. Users typically prefer a concise and direct presentation.

Therefore, I deemed it appropriate to adopt a minimalist design approach to swiftly convey the essence of ByAfrica's message and objectives within a few seconds. This strategy involved eliminating superfluous elements and content that could impede users' understanding of the platform.

Careful consideration was also given to the use of images. Incorporating medium-sized images with clear headlines proved effective in promptly eliciting emotional responses from visitors, guiding their focus, and maintaining their engagement with the content.

ByAfrica School detailed course page

The challenges

Navigating the unfamiliar territory of collaborating with other developers posed a noteworthy challenge, given my lack of prior experience in such partnerships. Delving into my partner's codebase, though initially challenging, proved to be a valuable learning experience. Particularly, mastering the nuances of utilizing GitHub effectively became a focal point of my growth. Despite the initial hurdles, the collaborative effort culminated in a successful project, and the partnership unfolded seamlessly.

ByAfrica School detailed course overview page

Unlocking Potential: Steering Toward Triumph with Our Array of Tools

Design

Adobe Xd logo
Adobe photoshop logo
Adobe illustrator logo

Development

Html-5 logo
Css-3 logo
Javascript logo
React js logo
Next js logo
Node js  logo
MongoDb  logo

Final Design

Key Learnings

Insights gleaned from the challenges encountered in design and development.

Web design icon

User-Centric Efficiency

Acknowledging the contemporary challenges of time constraints and short attention spans, the design strategy prioritizes a user-centric approach focused on efficiency. Recognizing users' preferences for succinct and direct information, the design aims to deliver the core message swiftly, aligning with the fast-paced nature of users' interactions.

Web design icon

Minimalist Design Philosophy

To address the need for quick comprehension, the strategy embraces a minimalist design philosophy. By distilling the interface to essential elements, unnecessary complexities are eliminated. This ensures a clean and uncluttered visual aesthetic, allowing users to grasp the platform's purpose and offerings within a matter of seconds.

Web design icon

Visual Engagement Through Images

The intentional use of medium-sized images and clear headlines on ByAfrica's website aims to boost user engagement. Beyond aesthetics, these visuals serve as powerful tools to evoke emotional responses, guiding users seamlessly and creating an immersive experience that sustains interest in ByAfrica's goals.

Web design icon

Streamlined Content Presentation

The design strategy advocates for the careful curation of content, ensuring that each element serves a purpose in conveying the platform's message. Unnecessary elements and verbose content are omitted to maintain a concise and impactful presentation. This approach fosters a seamless user journey, allowing individuals to navigate and comprehend the platform effortlessly.

The next project

Discount Discovery Tool for Uncovering Deals at Premier Grocery Stores in South Africa

See it live

home
Grocery web scrapper app

Version

2024 © Edition

Local Time

11:2 GMT + 1

Socials

LinkedInFacebookWhatsappGitHubInstagram

All Rights Reserved | © Copyright 2024