ANODA Discuss your product

Investment app design for a first deposit

Blackstar is a Ghana-focused app for investing and managing portfolios.We redesigned it in light and dark, then designed its responsive website.

Blackstar onboarding: Smarter Insights, Less Noise, over a portfolio balance card with Add Cash, and Create Account; Blackstar portfolio home: the portfolio balance with Add Cash and quick actions, the Portfolio, Transactions and Analytics views, and goal cards; Blackstar Auto Invest, Recommended Portfolio: estimated annual return and volatility, and the allocation across equity, commodity and money market
2
ways to invest Active Invest and Auto Invest in one navigation
2
modes every mobile flow in light and dark
App + web
the mobile app first, then the responsive website

We redesigned Blackstar’s investment app around a clear path from opening an account to funding a portfolio. We connected Active and Auto Invest, simplified navigation and built one design system for light and dark modes. The client then returned to ANODA for a responsive website and brand book extension built around the same product.

From a first account to a funded portfolio

A Blackstar customer opens an account, picks how to invest, funds it and keeps an eye on it. Every step needed its own depth:

  1. Start

    • Sign-up and login
    • Identity and financial details

  2. Choose

    • Active Invest
    • Auto Invest

  3. Invest

    • Markets by category
    • A security, buy and sell

  4. Fund

    • Wallet in GHS and USD
    • Mobile money, bank, withdrawals

  5. Track

    • Portfolio home
    • Analytics and notifications
A first-time investor A self-directed one
Explanations where a beginner needs them, and markets and actions one tap away for everyone else.
Active Invest Auto Invest
Two models of control that share one navigation and one system language.
Ghana Global markets
Mobile money and Ghana treasury bills in the same app as US stocks and ETFs.

A portfolio home that explains wealth at a glance

Found
The balance, every goal, its change and the next action all competed for the first screen, and the old app made people dig for them.
Decided

The total and its actions on a dark card, three views of the same money under it, then one card per goal with its value, change and type.

UI design starts with the decision each screen supports. ANODA turns that flow into clear hierarchy your engineers can build.

For the user
An investor sees what they own, how it moved and how to add cash before scrolling at all.
Mobile app design
Blackstar portfolio home: Hello, Kelly, the portfolio balance of ₵40,000.00 with Add Cash and quick actions, the Portfolio, Transactions and Analytics views, and goal cards for Retirement Planning and Buy a House or Land
After: The portfolio home

  1. The balance and what to do with it

    The total, today’s change, Add Cash and the quick actions, on one dark card.

  2. Three views of the same money

    Portfolio, Transactions and Analytics, without leaving home.

  3. Goals, not accounts

    One card per goal with its value, change and investing type.

How the work progressed

Research and structure first, then the app in both modes, then the website the client came back for.

  1. Research

    What other investment apps and sites do well, and what Blackstar should test

    Artifact Competitor research and product hypotheses

    Blackstar research board: product hypotheses, each with the experiment that would test it and the evidence that would prove it

  2. Structure

    Where everything lives, and how Active and Auto Invest branch from one start

    Artifact Information architecture, user flows, wireflows and wireframes

  3. Direction

    A look that feels like a regulated product and still welcomes a beginner

    Artifact Moodboards and visual styles on the same screens

    Two Blackstar visual styles on the same three screens: the onboarding, the markets list and the account home

  4. Light and dark UI

    Every flow, from sign-up to withdrawals, in both modes

    Artifact The high-fidelity mobile UI in light and dark

  5. System and motion

    One set of parts for every financial state, and how they move

    Artifact The design system, UI kit, icons, illustrations and Lottie specifications

  6. Website

    How to explain the app to someone who has not installed it

    Artifact The responsive website, its design system and the brand book extension

  7. Handoff

    What the developers needed to build both without guessing

    Artifact Screen maps, app and web prototypes, exports and Zeplin handoff

Choose, fund, invest

