12

Nullclass: Ed-Tech Website Redesign — UI/UX Case Study

 3 years ago
source link: https://uxplanet.org/nullclass-ed-tech-website-redesign-ui-ux-case-study-88b6279d0099
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Nullclass: Ed-Tech Website Redesign — UI/UX Case Study

In this case study, I will talk about my process of redesigning a landing page of the Nullclass website.

Overview

This was a freelance project that I had worked on.

About the project

Nullclass is an Ed-tech company that provides App development courses. I worked as a Graphic designer for Nullclass, It was my first Graphic designing Internship, and 1st internship/job is always special. Of course, I was fascinated with the type of courses they provide, like Building apps like Netflix, Zoom, Google assistant, etc.
I Approached the founder of Nullclass for the redesign of their website, and they wanted to keep it as simple and minimalistic as possible.

Competitive analysis

Before starting any project, I always love to do competitive analysis to get more insights about other products. It helps me to get the idea of different sections of the landing page. I gathered all the SS of the websites and then analyzed them one by one.

Color palette

The earlier color was a bit too dark, which was not standing out from the other section as CTA had to stand out, so I changed the primary color to blue.
As it denotes professionalism and its variant of other purposes.

Information Architecture

Hero section

1. Old hero section was scattered.
2. There was no proper CTA and layout

As I wanted to keep it simple
I provided a solid main heading that gives a clear idea of what this website is for.
I Provided CTA and secondary buttons.
The illustration indicates the website is something related To Education.

Features

Features are the central part of the Landing page to convert the user into customers. In the earlier design, the main points were presented in a very scattered manner, which provided no value to the user and grabbed the user’s attention despite being an essential part of the landing page.
So I designed it to stand out from other sections, Giving a heading with the secondary button to encourage users to sign up.

Added features

The founder of Nullclass wanted me to design one separate section for a newly added feature, i.e., Source for free.
So I designed the trendy web illustration to make it more clear through illustration and proving clear heading with the CTA.

Courses

The old course section was missing many main points like rating of courses, total no. of students taking this course, an overview of course, and button to proceed further.
I took inspiration from Skillshare, Udemy, Future learning, etc., to learn more about the course section and designed it to see course images, reviews, overviews, and buttons further.

About us

The founder of the null class asked me to remove the about us page, as it is a startup, and they don’t have any team photos and other things to display over there, So they asked me to design a small and compelling section of about us for the landing page.

Newsletter

“Join 3000 NullClass Insiders” and avatars appeals to the human desire to be a part of something special. The short description lets users know exactly what to expect, and the blue color of the ‘get started’ button creates a welcoming and safe feel.

Final design altogether?

Here is a recording of the basic prototype.

Figma prototype

My learning

This was my first freelance project, and I got to learn more about the Ed-Tech domain. In addition, this project helped me realize the power of each step in the process, and Competitive analysis plays one of the most critical roles in web designing.

And… That’s a wrap!

I hope you guys found this case study valuable and informative. Feel free to hit me up.

Connect with me on Linked : Sunilsharma

Thank you so much for your time :)


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK