Amazon Brand Portal
2017
Amazon comprises a diverse range of smaller “companies,” each with unique customer segments and brand standards. Without a centralized hub for brand guidance, brand owners (before 2018) had to track down assets, guidelines, Q&As, and points of contact through various channels, emails, and file sharing. It was an inefficient and confusing process that led to inconsistency and poor judgments.
Version control was a nightmare when brand owners and partners relied on email file attachments, which led to the spread of outdated content.
A centralized hub for brand guidelines was required to lessen frustrations and give all brand marketers and designers a trustworthy source of truth and one-stop brand management.
Each Amazon brand operates in a different customer market at a different pace of growth. Therefore, the brand guidelines are at various stages of brand maturity and need. The image above shows the table of contents from two brand guidelines (PDFs) to illustrate the content gaps between brands and how each brand structured its content differently. The brand portal design has to be a flexible workhorse that can work well with various states of long-form content.
The combination of top and side navigations is the ideal structure to house the different depths of content needed across brands. Most brand guidelines can be parsed into three top-nav categories while fitting high-level information into the home landing page. The site can comfortably have up to six top navigation links.
The side-nav can display three tiers of navigational links. The first and second-tier links are links to pages and sub-pages, and the third-tier links are anchor links within the page. Different brand guidelines necessitate the use of all three levels of navigation. This exercise examines which side-nav systems look and work best for different brands and portal users.
After the title, the content on the site should lead with an image. When the guideline leads with an image before a variable body copy length, this design tenet helps readers absorb the content more effectively by connecting the headline with a visual. Since all the pre-existing brand guidelines (PDFs) are built differently, this content reconstruction of the hierarchy for consistency is required but pretty straightforward.
This exercise explores the optimal placement of the long-form body on the screen. While most people are accustomed to a left-aligned body because the content is neatly tucked together, having right-side content offsetting the left-aligned headlines has its benefits. It is consistent with the above-mentioned design tenet: show it before discussing it. More importantly, scanning for blocks of information and earmark labels becomes more effortless since it utilizes negative space to break up large bodies of content.
The brand portal is designed to be a workhorse that democratizes design, making it accessible to all Amazon brand owners. With Wagtail CMS, brand owners can quickly add content with a variety of content blocks and tools, giving them seamless control over their brand guidelines with zero coding. The utilitarian design of the portal allows the brand owners to build guideline pages without asking them to rethink their assets. This low friction boosts site adoption for owners and shortens their page-building timeline. Predefined templates ensure any content published looks consistently well presented across brands.
Brand owners can effortlessly insert the download module anywhere and repurpose it across pages and sites. I designed the download module for high visibility and easy stacking. Cover art thumbnails and descriptions inform the users of its content.
Clicking on a color swatch in the palette module brings up a full flood of color to better assess a color’s presence. To the left of the palette are selectable color formulas, as well as a convenient WCAG tracker to ensure that color contrast is easily accessible.
To be the single source of truth, the adoption of other brands is critical. The design is intended to be a workhouse for brand guidelines with a low barrier of entry for Amazon’s “startup-like” brands. Every brand has a different level of maturity and creative resources. Therefore, it's wise to approach the portal design in a more democratic manner, moving away from the "coffee table book" approach that other large brands have the capacity for. The brand portal aims to strike a balance between flexibility and protective guardrails that are beneficial to both brand owners and creators.
Global brand stakeholders at Amazon and their cross-organization partners don't have to worry about outdated content resurfacing because they have a centralized hub for brand guidance and assets. They can focus on collaborating, unblocking creativity, and improving efficiency.
Credits • Content by the respective Amazon brand parties • Dev John Leonard and team