Take a look at this app. Look’s nice, right? It’s got fun colors, decent illustrations and a clear overview of the current weather. Seems like a good product.

But let’s look again…

In fact the user is left with all sorts of questions, thanks to the app’s limited design. And, if they’re left with lots of questions, they’ll eventually come up with a simple answer: they’ll switch to another app, one which might be less aesthetically pleasing but solves their problem more quickly.

So, truly great design is much more than skin-deep. And research shows that the vast majority of apps are failing to deliver it. Two out of every four users abandon an app within the first month of downloading; after three months, the figure rises to 71%. This can bring serious financial costs, too. According to Google, a negative mobile experience makes people 62% less likely to return to a brand.

Here, we’ll show you how to weave design into the very core of your product development, highlighting a recent project of ours called Ride Link, a hardware device which syncs with a mobile app to deliver real-time information to bikers about their vehicle.

We’ll take you through:

• Initial masterplanning
• Wireframing
• UI development
• The finishing touches

The article will, we hope, be useful to anyone who’s thinking of building a mobile app, or is already in the process of doing so.

Initial Masterplan

First we need a brief, a framework that lists the product’s specifications, outlines its key goals and explains the idea behind it. We also need to include a manifesto, explaining the product’s core value proposition. Without one, we might end up with a product that does everything we want it to do, but in a way that doesn’t make sense or add value for users.

Experience tells us that many companies overlook this step. Either they completely skip the briefing stage, or they create something with insufficient detail. So we’ve rolled out our own product evaluation program called MJ Workshops, where we help our clients create their inaugural briefing note. 

During these workshops, our clients get total freedom to tell us what they want. We simply tell them how this idea can work in reality, adding technical points and sharing the commercial experience we’ve gained on similar projects in the past.

This was the case with Ride Link. During the planning stage they mapped out their vision for a system which would provide key information like location, bike health status and performance statistics to riders in a simple, intuitive way. We told them what they’d need to do to build it.

Once we’d agreed upon the concept, it was time to take it out into the real world.

Wireframing

A wireframe is a two-dimensional illustration of what our interface will look like. It doesn’t need to be beautifully drawn, but it does need to define key details like how space will be allocated, how content will flow from one screen to the next, how the user will access key functions and how the app should behave.

A good wireframe allows us to visualise how users are going to move through our app, and spot any usability snags before we start building. They also allow us to test out worst-case scenarios and, because they show us how our product will work in the real world, help us identify opportunities to increase value. Most importantly, they save us huge amounts of time later on.

As you can see below, we created a number of wireframes for Ride Link’s routeplanner service, which gives users instructions on how to reach a specific destination.

These wireframes enabled us to map out how we were going to solve key problems in the design, like how to illustrate ride previews and display the user’s current destination. 

What’s more, during the wireframing stage we realized that we could add weather information for both current location and destination. This feature hadn’t actually occurred to us before we sat down to create the wireframes, but it soon became a crucial part of the Ride Link app.

Designing The User Interface

Once we’ve finished the wireframes, we can move onto the user interface or UI. Now it’s time to add some style, making the product engaging and on-brand as well as easy to use.

It’s crucial that we always keep in mind the four essential objectives of UI.

• Place users in control. If users feel like they have control, they’ll learn about the product quickly, gain a sense of mastery and interact with more confidence. 
• Reduce background noise. Good UI should eliminate all irrelevant information so users are not distracted.
• Reduce cognitive load. The more mental energy a user expends in working out a product, the quicker their patience will diminish.
• Make user interfaces consistent. The more consistent an interface is, the more users can translate their knowledge and skills from one part of the app to another, and from one app to the next — which builds brand and product loyalty.

Perhaps one of the most important facets of UI is visual language. Each sector has its own distinctive language, which users will recognise and identify with. 

Healthcare, for example, often uses blue or green color tones as blue is intrinsically associated with security and trust, while green conjures images of nature and balance. Similarly, ethical and environmental brands often use green as their main color because it is synonymous with nature, and they augment this with natural textures (wood, wool, paper) and handwritten typographies.

Selecting the right visual language is crucial to engaging and retaining the user, and this is a key focus during the UI stage. We research the sector thoroughly to understand its visual language, and then study which elements go into that language before putting together the UI design.

As you’ll see above, Ride Link’s UI is heavily influenced by the world of bikes. We did plenty of research on motorbike brands, from bike manufacturers to apparel and fashion labels, and distilled a number of common elements, which we then applied to the app. 

These included the use of high-contrast elements such as red, black and white, which are common across the biking industry; bold, modern and sharp typographies; sharp edges and dynamic shapes, to convey the sense of motion and speed; and the use of icons similar to those a rider would find on their hud, or bike display.

These little things matter. We’ve read that small UI decisions, such as using a hamburger menu or a tab navigation, can translate into a 70% increased session time or 65% daily active users. This is why it’s so important to have an app which not only looks nice but also delivers a smooth, intuitive experience.

The Bigger Picture

Design is fundamental to any project and must be considered from the outset if you want to build a solid, consistent product. With rigorous UI and UX design, we can spot problems at the outset and find ways to add value. Instead of cluttered, labyrinthine apps that drive users away, good design allows us to create simple, attractive products that sync with our branding. 

The process certainly isn’t easy. It’s not simply about fleshing out a wireframe with some nice colors, it’s about creating true accessibility for each and every user. But if we can achieve these goals, we’ll drive user satisfaction, which feeds into better sales, higher revenue and improved long-term engagement.

This is fundamental to what we do at Mobile Jazz. We feel design-driven products achieve better outcomes and that’s why we always involve engineers at the very start of the design process. By bringing engineers together with design specialists, we can engineer better products for our clients and add true value on both the technical and business sides.