Found
The old app made people search for basic actions, and two ways of investing could easily become two separate apps.
Decided
One start for both models, one funding path behind them, and a tab bar of five places a customer returns to.

  1. Active Invest

    A goal, how to invest, a first deposit and a linked mobile money account.

    Open the full map
    Screen-map fragment of Active Invest: the goal, Choose How to Invest, the initial deposit, the payment method, linking mobile money, the verification code and the verified account

  2. Auto Invest

    Five profile questions, a review, a recommended portfolio and an investment plan.

    Open the full map
    Screen-map fragment of Auto Invest: investment horizon, risk tolerance, return expectations, objective and emergency savings, the review, the recommended portfolio and setting up the plan

  3. Wallet

    Cash in two currencies, linked accounts, transfers between goals and withdrawals.

    Open the full map
    Screen-map fragment of the wallet: cash by goal, transactions, an internal transfer between goals, withdrawing cash and the withdrawal options
The Blackstar tab bar: Home selected, then Markets, Invest, Wallet and Hub

Five places, one for each job

Home for the portfolio, Markets to look, Invest to act, Wallet for money, Hub for help.

  • Information architecture
  • User flows and wireflows
  • Screen maps

What a Blackstar investor does

In the order they meet it.

A first account that feels safe

Found
Someone about to deposit real money for the first time meets identity questions before they have seen any value.
Decided

Onboarding says what the app does first; identity and financial details come in short steps, with a way to save and come back.

Our financial onboarding guide connects the value promise, checks, saved progress and funding so an eligible investor can finish after an interruption.

Blackstar onboarding: Smarter Insights, Less Noise, over a portfolio balance card with Add Cash, and Create Account
Professional & Financial Info: employment, employer, industry, income and three selected sources of funds, with Continue and Save and Exit

Two ways to invest, one choice

Found
Choosing your own investments and letting a portfolio manager choose are different promises, and a beginner can’t tell them apart by name.
Decided
The choice is a single sheet: each model with its badge, one line of what it means and who stays in control.
Choose How to Invest: for the goal Buy a Car, Active Investing to invest on my own or Auto Investing to invest automatically, and Start Investing

Active Invest: a goal, then a first deposit

Found
An empty account gives a new investor nothing to aim at.
Decided
Every portfolio starts from a goal, and the first deposit names the goal, the model and the minimum.
Create Your New Portfolio: Buy a Car, Buy a House or Land, Education & Learning, Emergency Fund, Retirement Planning or Other
Initial Deposit: an amount of ₵500 or more for Buy a Car with Active Investing, quick amounts and Add Cash

Auto Invest: a profile, then a portfolio

Found
A recommended portfolio means little unless the investor sees what it was built from and what is in it.
Decided
Short risk-profile questions one per screen, then the recommendation with its expected return, volatility and every holding by asset class.
Risk Tolerance: if your investment drops by 20% over a short period, what would you do, with Sell some, keep some selected
Recommended Portfolio, Allocation: estimated annual return and volatility, a chart of equity, commodity and money market, and the ETFs and fund in each

Markets and a security

Found
Local and global instruments, gainers and losers, and a company’s details all compete for a phone screen.
Decided
Markets by category with gainers and losers apart; a security’s page keeps its price, chart and facts above a single Buy.
Markets, Stocks: gainers such as TSLA, AAPL and SPOT and losers such as AMZN and MSFT, each with a sparkline, price and change
Tesla Inc.: the price and change, a one-month chart with a pressed point, type, sector and 52-week range, and Buy

Money in and out

Found
Funding has to work the way customers in Ghana pay, mobile money included, and a deposit that hangs leaves them guessing.
Decided
Mobile money providers sit beside bank transfer, the wallet shows cash by goal, and withdrawals reuse the same verified accounts.
Link Mobile Money: a service provider list with MTN Mobile Money, Telecel Ghana, AirtelTigo and Glo Ghana, and Verify Account
Wallet: total cash in GHS with Add Cash, and the Account view with Retirement Planning, Buy a House or Land and Education & Learning, one open with its actions
Withdrawal Options: ₵500 to one of two verified mobile money numbers or by bank transfer

Analytics a portfolio owner can read

Found
Performance, allocation and exposure are easy to show and hard to read on a phone.
Decided
One portfolio’s analytics in folding sections: its return against a benchmark, then what it holds.
Auto Invest analytics for Retirement Planning: net assets, a one-month performance chart against a benchmark with a pressed point, and the allocation chart

