How to design a website for an Ed-Tech startup?

My first Web Design project as a Web Designer

In a crowded online education market, creating a distinct brand and defining a unique platform position is tougher due to increased competition.

That's exactly what OneLern approached us to do. Their platform was built to enrich learning experiences globally by accelerating digital transformation through disruptive technologies and adaptive learning solutions.

Design Research to build a Design Strategy for Website

Each project begins with research, where we assess various websites and brands using diverse parameters such as messaging, design, and user-friendliness. These criteria vary based on project goals.

Parameters of Research for the Web Design

We set research parameters at the project's outset to define our specific objectives and areas of understanding.

1. Overview of the design solution
2. Impact of the design design solution
3. Tone of voice
4. Positioning
5. Look and feel
6. Brand rituals
7. Overall brand impression
8. Observation and insights

Competitive Analysis/Exploring for Inspirations/Benchmarking

Initially, OneLern provided us with the names of a few competitor brands and who they consider as benchmarks in the industry. We had to research these different benchmarks to try and study their approaches to digital transformation and education.

There were multiple objectives to perform the above step :

• To find inspiration for visual design.
• To understand the copy of their landing page.
• To figure out the Information Architecture.

To gain valuable insights that could benefit OneLern, we embarked on an analysis of various companies across different sectors, examining their approaches to branding, marketing, design thinking, and business solutions in creating effective brand strategies that foster market growth.

By broadening our research beyond the education sector, we ensured an open feedback loop, avoiding stagnant or generic content. 

We carefully selected four companies from the education sector, including 

1. Carnegie Learning
2. Leadschool
3. Scootpad
4. Kognity. 

In addition, we delved into the 

1. FMCG sector with Blackmores
2. Retail sector with Beyond Meat
3. Medical sector with Teladoc Health and 
4. Entertainment sector with Netflix.

Our focus extended beyond the education sector as we sought to understand each company's approach to digital transformation within their respective domains. This comprehensive analysis allowed us to draw meaningful observations and extract valuable insights that could aid OneLern in their own journey.

Competitor communication

After completing the benchmarking phase, we conducted a brief analysis of the communication strategies employed by OneLern's competitors, including Lead, Toppr, and Mosaic (Scootpad). Additionally, we explored the approaches of other B2B SaaS companies operating in the EdTech space, such as Remind and Smart Sparrow.

Our findings revealed that companies targeting parents directly utilised marketing tactics that generated a significant amount of FOMO (Fear of Missing Out). However, we made a conscious decision to refrain from adopting this approach explicitly.

In contrast, companies focused on targeting schools prioritised driving improved outcomes and empowering teachers. This emphasis on delivering tangible results and supporting educators became their primary focus. We decided that this would be a better approach for OneLern as well.

Brand Strategy Workshop

Before starting the project, we had pitched a workshop to OneLern, to present our research and explore the different aspects that OneLern would have to address, in order to position itself successfully. On the day of the workshop, both the OneLern team and Everything.Design team met at the offices of Onelern. 

The entire leadership team from OneLern was present. From everything design, we had Mejo (CEO), Ekta (Partner, facilitator), Sumedh (Lead designer), Sean (Content Lead) and me (Akhilesh - Associate Designer).

Meeting the client

With my limited experience, I found myself uncertain about what to expect from the workshop and the intimidating client team. Their profound knowledge and unwavering confidence made me feel like a tiny fish swimming in an expansive ocean. However, I was confident in the team and their abilities. 

Workshop agenda

We had planned to split the workshop into two days. 

The first day would cover

1. Introductions + Agenda discussion
2. Golden circle introduction
3. Purpose exercise
4. Vision exercise
5. Mission exercise
6. Who exercise
7. Brand personality
8. Competitor analysis

The second day would cover

1. Research presentation
2. Create, Preserve, Destroy exercise
3. Website purpose + strategy

My impression

TC Ashok, the founder of OneLern, proved to be one of the wittiest individuals I've ever had the pleasure of meeting! His infectious humor enlivened the entire presentation, and he attentively listened whenever our input was needed.

