M
Prototype · ready for the next test round

Exam, Kristiania University College · Team of 4 · Lead designer · Fall 2024

Eir. Warm before it could be useful.

A companion app for young people struggling with their mental health, for the space between sessions, not instead of them. Our test users overruled us time and again, and the design got better every time. Warmth was treated as a functional requirement, not decoration.

The Eir login screen with BankID
01

In with BankID

The only way in. The users demanded it.

The journal flow in Eir
02

Log your day

One of five faces, and a short entry if you want.

The Eir overview as a path through the week
03

See your patterns

The overview as a path through the week, not a wall of graphs.

01The problem

The space between sessions

Mental health issues are on the rise, especially among young people, and standard services aren’t keeping up. The waitlists are long, and many who are struggling can’t put into words what’s wrong when they finally sit down with a professional.

We wanted to design for the space between sessions. Not a substitute for treatment, but a companion: log how you’re feeling in seconds, see your own patterns over time, and give the psychologist the context you couldn’t articulate yourself, if you want to. We named it Eir, after the Norse goddess of protection, mercy and healing.

The concept · the entire core loop is one tap

Good. Choose one of five faces for the day, and write a short entry if you want. Everything else builds on that.

A calendar that colors itself by your mood
Overview: mood alongside activity and heart rate
AI chat for the moments between human contact
BankID at the door, because the journal is that personal

02My role

Lead designer, from wireframe to finished prototype

I was the lead designer on a team of four. I was responsible for the design direction and for taking the app from wireframe to a finished prototype in Figma. Concept development and testing we did together as a group: 12 tasks, 8 follow-up questions, mostly in people’s homes.

Team
4students, me as lead designer
Tools
FigmaMiro
8moderated sessions, in people’s homes
12test tasks per session
7 of 8would use the app, after we fixed what they pointed out

03The process

And what the users overruled us on

We tested the wireframe on 8 people in October (10 were planned; illness took two). The most important finding was also the most painful: the flow for a new journal entry, the very heart of the app, was the feature that tested worst. If logging feels difficult, the app is worthless, so the entire flow was rebuilt into one clear path.

  1. 01

    Research

    Waitlists, young people, the space between sessions

  2. 02

    Concept

    Core loop: one tap

  3. 03

    Wireframe

    Every flow in Figma

  4. 04

    Test

    8 sessions, 12 tasks

  5. 05

    Redesign

    Prototype + design system

Wireframe test

8 participants, in their own homes

The flow for new journal entries was confusing; three competing entry points5 of 8Rebuilt into a single, clear path
Would use the app if the issues were fixed7 of 8We fixed them
BankID made the app feel secure enough for sensitive notes6 of 8Kept front and center
Navigation was intuitive6 of 8Kept
The faces were understood, but placed incorrectly5 of 8Moved into the journal flow
Profile page desired; control over one’s own data3 of 8Designed and added
Only BankID should be offered as a login option2 of 8All other login options removed

The users changed more than that

Only BankID. Two testers pointed out that any other login smelled of poor security in such a sensitive app. They were right.
A profile page we never planned. With a streak and weekly stats, because several people independently wanted control over their own data.
“Statistics” became “overview.” The word felt cold for something so private. We went further: the overview became a scrollable path through the week, day by day.
What we deliberately didn’t change: The AI chat. The skepticism came without a concrete design problem, so we gave it an honest icon and settings, and postponed the verdict to the next round.

From wireframe to finished screen

The wireframe had three boxes that all seemed to start an entry. 5 of 8 struggled with it. Now: one clear path, the faces moved into the journal flow.

WireframeWireframe: the Eir home screen
Finalthe Eir home screen

04Warmth as a requirement

The contrast failure was the best thing that happened to the design

Halfway through, our first color palette failed the contrast checks. Fixing the accessibility issues forced a complete rethink, and the app ended up looking better for it: a calm blue with warm yellow and orange, Montserrat for readability, rounded shapes and soft shadows throughout, and a small sun made of gradients on the profile page. The five faces communicate through both color and expression, so they work for color-blind users too.

10.07:1Primary text on blueAAA
5.75:1Secondary textAA

None of this is decoration. The whole bet of the app is that someone having a bad day will open it anyway. Every soft corner does a functional job.

The Eir calendar, colored by mood
The calendar colors itself by your mood, and is tappable.
The AI chat in Eir
The AI chat: honest that it is a bot, with a way on to healthcare professionals.
The Eir home screen
The home screen after the rebuild: one way in to a new entry.

Choices I stand by

Letting 8 users override 4 designers.

Only BankID, the profile page, and the name change. Every time we lost a discussion against the test data, the product won.

Treating tone as a function.

The name change from “statistics” and the overview as a journey came directly from how the target audience talked about their own mental health.

Not redesigning based on doubt.

The skepticism toward the AI chat arose without any concrete design problem. We isolated the variable and postponed the decision rather than overhauling everything.

Letting accessibility guide the aesthetics.

The contrast issue was the best thing that happened to the visual design.

05The result

Ready for the next test round

A finished interactive prototype and a design system, ready for the next round of testing. 7 of 8 testers said they would use the app if we fixed what they had pointed out, and we fixed it.

The Eir logo

Eir, after the Norse goddess of protection, mercy and healing.

What we would have done differently

01Test the redesign on a fresh group

The redesigned prototype should have met new testers before any development, not just the eight who already knew the wireframe.

02Richer dummy content earlier

Several testers found it easier to judge the app when it looked and felt real. Gray boxes get gray answers.

Want to hear more about the work on Eir?

Next projectInnafor →