StupidFish — Design System & Documentation | Mobile & Desktop

Role: Product Designer Tools: Figma, Claude Platform: Mobile and desktop Industry: Recruiting / Careers

StupidFish is a career-discovery product designed to help people explore opportunities, build a profile, interact with content, and move through a membership experience.

I created a flexible visual system and a set of reusable interface patterns that could carry the product across mobile and desktop. The work brought key journeys, including onboarding, matching, profile management, content, subscriptions, and job discovery, into one consistent UI language.

The product needed more than individual screens. It needed a system that could support a growing set of features without every new flow feeling like it came from a different app.

The goal was to establish consistent patterns for:

Entry points and account creation

Navigation and page hierarchy

Matching and job discovery

Profiles, resumes, and account settings

Subscription and paywall moments

Feed, reactions, comments, and social interactions

Interactive cards and assessment flows

The interface balances a direct product experience with a more expressive visual identity. Large type, high-contrast color, soft surfaces, illustrated elements, and modular cards make the product feel approachable while keeping complex career decisions legible.

The system was designed around repeatable ingredients:

Clear hierarchy for dense information

Cards that adapt across feature types

Familiar actions placed consistently across screens

Progressive disclosure for higher-commitment actions

Shared spacing, type, color, and component rules across mobile and desktop

The first group of screens establishes the core visual language used throughout the product.

Design system exploration : This work sets the tone for the system through type, color, composition, illustration, and interface density. The intent was to build a recognizable product personality that could still scale across functional screens.

Early interface directions and page explorations, They establish patterns for navigation, content grouping, calls to action, and responsive composition before expanding into the wider product.

The onboarding flow needed to make the first interaction feel clear and low-friction while introducing the product’s tone.

Get Started : The entry screen creates a focused first step, giving new users a simple route into the product without overloading the page with options.

Login / Sign up : Authentication follows the same visual structure and hierarchy as onboarding. The screen keeps attention on the primary action while making alternate paths easy to find.

Once inside the product, the home experience needed to help users understand what to do next and surface opportunities without becoming visually noisy.

Home Page : The home screen acts as a central hub for career exploration. Reusable layout sections create a predictable reading rhythm, while cards help separate different kinds of content and recommendations. Matching Card : Matching is treated as a product moment with its own visual weight. The card pattern packages information, context, and next actions into a component that can appear across the experience.

Job Cards : Job cards turn dense role information into scannable modules. The system makes room for job details, signals, and actions while keeping each card consistent within a feed or results view.

Career products depend on users being able to shape and revisit their professional identity. These screens create a connected system for profiles, resumes, and account preferences.

Resume Settings : Resume settings organize potentially complex choices into manageable sections. Repeated controls and clear grouping help users understand what they can edit and where those changes apply.

Profile : The profile screen brings personal information, professional context, and account-level actions into a unified view. It uses the shared system to make the user’s identity feel distinct without breaking the broader product pattern.

Upgrade flows needed to feel like part of the product, rather than an interruption dropped in from somewhere else.

Unlock PRO : The upgrade entry point frames the value of membership before asking for a decision. The design uses hierarchy and visual contrast to make the primary action clear.

Plan Cards : Plan options are presented as comparable, reusable cards. The layout gives each plan enough space for its details while making differences easy to scan.

Paywall : The paywall carries the system into a high-intent conversion moment. It keeps the value proposition and next step visible without creating a visually disconnected experience.

Long-form reading uses a calmer layout and stronger text hierarchy. The screen keeps the content at the center while retaining the shared navigation and brand language.

The social layer extends the design system beyond utility screens. It needed to support fast scanning, lightweight expression, and deeper conversation.

The feed organizes a stream of content into a consistent reading experience. Content modules, author details, actions, and spacing all work together to keep the page readable as it grows.

The reaction wheel adds a more expressive interaction pattern while staying connected to the product’s visual language. It creates a clear, intentional moment around responding to content.

The selected reaction state shows how feedback and interaction are surfaced within the feed. The pattern gives the user immediate confirmation without pulling focus away from the post itself.

Comments extend the feed into conversation. The component system supports nested information, participant context, text entry, and interaction states in a compact format.

The visual system also extended into launch-facing product storytelling.

The first App Store preview direction turns core product moments into a concise visual narrative. It highlights the experience in a format built for quick scanning.

The second direction explores an alternate composition for communicating the product’s value. Both versions draw from the same system, keeping product marketing visually connected to the in-app experience.

Some parts of the product required more than static information cards. These components were built to support participation, assessment, and guided decision-making.

Interactive cards create a flexible format for user input and guided actions. Their shared anatomy makes the pattern reusable across different prompts and journeys.

Assessment cards introduce a more structured interaction model. They balance instruction, progress, response options, and feedback within a single component family.

Enrollment cards support decision moments where users need to understand an option and take action. The pattern makes room for context without losing the momentum of the flow.

The mobile component overview documents reusable interaction patterns at a system level. This gives future screens a practical foundation instead of rebuilding common behaviors from scratch.

The resulting work gives StupidFish a coherent UI system across its core user journeys, from first sign-up through matching, profile management, subscription, content, and interactive experiences.

Rather than treating each screen as a one-off, the project establishes a shared set of design decisions that can be reused across mobile and desktop as the product grows.