EcoTopia Sphere (UI/UX Design)

Overview

This is the design side of EcoTopia Sphere, a web platform for eco-friendly lifestyle education. The entire interface, its user flows, and its visual system were designed in Figma first, then implemented as code. That implementation lives as a separate project, EcoTopia Sphere.

Project Context

This design is part of the final project for the Web Design course in the Informatics Study Program at Institut Teknologi Kalimantan (ITK). The original design can be viewed in Figma through the Demo link above, and its implementation as the actual website is live at ecotopia-sphere.vercel.app.

My Role

I worked as the UI/UX Designer and also built it. The design work covered the information architecture for a fairly large body of educational content, wireframes for each page, a component system, and an interactive Figma prototype used as the implementation reference.

Design Challenges

There is a lot of educational content, articles, an innovation showcase, and a community action space, so the main challenge was arranging it all so it stays easy to browse without feeling dense. The eco-friendly tone also had to come through without leaning on an overdone "green" cliche.

Design Process

I started by mapping the content and navigation flow, then turned it into low-fidelity wireframes to test each page's structure. Once the skeleton felt solid, I moved to high fidelity: typography, spacing scale, colour, the green-city illustration, and component states. Layouts were designed mobile-first, then scaled up to wider breakpoints.

Design System

A set of reusable tokens and components was built, buttons, cards, article cards, category tags, forms, and a statistics pattern, so the look stayed consistent as pages were added and the implementation stayed predictable.

Prototype and Handoff

A linked Figma prototype was the single reference during implementation. Since I also wrote the code, design decisions could be tested in the browser right away and adjusted where something did not sit right.

What I Learned

This project sharpened my ability to structure information architecture for a large volume of content, keep a component system lean, and close the gap between a design file and real code.

Result

This design is the basis of the live EcoTopia Sphere, with a look that holds up across screen sizes. The Figma file can be viewed via the link above.