Winkel Twinkel

01

The Challenge

How might we create a cohesive, scalable solution that balances complex business requirements with an intuitive user experience?

Fragmented Workflows

Users struggled to complete core tasks without switching contexts.

Information Overload

Dense data presentation made it difficult to find actionable insights.

Poor Accessibility

Previous iterations neglected WCAG guidelines, alienating a subset of users.

Scalability Issues

The existing UI could not easily accommodate new feature additions.

02

Discovery & Research

Illustrative Context

Stakeholder Interviews

Aligned on business goals, technical constraints, and key KPIs.

Competitive Audit

Analyzed 5 direct competitors to identify market gaps and UX patterns.

Contextual Inquiry

Observed users in their natural environment to map out true workflows.

Survey Analysis

Gathered quantitative data from 200+ users to validate qualitative findings.

03

Personas & Empathy

Anjali R.

Working mom, 32, shops on phone during commute

Prioritizes efficiency and clarity over complex feature sets.

Goals

Speed Reliability

Neha P.

Gift buyer, searching for age-appropriate toys

Needs robust tools to manage scale and extract meaningful insights.

Goals

Control Analytics

Empathy Map

Says

• "I can't find what I need quickly."
• "The interface feels cluttered."

Thinks

• Is there a faster way to do this?
• I hope I didn't make a mistake.

Does

• Relies on search rather than navigation.
• Creates external workarounds.

Feels

• Overwhelmed
• Frustrated

04

Information Architecture

Project IA Tree Diagram

User Flow

Entry

→

Authentication

→

Core Task

→

Success State

05

Wireframes

Dashboard Wireframe

Focusing on layout and hierarchy before visual styling.

Detail View Wireframe

Structuring data for maximum legibility.

Settings Wireframe

Streamlining complex configurations.

06

Design System

Playful Red #FF6B6B

Sunshine Yellow #FFD166

Mint Green #06D6A0

Typography Scale (Syne & DM Sans)

07

High Fidelity UI

Screen 1

Main Dashboard

Provides a bird's-eye view of critical metrics and pending tasks.

Screen 2

Task Management

Allows users to quickly filter, sort, and action items.

Screen 3

Detailed Analytics

Deep-dive into performance with interactive charts.

Screen 4

Mobile Experience

Fully responsive design ensures usability on the go.

08

Usability Testing

1

Users missed the primary call-to-action on the details page.

Increased contrast and moved the CTA above the fold.

2

Terminology in the navigation was confusing for novice users.

Simplified labels based on card sorting results.

3

Data entry forms felt too long and overwhelming.

Broke forms into logical steps with progress indicators.

09

Before / After

Before

Old Interface

After

New Interface

Before

Old Workflow

After

New Workflow

10

Impact & Insights

+45%

Task Completion Rate

-30%

Time on Task

8.5/10

Average SUS Score

+2x

User Engagement

01

Context is Key

Designing for specific user contexts (e.g., on-the-go vs desk) profoundly shapes the product architecture.

02

Iterative Testing Wins

Early and frequent testing prevented costly structural changes late in the design process.

03

Simplicity Over Features

Users valued a streamlined, robust core experience more than a wide array of secondary features.

Final Reflection

This project reinforced the importance of balancing aesthetic refinement with functional clarity. By grounding every design decision in empirical user research, we delivered a solution that not only looks modern but demonstrably improves the daily workflows of its users.