How to approach wire-framing an app from scratch

Solve a problem with Tina Chen, design lead Slack

In each entry in this “solve-a-problem” series I shadow a designer/PM/engineer and solve a problem with them. I want to make basic practical skills education transparent and free.

Today I am working on wire-framing a packing app with Tina Chen, a designer at Slack and a wonderful person, Tina Chen. In this post you will learn how to approach designing a brand new app from scratch and the questions to ask in the process. We did this in the cool Slack HQ in San Francisco.

I had asked Tina to bring her laptop but turned out it wasn’t required! Tina’s design process with a new problem is consists entirely of sketching, so for an hour we worked on a notebook. Her sketching process was fascinating. Let’s take a look!

The brief and user story: A person is planning to go on vacation. They have booked their tickets, they know what activities they’ll be doing and at this point are trying to figure out what to pack. The app will help you create a list and send reminders so you don’t forget what to take.

Tip before designing: Make sure you know the problem before you start. Most designers don’t start before the user stories.

We started this as a blank canvas and here are some ideas that emerged.

Step 1: Brainstorming and user research :

Fun exercise: Try doing this yourself, see what are the initial questions you would ask if someone gave you this brief!

  1. First question we asked is should this even be an app? The pros of having an app would be it would give you user notifications and you can get away without even creating an account.
  2. Ideas which came out: We could have items that we always need to carry which aren’t trip specific. We could also bundle items like toiletries — which you usually have packed in a bag and not separately.

User research:

At this point we will also carry out some user research in the form of a survey to get a sense of how people pack.

Tip: As a designer or a PM it’s easy to design for yourself but very important to keep in mind the users who are using it or will use it.

  1. Could do a survey on types of trips people take, current packing habits, do people do carry on’s etc?
  2. Targeting people who like traveling a lot and kind of like streamlining things.
  3. Most important is understanding whether the assumptions you are making are valid and the problem is worth solving — would users to download an app exclusively for packing?

Who does the user research — smaller companies do not have dedicated user researchers so usually designers or PMs do it themselves. For example in Slack Tina’s team is small and their focus area doesn’t have a dedicated user researcher yet.

Tina’s notebook so far:

Step 2: Understanding the features of the app

Assuming at this point the problem is a valid one .

One of the ideas Tina had was to categorize packing according to trips. Categories of trips: Cruise, formal, honeymoon, family, casual, hiking — (idea! You could also introduce selling items eventually which one doesn’t have)

The next thing we did was write down the first set of features the app will have, we are assuming there will be no need to create an account —

  1. Generate a list from the kind of trip
  2. Save parts of lists
  3. Customize or create lists
  4. Share with others via email
  5. Reminders (last minute reminders on what to take — which are packed last minute like a phone charger etc)

Step 3: Sketch the flow

Tip: Try and sketch out the flow yourself to see how you will do it!

So at this point we are assuming you downloaded the app!

Let’s assume you don’t need an account. We went with a squirrel type logo as a placeholder.

  1. Step 1 -Where are you going screen? Location : Have the user enter it, have a next button, autocomplete into places — enter city/region

2. Step 2: What are the dates

Next screen have a date picker. Have exact dates and then — maybe even make it into a sentence?

We could also have the background of the region where we are going a cover image.

3. Step 3 — Select your activities

Choose activities — some categories we defined are day wear, formal, business, hiking, evening wear (also have accessories and toiletries)

Have the ability to choose one and then see the items in it, you can also add custom items

4. Step 4: Generate a list and show what an individual category looks like

Tina could think of a number of ways to display this and sketched some options at this point. One is a list of all categories and packing items under them. Or have an expanded list.

What next after this?

At this point it’s just about all the ideas — later on she will come back and then turn a couple of them into wireframes using the Sketch app. Hand sketches help outline all the things to cover before going into the actual wireframes so nothing is missed,especially when you are thinking through flows. After making wireframes, Tina might also do one or two screens of high fidelity to get a sense of how it feels.

Her wireframes in Sketch will be usually low fidelity — grey fill or grey outline (maybe one accent color), no real text. Sometimes in her work at Slack if she knows what the components are and there are no new user interface components being introducedUI — then there is no point in wire-framing,so she skips that step.

For sharing since it’s a standard thing she will see how it’s done in other apps. Other things she does sometimes — look at Dribbble and print out similar ideas and maybe even do an audit of other list apps.

Finally do an interactive prototype using Invision or Flinto and then do user research again to validate the assumptions.

That’s it! Hope this was helpful — please like or comment if it resonated with you or any further questions you may have on the process.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.