Building the UI for a SaaS E-Learning Platform

Ubiter
Ubiter homepage shown on both smartphone and large screen layouts
Ubiter homepage shown on both smartphone and large screen layouts
Ubiter mobile screenshots showing user dashboard, messages, and course editing screens
Mobile UI: user dashboard, messaging, and course editing screens
Ubiter desktop screenshot showing a user dashboard screen
Desktop UI: user dashboard

Ubiter was a SaaS e-learning platform for creating and managing online courses. I worked as the UI/UX Developer in a five-person team, designing and building the mobile-first interface. My work focused on reusable components, interactive layouts, and turning early concepts into functional, production-ready frontend prototypes.

I developed interactive UI components and delivered fast code-first prototypes directly in HTML, CSS, and JavaScript. I introduced a Bootstrap-based workflow to speed up design iteration and reduce reliance on static wireframes.

Ubiter components sheets

A key challenge was achieving consistent behaviour across a wide range of devices, including older Android phones. We used HTML5 Boilerplate as the base and integrated lightweight JavaScript plugins to support the platform’s interactive features.

UI/UX

We relied on Bootstrap for structure and iterated screens directly in code. Features were tested live on mobile devices using Chrome and Safari Mobile, without passing through lengthy wireframing or mockup cycles.

Ubiter user courses overview UI showing a list of enrolled and created courses
User courses overview interface.
Ubiter course instance creation UI showing interface elements for creating and managing online courses
Course instance creation interface.
Ubiter course editing UI showing interface elements for creating and managing online courses
Course editing interface.
Ubiter messaging UI showing interface elements for communication between users
Messaging interface.

The priority was clarity and usability over visual complexity. We refined components directly in the browser and iterated until layouts were stable, accessible, and ready for integration.

File Processing and Debugging

We used Gulp.js ↗ to automate builds and optimise assets. Debugging was done on real devices and via BrowserStack ↗, with JS Bin ↗ and CodePen ↗ for fast in-browser prototyping.

Conclusion

The project highlighted the value of frontend-driven design and fast, code-based iteration. It allowed the team to validate features quickly while keeping the UI flexible, maintainable, and scalable for future development.