Loki Website Builder
Loki Website Builder
Context
Context
Okay so Picture This:
Okay So Picture This:
🧑🏼💻
🙍🏼
💭
There comes our loki website builder.
There comes our loki website builder.
Problem
Problem
Why Are We Doing This?
Why Are We Doing This?
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.
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!
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!
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!