Being responsive - from a checklist to a BINGO card
22 June 2020
Responsive design is only somewhat responsive....
When we talk about responsive design, we have a spectrum of devices in mind: screen size, platform, and orientation. We design for specific breakpoints so that content responds according to the device’s width, allowing us to provide users with the best possible layout. To track our progress, we use a checklist.
But is the device the only variable we should be designing around? Age-responsive design suggests to also adapt the design to the users’ needs, preferences, and possible limitations based on age. For example, video content and bright colors are recommended for children, while text-based information and muted shades are recommended for elderly people. Although age-responsive design is barely practiced, the underlying message is important: users are as diverse as the devices they use.
[Insert important user differences]-responsive design
I recently designed a user management feature for Trustpilot’s business app. The purpose of the feature was to help business users manage who has access to their company’s Trustpilot business account, and what level of access they have based on their roles/responsibilities.
For our first iteration, we built a table with an overview of the existing business users and a CTA inviting the user to add more teammates. Clicking on the button would open a modal with a form asking the user to provide the new teammate’s email, role, and a domain list representing the different markets or shops of the company.
Then we tested our prototype on users:
“That number of domains doesn’t tell me much,” one user pointed out. He was looking for the list of markets or shops instead of domains. While a dropdown seemed fine to cover the extreme cases of companies owning hundreds of domains, data indicated most of Trustpilot’s customers only have one domain. With a better understanding of our diverse user base, we turned to the concept of age-responsive design as inspiration and tailored the experience for different users instead of designing a generic solution for all.
Just like the spectrum of age, Trustpilot’s business users are different in ways that are significant for how we should design solutions for them, e.g., the number of domains they own. With this in mind, we were able to see if the design was inconvenient anywhere, and we could make tweaks accordingly. We ended up with 2 breakpoints:
Hello BINGO format
By indicating different design solutions via breakpoints we empowered ourselves to design a great experience for our diverse user base. And by adding an axis for devices, we moved from a checklist to a matrix:
User axis
Fields 1 through 3 represent breakpoints, or design variations, from the perspective of users. Each type of user has their own desktop version — small business users, medium business users, and enterprise/agency users (with many domains).
Device axis
Each vertical column represents a traditional way of thinking about the responsive design. Here’s an example of moving through different resolutions from the perspective of a small company:
BINGO format beyond design phase
Once the designer is finished designing, we’re never really done contributing to the final result. Developers come with questions, and sometimes ad-hoc tweaks are inevitable simply because we forget to think through important user differences. Fortunately, BINGO format helps during the development phase as well! It provides a more structured way to identify design variations and reduces the number of questions or problems later. This way, your team can deliver the best experience for your users faster.
Ready to complete the card?
Use this framework to empower your team and you so you can approach responsive design in a more structured and holistic way. Create a superior design that quickly meets the needs of your diverse user base.
Interested in working with Diginow? Drop us a line at hello@diginow.co.uk.
We are a Creative Web Design Agency based in London & Leicester, specialising in Bespoke Website Design, Web Development, Branding and Digital Marketing.