small businesses track trends across a pile of separate tools. the work had two parts: the product itself, a dashboard i researched, designed, and built the front-end for, and a landing page to get people into the beta.
final design
the dashboard
roleUX designer + front-end developer
skillsuser research · information architecture · design systems · interaction design · front-end engineering
teamfive people, including the CEO and the lead engineer
timelinelanding page: mid 2024 · product: August 2024 to January 2026
the problem
owners were copying data between four or five dashboards to answer one question, and paying for enterprise features they never used.
the work
the product: 12 interviews, an information architecture built on topics, a 15-component design system, and the React front-end. the landing page: designed and built on my own in four weeks.
the outcome
the landing page launched in mid 2024 and took beta sign-ups from 2.35% of visitors to 12%. the product hasn't launched yet.
part 01the productthe dashboard, from interviews to code
i copy-paste between 5 different dashboards daily. it's killing my productivity.a marketing lead at a startup, in an interview
chapter 01research12 interviews at 6 companies, 45 minutes each
findings01
01too many toolsone picture of the market took several platforms, with copy-paste in between.
02too much dataowners couldn't tell which numbers mattered to them.
03too many featuresenterprise tools did everything, and people used a fraction of it.
04no timeby the time someone spotted an opportunity, the window had shrunk.
information architecture
organized by topic
card sorting showed people group trends by topic. so the dashboard, the widget library, and the assistant all start from topics, and the data source is a detail.
the core journey, from sign-in to a saved insight
chapter 02designwireframes, testing, a design system
wireframes
the four core screens
we tested them with task walkthroughs, card sorting, and an accessibility review.
the dashboard
the profile
the widget library
Trendy, the AI assistant
changes from testing02
01custom dashboardsthe most requested thing, so widgets became the core of the dashboard.
02feedback from the assistantpeople needed to see what the AI was doing while it worked.
03finer profile controlsthe profile needed more granular settings than we'd drawn.
color, type, components, and charts
design system
15 components
built for trend data: charts, widgets, and navigation.
WCAG 2.2 AA is built into each component from the start.
chapter 03high fidelity, then code
high fidelity
widgets and the profile
people build their own dashboard from widgets. the profile holds the company, its goals, and its sources, which shape what the dashboard and the assistant suggest.
the widget library
the profile
Trendy answering a question about AI analytics
high fidelity · the AI assistant
Trendy
ask a question in plain language and get an answer drawn from your own data.
conversations are saved, so they add up to a record of what you looked into.
building it·
i built the front-end myself, so the design and the code stayed in step.
design tokens come out of Figma as CSS variables, and each React component mirrors its Figma component's properties in TypeScript. every component came with tests and an accessibility check.
built, and next·
01builtthe dashboard, the widget library, Trendy, the profile system, and the front-end.
02next: alertsthey need their own research first.
03next: reporting + settingsadvanced reports and team settings.
part 02the landing pagesolo, four weeks, launched mid 2024
the final page
Uncover Tomorrow's Trends Today
i designed and built the page on my own, working directly with the CEO and the lead engineer. its one job was getting people into the beta, and the old page converted 2.35% of visitors.
the hero, as launched
starting points03
01the product interviewspeople used 3.2 tools on average to follow trends, and 83% were frustrated switching between them.
02four competitorsExploding Topics, Google Trends, BuzzSumo, and SEMrush Trends. none was built for small businesses at their budget.
035-second tests8 people saw early concepts. the value had to be clear within 8 seconds, and specific numbers and real job titles built trust.
04mobile first67% of first looks at tools like this happened on a phone.
before + after
from features to benefits
the new page follows one order: the promise, the problem, what it does, who uses it, then one email field.
before: led with features
after: led with what you get
test results04
01the headline"Uncover Tomorrow's Trends Today" got 18% more engagement than the other versions.
02the button"Join Beta Access" got 27% more clicks than "Subscribe".
03the testimonialsquotes with job titles built the most trust.
04usability4 small business owners, 3 marketers, and 1 accessibility expert. contrast, wording, form errors, and tap targets all got fixes.
features, written as benefits
testimonials with job titles
the color and type system
the visual system
navy, with a purple-to-pink gradient
deep navy for long reading, the gradient for emphasis. Gilda Display for headings, Inter for reading, Syne for buttons.
React, mobile-first, with WCAG 2.2 AA built in from the start.
semantic headings and landmarks, full keyboard use with visible focus, a skip link, form errors that screen readers announce, and reduced motion respected.
