Saaga UBI
A website for Saaga, a fictional Universal Basic Income product.
Year
2026
Type
Product marketing website
Areas
Web design · Interaction design · Framer development
In collaboration with
Neohyd Studio
A projet for
Saaga Solve
About the project
Saaga UBI is a fictional Universal Basic Income system built on Bitcoin. We created the website to make this alternative financial model easier to understand, guiding visitors from the problems of the current system through Saaga’s AI Central Bank, its features and the way people can participate.
The site turns a complex idea into a long-form product story following a SaaS web structure, using interactive diagrams, metrics and step-by-step sections to build understanding and trust. The project was developed collaboratively with Neohyd Studio, who led main art direction, while we shared the design and build of the website.
Role
Digital experience designer · Web designer · Framer developer
Work developed
Page sections · Component system · Interaction design · Responsive layouts
Deliverables
Published product website · Interactive sections · Motion-led experience · Responsive interface
The Brief
How do you introduce a new financial system without making it feel abstract, technical or difficult to understand?
01
The problem with money today
02
What Universal Basic Income means
03
The role of the Central Bank
04
How people take part
05
Full transparency, always
Website Structure
It starts with the problem, introduces the model behind it, explains how it would work and ends with a clear next step.
INTRODUCTION
The opening defines Saaga’s proposition in one clear statement and establishes the visual world of the project.
PROBLEM
The second block explains why an alternative system is being proposed. By connecting Saaga to the limitations of the current financial model.
THE MODEL
This block breaks the proposal down into its main principles. It explains how the system is organised and what it is designed to offer.
VALUE
This block focuses on what Saaga could offer in practice: a clear way for people to participate and a visible sense of how the system would operate over time.
TRUST
It focuses on participation, transparency and the network supporting it, making the concept more tangible.
INVITATION
The final block brings the narrative back to the visitor. It addresses the questions that may still remain and gives the idea a clear next step.
Interaction & Motion
Hero pin
Keeping the main message in place while the visual scene develops behind it gives visitors time to understand the premise without losing the impact of the hero.
Entrance choreography
Content rises in sequence, not all at once. it avoids the page feeling static before the argument even starts.
“How it works” tabs
The process is divided into four steps, so the tab interaction follows the logic of the content. clicking through keeps the reader an active participant, not a spectator.
FAQ accordion
It lets visitors choose which questions they want to explore and keeps the rest out of view. This keeps the section clean and prevents too much information from competing for attention at the same time.
Feature radial diagram
The six features are arranged around a shared centre instead of being presented as a standard grid. This makes their relationship visible and presents Saaga's solar-punk visual.
Network animation
The animation makes the relationship between the Central Bank, the network and individual transactions easier to follow. It gives a visual form to the transparency principle at the centre of the project.
Live metrics ticker
The final numbers never change — Saaga is fictional — but watching them climb is what makes the claim feel real instead of just declared.
Responsive Design
No single layout stretched to fit, each breakpoint rebuilt to hold its own weight.
Creative Workflow
Five tools, one workflow.
Framer
Design & development of the entire project
Figma
Sketching & understanding the graphic elements
Claude
Code for custom, fluid components
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 15.342 14.43 L 15.342 10.664 C 15.342 10.347 15.461 10.109 15.738 9.95 L 23.31 5.59 C 24.341 4.995 25.57 4.718 26.838 4.718 C 31.595 4.718 34.609 8.405 34.609 12.329 C 34.609 12.606 34.609 12.924 34.569 13.241 L 26.719 8.642 C 26.244 8.365 25.768 8.365 25.292 8.642 Z M 33.023 29.098 L 33.023 20.099 C 33.023 19.544 32.785 19.147 32.309 18.87 L 22.359 13.082 L 25.609 11.219 C 25.887 11.06 26.125 11.06 26.402 11.219 L 33.974 15.579 C 36.155 16.848 37.621 19.544 37.621 22.16 C 37.621 25.173 35.838 27.948 33.023 29.098 Z M 13.003 21.17 L 9.752 19.267 C 9.475 19.108 9.356 18.87 9.356 18.553 L 9.356 9.832 C 9.356 5.59 12.606 2.379 17.007 2.379 C 18.672 2.379 20.218 2.934 21.527 3.925 L 13.717 8.444 C 13.241 8.722 13.003 9.118 13.003 9.673 L 13.003 21.17 Z M 20 25.213 L 15.342 22.597 L 15.342 17.047 L 20 14.43 L 24.658 17.047 L 24.658 22.597 Z M 22.993 37.265 C 21.328 37.265 19.782 36.71 18.473 35.719 L 26.283 31.199 C 26.759 30.922 26.997 30.525 26.997 29.97 L 26.997 18.474 L 30.287 20.376 C 30.565 20.535 30.684 20.773 30.684 21.09 L 30.684 29.811 C 30.684 34.053 27.393 37.264 22.993 37.264 Z M 13.597 28.424 L 6.025 24.064 C 3.845 22.795 2.378 20.099 2.378 17.483 C 2.378 14.43 4.202 11.695 7.016 10.545 L 7.016 19.584 C 7.016 20.139 7.254 20.536 7.73 20.813 L 17.641 26.561 L 14.39 28.424 C 14.113 28.583 13.875 28.583 13.597 28.424 Z M 13.162 34.926 C 8.682 34.926 5.392 31.556 5.392 27.394 C 5.392 27.076 5.431 26.759 5.471 26.442 L 13.28 30.961 C 13.756 31.239 14.232 31.239 14.707 30.961 L 24.658 25.213 L 24.658 28.98 C 24.658 29.297 24.539 29.535 24.261 29.693 L 16.69 34.054 C 15.659 34.648 14.43 34.926 13.161 34.926 Z M 22.993 39.643 C 27.79 39.643 31.794 36.234 32.706 31.714 C 37.146 30.565 40 26.402 40 22.16 C 40 19.385 38.811 16.69 36.67 14.747 C 36.868 13.915 36.987 13.082 36.987 12.25 C 36.987 6.581 32.389 2.339 27.076 2.339 C 26.006 2.339 24.975 2.497 23.945 2.854 C 22.16 1.11 19.703 0 17.007 0 C 12.21 0 8.206 3.409 7.294 7.929 C 2.854 9.078 0 13.241 0 17.483 C 0 20.258 1.189 22.953 3.33 24.896 C 3.132 25.728 3.013 26.561 3.013 27.393 C 3.013 33.062 7.611 37.304 12.924 37.304 C 13.994 37.304 15.025 37.146 16.055 36.789 C 17.839 38.533 20.297 39.643 22.993 39.643 Z" fill="rgb(0, 0, 0)" height="39.64300333084981px" id="JzpodKak9" transform="translate(0 0.167)" width="40px"/></svg>)
Codex & GPT
Code for custom components & image generation
Conclusion
An idea given shape, and the workflow that got it there.
Saaga was, first and foremost, the experience of watching an idea come alive: taking something abstract and giving it a visible, working structure on a real website. Seeing a concept move from a conversation to an interface people can actually navigate was genuinely exciting.
It was also a real pleasure to build alongside another professional. Learning how to shape a shared project, hand off work cleanly, and deliver something whole out of two people’s ideas taught me a lot, and it was rewarding to watch the concept grow richer every time someone else added their own touch to it.
Beyond the interface itself, Saaga was a lesson in how marketing and product pages are put together, structurally and narratively, to guide someone from curiosity to understanding and make a product’s purpose clear before they’ve had to think too hard about it.
