Add App Graphics for a Good Time

How app graphics can add more fun to your app, and the graphics I created for MySudo.

Brittany Keller
Creative Learning
4 min readNov 18, 2018

--

I created app graphics for an app I’ve been working on called MySudo. The app has been described as dull and dreary due to its color scheme. It is a privacy protection app. When I joined the team I was not planning on creating app graphics or really doing any illustration at all. I thought I was going to be doing UI screen design and other UX related things. (You can check out my User Experience portfolio here.) When the team found out I could draw they asked me to create these graphics.

At first, I was happy to do it. Anything to please my team, as a newbie I wanted to impress people and leave a good impression. I drew a ton of different illustrations for empty state graphics. And everyone seemed to like them, but as time went on, I felt like I was missing out on more UX related things. I did not sign up to be an illustrator. I wanted to learn more about conducting user testing, getting familiar with screen design, and overall improve my user experience skills.

Then my mentor sent over an article about how much empty state graphics and illustrations within apps improve a users experience. And how powerful they can be when helping users at a critical point in the app, or when something goes wrong.

A good first-use empty state addresses the following:

What: an explanation of content going in that section

Where: an orientation of where the user is in the application or broader experience

When: an explanation of the timing of your product and the action or event that must occur for data to exist on this screen

After reading this article that detailed the importance of app graphics and empty states I felt better about spending my time making these illustrations.

With a new vigor and excitement for these illustrations I set out to create some fun graphics that we could use in empty states. I used the suggestions that I learned from this article to create empty states that would actually help the user and guide them in their time of need. These are the rules I kept in mind as I worked on these graphics:

  1. Motivate. Incorporate motivational language and design that’s appropriate for your target audience, such as: “Get started now!” or “Let’s do this.”
  2. Persuade. Value propositions aren’t just for landing pages. Remind the user of the benefit they will receive when they interact with your product.
  3. Direct. Recommend and show them the single best way to get started. Provide a CTA button or point to the desired action with an arrow. This is not the best time to give users options. Also, make it as easy as possible. If getting started requires that the user create content, give them some initial content they can borrow.

In addition to these rules I also used what I consider the GOLDEN RULE; when you look at the graphic you should be able to understand what is going on without reading. If you can’t understand what is trying to be said through the graphic alone, it’s not working.

I am still working on creating more app graphics for different reasons. The ones shown above are for the different plans we offer. (They are taken out of context as to not reveal any information that hasn’t already been released.) I also am working towards creating an illustration library for the company to use. I hope to continue interweaving illustration and UX to create app graphics that delight users at critical points in the app.

Side note: all of these illustrations were drawn by me. If you would like to see more of my illustration skills and artwork check out this article!

--

--

Brittany Keller
Creative Learning

UX/UI Designer @ Anonyome Labs. Photography dabbler. Student at UVU. Sarcastic charmer. Art lover. Handy with a laptop.