Designing a Universal App
What we learned and why it’s changed how we design at Capital One
Last year, a specialized team was formed with the sole responsibility of making Capital One’s flagship app work for both iPhone and iPad. We launched our Universal iOS app this past March, and it’s shifted our design priorities and mindset, and allows us to get new features to our customers much more quickly. I want to boil down the nine months we spent working on this and share the benefits and core concepts of a Universal app from a design perspective.
A while back, websites were designed for desktop computers. When people started viewing webpages on mobile phones a push to make them more mobile-friendly gained traction. The first iteration was to create separate mobile versions of the desktop sites, which proved to be cumbersome for the consumer, and responsive web was born to address that complexity.
More recently, similar problems existed between apps for iPhone and iPad. Apps for iPhone and iPad started out as standalone apps—an app made for the iPhone wasn’t designed with the iPad’s larger screen size in mind. If developers supported the iPad app version, they usually rolled it out with a separate app.
That all changed when Apple introduced Adaptive Layout, making Universal app development easier. Today, most apps released to the App Store are Universal apps designed for varied Apple device screen sizes.
Why Did Capital One go Universal?
The universal version of Capital One’s flagship app was not a redesign in the traditional sense. At first glance, it may seem that not much changed compared to the pre-Universal app. The transformation happened behind the scenes with a restructuring of the code.
A lot of upfront work went into re-platforming the entire app, and rigid frameworks were replaced by modular, adaptive layouts.
How This Shift Impacts the Organization
From a business standpoint, building from a Universal app reduces overall development time and allows us to ship features more quickly. We’re also much better prepared for future iOS device sizes.
In the past, we developed new features for the iPhone first due to the higher usage verses the iPad. With a Universal app, we’re no longer in the device-priority mindset; features are designed and developed with adaptive layout. Our customers are assured that they’ll get feature parity no matter the device chosen.
Benefits for Our Customers
Another reason to go Universal is that it allows users flexibility for the layout to adjust to Slide Over and Split View multitasking scenarios—like when looking up their credit score while checking an account balance.
Impact on the Design Process
Going universal has affected how we design in Sketch. We pulled together all the different view hierarchies and created universal design templates for every Apple device screen size and various multitasking scenarios, helping us identify the break points.
Adaptive UI
There are many ingredients that go into making a Universal app, but the special sauce is Adaptive UI. Understanding Adaptive UI’s core concepts have direct influence on how we design in Sketch.
1. Size Classes
If you’ve ever built a browser-based front-end webpage using CSS, media queries will be familiar to you. You can define as many break points as you like, based on whether you want to support mobile phone, phablet, tablet, and/or desktop.
With iOS however, there are only TWO break points—Apple calls them Compact and Regular size classes. Compact size class is associated with constrained space and Regular size class with expansive space.
(And because height is almost always Regular and most apps don’t support iPhone landscape, I’m just going to refer to the width size class going forward.)
Here’s looking at size class layout across different devices and various multitasking scenarios. See a pattern? There are still only two size classes.
2. Auto Layout
The second concept in Adaptive UI is Auto Layout, which defines the user interface using a series of constraints. While size class represent the amount of content that can be displayed in a horizontal or vertical space, constraints deal with the spacing between individual elements within that layout.
Below is a screenshot in Xcode for adding constraints to an element.
And we design layout with these constraints in mind.
In Designing for Your Universal App, Consider the Following:
- How does the layout differ in various device sizes?
- Do you want to support landscape and portrait?
- Are there any special cases in multitasking to account for?
If you’re interested in learning more about Adaptive UI, Apple has an incredible library of resources from their WWDC sessions.
Adaptive UI
https://developer.apple.com/design/adaptivity/
Optimizing your app for multitasking on iOS
https://developer.apple.com/videos/play/wwdc2015/212/
Making Apps Adaptive Part 1
https://developer.apple.com/videos/play/wwdc2016/222/
Making Apps Adaptive Part 2
https://developer.apple.com/videos/play/wwdc2016/233/
Into this stuff? We’re hiring! Check out ONE Design’s open positions here.
Unless noted otherwise in this post, Capital One is not affiliated with, nor is it endorsed by, any of the companies mentioned. All trademarks and other intellectual property used or displayed are the ownership of their respective owners.
