+
Amazon Guide
Prototyping 1 @ ArtCenter: Concept Project
Reimagining and coding a new way to search products when shopping online.
Nowadays, people get stuck in the decision-making process because there are thousands of possible products they can buy in each category.
The new recommendation feature gives users suggestions on the best products in each category based on their needs and use case. Something like filters, but much more powerful, delightful, human, and free.
The goal was to blend the new functionality into the current Amazon native app, looking like a real feature through understanding the way Amazon uses design styles, components, flows, sizes, etc. because their design system is not publicly accessible.
Researched, designed and prototyped the feature using HTML, CSS/Tailwind, and JavaScript.
Reimagining and coding a new way to search products when shopping online.
Nowadays, people get stuck in the decision-making process because there are thousands of possible products they can buy in each category.
The new recommendation feature gives users suggestions on the best products in each category based on their needs and use case. Something like filters, but much more powerful, delightful, human, and free.
The goal was to blend the new functionality into the current Amazon native app, looking like a real feature through understanding the way Amazon uses design styles, components, flows, sizes, etc. because their design system is not publicly accessible.
Researched, designed and prototyped the feature using HTML, CSS/Tailwind, and JavaScript.
Video recording of a prototype made using HTML, CSS/Tailwind and JavaScript. Prototype showcases native mobile app version but is running in a browser.
Project Process

I made archetypes showcasing needs, goals and user stories of different groups of people.

Tech Savy
— Wants to filter based on deep technical specifications
— Is overloaded by the amount of possible options
— Wants to see options even out of filter scope
— Wants to get recommendation on different aspects
— Wants to watch videos and read professional reviews
Busy Family Guy
— Wants to see different price ranges
— Doesn’t have time to do research
— Wants to filter based on features
— Wants to see different price range options
— Wants to be able to see alternatives of recommended options
Retired Person
— Wants to filter based on job a product does for them
— Doesn’t know much about features
— Wants to explore different functionality
— Wants to get more info about specific steps in the flow when getting lost
— Wants to get one recommended option

To define the features and understand the flow, and all the specific components I need I’ve created a sitemap.

Afterwards, I’ve created wireframes to define specific pages and be alligned on the content.

Based on wireframes, I started ideating on the layouts, visual hierarchy and the way I communicate different information. The focus was to strictly follow all the guidelines of Amazon in terms of margins, components use, colours, etc.

To test those ideas I’ve created interactive prototype in Figma using variants, properties, nested instances and booleans.

Lastly, I spent time recreating the prototype into a browser using HTML, CSS/Tailwind, and a bit of JavaScript.

Jakub Zegzulka

Digital Product Designer

Portfolio
LinkedIn