Deeple School

Landing page concept 2024

Deeple School

The Deeple School project is a conceptual landing page for a fictitious IT school. It is designed to allow end users, such as students or schoolchildren interested in exploring IT professions, to learn about the school, evaluate its potential, and ultimately enroll as students.

Milestones

  • Defining the project concept

  • Studying the needs of the target audience and creating user personas

  • Analyzing the competitive landscape

  • Developing the site structure, its capabilities, and functions

  • Creating a low-fidelity prototype

  • Defining visual solutions for the site

  • Creating a high-fidelity prototype

1

Defining the concept and scope of the project

Before starting work on the project, I quickly decided on the main concept and theme for the future prototype: a landing page representing an online IT school. Since I was a student not long ago, the topic felt particularly relevant to me. I had a general understanding of the needs of people seeking alternative study options through online courses.

Because the topic was close to me, I believe it made it a bit easier to understand the real needs of students or individuals looking to change their career path. I was able to create their profiles, which I later illustrated in user personas.

2

Defining target audience. Creating User Personas

Before starting the project prototype, it was important to understand user needs and expectations from similar websites. The site should be clear and user-friendly, highlighting the school's advantages over competitors and the opportunities it offers to potential students.

Based on competitive analysis and my experience with students, I created profiles of potential clients. These are primarily young people, either school-age or students, seeking practical industry experience or aiming to supplement their existing knowledge. They are looking for a school that meets their financial and academic needs, with flexible accessibility.

I divided the audience into two personas, representing clients with varying experience levels and attitudes toward IT. The school should demonstrate its strengths to a broad audience by offering education at different levels and in various fields of study. Below are examples of potential clients for this type of school and website.

3

Study of the competitive environment

There are many different types of IT-focused services or schools around the world. Most of them are presented as platform sites, which differs somewhat from my approach of designing a landing page. In my case, I aimed to gather all the most important information that an average online school site might showcase and consolidate it into a one-page site.

4

Site structure

The site consists of 8 blocks:

  • Main block – Logo and quick access to contact the school and subscription options.

  • "Why Deeple" block – Answers the question: “Why should they choose this school?”

  • "Education process" block – An informational block for potential students to learn about the school, its teaching methods, and its advantages over competitors.

  • "Our Curators" block – Featuring school curators to build greater trust among potential clients.

  • "Student reviews" block – Open reviews from alumni to help build trust with prospective students who haven't enrolled yet.

  • "Plans" block – After showcasing the school’s capabilities and advantages, this block presents various subscription options, providing a range of choices for students with different financial capabilities, knowledge, and needs. Each subscription option details the available features, level, and monthly price.

  • "Questions" block – A collection of the most frequently asked questions from potential students. Since the site serves as an advertisement for the school and primarily targets new users, the questions focus mainly on the process of joining and studying.

  • Contact block – As the "Questions" block cannot address every potential question, this section provides quick contact options for students who do not find the answers they need in the previous section.

  • "Partners" block – This block showcases career opportunities for graduates. Many popular schools offer career support to help graduates find jobs using their newly acquired skills. This section highlights companies in contact with the school, showing potential career paths for graduates.

5

Lofi prototype

When creating the lo-fi prototype, I focused on structuring each of the blocks. The prototyping process went through several iterations, during which the site was revised multiple times. These revisions not only affected the structure of the site but also the visual design of the page.

Desktop
Mobile

6

Final Design

Desktop
Mobile

7

Mockups

8

Previous versions

9

Outcome

After defining the structure of the site and presenting it in a low-fi prototype, I proceeded to create a detailed, high-fidelity design (hi-fi). Ultimately, I chose a light blue-themed color scheme. This style deviates slightly from the conventional business aesthetic but retains its core colors, subtly modifying them to evoke a sense of "airiness" and serenity. The goal was to create a design that feels calming and non-distracting, allowing users to focus on exploring information about the school.

The stages of creating low-fi and hi-fi prototypes underwent numerous changes throughout the entire site design process. As a result, some versions were either discarded or used as concepts and material for further refinement. As a small addition to this section, I would like to showcase some of these versions of the site.

In conclusion, I would like to note that working on the design of the online school landing page was an unusual and enriching experience for me. In this presentation, I briefly outlined and described all the stages of research and design that I went through during the process. Each stage involved numerous iterations and changes, both in the concept and the structure of the future prototype. Nevertheless, I believe I successfully addressed the primary challenge designers face when working on landing pages: showcasing the product's strengths to the end user while ensuring a pleasant and straightforward experience for exploring its features and benefits.