Your Navi

Work Examples

Marketing Website Redesign

Challenge

The company needed a modernized visual identity for its marketing website while ensuring scalability for future updates. Additionally, the design team required a structured UI system to improve efficiency and collaboration.

Approach

Step 1: Stakeholder Interviews

The company needed a modernized visual identity for its marketing website while ensuring scalability for future updates.

Additionally, the design team required a structured UI system to improve efficiency and collaboration.

Step 2: User Testing & Competitive Analysis

To validate our new design direction, we conducted user testing with 15 participants, presenting different visual styles for the same user flow. 97% of participants preferred the updated version, confirming improved clarity and engagement.

At the same time, I conducted a competitive analysis, including:

• SWOT Analysis – identifying areas of differentiation
• Comparison Matrix – refining our visual hierarchy & content structure

Step 3: Moodboard & High-Fidelity Wireframing

I developed moodboards with multiple style variations to ensure alignment with the brand identity.

After approval, I moved on to high-fidelity wireframes, optimizing layout and interactions.

Step 4: Implementing a Scalable UI Design System

Instead of just a basic UI Kit, I built a fully structured design system following the Atomic Design methodology:

• Atoms – smallest UI elements (icons, buttons, typography)
• Molecules & Organisms – reusable design components
• Templates & Pages – full-page structures for rapid assembly

I adapted this approach to fit the project's needs, ensuring flexibility while maintaining consistency.

Step 5: Developer Handoff Optimization

I introduced Figma’s Dev Mode to the entire team and implemented a marker system ("Ready for Dev"), significantly accelerating the development & QA process.

Results & Impact

• 97% of tested users preferred the new UI (based on 15-user testing session)
• UI updates cut design handoff time by 40% (Figma Dev Mode implementation helped speed up the development cycle)
• Scalable design system reduced future design inconsistencies & maintenance time

B2B Carrier Solution for U.S. Carriers

Challenge

Our product owners saw an opportunity to expand our mobile app beyond just an independent plan comparison tool. Instead, we could customize it for specific carriers (Xfinity, COX, T-Mobile, etc.) and sell it as a software solution for their business needs.

Several potential B2B use cases were considered:

1. Support Tool – An internal tool for customer support agents to quickly analyze calls and recommend the best plans.
2. In-Store Tablet App – A customized application for retail stores, helping sales representatives suggest personalized plans.
3. Embedded Web App – A fully integrated widget on a carrier’s website, offering real-time plan comparisons with competitors.

Since we already had a working consumer-facing app, we decided to use it as a foundation while conducting UX research to identify gaps and necessary adjustments.

Approach & Process

Step 1: UX Research & Initial Concept Validation

I worked closely with Head of Design, Product Owner, and Data Analysts to determine key UX challenges and requirements. We held multiple brainstorming sessions, where I:

• Filtered ideas & structured insights into actionable design goals
• Created low-fidelity wireframes to visualize possible solutions
• Iterated through several rounds of discussion to refine the core product structure

Main UX Debates:

• Optimizing onboarding flow – What questions should we ask, in what sequence, and how would the data be used?
• Ensuring a flexible framework – The app needed to work seamlessly across different carriers while maintaining core logic.

Once the onboarding flow was finalized, we designed the internal system architecture using the same structured approach.

Step 2: User Testing & Iteration

After defining the best possible product structure, we selected two UX flow variations and conducted usability testing on UserTesting with 10 participants.

Key Outcomes:

• Identified usability pain points & improved logical structure
• Optimized onboarding questions based on user feedback
• Refined navigation logic to ensure a seamless experience

Step 3: Design System & Figma Variables Implementation

Biggest Challenge – Synchronizing design, documentation, and development, as the core logic had to remain the same across all clients, while only the branding and UI would change.

Solution – I decided to explore Figma Variables (which had just been released at the time). After testing them on a smaller project, I realized they were the perfect fit for our needs.

Implementation:

• Migrated the entire design system to Figma Variables
• Developed a naming structure in collaboration with developers to ensure consistency
• Allowed fast theme switching to preview the app in different carrier styles

Impact:

• Enabled scalable, modular UI customization for B2B clients
• Improved design-to-development collaboration, reducing UI inconsistencies
• Accelerated the white-labeling process, making carrier branding adjustments seamless

Step 4: Experimental Design Lab & A/B Testing

Alongside the main B2B product development, we launched an internal "Design Lab" to experiment with new UI styles & tone-of-voice approaches.

Why? Since the product was B2B under NDA, we needed a way to test UI/UX hypotheses without exposing our brand.

How? Working with data analysts & developers, we implemented Amplitude event tracking to measure the impact of various design changes.

Key Takeaways:

• Tested alternative branding approaches while maintaining usability
• Gained data-driven insights into design changes & their business impact
• Strengthened cross-team collaboration (design + data + development)

Results & Impact

• Scalable B2B product with a fully modular design system
• Fast theme switching via Figma Variables for carrier customization
• Optimized onboarding UX, validated through user testing & data analytics
• Innovative A/B testing approach via the internal Design Lab

Final Thoughts

• This project transformed our consumer app into a scalable B2B product
• Figma Variables proved to be a game-changer for white-label customization
• Data-driven design decisions helped improve usability and product adoption