UX Designer + Front-End Developer

TRENDSPY

How I designed and built a unified market research platform that consolidates fragmented tools into one intuitive interface for small business decision-making.

Note on Project Status

TrendSpy is currently in active development. This case study represents the work completed thus far, with ongoing iteration planned for upcoming phases. Some specific details have been adjusted to protect proprietary information, but I'm happy to discuss the process in more detail during interviews.

My Role UX Designer & Developer

Timeline August 2024 - Present

Team 5 Core Members

UX Research React.js Data Visualization WCAG 2.2

Overview

The Challenge

Small businesses struggle with fragmented market research tools, leading to missed opportunities and time-consuming analysis across multiple platforms.

How might we create a unified solution that helps businesses identify market opportunities more efficiently?

Our Solution

TrendSpy is a market analysis platform that consolidates data from multiple sources into one intuitive interface.

The platform offers personalized dashboards, trend tracking, and AI-powered insights tailored to business needs.

Key Features

Real-time tracking across platforms
Industry-specific discovery tools
Historical analysis with trend patterns
Customizable dashboards and widgets
AI-powered insights and recommendations

My Contribution

Conducted user research with 12 stakeholders across 6 companies
Created a design system with 15 reusable components
Leading UX and front-end development with React.js
Implemented WCAG 2.2 accessibility standards
Designed AI-driven analytics features

My Role & Responsibilities

As both the UX designer and front-end developer, I work directly with our small team to bring TrendSpy from concept to implementation. This dual role allows me to maintain design consistency while building functional interfaces.

I handle translating business requirements into user-centered designs and functional React components, ensuring seamless integration between design and development.

Key Responsibilities

• User research & stakeholder interviews
• Design system creation & maintenance
• React.js component development
• WCAG 2.2 accessibility implementation
• AI interface design & optimization

Research

I conducted focused research to understand how businesses currently analyze market data and their key pain points. My approach emphasized qualitative insights from direct stakeholder conversations.

Competitive Analysis

I analyzed existing market solutions to identify gaps and opportunities, focusing on platforms that small businesses typically use for market research.

Key Finding: While many solutions existed, none provided a truly unified, affordable platform specifically designed for small business workflows.

Stakeholder Interviews

I conducted 12 in-depth interviews across 6 companies (2 startups, 2 small businesses, and 2 mid-sized companies). Each 45-minute session focused on current workflows, pain points, and tool usage patterns.

Key Insight: Users were spending significant time weekly on analysis, with much of it wasted on platform switching and data consolidation.

Workflow Observation

I observed marketing teams during their analysis sessions to understand real usage patterns:

Multiple platforms being used for single analysis tasks
Manual data copying and formatting between tools
Inconsistent data formats causing confusion
Significant time spent switching between contexts

Key Observations: Users had developed complex workarounds that were time-consuming and error-prone.

Key Research Findings

Tool Fragmentation

Users were juggling between multiple platforms to get a complete picture of market data.

This fragmentation led to inconsistent data, duplicate efforts, and important insights getting lost in the process.

Analysis Overwhelm

The abundance of data without clear prioritization led to confusion for many business owners.

Users struggled to determine which insights were actually relevant to their specific business context.

Feature Complexity

Existing enterprise-focused tools overwhelmed users with complex features and confusing interfaces.

Most users only utilized a small fraction of the features they were paying for.

Time Constraints

Business owners identified time as their most precious resource, yet were spending excessive hours on analysis.

By the time users identified opportunities, the window to act was often reduced.

User Quotes

Direct feedback from our target users provided clear direction for our design strategy:

I copy-paste between 5 different dashboards daily. It's killing my productivity.

— Marketing Lead at Tech Startup

We're paying for features we never use. I just need a simple way to track across platforms.

— Small Business Owner

Design Process

Based on research insights, I developed a user-centered design approach focused on consolidation and simplicity.

Information Architecture

I created an information architecture that organized the complex data ecosystem into an intuitive structure. Through card sorting with several users, I validated that topic-based organization was preferred over source-based categorization.

Design Decision

The final IA structure prioritizes user mental models over technical data organization, making the platform more intuitive for non-technical users.

Design System Creation

I developed a comprehensive design system in Figma with 15 reusable components to ensure consistency across the product. The system includes:

Data visualization components optimized for trend analysis
Consistent navigation patterns across all features
WCAG 2.2 accessibility standards built into every component
Responsive behaviors for cross-device compatibility

User Flows & Wireframing

I mapped key user journeys and created wireframes for the core product functions, addressing specific user needs identified during research:

User Flow Diagram

Complete user journey from login to actionable insights, showing decision points and optimized paths for efficiency.

Dashboard Wireframe

Main analytics interface prioritizing data visualization and quick access to key metrics based on user research findings.

User Profile Wireframe

Profile management system allowing users to customize their analytics experience and manage business goals.

Widget Page Wireframe

Customizable analysis components that can be combined to create personalized dashboards with modular flexibility.

AI Assistant Wireframe

Conversational interface design for natural language queries, making complex analytics accessible to non-technical users.

Wireframe Testing & Validation

I tested wireframe concepts with target users to validate design decisions and information architecture:

Testing Methods

• Task-based walkthroughs: Users navigated key workflows using wireframes
• Card sorting validation: Confirmed information architecture decisions
• Concept testing: Evaluated AI assistant interaction patterns
• Accessibility review: Identified potential navigation barriers

Key Insights

• High task completion on primary workflows
• Dashboard customization was highly requested feature
• AI interaction patterns needed clearer visual feedback
• Profile management required more granular controls

High-Fidelity Prototyping

Using Figma, I created interactive high-fidelity prototypes that incorporated user feedback and established the visual design language. These prototypes serve as the foundation for development.

Design Solution

Final Design Approach

