Power Star
A complete ecosystem spanning e-commerce, a mobile app, and an admin panel, built to operate as a single platform.
The Power Star ecosystem brings together three products —online store, mobile app, and CMS— under a single brand experience, designed to scale without losing consistency across platforms.
Every interface is designed around the full buying and administration flow: from how a customer searches for a part, compares it, and reaches checkout, to how the internal team manages catalog, pricing, and inventory from the CMS.
All three products were built on the same component library and the same tokens in Figma, guaranteeing visual and functional consistency across platforms without duplicating the design effort for each one.
Online store design
Designed to guide the customer from searching for a part to checkout: filter by vehicle or transmission, product pages, comparison tool, cart, and promotions — all built from the same component library as the rest of the ecosystem.
Hybrid mobile app design
Built as a hybrid app to run on iOS and Android from a single codebase, reusing the same components and flows as the online store adapted to a mobile format, with tab bar navigation and each system's own patterns.
CMS design
Admin panel to manage customers, orders, catalog, pricing, and availability in real time. It shares visual identity and components with the store and the app, so the internal team operates with no additional learning curve.
Implemented library
Tokens and components centralized in Figma —color, typography, spacing, and states— organized into primitives and semantics and applied equally across all three products, so any change propagates from a single source of truth.
Responsive element definitions
Breakpoints defined for mobile (360–767px), tablet (768–1199px), and desktop (1200px and up). Each component adapts within every range without losing hierarchy or functionality on any device.
Workflow
Navigation flow mapped before building: every screen, its success and error states, and the hierarchy of each section were defined so the development team had a clear reference, ready for handoff, before writing code.
