The 8 levels of focus for building successful products

When your focus changes — the details, problems, and challenges will change along with it.

Powers of Ten.

In the Ray and Charles Eames film Powers of Ten, it begins with a shot of a man sleeping on a rug viewed from one meter away. The view moves out — revealing the city, the Earth, our galaxy until it reaches the edge of the known universe. Then it zooms all the way back in to show the cells on his skin, moving in even further to finally end inside a proton of a carbon atom.

The film highlights the power of changing focus. When your level of focus changes, the details, problems, and challenges will change along with it.

This same concept can also apply to the world of product design.

Designers need to zoom in and out of different levels of focus when designing a product. Abbey Covert refers to this in her lecture How to make sense of any mess as ‘applying different lenses’. This lecture inspired my teammate Timothy Greig and I to better define and document the different levels we find ourselves navigating day to day —

To create a successful product it’s important to understand each level and be able to effortlessly move between them.

If you’re only looking at the bigger picture, you’ll miss small details causing the issues. If you’re only focused on the small details you won’t see how the work you’re doing fits into the greater system and strategy.

Each is level interconnected, and each contributes to the overall success of the product. You need to see the forest and the trees.

↑↑↑↑ Ecosystem

The wider world that your product inhabits

Understand: Customers will always experience your product in the context of the world around them. The things that influence this environment are often completely outside of your control. Consider —

• Other products, services, companies or manufacturers — How might Google services work with Apple devices?
• Laws and government — How do city zoning rules interact with the emerging demand for co-living and accommodation? How can autonomous driving negotiate with current legislation?
• Different industries — Finance, insurance, travel, and technology. Is there a governing body in charge or do these self-regulate?
• Global trends or events — How might advances in human longevity affect the health insurance industry? How will the Covid-19 pandemic change the sharing economy?
• Your own products — How do the other products you offer in your company work together?

Design: You’ll design a product that fits into the everyday life of your customers, alongside the other products and services they interact with. Research into the wider ecosystem will help inform your overall product vision and strategy.

Outcome: This will help you make sense of the direction your product is going and identify new opportunity areas for you to expand into.

↑↑↑ System

The conceptual model of your product that you articulate to customers.

How do all the parts of the product work together? An articulation of the system we created at SafetyCulture.

Understand: Here you’re designing a high-level conceptual plan for how the product works together as a whole system. This plan should reflect your customer’s processes and support their expectations about how your product will solve their problem.

“Oh, so this is like WhatsApp right?” — The user will interact with your product with the expectations of how a chat behaves.

Design: Strive for the best possible match between the user’s expectations and the conceptual model that you’re presenting. Conduct user research about —

• The outcomes they’re trying to achieve (aka the jobs to be done).
• The problems they’re trying to solve.
• What they’re currently doing to solve it (other tools, methods, hacks).

Outcome: A system that helps users achieve their goals in a way that makes sense to them. Having this foundation will help your product be easily understood and fit in seamlessly with the customer’s expectations. This forms the building blocks of the structure.

↑↑ Structure

How the product is structured in a tangible way to support the conceptual model.

Information architecture — The structure and grouping of content.

Understand: Across the platform, you’re designing how you’ll organise features and content in a way that supports your plan for the system.

• What does the user think they’ll be able to do within each section of the product?
• Where are they expecting to find the information they need?
• Is there functionality you need to make available on some channels and not others?

Design: While there is still no specific interface design at this point, you’ll be defining your:

• Channel strategy — Consistent, continuous, complementary ecosystems.
• Information architecture — The structure and grouping of content. It’s all in the right place to support those key tasks and journeys.
• Terminology — Words that make sense to the user.
• Content strategy — The guiding concepts or rules for what type of content appears on what page.

Ensure you’re basing this on a strong understanding of the key tasks that matter to your customers. It is essential to test and iterate as you go to uncover the best approach — at this resolution try tree testing, card sorting, or modeling real content.

Outcome: The individual parts of your product or platform have the right functionality, terminology, and content. These all support the conceptual model, are recognisable and set up logical expectations for the user.

↑ — ↓ Journey

It’s here that we’re designing flows, not screens. The user’s journey sits at the heart of the scale.

Airbnb’s illustrated Storyboard

Understand:

• What are the current steps in the process that the user takes?
• What is the end goal the user is trying to achieve with this journey?
• What is the ideal flow when using your product?
• What are the online and/or offline behaviours that need to happen?
• What are the opportunities, emotions, expectations, touchpoints at each step?

Design: You’ll create a visualisation of the stages that a customer moves through to achieve a task (not a specific solution for the interface). These can be expressed through different artifacts and used throughout the different resolutions to inform decisions.

1. High-level journeys:

