Lepsychon

A design system spanning 30 screens per platform, with token and component specs precise enough that the build follows the file rather than reinterpreting it: exact frame sizes, a 4pt spacing grid, a fixed type scale with no half-pixel sizes, and per-component states for buttons, fields, quiz options, list rows and feedback sheets. The match-the-pairs board was deleted outright, the onboarding screen's lexicon figure was corrected, and the review flow was rebuilt around single-term grading. The most valuable outcome was catching the match-the-pairs problem in design rather than after the scheduler had been built against it.

People are curious about why they think, feel and behave the way they do, but the trustworthy material is locked in dense textbooks, scattered across blog posts of uneven quality, or sitting behind a course paywall. There was no way to learn psychology a little at a time, on a phone, from a source you could check.

1. 1

   Defined the audience and the north star

   Curious self-improvement readers aged 18–40, and students in intro psychology, nursing, social work and education. One north-star metric: weekly active learners completing at least one lesson.

2. 2

   Drew the boundaries before the screens

   Explicit non-goals: not therapy, no diagnosis, no crisis features; not a social network; not a certification platform. Naming what the product refuses to be removed most of the ambiguity from the feature set.

3. 3

   Reasoned about the learner before drawing anything

   Every screen started as a question about attention rather than layout: this person is on a phone, probably standing, with a few minutes and most of their working memory already spent elsewhere. That set the ceiling on what a screen may carry: one job, one primary action, and nothing the learner has to hold in their head while they go and do something else. The lesson loop is the product, so everything else was designed to cost less attention than it does.

4. 4

   Built the screen inventory

   Thirty screens per platform across five groups (onboarding and auth, learn and lesson, lexicon and review, profile and settings, subscription and about), so the IA was settled before any visual design.

5. 5

   Prototyped all thirty screens in grey

   The first full pass was greyscale boxes at real frame sizes: no type styles, no icons, no brand, no green. A hierarchy that only works because the correct answer is green is not a hierarchy, and in grey the screens carrying too much were obvious at a glance. Three were split and two were deleted at that stage, none of which had cost more than an hour. Colour went on last and only where it had a job, which is why no state in the app is carried by colour alone.

6. 6

   Grouped by Gestalt rather than by heading

   Proximity and common region do the explaining: a lesson card, its progress and its action share one region and sit closer to each other than to anything else, so no row needs a label to say what it belongs to. Where I found myself writing such a label, the grouping was wrong and the layout got fixed instead. Controls that behave the same way are drawn the same way, with one radius, one shadow step and one colour logic across buttons, fields, quiz options and list rows, because a control that looks different is claiming to be different.

7. 7

   Made the design file the source of truth

   The design system lives in one file, with a written token reference covering colour, type, shape, spacing and per-component specs. Where code and design disagree, design wins and the app follows.

8. 8

   Designed both platforms natively, not once and scaled

   iOS and Android get their own frames, chrome, and vertical rhythm: arrow-back versus chevron, 32px versus 50px status bars, tighter Android content gaps. The same product, not the same pixels.

9. 9

   Audited against fixed accessibility invariants

   Every tappable target at least 44×44pt, 8px minimum between adjacent targets, 4.5:1 text contrast with a named minimum ink value, never colour-only meaning, vector icons rather than emoji, one primary action per screen.