Darshna Portfolio

Sucafina: Optimizing Navigation for Business & User Efficiency

Streamline and unify the navigation structure while allowing flexibility for regional differences.

Product Design | B2C

Live Site

Product Designer

Role

Product/ Marketing Heads, Content Strategists, Engineers

Team

Feb- Apr 2024

Timeline

Project in a nutshell

My role

Led end-to-end product design—revamping IA, wireframes, UI components, and a scalable style guide aligned with Sucafina’s system, collaborating closely with marketing, product, and engineering.

My role

Led end-to-end product design—revamping IA, wireframes, UI components, and a scalable style guide aligned with Sucafina’s system, collaborating closely with marketing, product, and engineering.

Problem statement

Inconsistent, cluttered navigation menu across regions led to poor user experience, hidden microsites, unclear buyer/seller flows, and scalability issues.

Problem statement

Inconsistent, cluttered navigation menu across regions led to poor user experience, hidden microsites, unclear buyer/seller flows, and scalability issues.

Solution

I simplified and unified the navigation structure, introduced a clear microsite hub, optimized onboarding flows, made the design mobile-friendly, and enhanced the UI system with a scalable style guide.

Solution

Impact

Reduced friction, improved microsite discoverability, created a consistent visual experience, and laid a scalable foundation validated by stakeholders.

Impact

Reduced friction, improved microsite discoverability, created a consistent visual experience, and laid a scalable foundation validated by stakeholders.

Background & Business Objective

Sucafina is a globally recognized, sustainability-driven coffee platform serving buyers, sellers, and partners across multiple regions. But as the business expanded, their digital platforms struggled to keep up—fragmented navigation and inconsistent UI patterns made it difficult for users to find coffee offerings, certifications, and microsites like IMPACT or Beyers.

Objective : Streamline navigation to drive higher engagement, support scalability, and deliver a unified, brand-consistent experience globally.

The Challenge

The existing navigation structure was fragmented across regional platforms, leading to:

Inconsistent User Experience

Varied menu structures confused users navigating between regions.

Hidden Microsites

Key programs like IMPACT and Instant Coffee were difficult to locate, reducing engagement.

Unclear Onboarding Flows

Ambiguous call-to-action paths for buyers and sellers led to decreased conversions.

Scalability Issues

The navigation couldn't adapt to the addition of new microsites or content.

Inconsistent User Experience

Varied menu structures confused users navigating between regions.

Hidden Microsites

Key programs like IMPACT and Instant Coffee were difficult to locate, reducing engagement.

Unclear Onboarding Flows

Ambiguous call-to-action paths for buyers and sellers led to decreased conversions.

Scalability Issues

The navigation couldn't adapt to the addition of new microsites or content.

My Goal: Simplify navigation, create consistency across regions, highlight microsites upfront, and make sure the system is scalable and visually aligned.

Research & Discovery

Co-Creation Sprint (4 Days) A structured design sprint to align business goals, user needs, and technical feasibility before diving into execution.

view details

Interviews + IA Review

We kicked off by gathering insights from stakeholders across product, marketing, and regional teams. This helped us understand pain points, business priorities, and inconsistencies in the current Information Architecture (IA). We audited existing menus to identify overlaps, redundancies, and areas for improvement.

Snippets from the interview outcomes

Competitive Benchmarking

Analyzed B2B platforms such as Algrano, Covoya, and Café Imports to understand scalable IA practices. Focused on how these platforms categorized offerings, handled region selectors, and simplified buyer-seller flows.

Snippets from the platform analysis

User Personas & Journeys

Defined key user segments:

Buyers: Specialty/commercial roasters, wholesalers, first-time and repeat customers looking for certified coffee.
Sellers: Producers, exporters, cooperatives needing quick access to contacts.
Partners: Banks, NGOs, logistics teams and non-coffee counterparties.

Mapped their navigation pain points from landing on the platform to final actions (sign-up, quotation requests, content exploration). Identified excessive redirects, lack of contact clarity, unclear login flows, and inconsistent UI patterns as key blockers.

Snippets from the journey mapping

Clear themes emerged—users struggled to reach microsites, onboarding paths were unclear, and the visual design felt fragmented.

Best Practices & UX Principles Used

Z-Pattern Layout

Implemented the Z-pattern design to align with natural reading behaviors, enhancing content discoverability and engagement.

Outcome : Improved content discoverability and click-through rates.

Few more...

Focus on Top Tasks

Prioritized user actions based on intent (e.g., quick access to microsites, search, sign-ups).

Adapting Heuristics

