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.

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.