Post Image

UX Design in 2016: From Websites to Web Services

Jerry Cao
By Jerry Cao on 7th December, 2015 Updated on 22nd April, 2020

This year was a turning point in web design, with mobile browsing stealing the show, new technologies for better images and faster internet, and of course the general maturation of the industry.

Now, more than ever, the gap between web design and UX design is shrinking. Websites are only part of the overall customer experience, which means web designers need to think outside the page.

In this piece, we’ll explain the current state of web experience design, and how to adapt to what users expect in the new year.

Turning Past Pages

The traditional method of designing a web site was a pull-based system of pages: after determining what they want, users pulled the relevant page. This often involved searching several pages until you find the target content.

Lately, however, users are shifting to a push-based system, where content finds them.

Users are now notified about new content that matches their interest through alerts, text messages, email newsletters and updates. In the circumstances where they come to find content organically, the search process is drastically reduced. Invisible UIs strip away most distractions to quickly usher users where they want to go.

As explained in the free guide Web Design Trends 2015 & 2016, this shift is the result of several factors:

  • More mobile browsing — Sites and their related apps allow this direct messaging in a real time (push), as opposed to email which requires the user to check (pull).
  • Advanced personalization — Signing up for a site usually requires users to select categories they find relevant and/or adjust their notification settings. This hastens search time by removing the unrelated categories, or else takes them directly to where they want via a link.
  • Single-page experiences — Long scrolling/single-page sites became popular this year too, also related to mobile browsing (scrolling eliminates extra page-loading times and suits smaller screen sizes). With this format, navigation must be easier, with push guidelines a common strategy.

Screenshot of the Pelican Books website user interface

Source: Pelican Books

For example, Pelican Books new “Penguin Reader” is equal parts website and equal parts web app. The navigation functions like a traditional website, yet the experience feels more like a web app.

Does the distinction matter? Not really, for the users at least.

By visiting the site, you can preview chapters in a Medium-like minimalist format. Once you’re ready, you can then buy the book to read in-browser on any device. The experience is smooth, elegant, and context-friendly thanks to the typography, contrast, and media queries.

The medium of web content is less important than the service provided. Traditionally, we may have redirected users from the Penguin marketing website to download an app or buy the ebook formats.

Penguin Reader, however, shatters those silos. They determined the service that best suited users, then designed the technology accordingly. You visit the site, you preview content in an immersive format, then you can purchase the content without thinking twice about devices or formats.

Web design is no longer a downstream discipline of UX. As the Penguin Reader example demonstrates, web design is merely an expression of experience design.

Web Services are the New Pages

Sites are no longer thought of a collection of pages with different content. As explained in the free ebook UX Design Trends 2015 & 2016, today’s web sites are mostly thought of as services, and independent services at that.

Think of Facebook: it’s still divided into pages like your profile, the news feed, messages, etc. But it’s not thought of like this — it’s thought of as a service for socializing, and page divisions are practically irrelevant to that. Even sites like Netflix have individual pages for each movie and TV episode, but users don’t think “I’m going to the Ghostbusters page.” They think, “I’m using a movie-watching site to watch Ghostbusters.”

Screenshot of a movie page user interface on Netflix

Source: Netflix

This is objectively a good thing, since it puts content first.

That makes delivering the right content (a desirable service) the main objective of UX, with UI concerns growing outwards. The page system is still deeply ingrained in web design, but the user’s perceptions is changing.

In today’s climate, service design makes just as much impact as UI design, and in fact the two often overlap. Service design is a specialization of UX design, the best practices for providing a service from start to finish.

Screenshot of the Volkswagon website user interface

Another screenshot of the Volkswagon website user interface

Source: VW

Let’s look at Volkswagen as an example of service-oriented web design. Their car customization tool asks the user for their desired model and zip code, then transitions into a sandbox environment. To minimize the learning curve, the customization experience is perfectly paced thanks to a 5-step progress bar. Once the user is finished, the site generates a quote inquiry for the nearest dealer.

