Quality From the Concept: The Role of UI/UX Design in Building Successful Apps

By Janique Morris

What are the odds of building a financially successful app? According to Gartner, it’s less than 0.01%.

It may sound a bit ludicrous when you consider the fact that, every day, an average of 3739 apps are added to the Play Store and 1,372 to the iOS App Store. That’s almost 2 million apps being released per year. So what’s to blame for the low failure rate?

One of the biggest contributing factors to app failure is that we keep building big bright ideas that no one cares about because it solves none of their problems. In other words, we have been addicted to creating “great” products without:

1. Truly substantiating that there is a need

2. Validating that there is an audience

3. Identifying the relevant problem that the product will solve for potential users.

As the digital space becomes more competitive, forward-thinking businesses and entrepreneurs are realizing that the success of their digital products lies squarely in the hands of the users. They have become more deliberate in ensuring that, from the early stages of conceptualization, they are building the right product for the right user. This is where the role of the UI/UX designer was birthed.

UI/UX designers are true advocates for the end-users. This critical role in the app development process goes far beyond “making things pretty” by ensuring that the products being built are focused on solving the real problems of the users. Over the last few years, good UI/UX design has been one of the key determining factors between a quality product and one that will fall into the other 99% of failed apps.

Marrying UI/UX Design and QA

For the past 3 years working as a software tester at QualityWorks and as a designer, I have witnessed firsthand how the role of an agile software tester and a UI/UX designer overlap in leading user-focused, quality-driven development. Good UI/UX design, deeply rooted in user research, improves the development process triple-fold and increases the quality and throughput of work being produced. It provides developers with a clear precise direction on what to build, and test engineers with clarity and well-defined user requirements to ensure faster QA approved releases.

A thorough, quality-driven design process also has significant business value by reducing rework and app recalls. Fixing a problem in development costs 10 times as much as fixing it in design, and 100 times as much if you are trying to fix the problem in a product that has already been released.

In many ways, my background in testing has made me a better designer. I have a much deeper understanding of the end-to-end process of building great apps, and this insight has been extremely helpful in guiding a lot of design decisions. Below are listed some of the key lessons I have learned that can ensure quality from the concept and help you to build apps that are a hit with your users and have great ROI.

Lesson 1: Become Your User’s Best Friend

Every significant decision made regarding how your app looks, feels, and functions should be driven by insights from your user. It is easy for us to fall in love with our ideas and want to give in to every whim and fancy, but that is often a recipe for disaster.

Imagine you are given a task to design an access point for a building. You dig deep into your treasure trove of ideas without a second thought as to who would be using it. You come up with a brilliant design of the world’s most sleek and intricately-designed staircase, but it turns out you are designing for persons with disabilities. Now, your beautiful staircase is just that — beautiful and useless.

This is why good design must rely heavily on understanding who you are designing for and what matters to them. UI/UX designers must be quick to question assumptions and driven to learn the motivations, feelings, thoughts, concerns, and goals of their end-user. Essentially they must become their user’s best friend.

The design thinking approach facilitates this through an iterative process of challenging assumptions and testing ideas with users before jumping into making decisions about your application. It also allows those involved in the decision-making process to get around their own biases about what the product should be or do.

The real value of this in-depth research is in how it is incorporated into the actual process of creating the solution. One common approach to implementing user research is known as designing with empathy. Designing with empathy means that you put yourself in the shoes of the user. Here are some of the guiding questions and prompts that UI/UX designers should always ask themselves and their teams in order to design with empathy:

• “What is the core problem that the app is solving for the user?”
• “How can I make the user’s life better?”
• “Is the design I’m creating making it easier for users to solve their problems?”

These questions are necessary to maintain a level of clarity while we design. They help to remind us that “We are not the user” and therefore should not go off the rails in our designs.

In agile product development, this level of user research can be incorporated through user stories. User stories are used to define software features from an end-user perspective. Both developers and QA engineers then use these stories to guide their work.

However, the biggest downfall I have found for this process is that when UI/UX designers are not involved, it is highly unlikely that anyone actually consults with the end-user to understand what they need. It is instead generally based on the requirements of the business or stakeholders — not the user’s needs and requirements which is actually counterintuitive. That being said, designers are often put in the tight spot of juggling the wants of the stakeholders or clients with those of the users.

User-focused design should not come at the expense of being able to deliver revenue-generating products. By focusing on the creation of products that respond well to the customer’s needs, there will be no question about business value and profitability.

Lesson 2: Aim for Clarity. Focus on Problem-Solving.

Design trends come and go, but a simple, uncomplicated design never goes out of style. For designers, it can be easy to get carried away with adding all the bells and whistles. The focus of UI design should be on creating a clear flow for the user. Nothing frustrates a user more than being unable to find a solution that the marketing copy promised when they use a designer’s application. The ultimate goal of a designer should be to strike a delicate balance between “looking great” and “doing precisely what it should”. I’ll break down a few key principles in design that help you to achieve this balance.

Good design isn’t just about aesthetics; good design is functional. 38% of people will stop engaging with a website if the content/layout is unattractive. If a user goes to your site and feels flustered, confused, or overwhelmed with options, they will leave the website — and 88% of them won’t return! So your design shouldn’t just look good, it should also be easy for users to fulfill whatever need first brought them to your application. Factors such as flow and layout, use of space, and familiarity play a big role in shaping the user experience.

On Flow

Your user should not have to guess what their next step should be when they land on your app. Keep the flow intuitive and simple. Hick’s Law speaks to simplifying the entire decision-making process. Steve Krug put it best:

“It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice.” — Steve Krug, Don’t make me think

This principle is especially valuable as it relates to the use of call to actions in your app or web page. It is best practice to ensure that the action you would like a user to take is the most outstanding/dominant action. In other words, the elements you want the user to select should be easily identifiable and easy to follow through on.

On Spacing

Your design should also allow the user to interact with the elements without making a mistake. This is where the laws of proximity and common region are applicable. These laws focus on reducing space between related elements and increasing negative space between unrelated elements to help the users connect related ideas.

A good example of this is the popular social media app, Instagram (see below). All of the main buttons needed to complete the main functions of the app -home, search, profile, upload- are in one section at the bottom of the screen and easily accessible.

On the other hand, I found a perfect example of an unnecessarily complex and confusing design flow a couple of weeks ago I entered a building hoping to find a restroom. Take a look at the image below and let me know which way I should have gone to use the female restroom. I still don’t know.

By using a clear structure and well-spaced elements, you can reduce the cognitive load of the user and make it easier for them to complete the appropriate action needed.

On Familiar Patterns in Design

When you click a logo in the navigation bar on a website, you expect to be taken to the homepage. This is a familiar pattern, and a deviation from this could be very confusing to users. Jakob’s Law speaks to this expectation of familiar patterns in design. It is important to a user’s experience simply because we like what is familiar. In other words, your users are saying “Don’t make me think!”. This simplicity makes a big difference. Users shouldn’t have to puzzle over finding what they’re looking for. Applying Jakob’s Law can ensure that you maintain familiar functionality for common elements and shorten the user’s learning curve.

There are many other laws and principles that you can use to guide your app designs. Regardless of the design process, the goal is to always remember you are trying to bring the user along a journey to meet a particular need. If problem-solving is at the core of your design, you are significantly more likely to deliver a great user experience.

Lesson 3: Building Great Products is a collaborative process