Last week was all about defining the app we were going to build. In our case, we know it is, glibly, a progress tracker. We will emphasize photos as the progress indicator, since that most closely fits with what people actually want when they say they lose weight: a better looking body.
The design phase, to me, is a more drawn out version of what we did last week. It’s more explicit, more detailed. We finish talking about what the app will do. We start talking about what each screen in the app will do. By the end of the phase, we should have a clear idea what each screen does and a good idea of how the app will work.
This is the second most frustrating phase: There are still more questions than answers. We have to make explicit what, up to now, are just vague notions about how this app will work. There are so many what ifs, you really start doubting if you’re any good at anything by the time you’re finished. But that’s how you know you’re doing it right.
As an example, I started sketching screens in a notebook this weekend. I started with the home screen. I drew my first one and then I was stuck with a ton of questions.
I figured tabs was the main navigation model for this app. Tabs are good when you have features related but independent from one another, where you naturally want to switch between them at any time.
Conversely, on mobile, using a paged, hierarchical approach is better when the features (or data) are related. In email clients, you tap an email to open a more detailed view from a list of emails.
Drawing tabs (home, results, add) on a piece of paper led me to one huge doubt—this is not a very good start—and several questions:
- what’s the user most interested in when they open this app?
- home and results are nouns, add is a verb. Can’t this be better?
- if I put a summary here of results, is the results tab going to be tapped?
- do I need a results tab if I have a tappable summary on the home tab?
- same with adding a measurement, do I need a tab if it’s clear where to do that on the home page?
- how often will people be in the app other than measuring and getting a summary?
- why am I even doing this?
So, instead of drawing I went back to writing down what each screen will do, rather than look like. We’ll come back to drawings.
So, we have three main screens for the app: summary (home), enter progress, and list of progress. List of progress implies a fourth screen, progress entry. Squint and that’s the app. I’ve defined enough there to make a quick prototype.
I could switch to code right now; a younger me would have. While a big believer in getting to a working prototype as fast as possible, I’ve found pushing a little longer with notebook sketches helps clarify things more. It’s much cheaper in terms of effort and there’s no sunk cost fallacy to deal with. You get more of the app out of your head. That should be the key goal of the design phase for an app.
For example, when I say progress, what do I mean? It’s at least one photo, but what else? Photos from front, rear and side? Should they all be mandatory or just the front? I’m convinced weight and waist are good measurements to take, but not necessarily emphasize on screen. Waist is good for men (I’m a man); but what about women? Aren’t hips a better measurement for women? OK, hips and waist then. Well, what if you want to track your chest measurement to make sure it stays the same, which indicates you’re losing fat and not muscle? Is that the same for women? What if this person has inches to lose everywhere?
What if I made that part configurable? I’d be able to scale the app to a broader range, beginner to advanced. But, get that wrong, and the app is a chore; data entry is why every app idea I have dies in my brain. But, OK, I can probably do a good job with that (after all, I am an amazing developer-slash-genius, right?). Now we have more screens. I’ll let that stew in my mind for a while.
Told ya: frustrating; more questions than answers. Answer a question only to get more questions. there will be more questions still. We must press on.
Next time: the Home screen.