Stop designing and creating things that suck and nobody wants. DO read this step-by-step guide and learn to design web apps that don’t suck and people actually want to use.

This exhaustive article will guide you along and learn how to organize & contextualize key screens to stop making your users think and start having them complete your apps’ purpose.

Table of Contents

1. The Game Plan
2. User Journeys
3. The Dashboard
4. Your Key Screens
5. Just Good Enough UI

☝🏽 i. The game plan

Summary: Define your ideal paying client (audience, goals, tasks & objectives). Go past gender & age. Include habits & tools they currently use and how they’re using them. How does your product fit as a solution to get them to the promised land?This exercise is quite simple, but it’ll force you to think critically about your business and make some tough choices. If you want to do this well, you’ll have to leave the ego at the door.

Marketing 101: Client pain point + Your product’s solution = Paying customer

That’s easy enough, right?

However, somewhere along the line of users navigating your web app, they start to get confused, don’t know what to do, need clarity, or there are too many options all at once. Frustrated, they leave and never come back.

Remember that smooth scene sequence in the Matrix with Morpheus turning to face Neo? It was brilliant, seamless continuity.

Part of what makes it such a great scene is that the editors were so skilled in clipping the scenes, you didn’t even notice the change of cameras. They were so great at doing their job that the audience didn’t even notice them. That’s it, that’s the secret.

UI so good, it doesn’t even look designed.

The perfect experience you can offer your users is to simply get out of the way of their tasks to accomplish their goals.

Stupid question, do you want them to stay or go (aka, churn)?

So, in order for you to provide your users with the tools they need so that they don’t need you, you first need to gather intel on your potential power users.

Who is your target, paying user?

I’m not just asking about gender, age, and profession…I need you to think about their habits, what other products do they already use, what forums do they hang out at, what comments do they post on the blogs they follow?

Do they have the purchasing power to use your product? Do you even like them?

What’s a big enough goal with obstacles that your web app has the solution to?

Let’s talk about you. You want a better solution to your product’s UX:

1. Because you want more paying clients;
2. Because you want better, paying clients;
3. Because you want to make more money;
4. Because you want more freedom to not be run by your business;
5. Because you want to spend more time with your loved ones;
6. Because you want to travel more;
7. Because you want a nest egg for your retirement;
8. Because you will one day be in an amazing position to start a fund, charity, trust, or non-profit.

My job isn’t to help you start a non-profit, but my service offering does help cultivate the big lifestyle changes related to the success of your business if I can help it.

Let me ask you again, what big obstacle is your ideal client, facing that your digital product can help solve and what sequence of bigger and more important goals does it help them align with?

What are they repetitively doing and using on a daily basis when they’re logged in?

Set critical thinking aside and simply list out the steps in the sequence of tasks they perform to accomplish their tasks.

Let’s answer this question with commuting to work: do walk, take your bike, or use your car?

Car
1. Use your keys to open the car
2. Get in
3. Check your mirrors
4. Adjust your seat
5. Put your seatbelt on
6. Turn on the engine
7. Put your favorite music on
8. Look for oncoming traffic
9. Shift gears
10. Pull out…

Hot damn, we haven’t even gotten to the part of where your office is at, yet we’ve been able to list the necessary tasks at a granular level of what needs to be done.

But we know enough of what that repetitive tasks are and what objects are being used to get it done.

So now, answer me these:
1. Who are your ideal, paying customers?
2. What’s an obstacle you have the solution to and what will it help them achieve?
3. What do they do and what do they use to do it?

If you can answer those three questions, you’ve laid the groundwork for your game plan, your strategy.

☝🏽 ii. User journeys

Summary: You’ll learn how to provide your users with all the brief and intuitive instructions to get them on their way to complete specific tasks, and to nudge them back on if they’re at risk of straying off.

Can I tell you one of my biggest pet peeves with ANY type of web designer?

CLEVER NAVIGATION TITLES

OMFG does this make me click away at best and make me binge the Office (US version) just so I can yell at Michael Scott.

