The home screen
Page 1 of 5. About eight minutes.
The one idea
The home screen is assembled, not designed. Nobody lays it out. It is built fresh on the participant's phone every time they open the app, out of whatever has been given to that particular person, arranged by rules you control.
Once that lands, everything else on this site is a detail.
One person, one morning
Meet Ana. She is six days into a wellbeing course. She opens the app on a Tuesday morning and sees this.
Four things are on her screen. Each one got there a different way, and each one has a different owner.
"Morning check in" is there because a schedule said so. Ana's course includes a daily check-in. The course does not put it on her screen each morning. It put a standing instruction on her account once, on day one, saying "every weekday, until week six". This morning the app worked out that today is one of those days.
"Three minute breathing" is there because a rule fired. On day four Ana answered a question about sleep. Her answer sent the course down a particular branch, and that branch adds a breathing practice. Nobody chose this for Ana by hand. A condition looked at her answer and acted.
"Sleep and your day" is there because it is day six. Reading material in the course is timed. This one is set for day six and it appeared this morning.
"Walk for twenty minutes" is there because her coach put it there, yesterday, in two clicks.
Four items, four different origins, one list. Ana cannot tell them apart, and she should not need to.
What decides how it looks
Now look at the controls beside the picture above.
Ana's four items are sitting in a surface, which is one named section of the home screen. It is what has the heading "Today". It decides the shape of the cards, whether pictures sit beside the text or above it, whether the list runs down the screen or sideways, and where the whole surface sits relative to the other surfaces.
The surface decides none of the content. Not one of Ana's four items is named anywhere in its settings.
Move maxRows from 0 to 1 in the picture. The same four items become a sideways
shelf, which is a row of cards you scroll across. Move imagePosition to top. The
same four items become picture cards. Nothing about Ana's course changed. Only the
frame did. Every control in that panel is set out on
Anatomy of a surface.
What a person gets and how it looks are decided in two different places. One set of rules decides what they get. A separate set decides how it looks. You almost never change both at once, so keep them apart and one piece of content will serve every look you want to give it.
What you can now do
You can look at any participant's home screen and ask the right question about anything on it.
If you want to change what is there, that is the course, the schedule, or the coach. If you want to change how it looks, that is the surface.
That question is worth asking out loud, because the answer sends you to a completely different part of this site.
Next
The five building blocks. You now know that content and appearance are separate. The next page gives you the five words for the pieces, and shows how they fit inside each other. It is the shortest page here and the one most worth reading twice.