Refreshing an App Design

Home / Refreshing an App Design

To get started, we’ll use pencil and paper and start sketching out these various app functions. Once these drawings are finalized, we’ll move over to InVision and start breathing life into them.

Sketch is the perfect tool for the job because it’s made for designing user interfaces. It’s also got some nifty built-in tools that help you setup your mobile designs and preview them on your device. More on that later.

Sketching Our App

The first thing we need is a simple flowchart so we can understand how the user makes their way through the software.

This helps us understand how the different screens of our app interact with each other. Next we’ll work on sketching out each individual screen

From here, we’re ready to fire up Sketch and start bringing our designs to life!

Onboarding

The first thing we need to do is make sure the user allows us to send push notifications to them. This is how we’ll serve up new words to them every day.

Let’s start putting these user interface design principles to work. It’s easy for onboarding to feel like work, so we want to make sure the process is as simple and light as possible.

I took a quick look at some onboarding teardowns to see how other apps handle asking the user to enable push notifications. I noticed that Foursquare does something really smart here. Sometimes users can be caught off guard when asked to enable notifications or to use their location. So Foursquare overlays the notification bubble on top of instructions which explain why they need to enable notification.

I really like the idea of giving the user extra information before they accept push notifications. This keeps inline with the common design principle of keeping the users in the loop by making sure they understand why they are giving me these permissions.

When a new user launches the app, the first thing we’ll show them is a screen which explains why we need permission to push notifications to them.

Let’s start getting our hands dirty. First thing we’ll need to do is draw up a quick sketch of this screen. Starting on pencil and paper is crucial since the medium is so forgiving. The more you can figure out in this stage before pushing real pixels around, the better.

Now we have a good base to start designing from. From here we’ll fire up Sketch, select the Artboard tool (A), and use the iPhone 6 preset in the inspector pane to the right. To add common iOS elements like the status bar, we’ll head to File >> New From Template >> iOS UI Design. This file contains all of the common iOS elements you’ll need often.

Now, let’s start designing!

When the user hits “Enable Notifications”, we’ll trigger this native permission dialog box:

Marcos Gutiérrez, Managing Director 99designs Europegave us his key points on designing for mobile apps:

“Business owners know about the importance of having a mobile presence and we’ve seen how the demand of app designers has been increasing in our site. Mobile usage has surpassed other device usage in 2015. Additionally, Google started using mobile usability as a rank, so if organic search traffic is a major source of traffic for their business, designers need to have a mobile-first mindset.

To impress a new client, it’s important that designers create a brand style guide for their clients that includes both the look and the voice that will ensure efficient and consistent branding across all media. This will lead to more efficient marketing collateral output and a more unified brand message for their clients. First step is to evaluate their assets to determine if they need a refresh based on current design trends (eg flat design, simplicity, etc). As an app designer, don’t forget that the right balance between design and functionality is key.”

Home Screen

Once a user accepts push notifications, we’ll send them directly to their home screen. This would be a great time to give them a basic walkthrough and explain some of the mechanics of the app, but we’ll save that for another day.

Honestly, if we stick to the common user interface design principles, we may not need a walkthrough at all. The app should be intuitive enough to understand without too much hand holding.

The main information we want to show on the home screen is:

  • We want an element of gamification, so we’ll show their stats nice and big at the top of the home screen.
  • Below the stats, we’ll show their current lessons, their progress, and locked lessons. We want to make sure that it’s obvious that these lessons are inaccessible. This will entice the user to unlock them every time they visit the home screen.
  • I want the app to be very visual so I’m going to try and incorporate nice photography into each page.
  • Since this is the home screen, the user should be able to go anywhere from here. To begin with, our app will offer some basic user settings, so we’ll make sure there’s a way to get to settings screen from this home screen.

Now that we know what we need to design, we’ll throw together a quick sketch so we can get an idea of how we want to lay these elements out visually without having to do too much work.

Now we’re in a great position to fire up Sketch and start designing the elements of our home screen. Most of the work has already been done, so it’s just a matter of putting each element where is belongs and adding a splash of color.

With the home screen complete, the user now has a place to track their overall progress, as well as the progress of each individual lesson, purchase new lessons and tweak their user settings. Nice!

Jerry Cao, UX Content Strategist at UXPin, spoke to us about the importance of content in mobile app design:

“Content is always important in design, but its importance increases as your screen real estate shrinks. When creating a mobile app, use real content as soon as possible. Rough content is totally fine – the goal is to design with realistic spacing constraints. If you rely on lorem ipsum too much, you might break the interface once you flow in the real content.”

View A Lesson

So, what happens when a user clicks one of these lessons? I’m glad you asked! Now we’re going to put together a lesson page where the user can view each word that’s been revealed to them.

We also need to give the user the ability to disable a lesson since they may want to pause if they have too many lessons enabled at a time.

So, here’s what we need on this screen:

  • Lesson name
  • Visual representation of the lesson (image / icon)
  • List of words that have been revealed

From here we’re going to use the same process as before. First we’ll roughly sketch out the page with pencil and paper, then we’ll produce the high-fidelity version in Sketch once we have a good idea of what it is we’re building.

We want to stick to the principles of good structure and hierarchy here, so we’ll start with the section name / progress at the top, then the words below. We also want to start incorporating the reuse principle, which states that common components should be reused in order to create consistency. On the home screen we’re using these handy little circles to indicate progress, so we’ll use those same elements to indicate progress on this screen.

Now that we’ve sketched out our lesson screen, we have everything we need to start putting some pixels together and creating a high-fidelity design:

We’re also adhering to a common iOS/OSX design pattern here. Notice how the horizontal line that separates each word is cut off just before it meets the left edge? This is a subtle cue that users have learned when interacting with the operating system. It implies that clicking this menu item will reveal a deeper menu from the right.

Subtle cues like this are hugely important and understanding them makes the designer’s job just a bit easier.

Here’s another tip, this time from Neil Turner of UX for the Massesin theirMobile UX Design Principles:

“Think about what it is your users will be trying to accomplish and focus on the key user goals that you have identified (ideally through user research). Don’t get distracted by trying to design and build features that are very unlikely to be used on a mobile anyway.”

View A Word

If you look back to our original flow chart, the deepest level a user can go in this first iteration is viewing a word. Here’s what we want to include on this screen:

  • A photo which represents the word
  • The word itself
  • The part of speech (verb, noun, etc..)
  • The pronunciation
  • The definition of the word in English
  • An audio transcription of the word
  • Links to more resources like conjugation

I want this app to be very visual, so I want to start with the image front and center, then work our way down the hierarchy in order of importance.

As always, we’ll start by putting the pencil to the paper to in order to get an initial idea of how we want to lay out all of these UI elements.

We’ve already talked about the reuse principle, and it will become more and more important as we flesh out the various screen of the app. We need to make sure the fonts are consistent with all of the other screens of our app, as well as buttons and links. Since we’re using blue as our accent color, we’ll want to use that here too.

Awesome!