• Journey maps — Map out the end to end experience based on research, highlighting opportunities to improve, their emotions, and needs.
• Storyboards — Visually tell the story of the customer’s problem and how your product will solve it. Show the ideal future experience.
• Service blueprints — Map the actions and systems required ‘backstage’ in order to deliver the desired customer-facing experience.

2. Specific user-level journeys:

• Task maps — The high-level steps a user takes to complete a single task, without guidance or prompts.
• User flows — Documenting the steps involved in a specific process, highlighting what they see, their available decisions and what they do.

The outcome: Teams and stakeholders will have a shared understanding of the customer’s needs and problems, and how your product will solve them. These artifacts will inform decisions both up and down the resolutions.

↓ Location

Key moments of your product are experienced by users in real locations and situations.

What are the real contextual factors at play?

Understand: To create an effective experience you need to understand the different contextual factors at play. This will influence and inform your design decisions when creating an interface. Consider the following:

• What platform is being used? — App, mobile web, email, desktop.
• What is their physical environment? — An office, a building site, an unfamiliar city.
• What is their emotional or situational state? — Stressed, tired, gloves, low lighting, no internet access.

Design: Find the most effective way to help the customer achieve their task using the nuances of their contextual situation. Some examples include:

• Wearing protective gloves — Provide alternative interactions beyond the touch screen. Use hardware buttons or voice to text commands.
• Use in low light or full sun — Create stronger contrast ratios, allow for dark or light mode.
• Low internet coverage — Simplified UI and page loads. Only the necessities.

Outcome: A thorough understanding of context will allow you to create a product that fits into their everyday life. This will inform the design of an interface that is respectful and relevant to the context in which your customers actually use it.

↓↓ Interface

The arrangement of different interactions on a screen to form the interface.

Example: An interface from Airbnb. Here the user will make a decision about what to do next in order to achieve their goal.

Understand: The interface should be arranged in a way that is selective and harmonious. It’s from here that the user will be making a decision about what to do next in order to achieve their goal. Consider for your user:

• What are the core tasks they’re trying to achieve with this interface?
• What’s the relative priority of these tasks?
• How does that priority change throughout their experience?
• What are the common interface patterns they already use?

Design:

• Use familiar patterns — This will help them recognise how the interface might behave.
• Progressively reveal functionality — Don’t overwhelm the user with information that’s not relevant yet. Reveal crucial information just when it's needed.
• Use realistic customer content — Build and test with content that makes sense to the user.

Outcome: An interface that allows users to understand what it does and how to start using it. It has all the right bits (and no more) to help them achieve what they want to do.

↓ Interaction

The specific steps a user takes to accomplish a key task within an interface.

The user has now made a choice from the interface, and they’re interacting with the product.

Understand: You’ve come all this way, don’t fail on the last few hurdles! You must consider the little, often overlooked, usability details that make each interaction achievable. Without them the user won’t be able to complete the task — your interface has made a false promise.

Design: Once you start unpacking the intricacies of an interaction, there are many details to consider:

• Leverage familiarity — Use interactions that are in your product already or ones that are in other products popular with your users.
• Perceived affordances — The function of something should be easily determined at a glance by its appearance.
• Mitigate for errors & edge cases — Help people avoid errors altogether, rather than having to recover from them later.
• Feedback, system state & responses — Use loading states, motion, colour or sound to acknowledge an action taken and reflects what is currently happening.

Outcome: Well designed interactions across your whole product will add up to the overall impression of the product. Is it enjoyable to use? Do I trust the product? Poorly designed interactions will make your users feel dumb. Never make them feel that way.

Object

A reusable component guided by set standards and used to assemble together a number of interactions or interfaces.

Breaking apart the individual elements to their base objects.

Understand: Singular ‘objects’ form the basic building blocks of any interaction or interface. These need to be consistent across your product so that it’s easier for users to recognise what different elements will do. You’re building a visual language for your product.

Design: The tiny details of the individual elements. This includes icons, grids, layouts, buttons, illustrations, colours, micro-interactions and more. Let’s use a button as an example, consider the following:

• Type — Primary / secondary / tertiary.
• Availability — Active and disabled states.
• Interaction states — Default, hovered, pressed, clicked, focused.
• Microcopy — Sentence case / Title Case / lower case / ALL CAPS.
• Touchpoint — An accessible size to press for the user’s context.
• Positioning — Side in which the primary button sits next to the secondary.
• Padding — The spacing around the text inside the button.

Outcome: Defining and standardising these components in a design system, will bring consistency to your product, and reduce the cognitive load for your users. Pre-defined design patterns will also save time for designers and developers when building the product.

If you’d like to chat, reach out to me on Twitter. Or you can follow me on Medium for more. Related read — Understanding mental and conceptual models in product design