top of page
Header Picture.png
image3.png

Not Amazon Redesign 

Collaborators: UX/UI: Sammie Phung, UX/UI: Marlo Silvestro, UX/UI: Diego Stevens

Project Length: 3 Weeks

Year: 2021

Task: Redesign the Not Amazon site

Tools: Figma, Zoom, Trello, Google Workspace, Miro,Github

Overview

 The Challenge 

Small businesses are struggling to compete with the convenience that e-commerce provides. This struggle has severely worsened as a result of Covid-19 business closures. The mission of Not Amazon is to close this gap by cataloging what products local businesses have available to remind consumers that Amazon is not their only option. However, they are currently limited by a lack of usability and poor interface design.

 Solution 

In this project, we were focused on making it easier and more compelling for users to use the site. Our main focus is to achieve the following:


● Repurposing the search engine of the site
(product first)
● Improve usability
● Improve design and layout
● Implement e-commerce

Our Procces

Screenshot (164).png

Empathize

 Proto-Persona 

Proto-Person.png

 Survey Data 

Screenshot (171).png
Screenshot (169).png
Screenshot (168).png
Screenshot (170).png

The goal of our survey was to find out how users shop online and how they supported local business pre-pandemic and during the pandemic.

 

We received 24 responses. From the data, we found that a combined 83% of people shopped local between once a week to once a month before the pandemic. Due to the pandemic, 83% of people have reduced the frequency of local shopping mainly due to lack of convince.

 Competitive Analysis 

Our purpose with the analysis was to see what our competitors strengths and weaknesses are, so we could see where an advantage for Not Amazon would be.

Screenshot (172).png

Non-Amazon direct competitors

Screenshot (173).png

Non-Amazon indirect competitors

 Usability Test Plan 

We tested 3 individuals. We first asked the user about their current shopping habits for both local and big box stores. 

Next we asked the user to complete the shopping process on any site they felt comfortable with, communicating any comments of their experiences.

Following that, we asked them to recreate that process on the Not Amazon site.

 Affinity Diagram 

Users felt the main issue was the search function of the site need to be repurposed and improved upon, to search for products instead of stores. The organization and hierarchy needed to be fixed on the site as well seeing that a search function was not present on the homepage and the featured section showcased products, whereas search results showed shops. All users felt the site was blog-ish and girly in layout.

Utilizing the positives and negatives of their online shopping experiences and the insight on not amazon we crafted our key features to prioritize.

Final Group - Affinity Diagram .jpg

 User Persona 

User Persona.png

Based on our user research and findings we were able to create our user persona which allows us to centralize the key pain points and needs of our end users.

Definition & Ideation

 Problem Statment 

Not Amazon was a website designed to bring the convenience of shopping locally to the online space, but we have found that it lacks the functionality and organization to do so efficiently. We have observed that many consumers would like to support their local businesses, but either lacks knowledge of existing stores online or finds it inconvenient to purchase from the ones they do know about.

We believe that a homegrown platform like Not Amazon can act as such a product if it becomes a marketplace strictly for local businesses. We might do this by revising the user flow so that the user searches are organized by product description, rather than searching for stores, as it is currently.

 Feature Prioritization Matrix 

Screenshot (176).png

We used this prioritization matrix to extrapolate from our user research to what features will provide the most value in relation to what made the most sense to implement. We concluded that working on a search bar on the homepage, building and standardizing a purchasing process as well as making the language sound more professional would be our top priorities.

 Storyboard 

Screenshot (177).png

Our storyboard is used to put ourselves in our users shoes. It starts with our user wanting to support local businesses because of the struggles caused by Covid-19 and hearing about Not Amazon yet failing to find it useful due to the lack of functionality and confusing layout. She ultimately leaves the site, but regains interest after she learns about the site update. She decides to give it a go again, and ultimately has a successful experience purchasing products.

 Original Website User Flow 

image1.png
image1.png

1. Splash Page 
Opens Pop Up

2. Homepage

image1.png

3. Store Results Page  
Opens In a New Window

image1.png

4. Store Results Page 
By Category 

image1.png
image2.png

5. Store Profile 
Opens Overlay 

6. Store Website
Opens In a New Window
Purchase Through Site 

New User Flow 

Product Purchase User Flow.png
Product Purchase User Flow.png

In our new user flow, the user starts at 

​

  1. The homepage utilizes a search bar to search for a product, which will be filtered by the city

  2. Users then have options to filter their products more specifically

  3. After a product has been selected and added to the cart the user has the option to continue shopping

  4. Once the user is ready to finalize the transaction they will experience a standard checkout flow where they input their information and receive confirmation of the purchase

 Lo-Fi Wireframes 

Homepage.png
Search Results.png
Product Page.png

 Establishing Design Patterns 

Finally, we established design patterns (a.k.a. component libraries) to create prototypes by compiling components and maintaining consistent visual language throughout the screens. 

​

  • The typography was chosen to give a strong, fresh, and modern feel to the redesign

  • The colors were the representation of a bright beautiful sunsets on the beaches something that continues the theme of freshness

  • The images were decided upon because we wanted to keep it modern but also stay true to the small business idea of Not Amazon, so we took some of the cleanest pictures from the site to help us expand upon them

Style Guide.png

Prototype & Testing 

 User Testing Plan 

Goal: To complete the homepage to confirmation email flow

​

Scenario/Steps:

​

You are looking to purchase a product from a local business that you like and want to complete the processes.  

  1. Search for item 

  2. Select a product that you like 

  3. Read and the description and reviews of the product 

  4. Add item to cart 

  5. Proceed with buying item 

  6. Checkout with item 

  7. Receive confirmation item and return to homepage

Screenshot (178).png

 Hi-Fi Prototype 

1. Homepage

image3.png

2. Product Search Page

image1.png

3. Product Page 

image2.png

5. Product Page 
With Product Added to Cart

4. Product Page  
Added to Cart - Pop Up  

Product Page - Cart Added.png
Product Page - Cart Added 2.png

6. Your Cart Page 

Cart.png

7. Checkout Page

Checkout.png

8. Confimation Page

Confirmation.png

 Front-End Development 

 Link to Live Github Prototype 

image1.png

As our design got feedback and improvements, so did our front-end development through internal testing and quality assurance. 

Takeaways & Next Steps 

Overall, we have learned that in order to accomplish a quality resedign, it’s more than just layouts and wireframes that everyone sees. Although that’s a big part, it requires many tasks beforehand. These tasks aid in the crafting of the app's purpose and a true understanding of the users. Also, this process has shown me that user feedback at all stages is one of the most important things to do. It provides you with a new perspective and informative insight that leads to better iterations of the app.

​

Our Next Steps are to build out the rest of features for the website:

  • Log in experience with personal profiles

  • Sorting filters, organize by stores

  • Store profile pages

bottom of page