Filis

01Context

Filis is not a banking app. It is a friendly guide that shows students where their money goes, warns them before they overspend, and celebrates discipline instead of shaming mistakes. I designed it alone for the UI/UX Contest V6 at ASU’s Faculty of IT, following the design-thinking process from research to an accessibility-checked prototype.

02Empathize: 56 students

A Google Forms survey answered by 56 university students across majors, plus interviews in Arabic about overspending, guilt and why they quit budgeting apps. I checked my numbers against outside research to make sure they weren’t an outlier.

Across both sources the pattern was consistent: students don’t lack discipline, they lack a tool that explains their money without shaming them for being students.

03Define: themes and personas

Every data point and quote was clustered into eight themes, from invisible spending and social pressure to guilt, avoidance and the wish for automation. Those themes became four personas, eight problem statements, eight user stories and one goal statement.

The insight that changed everything: I expected students to want strict budgets. They actually wanted protection without judgment.

04Ideate: flows and structure

I mapped the two jobs students do most in FigJam before drawing screens: logging an expense and Emergency Mode. Manual entry was the top reason people quit, so logging takes at most five taps from Home, and Filis offers Emergency Mode on its own when the forecast turns critical. The structure is flat: every feature is at most two taps from Home.

05Design decisions

• One number first

  Home leads with “safe to spend today”, not a raw balance that doesn’t say what is safe.

• Log by voice

  “I just spent 2 JD on a Turkish coffee” becomes a transaction. Receipt scan and manual entry are there too.

• Same layout in a crisis

  Emergency Mode keeps the same structure; only the colour and content change, so nothing needs relearning.

• Social, not lonely

  Social Helper checks if an outing fits the budget, suggests cheaper plans and splits bills.

06Design system

Filis is built on Figma variables (design tokens): 201 of them for colour, type, spacing, radius and shadows, so the same values drive every screen, the widget and the colour-blind previews.

07Accessibility check

Every text and background pair was checked against WCAG 2.1: the success, warning and error colours used for text all pass at about 7:1. Under colour-blind simulation (the file has protanopia, deuteranopia and tritanopia previews of Home), success and error looked almost the same, so status never relies on colour alone: icons and shapes carry the meaning too.

08Prototype: from first launch to Emergency Mode

This is the full Figma prototype, live. Click through it like the real app: onboarding, the home screen, adding an expense and the rest of the flow.

Load the live prototype

Runs in Figma: click the hotspots like the real product. Loads about 2–4 MB. Open full screen in Figma (new tab)

Prefer a quick look? Below are the key screens, one at a time, with notes.

Tap through the core flow from the Figma prototype: a four-step onboarding that asks only for the essentials, logging an expense by voice, and the moment Filis switches to Emergency Mode.

09Learning, goals and control

The supporting screens keep the same calm, judgment-free tone: bite-sized lessons in plain language, and full control over account and privacy.

10Reflection

The biggest UX win wasn’t a feature, it was tone: casual, judgment-free copy and automation wherever manual entry would have caused drop-off. To be honest about the gaps: I ran an accessibility pass but not moderated usability sessions, so task success is still unknown.

• Next: usability testing of add expense, Emergency Mode, goals and bill splitting with real students.