Design System Considerations for Achieving Cohesion on Multiple Devices

Published in

The Reason Beings

13 min readMay 12, 2020

Acclimation and scanning patterns for Desktop, Mobile, Self-Service Devices — Human figure illustration provided by FreePik.com, display examples by author.

At what point will this topic begin to emerge?

Complexities of multi-platform experiences need to take into account several factors both INSIDE and OUTSIDE the systems itself. A design system is a living, breathing product that should establish a proper baseline for building experiences with enough flexibility to evolve as business needs change & target persona behaviors shift. Design coherently, but continue to optimize for the specific device, persona type, and environment.

“Design coherently, but continue to optimize for the specific device, persona type, and environment.”

There are plenty of useful articles and perspectives out there on the technicalities of physically creating design systems and guidelines(check additional resources below), & the value of them, but few, I found, that ascend beyond the needs of web & mobile experiences and address the sensitivities needed for wider system cohesion.

As a design system needs grow to support an expanded product ecosystem, you may start to hear comment such as, “Just use the same components for all platforms!”, or “Responsive should solve it, right?” or even… “It’s easy, we can just override the xyz class”. For the intent of the article, I will begin diving into strategies for managing and evolving the system to support common patterns on varying devices along with evolving needs of the target audiences involved.

Real world examples

To more strongly convey the context, take into the account the following solutions below that demonstrate optimizations for multi-tasking.

Spotify’s Normal Mode vs. Car Mode (Above)
The layout adjusts during car movement and optimizes when the user is performing multiple activities in a given time. In this case, such as driving and playing music where the distance from the device has increased from normal viewing. The elements remain the same, but layout, sizing, spacing increase while content that is exposed is reduced.

Patient Monitoring Example
Nurse Practitioners or Doctors can toggle between views and tasks of the system, walk away and manage a patient while still being able to view vital information from several feet/meters away. Menu options are located at the bottom of the interface and viewable at arms length, but key data points are legible from across the room.

Self-Service Checkouts for Grocery and Convenience Stores

Self-service checkout
Main calls to action are in the center of the screen in oversized text to accommodate viewing distance from the screen. Menu is on the bottom for user-types with limited mobility. This is another example of optimizing the experience with the hardware for multi-tasking (scanning groceries, entering in item codes, swiping loyalty cards and credit cards, bagging groceries, etc.). Not every detail of the scanned item is needed on the screen, just necessary information such as: produce weight, item name, quantity, pricing, & discounts.

Credit: https://www.soyacincau.com/2017/10/26/mcdonalds-rolls-out-self-service-kiosks-in-malaysia/

Self-service ordering
Menu items are offered in the middle key viewing area, cart information and call-to-actions are located in a convenient location at the bottom for limited mobility. In this example, a touch pad is added at the bottom for those in a wheelchair or limited arm mobility. Image and text are scaled to accommodate the viewing distance from further away from the screen. Notice the top region is only used for branding, imagery, instruction, and notifications…limited to minimal to no interactions.

ATM
ATM experience transaction times are typically between 1–2 minutes max for common tasks. Customers are there for a specific purpose, then they get on with their day. For this experience to be optimized, less is more with the key components centralized on the display for optimum lighting and visibility. Careful considerations are made for hit state sizing, font sizing, and clear call-to-actions allow fast acclimation and sets clear expectations on what action is required, with the ability to make corrections.

Point-of-Sale
For cashiers, the ability to maintain conversation and eye contact with customers is part of the overall in-store customer experience. Point-of-sale systems have to be fast. Common actions have to be available at a single touch, and often have added peripherals such as scanners, external keypad, and customer displays to assist in speeding up the transaction.

The overall layout has to be optimized for viewing information at various distances, and offer quick inputs to short cut the transaction (notice quick cash options). As a power user, a cashier doesn’t really need to see the interface if using external peripherals, but if they do, only the options needed at that moment in the experience are visible, with the ability to self correct.

For a design system, many elements can be reused here, and some components, but new components, such as a persistent receipt (a.k.a. electronic journal, ledger, etc.), keypad configurations, produce weight display, system messaging & alerts, etc. have to be designed and tested. New configurations also emerge that are optimized for the various business segments user requirements and require shifts to visual hierarchy.

“You don’t know…until you know.”

Device comparison matrix

In the below matrix, take note of the variations in viewing distance, inputs, lighting, behaviors, environment, data entry and consumption for each of the devices. As you can quickly see, it would be rather difficult to create a high performing design that could respond effectively to all the various situations. The baseline design system and guidelines at the core can be shared, but consider branches that might offer device best practices, and demonstrate recommended components & configurations that are optimized for the specific device and persona type.

For example, you may use the same button styles, cards, header bars, but overall layouts, positioning, scaling, font sizing, icons and color could change depending the factors below. Those adjustments need to be available, properly managed and clearly conveyed to users of the design system or you will indeed see unexpected liberties taken.