Listen, creative & pragmatic decision-making in web design & development go hand-in-hand. But FFS not when I’m trying to look for pages, files, resources, assets or g’damn CONTACT support link!

Establishing proper user journey design patterns is all about saying it succinctly. Get to the point and get me there fast!

Overly clever headlines & labels are the loose arrow signs in Alice & Wonderland that could send your users anywhere (including away from your application) except where they need to be.

If you’re going to forget everything you’re reading right now, at least drill this list into your strategy:

• K.I.S.,S. – Keep It Simple, Stupid. Don’t go on fixing things that aren’t broken;
• Don’t nest your navigation too many levels deep, this isn’t Inception;
• Avoid hover states whenever possible…in fact, if you can do it without pseudo-classes that aren’t touch screen friendly, DO IT;
• Depending on the complexity of the task and if appropriate, make it mobile-friendly.

Inform the user what the anticipated click action will do before it’s actually clicked. Remember that first confirmation button you clicked that is bringing you this newsletter guide? “Subscribe” was vague at best while “Send Me the Free Guide” told you exactly what was going to happen.

Optimize your click actions around specific tasks at the first line of defense: top-of-navigation or first touch-point.

If you’re having a hard time figuring out where your users are facing bottlenecks, go to your click-through heat map (you DO have one installed, right?) and refer to your most requested support inquiries. What do they keep looking for that makes them give up, but miraculously still stick around to ask you?

Communicating with clarity is key to completing smooth user journey experiences. Use the same EXACT language for elements that are doing the same EXACT tasks. Speak in their tone and be consistent. Is it “Hello”, “Contact”, “Support”, “Help”, or “SOS”?

How savvy are your users? Are they techies themselves or at the ugly bureaucratic end of HR? Top-level navigation sections are precious real estate. Don’t let it go to waste with mundane, standard features like “Settings”.

Group your elements with related tasks. When push comes to shove, grouping 5 – 8 item lists is much easier on the eyes than a long-ass navigation list across the top that pushes the block element to the second row, crowding onto each other.

Lists are nouns. Buttons are verbs.

What is an Sex Icon?

Do put icons next to labels to reinforce organization, but avoid icons without labels, unless it’s a watertight meaning that trash cans are to remove elements & plus icons are to add them.

Ask yourself this: if you had a given route on Google Maps and you grabbed the little yellow guy and dropped him ANYWHERE along the path, does your interface have enough information to orient the user and get him back on track to reach his destination?

☝🏽 iii. The dashboard

Summary: Decide what type of user is accessing your web app and at what stage touchpoint in their journey. Provide relevant information only, or remove clickthrough steps to get the information faster. The dashboard isn’t a work environment, nor the primary access point to your user’s tasks, but a facilitator of viewing systems’ status and accessibility.

Let’s step outside the scope of nerdy talk and talk about houses, apartments, condos, townhomes, etc…

Different styles are meant to evoke immediate feelings & actions under the umbrella of hospitality, warmth, excitement, and a sense of belonging.

The moment you enter through the front door, what do you see? Chances are that your first step into a foyer, followed by a living room, then dining room, and possibly a kitchen.

How is this possibly different from a penthouse suite? What is the priority here? How are this space’s priorities similar or more likely, different from a college dorm and public housing in section 8 (the projects, for non-US readers)?

Your users have logged in, now what?

Before you decide where to send your users, you must decide what type of user they are. At its most basic, are they an administrator or primary user? Secondly, are they new or returning users?

A dashboard and a home page aren’t the same things because their purposes lie explicitly with their visitor. I’ve been speaking at length of simplifying systems, elements, and patterns.

Houses don’t particularly have two front doors, why would you feel the need to have both? Perhaps, and the likely scenario, you need to rename & re-position your idea of a home page screen. Is it closer to “user profile”, “settings”, or another set of instructions closer to administrative tasks?

Do Lead with a Dashboard, if:

The user requires metrics of system operations (i.e. databases, API hook calls, polls, reports, feedback, tests) that are paramount to the visibility of system status and keep the user informed throughout for reassurance or alert of necessary action;

