Even the simplest UX design project has countless interaction points for the user that need to be accounted for, starting before the user has ever even touched the product itself.

When people think about a UX design project, they tend to be laser focused on the app or the product itself. Makes sense, right? The app is the hero. The app itself is the project. Every UI designer, UX designer or product owner has heard this line countless times throughout their careers from stakeholders: “It’s just a simple app, why is the project so complex and time consuming?

UX design professionals who have been in the field for a while know this is an easy question to answer. But people who are just starting out their adventure in UX design may be blindsided by it. Something important to keep in mind is that not knowing how to answer this question often hurts the client more than it hurts the designer.

When you think of any digital product, whether it’s an online web app, a mobile app, etc., it’s important to always think of it from the user’s perspective. Think of the full user journey. The app is the destination, but not the journey itself. How does the user hear about the app? Once they’ve heard about it, how do they find it for themselves? Do they have to download it, or just sign up for it on a website? If they decide they’d like to sign up or download it, what are their first impressions once they take that first step? If we haven’t lost them yet, and they still are committed to giving the app a try, will they even know how to use it?

Even if the app itself is only a handful of screens with one simple use case, and doesn’t seem like it’s a big project, there are so many factors to take into account. Here’s just a handful of the interaction points that occur outside of the app’s primary use cases, all of which are critical to the product’s success and should be accounted for in any UX design project:

1. Landing Pages

How do people find the app? And how do you convince them they want or need the app? A landing page is often how users discover a product, whether they followed a link there, clicked on an ad, or searched for it on Google. A good practice is to optimize landing pages for organic search keywords that describe the problem the app solves. This could (excuse me…should) be supported with a Google Adwords or PPC (pay per click) advertising campaign, to draw even more traffic to the landing page.

A landing page is different from a website. While a website is the official home of the product online, a landing page is one single, simple page that gives the 30-second elevator pitch, and everything a user needs to know to make them want to get started. Think of it as a flyer you’d hand out. It needs to be powerful enough to grab attention, interesting enough to hold attention, and informative enough to convert that attention into action.

That said, a landing page should be optimized for conversion. It needs to be punchy, consumable, to the point, and most importantly of all, it needs to have a very clear and concise call to action (download the app, sign up for free, request a demo, etc).

Things to account for:
  • Call to action and next steps
  • Multiple audiences? Multiple landing pages
  • Messaging, keywords and SEO
  • Easy access to signup or registration
A landing page for a school meal purchasing app

2. Registration & Sign Up

Woohoo, a conversion! The user has decided they are thoroughly invested in the product, they’re committed to downloading it and using it every day, and they honestly can’t imagine how they’d live without it. We have them hook, line and sinker, right?

Guess again! At this point, the user has expressed about as much interest in our product as the effort it took to click a button. Let’s not sell ourselves short though; getting the user to click that button on the landing page in the first place was no simple task. In fact, the average conversion rate (CVR) is around 2.35%, with the top 10% of performers in the 11% range. This varies wildly by industry. For example, e-commerce sees substantially lower CVR than B2B or Finance.

This is important to know, because getting that conversion wasn’t even the hard part! If the user arrives at a sign up or registration page that looks sketchy, is too lengthy or burdensome, feels unprofessional, or is difficult to use, the user is likely to give up and never complete the registration process.

Things to account for:
  • Account creation process
  • Suggested formatting for passwords
  • Emails, confirmations, thank you pages
Registration components for a UX design project

3. User Account Options

Great, our user has created an account! Now what? Well, if the user has an account, that means we’ve opened up a whole new world of requirements that add complexity, because now we need to have user account options.

For example, how does the user access the account? Is it tied to a social media account for easy sign in, or is it an account that is native to the product, with a username or email address and password combination? Where does the user even need to go to login in the first place?

If the user has a password, that means we need to account for password recovery, in the inevitable case of the user forgetting their password. If the user needs a username to access the account, what if they forgot their username? How do they recover that? What do the emails that we send to the user look like?

If the app has any sort of social aspect, the user will need a profile, in order to control how they are seen by other users. What kinds of details do we want the user to put into their profile? Can they upload a photo of themselves? Do users interact with one another? Can other users contact them directly within the app in a private way?

Things to account for:
  • Account/password recovery
  • Notification options
  • User profiles
  • Controls like favoriting, updating billing, deleting accounts, etc
Account settings components for a UX design project

4. Screenshots

If the user is going to use the app on a mobile device, first they have to download the app.

Once in the app store, most users will jump very quickly to the screenshots, to get an understanding of how the app looks, how it works, and if it seems like something they’d use.

This carefully curated selection of screenshots tell the entire story of what the app can do in just a few small images, and can make or break the user’s final decision on whether or not to download the app. It’s a huge first impression in the user’s journey that absolutely must be thought out.