My design solution unifies market analysis from multiple sources into an intuitive platform optimized for small business users. The solution focuses on four key components that address the core pain points identified in research.

Real-Time Monitoring Niche Discovery Historical Analysis AI Insights

Key Features

Real-Time Tracking

I designed a unified monitoring system that aggregates data across platforms in real-time, translating complex data into actionable insights.

Cross-platform data aggregation
Visual trend indicators
Configurable alert thresholds

Discovery Engine

I created an interface for identifying emerging opportunities specific to each user's industry, helping businesses discover opportunities early.

Industry-specific filtering
Opportunity scoring system
Visual trend maps

Historical Analysis

I designed interactive visualizations allowing users to analyze evolution over time and identify patterns for understanding trends.

Interactive time-series charts
Pattern highlighting
Trend indicators

AI-Powered Insights

I designed an AI assistant that provides insights and answers to business questions in natural language.

Natural language Q&A
Data interpretation
Conversation history

Dashboard Interface

The main dashboard provides a unified view of market intelligence with customizable widgets and real-time data visualization. Users can configure their workspace based on specific business needs and priorities.

Interactive Widgets Real-time Data Customizable Layout

TrendSpy Dashboard High-Fidelity Prototype

User Profile Management

The profile interface allows users to define their company information, business goals, and customize their analytics experience. This personalization ensures relevant trend recommendations and tailored insights.

Key Features

• Company profile and industry settings
• Business goal tracking with progress indicators
• Personalized trend recommendations
• Activity tracking and analytics preferences

Widget Library

The Widget Library provides customizable analysis components that can be combined to create personalized dashboards. Each widget offers specific insights into market data, social media analysis, or industry-specific metrics.

This modular approach allows for maximum flexibility while maintaining a consistent interface.

AI-Powered Analysis

The AI feature helps users discover insights they might otherwise miss. Users can ask questions in natural language and receive analysis based on their data.

Conversation history is saved for future reference, creating a valuable knowledge repository.

Implementation

As both designer and developer, I'm translating the validated designs into a production-ready React.js application. This dual role ensures design fidelity while maintaining modern development standards and accessibility compliance.

Technical Stack

Frontend: React.js with TypeScript for type safety
Styling: Styled-components with design tokens
Data: React Query for efficient API management
Charts: D3.js for custom visualizations
Testing: Jest and React Testing Library
Accessibility: WCAG 2.2 AA compliance built-in

Development Approach

Component-based: Reusable UI library mirroring Figma designs
Performance-first: Code splitting and lazy loading
Mobile-responsive: Consistent experience across devices
Accessibility-native: Keyboard navigation and screen readers
Testing-integrated: Unit and integration test coverage
Documentation: Component library with usage examples

Design-to-Code Process

Design System Translation

Extract design tokens from Figma and create corresponding CSS variables and React component props.

Component Development

Build reusable React components with TypeScript interfaces matching Figma component properties.

Integration & Testing

Assemble components into complete interfaces with comprehensive testing and accessibility validation.

Quality Assurance

Testing Strategy

• Design validation: Pixel-perfect Figma comparison
• Functionality testing: User workflow automation
• Performance monitoring: Load times and responsiveness
• Accessibility audit: Screen reader and keyboard testing
• Cross-browser testing: Chrome, Firefox, Safari, Edge

Collaboration Process

Regular design-development sync meetings with the backend developer ensure API integration aligns with UI requirements. Sprint reviews with stakeholders maintain project momentum.

Current Status & Impact

TrendSpy is in active development with key features being implemented. The design and prototyping phase has received positive feedback from stakeholders and early testing participants.

Stakeholder interviews conducted

Reusable components in design system

Companies across different sizes

Core features designed & prototyped

Development Progress

Design system: Complete with 15 reusable components
Core wireframes: Complete for all main features
Dashboard prototypes: Complete and functional
Widget library: Complete with live previews
AI interface design: Complete with chat functionality
User profile system: Complete with business context
Frontend implementation: React.js components in progress
Settings page: Not yet designed - planned for next phase
Alerts/Notifications: Not yet designed - requires UX research
Advanced reporting: Not yet designed - pending user validation

Technical Implementation

Accessibility Implementation

• WCAG 2.2 AA standards in all components
• Complete keyboard navigability
• Screen reader compatibility
• Sufficient color contrast throughout
• Responsive across all devices

Next Steps

As we continue implementation, I'm focused on the following priorities:

Usability Testing

Conduct comprehensive tests with target audience to validate design decisions.

Recruit target participants
Design task-based scenarios
Collect actionable feedback
Iterate based on insights

Design Iteration

Refine based on testing feedback and stakeholder input.

Address identified pain points
Optimize information hierarchy
Enhance visual design
Improve accessibility features

Feature Development

Complete implementation of core features for initial launch.

Finalize dashboard implementation
Complete data visualizations
Integrate AI features
Implement user authentication

Launch Preparation

Prepare for initial launch with select users.

Select launch participants
Implement feedback collection
Monitor usage patterns
Plan iteration cycles

Skills Demonstrated

This project demonstrates several key competencies:

• User-centered design: Transforming complex business needs into intuitive interfaces
• Front-end development: Building sophisticated React components and interfaces
• Accessibility implementation: Making complex data accessible to all users
• Research methodology: Gathering actionable insights from stakeholder interviews
• Cross-functional collaboration: Working effectively with diverse team members
• Design systems: Creating scalable and consistent component libraries
• AI interface design: Making complex AI capabilities approachable for business users

Confidentiality Note

Some specific details about TrendSpy's proprietary technology and business strategy have been omitted from this case study for confidentiality reasons. I'd be happy to discuss these aspects in more detail during interviews, under appropriate confidentiality agreements.

Overview Research Process Design Results