Building a Meeting App, Day 2: Sketches, Sketches, and More Sketches

A few of the sketches we made. Click here to enlarge!

This is day 2 of the Building a Meeting App series, in which we create a functional meeting app from scratch in six days. We’ll be documenting every step of the process and will launch the final product on day 6 (Wednesday, September 6), ready for you to get your hands on.

Enough with the thoughts and abstractions — let’s get something concrete on paper. This morning, we met up at Hidden Café here in Barcelona for an espresso or two (and a fun place to work). Yesterday, we decided on the feature set we want the first version of the app to have. Today, it’s time to start sketching out the structure of the app, so that we’ll have the basic layout to base the design on that will be creating tomorrow.

First sketches: 3 sections

The first sketch, in the top left corner (unnumbered), divided the app into three sections, as we discussed yesterday. The user starts by adding the e-mail addresses of the participants of the meeting, and then defines the topics of the meeting. Lastly, (s)he specifies a time limit for the meeting so that we can show a warning when the meeting is running late.

Then, for section two, the user writes the meeting’s minutes under each topic and has the ability to tag people. If you’re tagged in one, it will be highlighted in your summary so that you know what to do without having to go through all of the minutes again. On the top of the screen, a bar is representing the time left (e.g. if you’re 15 minutes into your 30-minute meeting, the bar will be filled for 50%). Finally, section three is just a confirmation that a personalized summary is sent to every user.

A better flow: 6 simple steps

“Instead of combing three things on that first page, let’s give each of them its own step to make it simpler to use. Also, let’s use hand icons to indicate at what step you’re at. One finger, two fingers, three fingers, and a perfect sign (👌) when the meeting starts.” This is why I work with Maarten. I got the hang of it: “We can even show a stop sign (✋) when the meeting is over time!” — “What about a ‘you rock’-sign (🤘) when you finished the meeting!” We immediately started sketching it out. The numbers below relate to the numbers in the picture above, to show you our thoughts behind each one.

1. This is where you enter. Remember: there’s no need to log in! Open the app, and you immediately see step 1. Here, you enter the email addresses of each participant, including your own. At the top left, the hand sign indicates what step you’re at. There’s a bit of room underneath to provide instructions for each step.
2. “What will be discussed?” Here, you enter the topics you will talk about during the meeting, so that you can add meeting notes for each topic later.
3. Step 3 is where you enter a time limit in minutes. If you were to enter 30 here, we will display a warning when the meeting is running over 30 minutes.
4. After the 3 preparation steps, the meeting starts. Here, you get to see only one topic at a time to maintain focus. Add meeting minutes under each topic, and tag people by clicking the dot in front of each note. Skip to the next topic if you’re done by clicking the right arrow. Also note the time indicator in the top left, that indicates how many minutes you have remaining.
5. When the time is up, the perfect hand gesture changes to a stop sign. Finish the meeting by clicking the “Finish” button in the top right corner.
6. Done? The hand changes to a sign of the horns, and you’ll get a confirmation that the summary has been sent to all participants. That’s it! And if you’re really in back-to-back meetings, you can click the repeat icon to start from the beginning again and organize another meeting.

Next up: design

First, we’re going to catch up on sleep and let today’s new ideas sink in for a bit. Tomorrow, we’ll be using these sketches to create the design of the app. This is where we open up the laptops and start thinking about colors, fonts and copywriting. See you tomorrow!

Would you like to receive a short update in your inbox every Friday, with this week’s articles from Jeroenrs.com and other great weekend reads on product design? Great! Subscribe here, and I’ll send you the very next one.