ANODA Discuss your product

Stock research app on a phone screen

Stokkr helps self-directed investors find stocks fast and then look closely.We designed it from wireframes to a light and dark mobile UI.

Stokkr filtering screen in light mode: criteria groups such as Most Popular, Basic Company Facts, Dividends, Earnings and Company Value, each with its count; Stokkr company analysis for Apple in dark mode: Valuation with the stock price, TTM free cash flow per share and price-to-FCF charts, and ratio chips
2
modes every gain, loss and selected filter readable in both
3
visual directions tried on the same screens, then one chosen
Prototype
and screen map handed to the developers with the design export

We designed Stokkr’s mobile stock-research product to connect quick card-based screening with the detail behind an investment decision. Screening, company fundamentals and watchlists have clear paths between them, rather than competing for one screen. Light and dark UI share one design system , delivered with maps, a prototype and design exports for the client’s developers.

From a quick look to a close one

An investor narrows many stocks down to one, then keeps a shortlist. Each step needed its own depth:

  1. Start

    • Account and sign-in
    • A few profile questions

  2. Screen

    • Search
    • Filters by sector and metric

  3. Study

    • Fundamentals
    • Charts and ratios

  4. Keep

    • Several watchlists
    • Move, copy, remove

  5. Account

    • Settings
    • Notifications and help
Quick triage Deep analysis
One product for both: the fast view leads into the detail instead of replacing it.
Many filters A small screen
Every filter family shows what’s selected and can be undone.
Light Dark
Gains, losses, selected states and warnings mean the same thing in both modes.

A company on one screen, without a spreadsheet

Found
Valuation, cash flow, earnings and growth all compete for a narrow column, and the numbers a serious investor needs are long.
Decided
One company and one view at a time: the name and the view on top, the charts for that view, then chips that switch the metric without leaving the page.
For the user
An investor compares a company’s valuation over twelve years without a single table to scroll sideways.
Mobile app design
Stokkr company analysis for Apple in light mode: the Valuation view with stock price, TTM FCF per share and price-to-FCF charts, and ratio chips such as PEG, EV/EBIT and EV/FCF
After: Apple’s valuation view

  1. Which company, which view

    The company and the part of its analysis you’re in, with the other views one swipe away.

  2. The charts

    Only the charts for this view, each on its own axis.

  3. The metric switch

    Chips change the ratio without leaving the page.

How the work progressed

Structure first, then style, then the product in both modes, release after release.

  1. Wireframes

    What each card and table holds, and how screening leads into analysis

    Artifact Wireframes and clickable wireframes

    A grey wireframe of the earnings screen: a logo placeholder, a stock title, a bar chart and report tables

  2. Visual direction

    How Stokkr looks, chosen from three directions on the same screens

    Artifact A moodboard and three visual directions

    The same stock card in three directions: a dark card with a lime chart, a monospaced light card with a black line chart, and a light card with a soft lime area chart, each with Skip, Save and Like buttons

  3. UI

    Every flow in light and dark, tables and charts included

    Artifact The high-fidelity mobile UI in both modes

  4. Prototype and screen map

    How the screens connect, before a line of code

    Artifact A clickable prototype and a screen map

  5. Design system and handoff

    What engineering needs to build it without guessing

    Artifact The design system, UI kit and component library, exported for the developers

    Part of the Stokkr UI kit: filter sheets for P/E, volume, earnings dates, 5-day change and net income per employee, and save-to-list sheets, in light and dark

Screen, study, keep

Found
Screening, analysis and watchlists each pull an investor in a different direction.
Decided
Three places with a clear path between them: find stocks, study one, keep the ones worth watching. One tab bar for all three.

  1. Screen

    From the list of criteria into one filter and back, with the match count on Apply.

    Open the full map
    Screen-map fragment of filtering: the criteria list, then the P/E sheet with its buckets, and back to the list with the criterion ticked

  2. Study

    One company, from its card to the statements, valuation, earnings and news.

    Open the full map
    Screen-map fragment of studying Apple: the stock card, balance sheet, income and cash flow statements, valuation charts, earnings and news

  3. Keep

    Watchlists: sort them, move or copy a stock, or take it off a list.

    Open the full map
    Screen-map fragment of the watchlist: lists and their settings, moving and copying a stock between lists, a new list and deleting a stock