Matrix for quick comparison of various platforms

“…adjustments need to be available, properly managed and clearly conveyed to users of the design system or you will indeed see unexpected liberties taken.”

Design sensitivities

Acclimation
There is a limited timeframe for the intended audience to acclimate to the system. In self-service, users acclimate and approach the system from a distance assessing the layout from the center out, up, and around to the bottom (see illustration below). For web & mobile, the standard behavior is to read the layout left to right & top to bottom for Western regions, right to left & top to bottom for Eastern regions.

Human figure illustration provided by FreePik.com, display examples by author.

Distance
Size of text should scale when viewing distance from screen increases. Size and spacing of key elements in proportion to distance from screen play a huge role as well. In situations where the intended user performs a task, than has to perform another task away from the screen, this adjustment is critical to make it usable. Check out a good resource on type sizes for multiple devices here.

Credit: Angular Resolution diagram from article https://www.uxmatters.com/mt/archives/2015/09/type-sizes-for-every-device.php

Hit Areas
A typical web application is able to use tighter hit areas due to mouse (or pen pad) interactions. When it comes to mobile, tablet, & self-service displays, that hit area & padding around objects must increase due to touch. Even more challenging is, applications that require maintaining eye contact with customers or requiring users to be farther distances from the screen to perform other task(s) such as those employees fulfilling customer curbside pick-up orders in Retail and Hospitality. Those hit areas and padding have to increase to minimize errors (consider Fitt’s Law). The potential for accuracy declines unless adjustment are made. Think about trying to hit a bullseye with a bow and arrow from a 5 feet/meter versus 70 feet/meters.

Hardware Sensitivity
Not every touchpoint is a personal device. Fleets of hardware that are already in the field often have challenges related to calibration declining, slower processing speeds, input devices not as sensitive, displays with lower resolutions and luminosity. How do you gracefully degrade or accommodate these situations? Design with a bit more forgiveness with these constraints in mind.

Design with a bit more forgiveness with these constraints in mind.

Credit: https://www.yvr.ca/en/blog/2019/using-technology-to-handle-record-growth-effectively

Device Resolutions
Responsive, adaptive, fluid design all have contributed to excellent solutions. However, when an application has persona needs that vary on each device, specific optimizations must be tailored for those platforms. We had a business case where stakeholders requested a “Responsive UI” for a Point-of-Sale system that could scale on varying standard and widescreen displays, but also had to adjust for commercial mobile devices. From a human-centered perspective, the target user carrying the mobile device did not need all the many functions & some of the interaction models had to adapt to expectation for that device’s OS. In those cases, we built designs that stretched and scaled responsively for larger display sizes (Standard, Widescreen), and configurations optimized for the vertical. For mobile, we used expected native components, leveraged native tabs for views needed when performing key tasks, and carried over the flows to perform the task, along with cohesive language, options, & styles.

Environment
External factors can have a large effect on usability. Discovery and awareness of those conditions can inform design decision making that optimizes for those influences. Varying lighting conditions throughout the day such as natural sun, glare, low light, etc. can effect visibility for devices installed in specific locations. Harsh weather conditions such as intense sun, snow, rain can also disrupt usability by leaving residue, dust and oils on the display that reduce visibility and touch sensitivity.

Safety & security also becomes a factor when the interactions requires displaying sensitive information as in ATM’s, or payment transaction for Food Ordering.

Maintenance of the devices can be inconsistent pending traffic, schedule, vendor and can cause struggles in usability if the calibration is inaccurate or input devices are unresponsive.

Persona Needs
Know your key personas, and know them well. For example, a self-service consumer is typically interacting with the system in a public location, has a limited time to acclimate in order to perform the desired task, so the path should be to the point and options streamlined.

A power user on the other hand will have varying requirements with access to larger data sets and functionalities. They spend more time with the system so the desire to explore and discover new features increases and are more likely to take multiple paths to complete tasks based on personal preferences. Criss-crossing those needs will generate less than desirable results.

Photo by National Cancer Institute on Unsplash

Accessibility
There are several accessibility factors that should be monitored allowing increased usability for all. Considerations such as displays that adjust to accommodate multiple heights from those in wheelchairs to those that are taller than average. Limited mobility requires interaction regions to be at least below 2/3 line of the display, or provide handicap UI modes. Multiple inputs also assist for those with limited mobility including: voice, track pad, keypad, or even the use of their own device. Screens should be optimized for the visually impaired (including those with color blindness) by increasing text sizing and at least WCAG AA if not AAA contrast ratios (more here). Audio cues combined with keypad/pin pad also help in conveying screen content and interactive options available.

Content Strategy
More often than not, content is not thought about until later in the process which leads to overrides or rework. The team should be consistently asking the following types of questions: What types of content should the design system support and where? Imagery with text? Educational content? Instructional tutorials? Onboarding with illustrations and simple messaging? Headlines only? 20 data points to display or thousands? What is the minimum and the maximum character counts for the components? How can a card adjust to account for additional data points or an extra button?

