Scalable designs are a business problem that designers can help solve
Designing to scale can be a critical skill to learn in specific fields
I realized designing for scale was an issue when a user told me they wouldn’t buy our product because of scaling issues during a user test.
Since transitioning into the Business-to-business (B2B) product space, I've learned ways to connect with an entirely new audience and domain.
Designing for scale is one of those things that you never really think about. Still, it can be the most critical problem to address in specific fields, such as Healthcare Technology, Financial Technology, and Enterprise UX.
These fields often need to showcase hundreds or even thousands of items on well-designed websites and do it in a way that's understandable to their users.
So, how do you begin designing for these situations and adding this skill to your repertoire?
As it turns out, simplifying your designs is the easiest way to start.
Scaling Design problems are much more common than you think
The topic of scaling designs often isn't given much consideration, but it can be more common than you think. To explain why, look at a website you might have encountered while learning about design: Arngren.net.
What exactly is the primary design problem here? You might say there are problems with borders, white space, or other design mistakes. However, one of the core problems you might have yet to realize about this site is its scaling problem.
To explain why, consider this single listing from the page above.
It may have a few design issues, but it’s not that bad of a listing. Yet, when hundreds of similar cards clutter a page, problems arise — what we’d term a scaling issue.
Here are some of the more common scaling issues that designers may run into:
Designing with high-quality images: If you design an item with a high-quality image that takes up to 5 MB, then loading 100 results forces users to download 500 MB of data on page load. This results in slow page loads and likely user abandonment
Designing with lots of white space: If one result is perfectly centered to be readable, it might turn out that you can't fit that many items on the page
Using a non-scalable design element: Using fancier design patterns such as cards may result in far fewer things fitting on the page
So, what should you do if you're running into scaling issues with your design? There are two primary strategies: either you introduce breakpoints like pagination or infinite scroll, or you work to simplify design components.
Pagination, infinite scrolling, and breaking things into little chunks
One of the most common strategies to address scaling issues is to create breakpoints through pagination or infinite scrolling. I've discussed using these strategies in a previous article, but I'll quickly summarize how to use each.
Infinite scrolling is for the 'browsing' mindset, such as with social media websites, where you're window shopping or not looking for anything. The most common type of design pattern for these is cards of varying sorts.
Pagination, on the other hand, is for the 'buying' mindset, where you're looking for something more specific, and it's often used in conjunction with search bars or filters.
However, there are some cases where neither of these strategies are suitable. This can be the case with more complex domains, where the user mainly uses this page for a complete summary.
For example, imagine you're a doctor just starting their shift and want to quickly glance over your patient's conditions to check how they're doing.
Wouldn't it suck to be the 11th patient, stuck behind pagination or the infinite scroll breakpoint? This was part of the problem I was running into.
Users wanted a quick summary of everything at once, which is a more common problem than you realize. From system administrators wanting to check all servers are up, medical professionals wanting a quick condition check, or businesses wanting to check that all packages were shipped, this sort of quick summary on one page is more common than you think.
This is when the other strategy, simplifying design elements and filtering, can be more effective.
Understanding how to provide an information overview
One of the ideas that helped me design for scaling is Ben Shneiderman's Information-seeking mantra:
Overview
Zoom & Filter
Details on Demand
This is how users seek out relevant information, and this idea helps to understand what you can simplify with this strategy. In this case, the idea is to provide an overview of as many items as possible, with the understanding that users can explore further.
In our example of our doctor coming on shift, we don't need to provide them with a complete patient history on one page: we can't anyway. But that's okay.
All the doctor wants to know, at first glance, is two things:
What is the current condition of each patient?
Has anything changed?
If they need to dig deeper to uncover why, that might be a separate page they can look at later. However, what you need to provide is a simple summary.
This usually takes the form of a table, but it only sometimes needs to: sometimes, other patterns like cards may be helpful, as long as you follow the guidelines below.
Here's how to do that.
Prioritize the Search Bar Over Navigation:
Search and Navigation are often considered two sides of the same coin, but search takes top priority when simplifying items. The reason is simple: if pagination (and infinite scrolling) are navigation patterns, then simplified design elements are search patterns.
The auto-complete pattern, in particular, can be instrumental in these cases. This allows users to immediately filter to what they need.
However, search alone cannot guide users, especially if users are uncertain about what they can search by. This is why we need to combine it with a simplified design element.
Provide just enough information with your design element
One of the things you must remember when designing for scale is that you don't have to tell your user everything; in fact, you really shouldn't.
All you need to do is answer three questions:
What's the (patient/server/package/etc.) current status?
Has anything changed?
Where can I go to learn more?
As a result, each element can be as simple as three elements:
A status indicator (Critical)
A way to show recent changes (Text fields explaining changes in condition)
A way to guide users to learn more (Doctors can either click on the patient name or go to the room number bolded below)
While it may seem super simple, remember that the point of this is that users often do not see just one item; they often see dozens or hundreds of them.
One special note I'll make is that you should ensure these statuses are accessible to all users. Statuses are often shown in red or green, often unreadable to those with red-green color blindness.
Two common solutions to address this are:
Use symbols or text with color indicators: Transforming a green light into a green badge labeled "Up" or with a checkmark next to it can help make these statuses readable
Use different Secondary Colors: While green may be (mostly) universal, red may not always be the best color for a problem. According to ISO guidelines, other colors may be used (like dark orange), depending on the severity of the issue.
Lastly, there's one other consideration to make.
Provide filters or use metadata to improve the user experience:
Providing multiple ways to search or filter, such as through status tags, names, or other fields, can aid the searching experience.
For example, if doctors can't remember if Mr. Smith has Colitis or Ulcerative colitis, adding metadata associated with a particular design element can help users search for better information.
The user quote which changed how I think about scalable designs
Sometimes, you hear insights from users that completely change how you think about something.
The user quote got me thinking about scalable designs was one of those. A user said, "When I'm first looking at the charts, I first want to check if the patient's dying or okay. After that, I want to see what's changed?"
The funny thing was the user wasn't a doctor. He was a former IT engineer talking about Network Monitoring and checking the network's health. Yet, I could easily see parallels between these and other complex fields.
Considering your design scale isn't the first thing that comes to mind, but it's a critical skill if you work in complex or B2B fields. When your customer isn't a user concerned about one package but a business that wants to monitor hundreds of shipments, scaling designs play a large part in creating a great product.
So whether you want to be a more well-rounded designer or want to work in lucrative but complex fields such as health tech, think about the scaling of your designs a little bit more.
The solution to all your problems is simplifying what you have instead of over-complicating it.
Kai Wong is a Senior Product Designer, Data-Informed Design Author, and Top Design Writer on Medium. His new free book, The Resilient UX Professional, provides real-world advice to get your first UX job and advance your UX career.
This is a good read. Thank you for writing.