And guess what? These screenshots need to be updated every time the app changes, a new feature is added, or a single color is adjusted, in order to keep them current and accurate.

Things to account for:
  • Which screenshots to show
  • The order of screenshots, to tell the full story
  • Consistency and quality
  • Keeping screenshots up to date

5. Branding, Logos & Icons

Well before the user has ever even opened an app, they’ve been bombarded with the app’s branding. First they had to find and download the app, which probably either meant clicking on a call to action on a landing page, or searching for the app by name.

When a user searches for an app, the app store often recommends similar apps, or apps with similar names. Does the icon we’re using stand up against this competition, and encourage the user to select our app over all others?

The app icon is the one single piece of design that will represent the app in it’s entirety. Every time the user opens the app, that’s the button they have to tap. It should be strong, recognizable, representative of the experience, and  attractive.

Oh, and by the way, the app icon isn’t a one-and-done design. A separate icon has to be created across a variety of sizes and pixel densities, for a variety of devices, and across multiple mobile operating systems, from the whopping 1024 x 1024 used for the iOS app store on Retina-ebabled devices, all the way down to the teeny tiny 16 x 16 favicons used in web browser tabs. And it has to look clean, crisp, and pixel perfect in every size.

Things to account for:
  • Scalability across literally dozens of sizes and pixel densities

6. Onboarding & Empty States

Although there are standards and best practices for things like navigation, placement of buttons, etc., that make things easier for the user, we have to keep in mind that what makes sense to us as product creators may not immediately make sense to the user. When you spend weeks or months working on a UX design project, you know every control and function back to front, inside out, and could answer questions about how to access features in your sleep. But for somebody who has never seen it before, is it obvious enough?

Probably not. A common solution to this problem is to cater a unique experience for the user’s first time opening the app. Onboarding and tutorials can walk the user through a typical use case, and show how all the controls and functions can or should be used.

If the app revolves around content or action that requires the user to first take some sort of action (ex: following a feed, adding friends, setting up a profile, etc.), those actions won’t have been completed yet the first time the user opens the app. So what does the app look like in this empty state?

Things to account for:
  • Help options
  • Tutorials and guided walkthroughs
  • First time opening experience
  • Empty states
UX design project showing empty state of an app

7. Destructive Actions

Does the user have the option of committing actions such as deleting a profile, erasing settings, or blocking another user? These are called destructive actions, because they have the ability to damage the user experience, whether that means losing work that has been done in the app, or even damaging a relationship with another person.

Any time the user has the ability to perform destructive actions, great care must be taken by the UX designer to ensure that these actions do not occur accidentally. If wiping an entire account out of existence was as simple as accidentally tapping on the wrong button when switching the mobile device from one hand to another, users would have extremely negative feelings about the experience with the product.

Typically, destructive actions should be at least a two-step process, with possibly even more than two steps. There should be very clearly stated warnings, and if the action is permanent, the consequences should be brought to the user’s attention.

Things to account for:
  • Warnings and alerts
  • Multi-step processes
A warning of destructive action in a UX design project

8. Emails

What is the user experience like outside of the app or product itself? When a user creates a new account, they’ll typically receive an email containing a verification link. And when the account is created, users will usually receive some sort of confirmation email or welcome email, outlining the features and benefits of the product, explaining next steps, or onboarding the user.

If the product includes any sort of e-commerce, this is even more important, since users will expect confirmations or receipts of orders placed, shipping notifications, etc.

Finally, branded email templates are important to facilitate communications with users, whether it’s informing them of interesting new updates to the app, or encouraging them to return to the app after long periods of inactivity.

Things to account for:
  • Email address verification for new accounts
  • Welcome emails
  • Notification emails
  • Reusable templates for announcements
Email receipt template in a UX Design Project

9. Error States & 404 Pages

We all love to believe that our product will work perfectly 100% of the time, but that’s simply not the case. Even Gmail, Twitter, Facebook, Spotify, and other seemingly infallible product giants occasionally (albeit rarely) experience technical failures that leave them temporarily unusable.

When this occurs, what do the users see? Do they see a blank screen? Do they see a default error report telling them a database syntax error occurred in line 345, along with a code they don’t understand? Or do they see a branded, friendly message letting them know that the problem will be addressed soon?

If the user is taking some particularly important action, like replying to a message, making a payment, or adding a payment method to an account, it’s absolutely critical for the user to know if an error occurs, so they’ll know to try again.

Accounting for error states is the difference between reassuring users, and letting them know everything is okay, as opposed to putting unnecessary stress on the user and losing their trust.

Things to account for:
  • 404 pages
  • Errors and suggested actions
Error state in a UX design project
Gareth Botha

Author Gareth Botha

Gareth is a UI/UX Designer in Atlanta, focused on creating beautiful, engaging, usable and accessible user experiences for mobile and web apps and digital products.

More posts by Gareth Botha

Leave a Reply