Driving design system adoption for success

Establish design system principles for focus & guide decision making for all stakeholders.
Audit the go-to-market products in the portfolio and build a matrix to clearly convey overlaps and divergences. Prioritize common patterns, and most poorly performing ones.
Not only provide guidelines, elements and components, but take it a step further and show examples of recommended templates and variations for each platform. As they are migrated, begin to show examples of actual products in use leveraging recommendations. Remember, this system isn’t just for designers, it’s also for developers, product managers, product owners, even marketers. They have to clearly understand how everything should be working together. Without UX direction, they will inevitably and unintentionally sway.
Identify tested & established UX patterns for reusability.
Define regions unique for each platform, but allow flexibility to adapt as needs shift based on distance, usage, environment.
Centralize user testing results that drove decision making. Take it even further and create an organized UX Research system that works for your organization needs.
Create transparent, centralized roadmaps and backlogs.
Quality assurance automation is becoming an increasingly popular way to quickly recreate and identify issues on various hardware/software combos prior to release.
Work with your teams on ROI calculations to demonstrate value. We could dive into this with much more granularity, but for the sake of this article we should keep it brief. On a general level, these could be production time comparisons that show a reduction to implementation. This could be report comparisons monitoring reduction in experience errors in call center reports, or through analytics with increases in conversions or even reduction in time to conversion. The team can leverage UX research to establish baseline audits to compare to the adjusted solution. Net Promoter Score (NPS) are influenced by many factors and sometimes take more time to see shifts since these are sent to customers 2–4 x a year, but these can be leveraged in scores and comments that point to ease of use. A scoring system that will be interesting to monitor adoption of is User Zoom’s qzScore.

Alignment needs for maintaining and scaling

CTO & Executive Support
There must be alignments in limiting the presentation layer technology company-wide. Phasing out technical debt and aligning skills, resources across the organization is imperative for success. For example, having to create and monitor performance for varying templates for each presentation layer technology such as React, Angular, Swift, Objective C, etc. causes excessive work and unnecessary redundancy. If there needs to be an improvement to a component or steps in the experience, that multiplies the work.

Collaboration
Close collaboration with all stakeholders is critical across key disciplines such as: Solution Architects, Engineering, Product Management, UX Research, Analytics, Product Designers, Marketing, Customer Service, Design System Team and of course, sponsoring Executives. Build relationships, empathize not only with the target personas, but your stakeholder as well.

Research
Lead with what components and UX patterns consistently perform the best, be open to ongoing iterations, and identify in which other similar products they can and should be reused. Centralize test results for transparency justifying design decision making and prioritization’s. Continuously ask & monitor with the entire product team & target audience, what still needs improvements? Mitigate assumptions.

Product Team Commitments
Help establish a transition plan from legacy to scaleable, manageable experiences that (and this is critical to take into account) don’t drastically disrupt current customers mental models. Ease them into updates so it’s not so overwhelming.

Redundancy
Initially focus on the overlaps (80/20 rule) by creating product landscape audit and matrix to determine where the system is today, identify similar persona types across the various touchpoints. Experience gaps and business opportunities will begin to quickly emerge. Prioritize the most widely used and critical patterns to more rapidly initiate the largest impact.

Communication
Channels are mandatory for review, feedback, and updates. Less is more, as managing several channels is time consuming and communications (and history) can easily slip through the cracks and are hard to find later. Pick 3 to 4 key channels max the team can consistently use and track communications. It may be email, slack, your project management tool, or a design review tool. Set structure and boundaries on which comm tools to use for which style of communication.

Project Management
This is key for creating prioritization's, managing backlogs, & holding the teams accountable for promised deliveries and release dates.

Tools
This is a whole other topic in itself, but alignment on critical design tools such as Sketch, Figma, Adobe XD, InVision, Axure, Omnigraffle, Mural, etc. create more efficiencies with dispersed teams by streamlining onboarding, file sharing, file management, versioning, shared design system libraries and setting team expectations on expected deliverables. Pick tools that the teams will be comfortable with for at least a couple years, that streamline workflows, and that won’t lose momentum anytime soon. It’s costly to train & migrate larger teams to new tools. Make sure it makes sense, improves workflows and is not simply jumping on the next “cool shiny new tool” bandwagon.

“Make sure (the tool) makes sense, improves workflows and is not simply jumping on the next “cool shiny new tool” bandwagon.”

Check your lens

Check your lens periodically to determine performance, efficiencies, and changes in behaviors. As design systems mature, it’s important for the teams to understand the various devices and experiences in the product landscape.

Strong collaboration is needed with the design system team and product design leads that are embedded in product teams. Not all elements, components, configurations, and patterns work well for those changing conditions, so continue to explore, test, learn in order to provide the strategic guidance to the teams the design system is intended to support.