Better performance = better design
It’s a Tuesday night, and you decide to relax with a movie. You find the movie on the big smart tv, accept the credit card charge to rent it for 48hrs, microwave some popcorn, and settle in to watch it from the comfort of your couch.
You really like the protagonist’s sunglasses and wonder what they are. A quick search reveals the brand and where to buy them. You head to the brand website and add them to the cart… but the cart process is slow and clunky; everything takes forever to load… there are lots of spinners, and the forms are SO complicated. You give up and return to your movie, and the sunglasses company loses a customer.
Cloud products have a massive influence on how we interact with the world today — with a few clicks, today’s connected consumers can have goods or services delivered to their doorstep.
Users are accustomed to having what they want, when they want, and they’re getting more impatient with apps or services that fail to deliver on our expectations.
Here at Atlassian, millions of users use our products — like Jira Cloud — to move fast, stay aligned, and build better together. We are constantly innovating to ensure the performance matches our users' expectations.
The real competition
Our users won’t compare Jira against our competitors but against the applications they use the most. This creates new expectations for performance that, if we miss, frustrates our users and can affect our products’ success.
Users become more demanding and unhappy with every second they wait, and according to Zendesk, 95% of them don’t hesitate to share that online.
Performance must be part of any new digital product. The problem is: performance is usually an afterthought and a technical issue that needs to be resolved by developers.
But better performance can also be a better design, and we can create more performant experiences for our users.
How can we use design to increase performance?
Design can add to the performance by increasing our products’ usability and understanding how users feel about the experience.
Usability focus on the effectiveness, efficiency, and overall satisfaction of using a system or product.
Two of the five UPPer (User Perceived Performance) principles bring usability to our design decisions.
When we minimize the interaction cost, provide accelerators, get customers out of errors, and ensure that we’re considering the whole end-to-end journey, we increase efficiency and lower errors.
When we use familiar patterns, present the most needed information right then and there, and make intelligent choices for customers, we’re increasing learnability, memorability, and efficiency.
Applying those principles allows us to make our users feel the product is faster and that they can accomplish much more with less, increasing their satisfaction.
How do we measure how users perceive our products’ performance?
Measuring perceived performance is complex, but we can use some proxies to understand the user experience.
For the web in general, Google created some metrics that we can use to measure the quality of the user’s experience. They’re classified in:
- Loading speed
- Responsiveness
- Visual stability
Load metrics measure how the user experiences the load of a page. Responsiveness is how snappy a page is when they interact with it, and visual stability is how stable the rendering of the page feels.
These metrics can be found in Lighthouse and are industry-standard for understanding web app performance (see them at the end of the article).
UPPer metrics
UPPer stands for User Perceived Performance, representing a shift in Atlassian’s way of measuring the quality of our user’s experience.
UPPer metrics are a way to measure performance in a user flow instead of a single page or experience.
User flows are a series of steps or actions a user needs to do to accomplish their goal, which can happen on page load or in a SPA (Single page application) transition.
For each step of the flow, we capture values for each metric, allowing us to infer the user’s experience.
UPPer design principles
Perceived performance is not only a set of metrics, though. Designers can use UPPer principles to take design decisions from the start, which increases the likelihood of the experience being perceived as fast by the user.
As you can see, most principles are related to usability and efficiency.
These principles are an extension of Atlassian Design Principles and can help designers to have performance in mind when creating new and exciting features.
When designers apply those principles and track the metrics here described, we're creating user experiences with a performance mindset.
How can you apply those to your work?
When creating new experiences, think about performance during the whole design process.
Performance-oriented design is a culture we create when interacting with different roles during a project.
- Work with PMs to minimize a feature’s initial footprint through thoughtful reductions.
- Work with Engineers to understand the cost of an operation and feature scalability.
- Work with Researchers to ensure we’re observing the correct performance metrics.
- Work with Analysts to define and measure the common customer path.
Extend and adapt the principles to your product
Extend UPPer principles to adapt them to your product’s needs, remix them, and make them your own.
Principles are not static, they evolve and adapt.
Have a performance mindset, and your designs will reflect that, having a massive influence on how your users interact with the world today and in the future.
UPPer Metrics in detail
There are the metrics we're using to measure the perceived performance of our products. They're based on Google's web performance metrics, with the addition of ICR, an Atlassian innovation (more on this soon).
- FCP (First contentful paint) [ Loading speed ]
- FMP (First Meaningful Paint) [ Loading speed ]
- TTFB (Time To First Byte) [ Loading speed ]
- FID (First Input Delay) [ Loading speed ]
- LCP (Largest Contentful Paint) [ Loading speed, visual stability ]
- SI (Speed Index) [ Loading speed ]
- CLS (Cummulative Layout Shift) [ Visual stability ]
- TBT (Total Blocking Time) [ Responsiveness ]
- TTI (Time To Interactive) [ Responsiveness ]
- INP (Interaction to Next Paint) [ Responsiveness ]
- ICR (Interaction to Complete Result — Atlassian) [ Responsiveness ]
