Arman Muhamad
← All work

Case study · Product Design

belajar investasi

An investment-education app and responsive website for working adults who are curious about investing but don't know how to start.

Four app screens: home with stock and gold prices, recommended stocks, the investment blacklist and the education hub
Role
Solo UX designer, concept to delivery
Timeline
March – April 2022
Platform
Mobile app; responsive website for desktop and tablet
Methods
Interviews, paper and digital wireframes, lo- and hi-fi prototypes, usability study, accessibility, IA
Outcome
Participants called it useful, especially the online classes, virtual investing and stock and gold data.

Problem

People with their own income are interested in investing, but don't really understand how to start.

Goal

An app that teaches investing and builds familiarity before people put money in.

01

Understanding the user

I interviewed working adults in two groups, 25–34 (early working age) and 35–44 (mid working age), following Bappenas’s age bands. They were interested in investing but either weren’t ready, or had already tried it because it was trending without really understanding it. Both groups wanted an app and a website that would teach them to do it properly.

Persona card for Rami, a 25-year-old public servant in Jakarta, with his goals and frustrations

Persona · Rami

His family depends on his income. He wants to learn long-term investing in stocks and gold through a mobile app, then put money into trusted stocks and gold once he’s ready.

Persona card for Fikri, a 26-year-old web developer in Bogor, with his goals and frustrations

Persona · Fikri

Married and working. He needs a website that explains the basics and the industry jargon, because reading charts across several apps is hard.

Ideation sketches: virtual stock trading, gold investing, charts and a class list
Quick ideation sketches on ways to meet those needs.

02

Starting the design

Every screen started on paper, so that whatever carried into the digital wireframes answered a pain point. Mobile and web were sketched separately.

Paper wireframe of the mobile home screen with news, stock and gold updates, and recommendations
Paper wireframe of virtual gold investing and a stock detail chart on mobile
Paper wireframe of the web home page, part 1: stock moves, gold prices, news and education
Paper wireframe of the web home page, part 2: education content and footer
Paper wireframe of recommended stocks and the blacklist on the web
Paper wireframe of the education page and the investment class list on the web
Paper wireframes: mobile (first two), web (last four).
Annotated mobile wireframe of the home screen: news, education content, stock and gold updates, bottom navigation
Digital wireframes. The home screen puts the important information first and keeps every feature within reach.
Low-fidelity prototype flow linking home, data, classes and virtual investing screens
Low-fidelity prototype, linked for the usability study. [FIGMA LINK]

03

Usability study

Type
Moderated, in person
Location
Indonesia
Participants
3
Length
20–30 minutes
  1. VirtualParticipants couldn’t tell what the Virtual menu was for.
  2. KelasParticipants didn’t fully understand how the Kelas menu worked.

04

Refining the design

Virtual folded into Kelas

The Virtual menu moved into Kelas, split into a stock-exchange section and a buy-and-sell gold section.

Before and after: the Virtual menu replaced by an Edukasi hub with classes, virtual gold, virtual stocks and a glossary

An introduction to Kelas Investasi

Added an introductory prompt so first-time users know what the classes are before they start.

Before and after: the class list gains real courses and an introductory prompt for Kelas Investasi
Final screens: Kelas Investasi course list and detail, and virtual gold buying with a price chart
Final screens: investment classes and virtual gold investing.
High-fidelity prototype flow across home, data, education, classes and virtual gold screens

High-fidelity prototype

Follows the low-fi flow with the study’s changes. Virtual stock investing and the glossary were held back until more secondary research is done.

[FIGMA LINK: Open the prototype in Figma ↗]

05

Responsive design and design system

A sitemap set the structure for every screen across devices. The desktop and tablet sites follow the same flow as the app.

Sitemap: homepage with Data and Edukasi branches and their sub-pages
High-fidelity website prototype flows for desktop and tablet
Responsive website home page on desktop and tablet
Responsive website, desktop and tablet.

Typography, logo and colour sheets, plus a sticker sheet of the components that make up the system.

Type scale in Plus Jakarta Sans: title, H1, H2, body and caption with sizes and colours
belajar investasi leaf logo in primary green and in grayscale
Colour palette: red, green, gold, primary green, darkest, primary dark and light dark

06

Takeaways

“It helps to educate (ordinary) people in getting to know investment.”

Usability study participant

Impact

Participants found the app useful, especially Kelas Investasi (online learning), Investasi Virtual (virtual investing) and Data (stocks, gold and a blacklist).

What I learned

A broad problem became manageable by taking it one design step at a time, each tied to a specific user need.

Next steps

  • Usability-test the high-fidelity prototype.
  • Secondary research for a better virtual stock-exchange environment.
  • Finish the glossary with proper sources.