Longread translated automatically
big

I take products from idea to launch, designing and coding them as a single system.

post

I’m a 4th-Year Design and Programming student at the HSE Art and Design School.

I design and code, so I take products from idea to launch myself: from user flows and a design system in Figma to working code, with no handover in between.

What I enjoy most is coming up with ideas and turning them into products that are easy to use and easy to grow.

Where products lose their momentum

In many teams, design and code exist in silos. Designers hand off mockups, developers rebuild them from scratch, and every change requires duplication. The product slowly deviates from the initial design, and updates consume days instead of minutes.

How I Work

One system, from Figma to code

User flow — every product begins with how users will navigate through it.
Design system — the interface is built from reusable components in Figma.
Same components in code — the design components translate directly into code.
Data model — an object-oriented structure that remains clear as the product scales.
Easy updates — a change made in one place updates everywhere. Design and code never diverge.

How it works in real projects

01. FACTS

A media service about visual effects in the film industry

big
Original size 1920x1080

About the Project A_FACTS is a media service dedicated to visual effects in the film industry. It helps beginners, film enthusiasts, and VFX artists learn how cinematic illusions are created.My Role I was the developer on a team of three. I designed the user flow, the design system, and the data model, and built the product using Ruby on Rails. I also contributed to design exploration and layout implementation.Team of 3 · Stack: Figma, HTML, CSS, Ruby on Rails · [9 months]

Original size 1920x1080

Problem There is almost no structured VFX content available in Russian. 81,4% — lack useful materials in Russian 76,2% — lack a clear learning path 71,4% — desire breakdowns of famous scenesSolution Articles, a textbook with quizzes, a dictionary, a community, and a personal profile—all in one service.

Original size 1920x1080

Process→ User flow I mapped every path through the service: from the main page to the textbooks, articles, and community, incorporating filters, favorites, and sign-in checks along the way. This formed the foundation for both the interface and the underlying code.

0
1/3

→ Design System My team and I built the interface using reusable components: the menu, article filters, works feed, buttons, avatars, and toggles, plus a complete type scale ranging from H1 down to tag text. Small elements combine into larger blocks, allowing new screens to be assembled rather than drawn from scratch.

Original size 1920x1080

→ Data model I designed an object-oriented structure encompassing users, profiles, articles, tags, quizzes, the learning curriculum, the dictionary, and community posts. Each entity has clear relationships, allowing new features to integrate without rebuilding the core.

Original size 1920x1080

→ Design to Code I built the product using Ruby on Rails, translating every component from Figma into code one-to-one. When a component changes, it updates across the entire application simultaneously.

Original size 1920x1080

Outcome: A functional product where anyone interested in VFX can read scene breakdowns, learn step-by-step with quizzes, look up terminology, and share their work with the community.

Original size 1280x720

02. SPOT

A media for skateboarders, BMX and scooter riders

Original size 1920x1080

About the Project SPOT is a media service and community for riders of any skill level. It centralizes the best tricks, locations, articles, and guides, helping every rider learn, improve, and feel more confident on the trail.My Role I designed the user flow, collaborated on layouts with my team, and built the interface using HTML, CSS, and JavaScript.Team of 3 · Stack: Figma, HTML, CSS, JavaScript · [9 months]

Naranzaya Oyunbaatar. Portfolio
Project created at 30.10.2026
We use cookies to improve the operation of the HSE website and to enhance its usability. More detailed information on the use of cookies can be fou...
Show more