When I joined the Shop Beeline e-commerce project—a Kazakhstani platform selling phones bundled with internet plans—I found myself staring at what I called Design Porridge™.
Everything—main page, listings, checkout—was stuffed into a single Figma file with no structure, no components, and no mercy.
Challenge
There was no consistent hierarchy, no reusable elements, and no layout logic. Designers couldn’t find files; developers couldn’t hand off specs.
I needed to turn the porridge into a predictable, scalable system.
Process
Research
I studied best practices in Figma file organization and design-system hierarchy from Initium and industry guides. The goal was to define patterns that worked both for designers and developers.
Design
I rebuilt the entire e-commerce flow—Main, Product Listing, Product Detail, Checkout, and Content pages—from the ground up. Created a new UI kit based on the Initium design system to unify styles, spacing, and components.
Test
After multiple iterations and team reviews, I handed off the final layouts for development. The difference between the first and final versions was night and day.
How it was 😟
How it is currently! 😎
Outcome
- Clean, modular file structure
- Unified design language using the Initium UI kit
- Faster designer onboarding and smoother handoff to developers
- Easier updates across screens thanks to component reuse
Reflection
Rebuilding layouts isn’t just moving rectangles—it’s reshaping how a team thinks.
Like J. Cole said, “the only real change comes from inside.”
And in design, that means structure, systems, and shared understanding.