The design of such a tool (and its implementation on the main VW website) is clearly a service design decision. Instead of asking “What should I tell users about VW cars on our site?”, the site first asks itself “How can we help users find what they need?” The car builder transforms information into action by inviting users to play with their decisions.

The service reduces effort for users, and also shortens the conversion path for the business. Once again, UX design and web design merge to fulfill user needs and business needs.

Links on a Longer Chain

Another noticeable shift in modern web design is a move away from all-encompassing sites into specialization. Today’s services are “bite-sized,” so that users can chain together different sites/services to accomplish a single goal.

Screenshot of Google Maps’ user interface

Source: Google Maps

Let’s say you want to go to a concert. This might involve the following separate services:

  • Learning about the concert from a music news site (or from a notification from such site).
  • Making plans with friends through a messenger service like Facebook Messenger, Gchat, or What’s App.
  • Purchasing tickets through a ticket-buying service.
  • Calculating the travel time through a map service.
  • Using a car service app like Uber or Lyft to get a ride.

Potentially five different sites/services are needed to complete one task, and yet, only one (buying tickets) is exclusive to this specific task.

While this isn’t always a rule (Amazon and Facebook are doing their best to create all-encompassing sites), most new sites are emerging as standalone services without a greater chain. Keep in mind, the term “service” is used loosely, with sites like Tumblr or Vine (below) provide the service of entertainment.

Users aren’t coming to these sites for specific pages, they’re coming for the useful and desirable service. And despite its new look, designing a must-have service is still just old-fashioned UX design thinking.

For web designers, you must understand the context in which users enter and engage with the site. What happens before and after they use your site? How will that affect your interface decisions?

If you were designing a new ticket-selling site, you might consider geo-location integration with Google Maps so users could immediately see the travel time. When users see an affordable concert that’s only 15 minutes away, they may be likelier to purchase.

See outside the site and understand that you also need to design for the overall service (in this case, it’s “help me attend an enjoyable concert”).

Vine: A Modern Web Service

A model site in general, Vine demonstrates what it means to be a modern, independent web service. YouTube once had a monopoly on video sites, but Vine reinvented the industry and provided a video service users didn’t even know they wanted until they tried it.

By using short 7-second video loops, Vine attracted users who wanted a different video service than YouTube provided — one geared to faster viewing and even shorter attention spans.

Screenshot of Vine’s website user interface

Source: Vine

It’s worth mentioning that the service is the same on desktop and mobile. The changes in UI between devices don’t affect the service at all — and this is the main point. Focusing on pages and UI is an outdated method of web design since these decisions don’t hold across devices. Designing device-agnostic services is the only futureproof strategy.

Screenshot of Vine’s mobile app user interface

Source: Vine (mobile)

Vine’s website could have driven users to just download the app. Instead, the site and app create a harmonious experience. Users can access the same content on web or in the app, with perfect synchronization between the two.

When you combine service design with web design, you end up with a product like Vine. A site that doesn’t just talk about the product, but is part of the product.

Practical Takeaways

1. User research comes first

None of the examples described would succeed without understanding the user’s needs before, during, and after using the product. Interview users and observe how they use competitor products so you see the right context for your own design.

2. UX is a multi-channel exercise

When user needs dictate the constraints, you start to see that traditional roles for technology don’t always apply. A website isn’t just for marketing products. Apps don’t always live in mobile devices.

3. You can’t silo great design

The only way to design the appropriate product is to shape the medium with the whole design team together (web, mobile, UX). Everyone must collaborate from the beginning. For instance, web designers’ skills don’t apply only to building out the marketing site. They might help the UX Designer see a new way to express the product.

On a related note, one of the reasons we included so many UI element libraries and interaction libraries in UXPin was to free up designers to focus more on crafting the end-to-end experience.

If you found the article useful, feel free to start designing your digital experiences in UXPin with your team. You can play around with the elements, animations, and interactions with a free trial.

Join the world's best designers who use UXPin.

Sign up for a free trial.