The Stokkr tab bar in dark mode: Stocks, Watchlist and Account

Three tabs for the three jobs

Stocks for screening and analysis, Watchlist for the shortlist, Account for the rest.

  • Wireframes and clickable wireframes
  • A screen map
  • A clickable prototype

What an investor does in Stokkr

In the order they meet it.

Onboarding that asks with care

Found
Asking about someone’s net worth before they’ve seen any value feels invasive, and can sound like an eligibility check.
Decided
Short profile questions, one per screen, with ranges to pick from instead of a number to type, and a way to skip.
Help us to get to know you: What is your liquid net worth? with six ranges from $0 to $50k up to more than $5m, one selected, Next and Skip

Filters you can undo

Found
Dozens of criteria in many families are easy to lose track of on a small screen.
Decided
Criteria grouped into families, each showing how many are active, with Clear all always in reach.
Filtering: Most Popular with 4 criteria, Basic Company Facts with 2, then Dividends, Earnings, Company Value, Company Growth, Management Metrics, Debt, Performance & Volatility and Volume, with Clear all

Fundamentals, table by table

Found
Balance sheets and cash flow statements are long, dense and full of negative numbers.
Decided
One statement at a time behind three tabs, with labels that wrap and totals that stand out.
Apple financials with Balance, Income and Cash Flow tabs: the cash flow statement from income before extraordinary items to cash generated by operating activities

Watchlists

Found
Investors keep several shortlists and move stocks between them.
Decided
Several named lists, each stock with its trend, price and day’s change, and a stock can be moved, copied or removed.
Watchlist Best: Apple, Amazon, Tesla, GameStop, NIO and others, each with a sparkline, its price and the day’s change

One system, two modes, the same signals

Found
Dark mode is easy to treat as a recolour, until a loss and a selected filter look alike.
Decided
Components defined for both modes from the start, so every filter, gain, loss and warning keeps its meaning.

The same filter sheet for every criterion

A range, five buckets with their counts, the market median, Apply.

  • P/E filter sheet: a range from 0.35 to 2.86k, five buckets from Very High to Very Low with their counts, the market median 15.02 and Apply
    P/E ratio: Buckets from very high to very low.
  • 5 Days filter sheet: a range from −99.40% to 1,900.00%, buckets from Very High to Very Low and a red Negative bucket, the market median −5.41% and Apply
    5-day change: The same sheet, with a bucket for losses.

Asked before it happens

Removing a stock and turning on Face ID are confirmed first, in both modes.

  • Confirmation dialog: delete “Tesla” from the Best list, with Delete and Cancel
    Remove from a list
  • Allow Stokkr to use Face ID? with Yes, allow and No, thanks, light mode
    Face ID, light
  • The same Face ID prompt in dark mode, Yes, allow in lime
    Face ID, dark

The same screen, light and dark

Apple’s earnings: the bars, the estimates and the industry comparison read the same in both.

Apple earnings in light mode: an EPS bar chart of consensus and adjusted actuals, the latest report, next report date and earnings metrics against the industry
The same Apple earnings screen in dark mode

Where the product ended up

A mobile stock-research app designed end to end: onboarding, screening and filters, company fundamentals and charts, and watchlists, in light and dark mode, on one design system, with a screen map, a clickable prototype and the design export for the developers.

modes, light and dark, across the product
2
visual directions tried on the same screens
3

Will your screener survive a real balance sheet?

A swipe looks great in a demo. Then someone opens a company with negative cash flow, a long name and three years of history. Send us your screens; we’ll show you where the data breaks and the decision gets harder.

Discuss your product Explore more case studies

What we brought to Stokkr

The product

The work