Back to Projects

UX Case Study
UX Case Study

Loki Website Builder

Loki Website Builder

Build your ed-tech websites easily with loki website builder
Build your ed-tech websites easily with loki website builder

Context

Context

Okay so Picture This:

Okay So Picture This:

I'm a teacher, and I want to build a website for my school.
I'm a teacher, and I want to build a website for my school.

🧑🏼‍💻

I come to Learnyst’s website builder and start building my website.
I come to Learnyst’s website builder and start building my website.

🙍🏼

Days go by as I struggle to design my site. I have zero tech knowledge and there are no pre-defined templates for EdTech. It's like trying to navigate with a map that’s upside down – and written in a language I don’t understand.
Days go by as I struggle to design my site. I have zero tech knowledge and there are no pre-defined templates for EdTech. It's like trying to navigate with a map that’s upside down – and written in a language I don’t understand.

💭

I think, "If only there were templates to make my life easier, something I could just drag and drop!"
I think, "If only there were templates to make my life easier, something I could just drag and drop!"
But what if there was a builder with a super user-friendly interface and loads of EdTech templates?
There comes our loki website builder.
But what if there was a builder with a super user-friendly interface and loads of EdTech templates?
There comes our loki website builder.

Problem

Problem

Why Are We Doing This?

Why Are We Doing This?

Users wanted to create websites with ready-made templates to make the process easier. But since we were using a third-party website builder (Brizy), we couldn’t provide those templates. This made it hard for them to build the websites they wanted, so we decided to find a solution.
Users wanted to create websites with ready-made templates to make the process easier. But since we were using a third-party website builder (Brizy), we couldn’t provide those templates. This made it hard for them to build the websites they wanted, so we decided to find a solution.

The Decision to Change

The Decision to Change

Building from a Solid Foundation

Building from a Solid Foundation

After recognizing the limitations of Brizy, the team decided to deprecate it in favor of a more customizable solution. We chose to purchase ContentBox.js to serve as the foundation of our new website builder.

After recognizing the limitations of Brizy, the team decided to deprecate it in favor of a more customizable solution. We chose to purchase ContentBox.js to serve as the foundation of our new website builder.

Goals

Goals

Setting Our Sights

Setting Our Sights

Our mission was clear: streamline the website-building process by refining ContentBox.js and creating a suite of customizable templates. The end goal? Empower users with a tool that's both powerful and easy to use, allowing them to build stunning, educational websites effortlessly.

Our mission was clear: streamline the website-building process by refining ContentBox.js and creating a suite of customizable templates. The end goal? Empower users with a tool that's both powerful and easy to use, allowing them to build stunning, educational websites effortlessly.

In a hurry? Click here to see the final outcome of how we built the loki website builder.

Building Templates

Building Templates

Templates Research

Templates Research

To create the perfect EdTech templates, I had to dive into the world of education websites. So, I checked out more than 40 top-notch sites to see what’s hot and what’s not. This gave me a solid idea of the trends and features I needed. Take a peek at my Miro board to see all the juicy details!

To create the perfect EdTech templates, I had to dive into the world of education websites. So, I checked out more than 40 top-notch sites to see what’s hot and what’s not. This gave me a solid idea of the trends and features I needed. Take a peek at my Miro board to see all the juicy details!

Research Summary

Research Summary

Through my research of 40+ educational websites, I discovered that mega menus, large footers, and top banners like hellobars are frequently used. Scrolling sections and sliders are popular, especially for lower-priced courses, while higher-priced courses emphasize lead generation. Free resources and interactive features like 'ask doubts' are common across the sites.

Through my research of 40+ educational websites, I discovered that mega menus, large footers, and top banners like hellobars are frequently used. Scrolling sections and sliders are popular, especially for lower-priced courses, while higher-priced courses emphasize lead generation. Free resources and interactive features like 'ask doubts' are common across the sites.

Common Pages

  1. Home

  2. Product sales page

  3. Segments

  4. Success

  5. Testimonials

  6. About

  7. Authors

  8. Free resources

  9. Blog

  10. Sign up

  11. Login

Common Pages

  1. Home

  2. Product sales page

  3. Segments

  4. Success

  5. Testimonials

  6. About

  7. Authors

  8. Free resources

  9. Blog

  10. Sign up

  11. Login

Popular Sections

  1. Toppers

  2. App Card

  3. Testimonials

  4. Authors

  5. Media Presence

  6. Free Resources

  7. Announcements

  8. Courses by Category

  9. FAQ

  10. Category List

  11. Events

  12. Stats

Popular Sections

  1. Toppers

  2. App Card

  3. Testimonials

  4. Authors

  5. Media Presence

  6. Free Resources

  7. Announcements

  8. Courses by Category

  9. FAQ

  10. Category List

  11. Events

  12. Stats

Widgets

  1. CTA

  2. Mega Menu

  3. Nav Bar

  4. Footer

  5. Chatbot