Don’t Lead with a Dashboard, if:

The user consistently goes to a specific screen view of your web app that requires more clickthroughs to get to their desired destination. Just go ahead and do it for them.

Dashboard Recommendations

• • Provide information relevant to the user role. Administrators shouldn’t see the exact screen elements as the primary users;
  • The form follows function. No glamor & glitz, get them the information first;
  • Group related elements in a way that the user can navigate to different areas of your web app easily;
  • Give your metrics a human context. Is the label “System Operations Satisfactory” a way you’d want to let your users know their system is up & running? What is a better, simpler, more bitesize, ways to say it?
  • Use a small color swatch and stick to it;
  • A neutral background;
  • A primary color for important call-to-actions;
  • A secondary color for less important, but necessary actions
  • Standard text color;

If you think you need more colors, think about other aspects of visual hierarchy to convey information: size, font weight, background elements, images, square vs circle bullets for lists…;

☝🏽 iv. Your key screens

Summary: Less theory and more action. You’ll identify and run usability tests on your key screens.

Write down ALL of your screens viewable to the end-user. Cross out administrative & user settings views for this exercise. We can fine-tune those later.

Map the Design Patterns

With pencil and paper, as you’re going through your screens, draw them out as a wireframe to visualize the conditional logic of different design patterns the user can create.

When you have your to-do list visualized, now we can run our UX audit.

01 The Title
Let the user know where s/he is right away. Nothing clever, nothing fancy. Straight talk. Give the user context of what they’re looking at and where along their path they’re at.

Recall the earlier exercise of distinguishing terms such as ‘Dashboard’ and ‘Home Page’ or ‘Contact’ and ’Support’.

Is your main audience reading Latin characters? Then it’s likely that they’re used to seeing important information left-to-right and top-to-bottom. Don’t give them the chance to guess.

02 Clear Navigation

This part should be easy since we’ve already talked about it. How much information is enough information for your user to know where they are in your web app?

Horizontal VS Vertical Navigation

Horizontal navigation is helpful because they’re usually located where our eyes are trained to see first on a web browser.

Breadcrumbs can be included to give sub-pages context of how far into the rabbit hole a user is, without actually feeling lost. Bonus tip: make the breadcrumbs active links to allows users to skip steps without going through unnecessary doors to get to their destination.

Vertical navigation is super helpful when you have many objects to group and categorize without crowding the top bar.

Collapsible trees make it easy for users to understand the context of those objects and its organization.

However, you decide to guide your users, remember that context is key. What’s more useful for a user that was paying for add-on plugins on your system and forgot one other plugin…a ‘back’ button or ‘return to plugins list’ button? 😉

03 Primary Calls-to-Action

As you’re quite familiar with landing pages, their main objective is some type of conversion. Whether it’s to fill out a form, make a payment, schedule a call, or up/download content, there’s an expected action from the user to complete that pattern.

On web apps, your CTA is centered around the context of the objects currently available to your user. Your objective is to present content in such a way that makes it easier for your users to complete the action with decisive resolution.

To make this easier, start with the end in mind. What do you need to happen? Let’s say you want to qualify a potential lead to get on the phone with your sales department.

Now that the keyword is “qualify” because you don’t want just anyone using up your sales resources if the caller has no purchasing power, you need to ask yourself what qualifications need to be present to evaluate the lead. When you’ve decided on those metrics, how are you presenting them?

Think of the nature of those elements: labels, input fields, radio vs checkbox buttons…what group of objects create an ecosystem where that ONE CALL-TO-ACTION (qualified leads) can thrive?

Finally, run that simulation again, but in the proper order and look for gaps that hint at even the smallest chance for your user to lose focus and decide if more information is needed or you need to remove elements to reduce confusion.

There will be many instances when two major actions can take place, such as restaurant POS software or big data tables.

But don’t just throw your users to the wolves. Remember, context is key! Your software is a live organism in a digital ecosystem. What needs to happen right now vs what needs to happen tomorrow vs next week?

