Empty States

We use illustrations and instructional text to indicate an “empty” area—an area that will have content after the member takes some action. Where appropriate, we provide suggestions and actions for the member to take as a likely next step which will add content to the currently empty area.

When only part of a screen is empty, we do the same as above and adjust the sizing of the illustration and length of the copy.

When a number is loading use “—“ as a default rather than 0 so that if there is an error retrieving the number, users don’t confuse it as the real value. Examples of this include the number of followers and following on profile screens, and the numbers in the food dashboard on my day the first time it loads.

Empty State1.png