Widgets

  1. CTA

  2. Mega Menu

  3. Nav Bar

  4. Footer

  5. Chatbot

Learnings

  1. Out of 10 education websites, 9 incorporate mega menus and large footers.

  2. Every website features top banners, such as hellobars.

  3. Scrolling sections are highly prevalent, and sections with sliders are also commonly used.

  4. Live features are integral across all segments.

  5. Most websites offer free resources.

  6. Competitive exam websites provide essential information, including exam dates, study timetables, and other related resources.

  7. When it comes to apps, they are primarily used for consumption rather than sales and marketing purposes.

  8. Fast checkouts are popular.

  9. For courses priced between 100 and 40,000, websites provide a 'buy now' button. However, for courses exceeding 50,000, there is no direct 'buy now' option. Instead, they generate leads through phone numbers and then proceed with course sales.

  10. Skills-based websites showcase trending and featured courses.

  11. The 'ask doubts' feature is widely used.

  12. Some websites also offer passes that grant users access to all content.

Learnings

  1. Out of 10 education websites, 9 incorporate mega menus and large footers.

  2. Every website features top banners, such as hellobars.

  3. Scrolling sections are highly prevalent, and sections with sliders are also commonly used.

  4. Live features are integral across all segments.

  5. Most websites offer free resources.

  6. Competitive exam websites provide essential information, including exam dates, study timetables, and other related resources.

  7. When it comes to apps, they are primarily used for consumption rather than sales and marketing purposes.

  8. Fast checkouts are popular.

  9. For courses priced between 100 and 40,000, websites provide a 'buy now' button. However, for courses exceeding 50,000, there is no direct 'buy now' option. Instead, they generate leads through phone numbers and then proceed with course sales.

  10. Skills-based websites showcase trending and featured courses.

  11. The 'ask doubts' feature is widely used.

  12. Some websites also offer passes that grant users access to all content.

I know all this research talk can get a bit overwhelming. Don't worry, though! Let's jump into the design phase so you can see how everything comes together visually.

Userflow

Userflow

After completing the research, I moved on to creating a user flow for adding and managing templates. I also organized the templates library into categories based on the research data for easier navigation.

After completing the research, I moved on to creating a user flow for adding and managing templates. I also organized the templates library into categories based on the research data for easier navigation.

Templates Design

Templates Design

Now, we’re getting to the exciting part—designing templates. I started with section templates, then moved on to page templates, and finally wrapped up with website templates. The main focus was on the section and page templates, as these are what users will need the most.

Now, we’re getting to the exciting part—designing templates. I started with section templates, then moved on to page templates, and finally wrapped up with website templates. The main focus was on the section and page templates, as these are what users will need the most.

Sections Design

Sections Design

Webpages Design

Webpages Design

Other Screens

Other Screens

Builder Refinements

Builder Refinements

Website Builder Refinements

Website Builder Refinements

While designing the templates, I spotted a few issues with our new website builder and figured out what features we could drop and what needed to be added. I also checked out how competitors and other builders were doing things. After putting everything down and making the changes, we rolled out the Loki Website Builder to users. Check out the screens of the Loki builder below!

While designing the templates, I spotted a few issues with our new website builder and figured out what features we could drop and what needed to be added. I also checked out how competitors and other builders were doing things. After putting everything down and making the changes, we rolled out the Loki Website Builder to users. Check out the screens of the Loki builder below!

Learnyst Features

Learnyst Features

We Added Learnyst Features - Widgets

We Added Learnyst Features - Widgets

We integrated Learnyst widgets into the website builder, making it easy for users to add products, forms, CTAs, and more. Now, users can quickly bring everything they've set up in the admin portal straight onto their website without any extra effort.

We integrated Learnyst widgets into the website builder, making it easy for users to add products, forms, CTAs, and more. Now, users can quickly bring everything they've set up in the admin portal straight onto their website without any extra effort.

Lot More We Did

Lot More We Did

Using Loki in different places

Using Loki in different places

We used the Loki builder as our foundation and expanded its use into different areas, like a certificate builder and popup box builder. By applying the Loki builder across these features, we could offer templates for each one, simplifying the process for users.

We used the Loki builder as our foundation and expanded its use into different areas, like a certificate builder and popup box builder. By applying the Loki builder across these features, we could offer templates for each one, simplifying the process for users.

Conclusion

Conclusion

Sweet Ending

Sweet Ending

This project was a huge learning experience for me, teaching me about websites, navigating the business world, and overcoming challenges when releasing new features. We’re still working on the Loki builder, constantly adding new features inspired by top builders like Framer and Webflow. Thanks for reading, and stay tuned for the next case study!

This project was a huge learning experience for me, teaching me about websites, navigating the business world, and overcoming challenges when releasing new features. We’re still working on the Loki builder, constantly adding new features inspired by top builders like Framer and Webflow. Thanks for reading, and stay tuned for the next case study!

Home

Projects

Library

Resume

Home

Projects

Library

Resume