Debutify Reviews
©/103
[client]
Debutify
[role]
UI/UX Design / Research / Prototyping / Testing
[Target Audience]
Shopify merchants and eCommerce store owners looking to enhance customer trust and boost conversions with user-generated content, including reviews, ratings, and Q&A features.
An app tailored for Shopify merchants to capture, manage, and display customer reviews. With a focus on user-generated content, Debutify Reviews empowers store owners to build credibility and drive sales by showcasing authentic customer feedback and insights.
[about]
Lucient UI is a custom design system developed for Debutify, a leading provider of high-converting Shopify themes and tools for eCommerce brands. The design system was created to overcome the limitations of the company’s previous system, which was built on top of Shopify’s framework.
As Debutify’s product suite expanded, the old system lacked originality and flexibility, which hindered customization and consistency across applications. Lucient UI was developed from the ground up to unify the design language, enhance collaboration, and accelerate feature rollouts.
[problems]
[01]
[02]
[problems]
Lack of Consistency
Each Debutify app followed a different design language, leading to fragmented user experiences and a lack of cohesive brand identity. The previous system's reliance on Shopify's framework limited Debutify’s ability to innovate and customize components effectively.
Inefficient Handoff Process
The lack of clear and comprehensive design guidelines resulted in inefficiencies during the handoff between design and development teams. This led to increased clarification efforts and extended development cycles, which slowed down product rollouts.
[goal]
The primary objective of Lucient UI was to establish a custom design system that would:
- Ensure design consistency across Debutify’s suite of applications
- Streamline the collaboration between designers and developers with clear specifications and reusable components
- Enable faster feature rollouts and improve scalability for future product expansions
As Debutify’s product suite expanded, the old system lacked originality and flexibility, which hindered customization and consistency across applications. Lucient UI was developed from the ground up to unify the design language, enhance collaboration, and accelerate feature rollouts.
These screens represent navigation bars used by different teams before the rework of the design system. They illustrate the inconsistency in design across various applications, highlighting the need for a unified design system.
Discover
[possibilitiles]
Finding Solutions
My approach to building Lucient UI involved a structured, research-driven methodology, where I aimed to balance innovation with usability. I had already identified key issues with the existing design system, such as inconsistencies and limitations in customization. By examining existing design systems and following a component-first approach, I addressed core challenges while ensuring flexibility and scalability.
12'
design systems
45'
UI components tested
5'
cross-functional workshops held
[01]
Research & Inspiration
To kickstart the design process, I explored popular UI kits and design systems. This research helped me gain insights into current design trends and identify best practices, ensuring that Lucient UI would meet industry standards while maintaining visual appeal.
[02]
Balancing Familiarity & Newness
A major challenge was balancing innovation with user familiarity. With an established user base, a complete overhaul risked disrupting the user experience. I introduced strategic changes that preserved the predictability users were accustomed to, ensuring a smooth transition.
[03]
Component-First Development
Facing a “chicken-and-egg” scenario, I had to decide whether to build components first or start with full-page layouts. By adopting the Atomic Design methodology, I focused on developing atomic components (like colors and icons) initially, then gradually combined them into molecules and organisms, leading up to templates and complete pages.
[04]
Iterative Design & Testing
Each component was tested in real design scenarios to ensure functionality and adaptability. I organized collaborative review sessions with designers and developers to validate usability and address potential issues early in the process, allowing me to refine Lucient UI iteratively.
Key Features of Lucient UI
100+ Components
Advanced Components with Nested Instances
To resolve design inconsistencies and simplify UI management, I created adaptable, nested components that ensure consistency, flexibility, and reusability across applications while preserving user familiarity.
Simplified Workflow
Improved Consistency
Efficient Component Management
Advanced Reusability
Design System Essentials
Consistent Design with Tokens & Variables
To support diverse design needs, I introduced over 200 tokens, including color and typography variables. This token-based approach allows easy adaptation to both dark and light modes, helping streamline visual adjustments across all products without extensive rework.
200+ Variables & Styles
Adaptive Color Tokens
Simplified Theme Management
Unified Styles Across Components
An Overview of Our System’s Primary Features
Integrated design system documentation
Dark & light modes
Responsive layouts
Advanced Component Structure
Key Achievements
[impact]
[Reduced Building Time]
I ran a controlled experiment where, for a typical screen with multiple components, designers saved an average of 30 minutes using Lucient UI.
Our team was able to complete the first version of a project in 6 weeks instead of the estimated 3 months, thanks to the reusable components and streamlined design handoffs.
[Increased Adoption]
The design system quickly became essential across teams. Our design team of over 5 members utilizes Lucient UI daily, significantly increasing efficiency.
Analytics indicate high usage rates, with over 150,000 component insertions in the past year, underscoring the design system’s value and widespread adoption.
Library analytics from Figma