Design 101

Editorial website design

IA, Sketching, Wireframing, Branding, Visual Design, Motion

Design 101 is a new editorial franchise from Amazon Home that provides our customers design, home improvement, and styling info and advice for a variety of home projects. This approachable “design basics” content is tip/solution focused, empowering customers to improve their homes while expanding their home design knowledge.

View the experience here >

Screen Shot 2021-09-10 at 10.02.18 AM.png

Problem statement

Customers are inundated with home products on Amazon, but don’t know where to get basic information on how to design around different spaces within their home.

How might we build trust with Amazon customers about interior design basics when they are considering a home product purchase?

Understanding the information artchitecture

I created a site map in Figma to understand the hierarchy and plan how many pages will be needed for this campaign. I needed to create a landing page, 8 sub category pages, and 25 article pages which was already predetermined by the Content Team.

Here’s the customer flow chart built in Miro showing the journey from ingress to purchase. I’ve also added 3 phases to showcasing discovery, inspiration, shop and purchase.

I quickly iterated on wireframes using pen and paper. Below are desktop and mobile wireframes for the landing page and subcateogry pages.

I created mid-fidelity wireframes in Figma to visually and clearly communicate where blocks of information will live.

Integrating Visual Design

Working directly with our Art Director, I helped to brainstorm and create a design system which includes the logo lockup, typography, color palette, design elements, illustrations, and photography direction.

Screen Shot 2021-09-10 at 2.17.32 PM.png

Screen Shot 2021-09-10 at 2.18.02 PM.png

Screen Shot 2021-09-10 at 2.18.20 PM.png

Screen Shot 2021-09-10 at 2.18.27 PM.png

Screen Shot 2021-09-10 at 2.18.36 PM.png

Screen Shot 2021-09-10 at 2.18.44 PM.png

Screen Shot 2021-09-10 at 2.18.50 PM.png

Screen Shot 2021-09-10 at 2.18.56 PM.png

Screen Shot 2021-09-10 at 2.19.07 PM.png

[BTCLOD.COM]-[CUTTER]-Design 101 Perfect Pairings 2020-480P.gif

A little movement

I also collaborated with a motion designer to bring movement to our social campaigns. The idea was to make the motion feel authentic, playful, and natural. Here’s an example of the intro slide for Instagram.

The results

Design 101 launched successfully which included a landing page, and 8 subcategory pages, and 25 article pages, with multiple ongoing social campaigns. Here is a video capture of the live site. You can view the live campaign on www.amazon.com/design101 and Amazon Home’s Instagram page for the full experience.