The context will help you simplify and tighten your focus, no matter the complexity (waaaaaaaaAAAAAAAaaaaaay easier said than done, I know).

☝🏽 v. Just-good-enough UI

Summary: Want to avoid the bulk of design pattern pitfalls? Get a theme!

Big question: what should you do?

Simple answer: just-good-enough.

What is the minimal amount of information you can present without overwhelming the tasks or the decisions the user needs to take?

I’m not saying your digital product’s home should be empty, but you’re at the beginning. Features should come gradually where “bells & whistle” features should come ONLY after your basic user needs have been met.

Think back to the penthouse suite example where you only want a house.

Take a moment and browse splash pages on behance.net and dribbble.com to be on the lookout for modern and minimalist design.

Look at how they present and group elements.

Now go back to your app’s UI: limit yourself.

I’ll just go ahead and give you the recipe:

• 1 serif font for headlines (no bigger than 42px) or body (no smaller than 14px) copy, but not both, avoid light weights for phrases longer than five words;
• 1 sans serif font for headlines or body copy, but not both;
• 1 primary color that is your main call-to-action (also should be your text link color), but don’t overuse it, remember if the user has to remember one thing, it should be in this color;
• 1 secondary color that is for less urgent actions, but still important. Keep it on a muted tone against your primary color because it could also be used for your icon elements;
• 1 body copy color with high contrast against a white background, preferably black;
• 1 icons library that don’t compete with other visual and elements and signals;
• Don’t you dare let your UI become a rainbow, but do allow contrast in tints and shades between your initial color palette.
• NO GRADIENTS

Helpful Resources

Use fonts.google.com for font selection and even let it help you pair your sans VS serif combination.

Use coolors.co for color palette selections and explore swatches other users have uploaded.

Use Google Material Color to preview your color swatch combinations and trust Google to make the contrasting hues VS tints combinations for your UI elements.

Use accessible-colors.com to make sure that your text is legible in size and color against its backgrounds. Great tool for text alerts.

But, what you’re REALLY after is to get a theme THAT WORKS!

Use envato to browse great, low price templates that have been rated and are supported by theme authors.

Plan of (in)Action

At this point, you’ve defined your strategy & goals, audited your key screens, and have a bundle of resource links to get it done.

There are three options for you to take:

1. Do nothing – there’s nothing wrong with this option. You’ve discovered a laundry list of improvements that can be done to your product, but say you’re brand new to the market and the launch date is around the corner.

It’s much more important to get your solution out there and in the real world than investing your shoestring budget into UX improvements and fiddle with hypothetical suggestions.

My advice, do nothing, launch your product, get real user feedback, and match it against your discoveries and fine-tune feature improvements for future releases;

2. Baby steps – this is my best recommendation. SaaS products are live & dynamic specimens. They’re not like working with logos which are meant to last as much as possible. SaaS software is a journey. And from these hypotheticals, it’s difficult to document what is working and what isn’t when you don’t have extensive resources and a dedicated analytics team if you’re making many changes all at once. So, look at your list and prioritize that ONE task that is pivotal to reducing the barrier of usability for your power users to complete a single task;

3. UI overhaul – whether you have the money or not, you shouldn’t invest resources in reinventing the wheel.

There are way too many great solutions of low-cost themes & templates on UI elements (such as dashboards) for you to redesign it from the ground, up. I’m not trying to be sneaky about it, but Envato’s Theme Forest marketplace truly is a great start for you to get a low-cost theme and customize to your needs.

However you decide to release your changes, they should be discreet in the presence and look like they’ve always belonged there.

We don’t want to disrupt user habits and create more friction between them and tasks we want them to accomplish.

Remember what I just said about SaaS being alive; your users want to know that their product is always striving to improve.

Look at how WordPress always has a list of changes and upgrades they’ve made each time they have a new major version.

Congratulations!

You made it. What did you learn? What could I’ve skipped over? What should I’ve had gone into more detail?

I don’t consider myself a writer, but a designer (maybe). My feelings won’t get hurt if you tell me this training was horribly written but would like feedback on the content of the training.

Comment below and let me know what you think.