Back in 2002, when we were still connecting to the internet via dial-up and sending messages via AOL, researchers at Stanford University in California decided to find out exactly what determined a website’s credibility. So they asked 2,600 people to leave comments about various sites, then went through their comments to find out which themes came up most often.

The results were startling. Forty-six percent of the respondents’ comments referred to the website’s design; by comparison, only 14.8% of comments alluded to the usefulness of the information, and 14.3% to its accuracy. In other words, when users were making up their minds about whether to trust an online portal, design was over three times more important than the actual content.

If anything, this emphasis is even more pronounced today. Today’s one-click generation expects great design as standard and is conditioned to make instant judgements. When we access an app or website today, it takes us only 0.05 seconds to decide whether we like it. There’s no second chance at a first impression.

Yet many companies still try to skimp on design. Instead of hiring a specialist agency to run a proper design process, they pay a less experienced freelancer to provide the visuals from their own specification. The folly of this approach is illustrated by the sheer number of digital platforms that aren’t fit for purpose: according to research published in March 2019, 97% of websites fail basic accessibility guidelines.

It’s easy to see why companies cut corners. Building a new digital product is hugely expensive – a bespoke website can cost up to $30,000, while an app can set you back nearly double that. It’s a huge outlay for the average startup, and it’s tempting to skimp on the design stage and pour every spare dime, cent or penny into development.

But if you do this, you’re short-cutting (no, scratch that, you’re short-circuiting) the entire process. Design isn’t just about the top-line stuff like colors, icons and typeface. It’s about the whole user experience, the shape of your product and the experience it will provide. 

If you don’t have a solid, consistent UX, you’ll almost certainly end up with problems during development, and by then they’ll be much more expensive to fix. Then, when you finally release the product, you’ll suffer from sub-par engagement and lose revenue opportunities.

But how do we go about delivering a truly great design? Well there are really four stages to consider. Only by including all four of these stages can you deliver a truly effective design.

1. Consider Your Product

It’s easy to fall into the trap of thinking we know what good design looks like, based on our own experience as consumers. Everyone likes the layout of sites like Etsy, Amazon and Instagram, right? So why not just copy them?

Well, this fails to take two things into account. The first is that pretty layouts don’t always translate into an effective UX: in fact there are many examples of sites which look nice but don’t actually do what they’re supposed to. The second is that each company is unique, with its own challenges and opportunities. You might have fallen in love with the Eventbrite app (as many people have), but their goals and audience are likely to be completely different to yours.

So, before doing anything else, you need to think about what you want your product to achieve, and what your version of digital success looks like.

2. Think About Your Audience

Once you’ve worked out the basic modus operandi of your product, you need to think about the people using it. Specifically:

  1. Who will be using the product.
  2. Where they will be using it.
  3. How they will be interacting with it.

You need to really dig deep into your demographics at this stage, and design a user experience that reflects that particular audience. If your product is likely to be aimed at older people, remember that they probably won’t use it in the way a young person would. 

If you’re building, say, a photo-sharing app for teens and twenty-somethings, your audience will be accustomed to using gesture-based apps and you might find that a swift, visual UX is best. On the other hand, if you’re building a video-call app to connect grandparents with their relatives, you’ll be better off creating a layout that elderly people are used to, such as a phone keyboard. If you want to add icons, they’ll need to be self-explanatory.

FarFaria (left) aims to make reading attractive to kids. Their “exploring feature” looks like a map. It’s kind of a game to play and go explore. Kindle (right) has a more classic approach with book covers and “shelves” like you’d find on a library. Both apps are about reading books, but the way they approach each audience design-wise is completely different.

The more research you can do at this stage, the better. Find out what technology your audience are using, and how they interact in different scenarios. This should give you a basic set of conditions to inform the design of your user experience, and a springboard for the creative phases to follow.

3. Flesh Out Your Vision With Wireframe

Ok, so now you can start thinking about the visuals. A great way to start fleshing out your ideas is through simple wireframes, which are essentially skeleton drawings of what each view will contain and how they all knit together. This process is faster and cheaper than designing the whole interface in its final shape.

You don’t need any great artistic skills at this stage; you can represent people with stickmen and blocks of text with empty lines. But your wireframe does need to lay out specific content, functions and connections between pages. 

Information hierarchies should be clearly expressed, making clear which information, and actions, matter the most in your app. And you need to create clear pathways for users to reach their product goals. 

Because wireframes are so simple, you can keep modifying and iterating on them until you achieve the perfect solution for your users.

4. The Fun Part

Ok, once you’ve done your wireframes, you’re ready to start designing a nice, visual UI for your product. This is the most creative part, so you’ll probably enjoy it the most.

The world of design is changing all the time, but there are some overriding principles which hold true in perpetuity. These are some of the core principles that guide our design process:

  • Keep in mind contrast and readability to make your product as accessible as possible.
  • Think of every resolution and size your users will apply to your content, and design accordingly.
  • Use icons and visuals to quickly translate actions and content helping scan and spot things easier.
  • Think of the invisible. In design, space is like golddust; crowded designs aren’t helpful to the user. Make sure there is plenty of space in your designs and remember that, when it comes to user interfaces, less is often more.

Earlier on, we talked about the folly of using templates as a substitute for effective design. But we don’t mean you should never use templates; what we mean is that you need to consider all the other steps first. Provided you’ve done the audience mapping and the wireframes, there’s no problem in buying a pre-defined UI design if it makes financial sense for you.

However, we would generally recommend hiring a specialized design team if you can afford it. A good designer will take a holistic view of your product, which an off-the-peg solution won’t provide. They’ll work with you to factor in extraneous considerations, such as how to handle the errors your product and users may cause. If they do their job properly, the product will be scalable and adaptable, allowing you to iterate with the times.

Summing Up

Despite everything we’ve said above, all the tips we’ve outlined, it’s important to remember that there’s no set formula for design success. Each project has its own needs and requirements (another reason we’ll always recommend hiring an agency with skilled designers). The world of design is evolving all the time and companies like Mobile Jazz are determined to stay ahead of the curve. We’ve written our own design guide and wireframing guide, and you can sign up to our newsletter for many more tips on this subject. Stay tuned!

Pablo Garcia Roca

Pablo García studied graphic design at degree level and has been working on UX and UI for many digital platforms.