Applied usability heuristics to improve menu clarity and minimize cognitive load.

Priority Ratios for Elements

Used data to prioritize menu hierarchy based on user behavior.

Page Click Depth (PCD)

Designed for minimal click depth to help users find content faster.

The rule helps us to focus on the information that users need. For example : Homepage (CD -0) -> Page 1 (CD -1) -> Page 2 (CD -2)

Overall Navigation Layout (Top-Top-Top)

Adopted a structured layout that ensured global, regional, and local navigation levels were well-defined.

Design approach

Prioritization Matrix

We mapped menu items based on user and business importance to balance both needs. This helped us prioritize key actions like search, shopping, and partnerships while keeping less critical elements in the background.

✅ Outcome: Clearer navigation, better content discoverability, and higher engagement with key sections.

Refined User Flow

We structured the navigation for quick discovery and seamless access to key sections like Shop, Origins, About Us, and More. Users can easily explore products, regional information, company details, and external microsites.

✅ Outcome: Intuitive browsing, faster access to relevant content, and improved user engagement.

Revised Information Architecture

The updated navigation is streamlined for clarity and efficiency, ensuring faster access to key content like Offerings, Origins, About Us, Learning Hub, and More. The revised structure improves discoverability, reduces cognitive load, and enhances user engagement through a logical menu hierarchy and clear categorization.

✅ Outcome: Simplified user journeys, improved navigation flow, and intuitive content access.

Design Solution

Redesigned navigation experience

Wireframes

Desktop and M-web wireframes

1. Simplified Navigation Structure

We reorganized cluttered menus into clear, nested categories based on how users naturally search. Grouped microsites, offerings, and certifications logically across all regions.

Designed a modular interface where different roles had access to only relevant modules.

L1 (Employees) focus only on task execution.

L2 (Managers/Moderators) get an overview dashboard to monitor and assign tasks.

L3 (Operations Head) has full control over workflows, reports, and system access.

Outcome:

✅ Users found key content faster, improving ease of navigation and engagement with core platform features.

Outcome:

✅ Users found key content faster, improving ease of navigation and engagement with core platform features.

2. Microsite Hub (Sucaverse)

Key microsites were getting lost. I introduced a dedicated “Sucaverse” section that surfaced all microsites at once with hover interactions.

Created a widget-based dashboard 📊 for team leads (L2) & admins (L3) to get a real-time overview.

Outcome:

✅ Greater discoverability of business-critical programs such as IMPACT & Instant Coffee, leading to increased user engagement and session depth.

3. Clear Buyer & Seller Flows

Buyers and sellers had unclear sign-up journeys. I split their CTAs and structured their onboarding flows separately, so each user type landed exactly where they needed to.

Introduced a unified eIA profile system: Every customer’s policy, service requests, and history are mapped to a single e-Insurance Account (eIA).

Outcome:

✅ More seamless onboarding, reducing drop-offs and strengthening the user conversion pipeline.

Outcome:

✅ More seamless onboarding, reducing drop-offs and strengthening the user conversion pipeline.

4. Mobile-First Experience

Recognizing mobile-heavy traffic, I redesigned menus as collapsible, tap-friendly patterns and ensured navigation remained just as intuitive on smaller screens.

Outcome:

✅ Users experienced smoother interactions across devices, leading to improved mobile engagement rates.

Outcome:

✅ Users experienced smoother interactions across devices, leading to improved mobile engagement rates.

5. UI & Style Guide Consistency

Sucafina lacked standardization in UI patterns. I extended their design system, built reusable components, and created a style guide defining typography, button states, colors, and layout behavior.

Outcome:

✅ Established design consistency across platforms, streamlining development cycles and reducing UI inconsistencies.

Outcome:

✅ Established design consistency across platforms, streamlining development cycles and reducing UI inconsistencies.

Measurable Impact

Increased microsite engagement due to better visibility and accessibility.

Higher conversion rates for buyer and seller sign-ups after streamlining onboarding.

Reduced clicks needed to reach key pages, improving efficiency.

Shorter average navigation time, making discovery smoother.

What I Learned

✅ Collaborate early: Bringing stakeholders in from Day 1 saved time later.
✅ Balance global & local needs: Keeping the design consistent while still allowing room for regional or content-specific differences.
✅ Systems thinking matters: Modular IA and UI make it easy to scale as the product grows.

What's Next?

Launch A/B tests to fine-tune navigation interactions.

Integrate behavior analytics to track microsite engagement.
Explore multilingual navigation expansion.

Up next

Interested in seeing even more work?

more work