Being a part of this exercise, where our team had the opportunity to interact with One Learns team, was truly gratifying. It provided us with invaluable insight into their objectives and how we could contribute to their success.

Furthermore, this workshop marked my first experience of actively participating in a professional setting as part of my first major client project. The sense of satisfaction that accompanied this milestone was immeasurable.

Workshop findings and Insights

Through the workshop, we found that -

• The main parameters schools focus on are whether the OneLern curriculum is aligned to theirs, if the pedagogy is NEP certified, how will the teachers benefit, and the fact that schools don't finish their curriculum on time.
• Ed-Tech Startups Are Cashing in on Parents’ Insecurities!
• We need to represent their triadic philosophy of Design, Engineering, and Content in a newer / effective way
• Unfortunately, most technology in schooling has involved haphazard attempts to slather new devices across classrooms, with little vision of how or why these will make a difference.

Website Messaging

We decided to create a strategy to communicate benefits to schools, teachers, parents, and students, by adopting a school-centric approach with student and teacher focus, avoiding tactics that trigger parental FOMO.

Most of the communication is targeted towards the school, as they are the decision makers.

How did we execute the web design after building the strategy?

Once we had a clear understanding of what will work for the website, we started designing stylescape routes. A stylescape is an opportunity to demonstrate to the client how a brand will look and feel. It's a collection of brand assets – colors, typography, images, language tone, design elements etc. – combined together to provide an overall visual aesthetic of a brand.

Moodboards

A mood board is a type of visual presentation or 'collage' consisting of images, text, and samples of objects in a composition. It can be based on a set topic or can be any material chosen at random. A mood board can be used to convey a general idea or feeling about a particular topic 

We presented two options.

When we presented these options, the client wanted to have a more student centric approach, with the incorporation of illustrative elements, rather than all of it being real imagery.

Frequently, we discover these preferences as we progress, necessitating adjustment and effective implementation.

The client preferred the illustrative approach again, and decided to approve that route.

Stylescapes

We use Stylescapes for virtually every design project we touch. They’re a vital piece to our creative process and how we keep our clients in the loop of where each project is headed.

Two visual routes were presented.

Refinement

During our presentation to the client, they expressed that they were now unsure of the student centric approach and asked us to keep the approach completely school centric. We arrived at a middle group where it was decided that we would design a route that appealed to all stakeholder groups. The client also wanted to incorporate glass morphism for a modern look. Although we had reservations about this approach, we proceeded to develop an illustrative style for this website that seamlessly integrated glass morphism, as per the client's request.

Content Structure

After finalizing the visual appearance, we initiated the development of the homepage's content arrangement as well as that of the remaining pages. During this phase, we meticulously outline the content intended for each section.

Website Wireframes

After successfully cracking the visual language, we eagerly awaited the content from the client and immediately began the process of structuring it.

During this stage, we approached each section with meticulous care, carefully considering the message conveyed and determining the most suitable visuals and layout to accompany it.

Asset Library

Once given the green light, our next step involved generating a comprehensive collection of illustrations to be employed across the website. These assets are chosen and solidified after we have a clear understanding of the content present in each section of the website and have received the necessary approvals.

‍

Web Development Constraints

During the development stage, we faced issues in areas such as

1. Custom illustrations - The layouts became hard to manage and construct on webflow, due to the irregular nature of the illustrations.
2. Glass morphism - This presented a big problem, as the effect could not be overlapped well with elements, causing a weird white background on the illustrations.

Our web development team went above and beyond to solve these issues and ensure that the design matches the developed website in the end.

‍

List of other EdTech Startup Websites

1. Quizizz - A Webflow Website
2. Cuemath
3. toppr
4. Extramarks
5. Educomp
6. Vedantu
7. Outschool
8. Soraschools
9. Classcraft

‍

Conclusion

The end result of all of this is the live website of OneLern - A website and brand that sparks joy, excitement, and a craving for knowledge. OneLern's story is now artfully told, and we are incredibly proud of our partnership. You can see our other web design projects here.