Case study

FireOS

FLUID design system

The Challenge

Kindle Fire was first released in November 2011; along with it came FireOS, a custom version of Google's Android operating system. FireOS continued to evolve over the new few years to allow customers to enjoy books and social media, and streaming services.

With the release of Android's Lollipop, we looked to leverage its redesigned user interface and updated design language known as Material Design, which was made to retain a paper-like feel to the interface.

The Approach

Amazon began referring to the Android derivative as Fire OS with its third iteration of Fire tablets.

  • A home screen with a traditional application grid
  • Utilize pages for content types in place of the carousel interface
  • Parental controls for a child-safe section—Kindle FreeTime

With Android Lollipop and Material Design readily available, we began exploring a fresh approach to a design system for FireOS, known as FLUID.


What I did

  • UI design
  • Design strategy
  • Design systems
  • Visual QA


01.

Ever Evolving

Typography at scale

In previous releases of FireOS, Amazon was licensing fonts like Helvetica to be used within the software. With the latest FireOS 5, we were able to package our latest brand addition—Amazon Ember.

Adding Ember to our updated design system allowed greater control over the end-to-end look of the FireOS components and templates. It helped start the move towards a truly unified ecosystem for Amazon.

Testing assumptions

While FireOS 5 brought a new refresh to the Fire Tablet family, we continued to think about the next iteration. And with Android continuing to have its own treat-themed releases, those updates offered new ways for Amazon to advance FireOS.

After the success of FireOS 5, we looked to give our customers greater access to not only media, but Amazon's online e-commerce site. While it did add several new channels to the tablet, it came with pain points of ever-evolving template layouts to accommodate new content.

In 2020, after countless hours of research and user studies, we found that the channels previously sectioned out to help with shopping, media, and owned content wasn't allowing our customers to immerse themselves in the software. So, we consolidated the channels into three sections.

  • For You: A section to promote suggested content and the latest news and weather.
  • Home: With an app grid, helping customers quickly return to their latest book or show.
  • Library: Allowing an easy all-in-one showcase of owned content.

02.

System Adoption

Less Is More

Over the years, the design language for FireOS has attempted to present itself as a standalone operating system. With the underlying software—Android—evolving over the years, the continued effort to customize components to make them more "Amazonian" has become increasingly difficult due to AOSP locking down areas of the OS. As an effort over the last year, we have explored the option to let Android and Google's Material Design play in our favor. By only updating the color palette, type ramp, and icons to align to the Amazon design language, the Android UI can provide the Amazon customer a smoother experience end-to-end.

Get in touch

Do amazing products excite you just as much as me? Reach out


more case studies

Unfold

Graphic Design | The journal project to inspire and extend. 12 individuals with infinite possibilities.

Read more

Alexa

Product Design | How we set a new course for the design of a companion app for Amazon's Echo product line.

Read more