One system for every financial state

Found
A demo balance hides the screens real customers see: no money yet, data still loading, a payment the bank hasn’t confirmed.
Decided

The same parts cover the empty, loading, waiting and filled states, in light and dark, and new customers get one short sheet per area.

Our accessibility guide covers readable controls, labels and handoff requirements alongside the product’s complete states.

A first-visit sheet for each area

Each area explains itself once, with one action.

  • Secure Your Growth: a sheet over the Invest screen explaining treasury bills and fixed-income bids, with Done
    Invest: Treasury bills and fixed income, explained.
  • Power Your Investments: a sheet over an empty wallet explaining it as the hub for funds, with Add Cash
    Wallet: What the wallet is for, and Add Cash.

Before the data, and when there is none

Loading, an empty result and a payment still processing.

  • Markets loading: skeleton rows under the filter tabs
    Loading
  • Markets with no data found for the filters, and Update Filters
    No results
  • Still Processing: the bank has not confirmed the payment yet, with Keep Waiting and Check Later
    Still processing

The same portfolio, light and dark

Net assets, cash, holdings and the actions read the same in both modes.

Retirement Planning portfolio in light mode: net assets, My Investments with cash, Add Cash, Invest and REPO, holdings, transactable and REPO
The same Retirement Planning portfolio in dark mode

The client came back for the website

Found
Someone who hasn’t installed the app has to understand Active Invest, Auto Invest and the depth behind them from a web page.
Decided

A responsive site built from the app’s own logic and brand: each feature explained in plain words, at every breakpoint. We designed and handed it off; building it was not part of our work.

Our responsive design guide explains how the app’s story, navigation and calls to action stay clear across breakpoints.

Blackstar website, About page on desktop: the navigation, Shaping a Smarter Future for Investing with Start Investing and Our mission, then three glass cards over a sunset photo: Knowledge That Drives Better Decisions, Always Looking Forward with Confidence, Building Trust Through Clarity
About page, What drives everything we build: a Brand Mission card over a photo of a runner, and the Brand Vision, Building a New Kind of Investment Firm, with everyday investors, access to every market and investing for everyone, and Get the App
Home page, Designed Around Real People: cards for young professionals, families, freelancers and students, with Get the App beside a grid of partner logos including MTN, SAS, GCB and Google
Home page, Learn How to Use the App: guide categories from Getting Started to Account Settings, three steps to create an account, verify your identity and start investing, and the app’s sign-up screen on a phone
Contact page, Send Us a Message: the office email, phone, address in Accra and work hours above a map, beside a form for name, email, phone, subject and message with a consent checkbox and Send Message
The home page’s closing band: Put professional-grade investing in your pocket, with App Store and Google Play buttons beside the Blackstar star in amber light
Blackstar’s 404 page on a phone: the menu and Get the App, a large 404 behind a glass card with Page Not Found and Back to Home, then the dark footer with the licence note, the page links and social icons

  • The pages

    Home, App Guide, Features, Active Invest, Auto Invest, About, Contact, legal, privacy and error pages

  • Website design system

    The components the pages are built from, at every breakpoint

  • Web prototype and motion

    A clickable prototype and the website’s animation package

  • Brand book extension

    The brand rules for the website, with the existing logo vectorised and adapted

Where the product ended up

A mobile investment app redesigned end to end, from onboarding and identity checks to Active and Auto Invest, markets, the wallet and analytics, in light and dark on one design system. Then a responsive website and brand book from the same logic, handed to the developers with screen maps, prototypes, motion specifications and Zeplin.

ways to invest, Active and Auto, in one app
2
modes, light and dark, across the mobile app
2

Would a first-time investor trust your app with a deposit?

A demo balance always looks good. Then a real customer opens an empty portfolio, a payment that hasn’t cleared and a security with a long name. Send us your app; we’ll show where a new investor stalls before the first deposit.

Discuss your product Explore more case studies

What we brought to Blackstar

The product

The work

Related reading

Read more about the design decisions

All articles