Success is measured differently in all spheres of life, and even differs from one individual to the next. When it comes to apps, some developers expect nothing less than thousands of users everyday, while others are happy with a few hundred.
Not every good idea results in a successful app. A good idea poorly executed is not that different to a bad idea brilliantly executed. One fails to attract an audience because it isn’t usable, while nobody wants to be connected to the other in spite of its usability.
As with most smartphone users, my phone has replaced the alarm clock on my bedside table. And since 2012 I have used the same, very basic, alarm clock app. The design of the app is retro, but functional, and it includes very few features outside of what you would expect in an alarm clock. Aside from 2014, the app is never updated more than three times in a year, and seldom gets more than 5,000 downloads in a month. But it is still supported nearly 8-years after first being released, and still works on new devices, using the latest operating system.
That’s one view of a successful app.
Another is apps that do draw thousands of users each day, and have transformed considerably since initial release. Both in terms of features, and design. These are the apps I will be looking at in this article, focusing on how they have changed over time, and how these changes have influenced their success.
Change is an essential component of successful apps. At the very least, like the alarm clock app I use, it ensures that the app continues to work on the latest devices and operating systems. Deeper than that you have:
- New features that extend the functionality of the original app, without completely changing the original purpose.
- Improvements to the UI and UX, making the app easier to use.
UI and UX are important components of any consumer facing digital property, with incremental improvements to both contributing to success. As a new medium, websites from the mid to late 90s were often very experimental in terms of design and navigation. And the epitome of bad UI and UX in the 90s was what became known as mystery meat navigation (MMN) — a term first used by Vincent Flanders.
And just as it seemed we were getting the hang of things when it came to UI and UX, smartphones and the associated app stores disrupted everything.
Skeuomorphism: In digital design this is the use of a user interface that copies elements of a physical object — is not a modern concept, and despite it being hated by many, it did serve an important purpose in the early days of computers, the internet, and smartphones and apps. Writing about Apple’s use of skeuomorphism, Kieron Gurner points out:
“Apple wanted to ease the cognitive load for people when using digital displays. We are used to using a physical desk calendar, so making the digital calendar look the same helped people understand the mechanics of it. As time has gone on, with people feeling more comfortable with digital devices, the Apple calendar app has become more flat and minimal, which is probably a better use of space on screen and is more aesthetically pleasing.”
Initial releases of many apps don’t always get things right when it comes to UI and UX. But developers of successful apps quickly begin to analyse how people use the app, identifying problems with UI and UX, and even with specific features. And they then work on better versions of each, and roll them out. The best apps are those where some changes are meant to keep the app relevant to the target audience, and some are meant to make the app easier to use.
Facebook, testing & Usability
It might seem hackneyed to include Facebook in a “best apps” list, especially since it is easy to view them as the ‘privileged kid’ who never had to work very hard to succeed. But, like most of the apps on this list, Facebook started out as a web app, well before the proliferation of smartphones.
Launching a mobile app when all your users are already quite familiar with your web app is more difficult than launching a web and mobile app at the same time. Your users are already accustomed to the layout of your web app, and already have specific features they use regularly. The challenge for you and your developers is to replicate most of this in your mobile app; and with a much smaller screen, this isn’t always possible.
After first releasing mobile optimised web apps that worked on most brands of smartphone, Facebook’s first standalone mobile app was released in 2010. It was web-centric, slow, and crashed regularly; who cares about UI and UX when nobody can actually use the app? Finally, in 2012, Mark Zuckerberg admitted that:
“Betting completely on HTML5 is one of the, if not THE biggest strategic mistake we’ve made.”
Then Facebook released a completely redesigned native app.
It was at this time that Facebook also switched to a mobile-first strategy, quite late for a company that by now had more than two-thirds of its users logging in via mobile each day. It is an important strategy for any developer with a web and mobile app to follow; new features and UI changes roll out to both app versions almost simultaneously. Features should not be limited to one app, and even if the layout of the app differs — because of screen size — it should still be very familiar.
Of course, Facebook benefits from scale: the organisation is large, and the user base is large. But that doesn’t mean that smaller developers can’t achieve some of what Facebook has. With a mobile-first strategy Facebook has also started paying attention to speed and space. Speed is not only about how fast the app responds, but also how quickly users are able to perform certain functions. And space, well…. that is always a premium on mobile, but by putting greater emphasis on UI, Facebook has managed to make the app look bigger.
In 2012 the app still lost a lot of space to large menu bars and buttons.
But with even Apple shifting to the use of flat design following the release of iOS7 in 2013, the buttons, icons, menu bars, and even text in the Facebook app have shrunk.
One big change came to Facebook on iOS in 2013, when the menu bar dropped from the top of the screen to the bottom, and lost its blue background.
Not everyone was a fan, but Facebook did find that certain metrics improved with the bar at the bottom.
Image Source: LukeW
But Facebook, and other successful apps, don’t make changes to UI and UX willy-nilly. Aside from having design teams made up of specialists in various fields, they also do extensive testing. The Facebook Beta for Android makes testing on Android simple, but Michael Sharon, a Facebook product manager, stated back in 2013 that beta testing wasn’t possible on iOS. To overcome this, they built a testing framework into the iOS app. The iOS app now comes with several different versions of the Facebook UI built right in, with different users each using different versions. In essence, the iOS version of the Facebook app is one big beta program. But Sharon also noted that these aren’t typical beta versions:
“We’re not shipping a subpar version of our app. We’re shipping full production-ready versions that could become the main experience.”
Dropping the menu bar to the bottom of the screen was one of the first changes to the UI/UX that followed the roll-out of the built-in testing framework. And once you pay more attention to how people use their mobile phones, and remember the risk of out of sight, out of mind, having a menu that is always visible, and within easy reach, makes more sense.
Designing for Trust with Airbnb
Like Facebook, Airbnb started out as a web app with the glorious name AirBed & Breakfast. Without dwelling too much on the — admittedly fascinating — early history of the brand, Airbnb’s mobile app (for iOS) was recognized as the break-out app at SxSW 2011. It wasn’t until 2012 that an Android version followed.
And as the brand and web app have evolved since then, so too has the mobile app. Some of these are driven by changes in the company’s strategy, and its audience, and others are the result of UI and UX improvements. And Airbnb isn’t shy about talking about the influence of design, with a whole blog devoted to design.
Reading through the posts offers some insight into the work involved in creating great apps that offer great experiences. UI consists of the icons, buttons, text, etc. you use to interact with a product, while UX is about how using the product makes you feel. UI is mostly visible, and UX mostly invisible, but influenced by the visible.
Peter Morville came up with the user experience honeycomb, since great UX consists of seven different facets:
- The product must — obviously — be useful.
- It must be usable. But usable products are not always easy to use, and great UX looks at both usability and ease of use.
- There must be an element of desirability. Efficiency is important, but any design that focuses exclusively on efficiency will most likely not elicit an emotional response.
- Findable is the link between UX and UI: users need to be able to easily find what they are looking for within your app.
- Accessible — to people with disabilities.
- Contextual and design elements do influence credibility, and the best apps build trust without explicitly asking users to trust them.
- Being valuable isn’t only about creating value for end-users, but also for the company represented by the app.
Each of the apps listed here don’t need to prove their usefulness, and while Facebook uses testing to improve usability (and ease of use), trust is something that Airbnb values highly. Writing on the company blog, Airbnb Experience Design Lead, Charlie Aufmann noted that:
“Of course it’s nothing new for a company to talk about trust. Here’s the difference: we’re not talking about when a company behaves in a trustworthy way so their customers trust them or their product. Of course this is important, but the trust that makes Airbnb possible is when hosts and guests trust each other.”
Two design elements Airbnb has worked on to enhance trust are reviews and messaging. Consumers use reviews as a quality determinant, linked to trust: the more positive reviews a product or business has, the more likely we are to trust them.
And reviews are not hard to find in the Airbnb app. A star rating displays in a static bar on each listing, along with a number indicating the number of reviews. The reviews also appear before links to house rules, cancellation policies, and the hosts contact details.
When trying to contact a host, you are prompted to complete your profile — if you haven’t already done so. Remembering that hosts and guests need to trust each other, having a profile photo and contact details for each potential guest is important.
But as Joe Gebbia reveals in the above TED Talk, the amount of information a guest shares with hosts also influences acceptance rates. Too much information is as bad as too little. So prompts steer you towards sharing the right information, while the space provided for your message acts as a visual guide for how much to share.
By 2016, Airbnb’s growth since 2011 was impacting on another facet of UX — findability. It took two and half years for Airbnb to reach one million nights booked by 2011, but by 2016 they were booking more than 70m room nights a year. This meant that finding accommodation was becoming more difficult, and the process of filtering results was itself frustrating. So it became one of the areas the design team focused on when redesigning the app between 2015 and 2016.
Basic filtering of results is more streamlined, with more advanced filtering still easily accessible. Without reducing the filtering options, users are confronted with fewer screens. So usability improves, along with the ability to find accommodation more aligned to your needs.
Director of Experience Design at Airbnb, Katie Dill said at the time that the redesign was aimed at making mobile more than a companion to the desktop version of Airbnb:
“[Now] mobile is the best way to book Airbnb.”
Consumer Focused Tastemade
Tastemade started out in 2012 as a multi-channel network on YouTube, featuring high-quality food and cooking videos. Soon after, they branched out into posting highly engaging videos to Facebook — most videos are 1–2 minutes long, but there are plenty that are even shorter.
Their foray into mobile apps was, at first, less successful. In 2013 they launched the Tastemade Video City Guide, a pseudo social network for food lovers. This app was merged with their Facet Travel Video app in 2015, but that too was shut down in 2016. However, another app they launched in 2015 — simply called Tastemade — is achieving the success the others failed to.
One reason for this is that this app is a truer extension of the original business, making it easy to find recipes, and watch the cooking shows Tastemade is known for, on a mobile phone.
And because the focus is on video and cooking, the app UI is almost invisible. Relevant controls, using a very minimalistic design, are shown briefly at the start of each video before disappearing. A simple tap on the screen calls them up again. Because there’s not a lot of space on mobile screens, not everything can be visible in a mobile UI. This makes mobile design challenging. Product Director at Google, Luke Wroblewski, wrote about the risks of hidden elements in a mobile app, but he explained further:
“Unlike the desktop where big screens allow us to squeeze in every feature and function on screen, mobile requires us to make decisions: what’s important enough to be visible on mobile?
Answering that question requires an understanding of what matters to your users and business. In other words, it requires good design.”
In the case of Tastemade, this is professionally shot videos — focused on cooking — that fill the screen. And controls that aren’t hidden would spoil the experience. The videos on the Today tab are small, but a single tap expands them to fill the screen, regardless of whether you are in portrait or landscape mode, which only serves to further enhance the user experience.
Although it is a freemium app, basic use of the app does not require registration, or a subscription. Nor are you constantly urged to register via popups, etc. Announcement boxes position between videos on the Today tab of the app do encourage registration and subscription by listing the benefits, but they are unobtrusive and don’t interfere with the use of the app.
Tastemade started out creating videos that would be played on YouTube and Facebook, but their content is now also shown inside their own app, and via Apple TV. So every bit of content they now create is edited into different versions, including square for Facebook and Instagram, and full-frame 4K for Apple TV and YouTube. Co-founder Steven Kydd says of this approach:
“[it] is a different type of storytelling, but a unique opportunity. If you focus on the consumer, and how they’re using your product, that leads you to a very different place.”
Deliveroo and the Influence of Design & Research
Deliveroo, like Tastemade, is all about food. But this time it is about ordering food — and getting it delivered to you quickly — rather than learning how to make it yourself.
Spot the differences.
Deliveroo is still a young’n compared to some of the other apps discussed in this article, and it is possible that it has benefited from the mistakes made by the olds. Although the company underwent a complete brand redesign last year, the app itself has not had any major changes since launching in 2015. This isn’t meant to suggest that the designers and developers had an easy job, but they would have had access to many more case studies to base decisions on.
The mission of Deliveroo is two-fold, they want to deliver amazing food — not just standard takeaway fare — to your home or office, and they want to do this fast. They understand that the difference between hungry and hangry is — at best — a few minutes, so even the app is designed with speed in mind. There is no onboarding process: the first time you launch the app you are met with a “Get Started!” screen, followed by a request to access your location. This is a bold approach, and the Deliveroo team are making two assumptions:
- You’re already familiar with the service, and have possibly used it before via the web, and
- You are not a new smartphone convert, and are familiar with how most apps work.
It is a safe assumption to make: their mobile app was released two years after they first started operating, and eight years after the first iPhone was released. And if you allow the app to access your location — and you want your food delivered to where you currently are — using it is very easy.
Great images are used to highlight the food offered by each restaurant available in your area, while the descriptions for each menu item are kept short. Most functions in the app can be accomplished via taps and swipes, with the ability to tap multiple times on each menu item to increase the quantity being a thoughtful touch.
And while I did state earlier that the app hadn’t undergone any major transformation since launching, this doesn’t mean that the design team aren’t constantly working at improving the UI and UX. But the changes are subtle improvements, which is possible when your original design was already quite strong. The design changes are based on improving the process of adding a new address, and how you pay for your order, both linking directly to how quickly you can place your order, and have it delivered.
The search function is also optimised to eliminate friction, so instead of being faced with a blank search bar, you have that in addition to a list of cuisine types. Wondering which restaurants around you have gluten free options? Jump straight to a selection without having to scroll through endless restaurants and menus, thanks to how search has been set up in the Deliveroo app.
But all of this is made possible through the combination of a strong research team, and a strong design team. In a Medium post (BTW the Deliveroo Design team are great at sharing their thoughts and processes on Medium), product designer Rob Hunt observed that:
We’ve grown incredibly quickly over the last year or two, and the product team isn’t just designing and building for one set of users — we need to keep our customers, riders, restaurants and internal teams happy. Our research team are central to making sure we’re achieving that.
Simplifying the Complex with Trainline
Apps — mobile or web — that simplify complex tasks are guaranteed to succeed. After all, it is what we expect when using mobile devices and computers: we want to be able to do things faster, and easier. But simplifying complex tasks is, well, no simple task. Nor is it a once-off task.
Luckily for Trainline, simplifying a complex task is something they’ve been doing since the late 90s, with a mobile app first released in 2009.
The original design followed the trends at the time, with chunky buttons, and heavy use of gradients.
But this has gradually been replaced by a cleaner, flatter design. Choosing a date and time doesn’t only look fresher, but now you can also specify whether you want to trains that depart after a certain time, or arrive by a set time. While adding more choices/options to your app can increase friction, this example does not.
Similarly, you know which train station you want to depart from, and arrive at, so it is unnecessary to repeat this information for each result. By eliminating station names from the results, you are now able to view ticket prices, along with other important details such as which of the options is cheapest, and which arrives first.
Other notable changes are to the Plan Journey screen — now Plan & Buy. On a single screen you are now able to input almost all the information relating to your planned trip. Single, return, number of passengers, railcard selection, etc. — all done from one screen, instead of via multiple steps/screens. And all possible options/permutations are visible too, avoiding the out of sight, out of mind problem evident in some apps.
Selecting a trip brings up additional options such as seat preferences (when available), but this is unobtrusive and doesn’t distract from the next step: payment. Some trips are planned in advance, while others are unexpected, but in either case, organising tickets should not be a complicated task. Trainline understands this, just as Deliveroo understands that ordering food should be uncomplicated and fast.
Another mark of a great app is how well — and how quickly — they integrate with new technology, since this often leads to an improved UX. With Trainline, you not only have Apple Wallet integrations — allowing you to opt for a mobile ticket instead of a paper one on selected routes — but also iMessage integrations, and the recently launched BusyBot. With iMessage integrations, you are able to easily share details of your trip with F&F, right down to them being able to follow you live, and BusyBot uses crowdsourced feedback to help you find a seat on busy routes.
And we don’t need to rely on the Trainline designers to tell us if the app is a success with users, we can just as easily tell by looking at user reviews, such as that of floridascouse:
Pandora and the Importance of Personalisation
Pandora (also known as Pandora Radio) has been around since 2000, but don’t feel too bad if you’re not too familiar with the service and app. Despite being in operation for more than 10-years (17-years if you count the early years as Savage Beast Technologies), Pandora is only available in the US, Australia, and New Zealand. But with more than 200m registered users, and more than $1Bn in revenue, they’re worthy of a mention in this article.
Like many of the apps that launched along with, or soon after, the iOS App Store, early versions of the Pandora app now look ugly and clunky. It was awash with the big buttons and icons — and dark gradients and backgrounds — found in so many apps at that time. While some thought might have gone into the UI, UX at the time was more of an afterthought, since the progress bar — a staple of most music apps — was only added to Pandora 6-months after the app’s initial release. Neil Mix, an engineer who worked on Pandora’s first mobile app remembers:
“It was challenging to develop the app in these early days. We were all developing for a brand-new interface and platform. The early days also meant that developer tools were sometimes incomplete, Xcode was known to crash and the documentation was basic. Nevertheless, the pieces steadily came together.”
Of course, we didn’t know much better then, but like Facebook, Airbnb, Trainline, and other apps from that era, Pandora has since paid more attention to trends and research relating to UI and UX. By 2012, more than 75% of total listening was happening on mobile and connected devices, and Pandora’s UI and UX got a much needed revamp.
This happened well before Apple started moving away from skeuomorphic designs, so while the gradients and big buttons remained, navigation and other controls were simplified. Pandora’s mission is to change the way you discover and listen to music, but until the release of Pandora 4.0, discovery was a little hit and miss. This update introduced slight changes to the UI, but improved the UX with more detailed artist pages, the introduction of a personal profile page, along with a music feed, allowing users to follow friends, and see what users with similar tastes were listening to. It also saw Pandora finally become more social, allowing users to share favourite songs and stations via Facebook and Twitter.
The next big update to the Pandora app rolled out in 2014, bringing with it the same flat design — with minimal use of colour — you now see in many apps. This trend is far from boring, and serves two very important purposes:
- By following and using established UI patterns, you create a sense of familiarity. Users are able to navigate your app more easily, and there is less need for onboarding, and
- By limiting the use of colour in your app, you are able to use colour more effectively to draw attention to important features and information.
Accessing artist information is easier, making use of swipe and tap gestures instead of navigating to a separate page. And while personalisation has always been a feature of Pandora, it is more in focus now, making it easier to like stations, tracks, and to review past likes. Some features are hidden, again raising the risk of out of sight, out of mind, but with a large user base, one would imagine that Pandora closely monitors which features are used most often, and therefore only hides less frequently used features.
Like Facebook, Pandora benefits from having a large user base, and an audience who engage with the app extensively throughout each day. This gives the design team access to vast amounts of data relating to how users engage with the app: which features they use frequently, and which they avoid. Talking about her role as Product Designer at Pandora, Anabelle Zee describes it as:
[…] a profession where the big question is “does this improve life for the user?” Good design permeates all things in our lives. And well-designed products can bring such delight.
Conclusion
Although the apps mentioned here are all backed by large companies, all with many millions already invested in them, UI and UX is not something only accessible to them. With tools like UXPin, InVision, and Localytics, UI and UX design, metrics, and optimisation are accessible to all app developers. And the benefits of investing in UI and UX can’t be ignored:
There is a lot you can learn from these companies, as you go about developing or improving your own app. And although I have looked at one or two specific insights for each company, they are not unique to that company. Instead, you can expect that these are principles that are applied to all successful apps.
Through Facebook we learn about the importance of testing, and then analysing and interpreting the data, before applying changes. Their testing is built straight into their app, but for smaller developers, regular A/B testing of features and new designs is enough. But as Facebook product manager Michael Sharon points out:
“we’re [not] ‘data-driven’. We’re ‘data-aware’ or ‘data-informed’”
Following a gut feeling is allowed, so long as you continue to monitor user data, and are able to correct if your gut feeling turns out to be wrong.
Airbnb doesn’t only teach us about the importance of building trust, but also about keeping discoverability easy. It is important to remember that finding specific products or information can become more difficult as your business and audience grows. With the possible exception of Facebook, each of the apps discussed here have worked at making the search function simple, without increasing friction. The fewer steps involved in using the search function, the better.
With Tastemade, we’re introduced to the importance of focusing on your consumers, and how they use your app. Always remember that you are designing for your users, not yourself, but don’t focus too much on what users ask for. Writing for UXPin, Adam Fairhead uses Aaron and Moses in an analogy about the difference between giving users what they ask for, and leading them to the right destination. He describes UX and design as:
It’s the responsibility of a UX Designer to plot an elegant, deliberate, natural course for the recipients of the experience being designed. And then take them there with as little resistance as possible. Put another way, it’s to steer a group of people to success. Good design is not forceful, vague, selfish, ignorant or accidental, but intentional. Good design leads people.
Another lesson to learn from Tastemade is that your app should always start out as an extension of your core product. Tastemade’s first two apps were not, but instead offered users an experience that the founders hoped would be their next vertical. They only found success with an app that was a direct extension of the existing offering. Facebook and Airbnb have both started to extend beyond what they first offered: Facebook with Messenger, and Airbnb with experiences. Facebook was quick to separate Messenger from their core product, while experiences are still embedded within the Airbnb app, but work because they are intrinsically related to travel — the core Airbnb offering.
Similarly, Trainline shows us that it is okay to integrate new tech into your app — and quickly — as long as they are not gimmicky, and actually benefit users directly. Trainline and Deliveroo also show us the importance of simplifying complex tasks, and how it is possible to still share and collect a lot of information, without using too many separate screens.
Finally, in light of Pandora announcing the introduction of a premium plan, followed by talk of selling the company, we learn that despite the importance of UI and UX, you do still need to pay attention to what is happening in the markets in which your company operates. While Pandora was a pioneer in internet radio, it has — in some regards — failed to keep up with its competitors. More than 10-years after launching, Pandora is still only available in three locations, compared with Spotify’s 20 locations, and Apple Music’s 100+.
How much effort are you putting into UI and UX, and what tools are you using? Let us know in the comments, before taking a look at some of the other tools available to app developers.
Author Bio
Nabeena Mali is the marketing manager at AppInstitute, the simplest way to create your own mobile app without writing a single line of code. Passionate about design, user experience and digital growth she helps businesses leverage emerging mobile trends through actionable strategies. She also enjoys going back to basics and loves old polaroid cameras and riding bikes without gears.
Originally published at ebooks.localytics.com.
