1. PREPARATION AND SCOPE
Type of project: Group project
Role: UX Designer
- Adobe Illustrator
- Adobe Photoshop
- user journey map
- user flow
- user testing
Improve "Account Set Up" Flow
Add "Products to Cart" Flow
Show "Error in Payout" Flow
Analysis of Current Amazon Website
Navigation bar is very cluttered. There are many categories which many customers do not use at all.
The drop down menu is one of the examples of poor information architecture. Only two sections with many links.
I don't like how long Amazon’s account current drop down menu is and would never go through all the content. I'd prefer more sections to organize information on current Amazon website.
Filters on the side on current amazon website are “a lot and overwhelming”. User needs to know what is hidden behind each of the filters name.
After choosing each filter, the page is refined, but if the results don't match users' expectations s/he is forced to go back and forth.
I don't like how much scrolling is involved on the side filters panel of the current Amazon website.
I am not able to refine my search easily and do not know which category I am in on Amazon. The most frustrating part is that I am unsure if all the filters I applied changed my results.
Early Stage Ideas
After inspecting the condition of current Amazon website and creating the SWOT Analysis, my group ran an initial brainstorming session. It helped us
better understand what direction we wanted to go, form some early stage ideas and prepare questions for our surveys.
During a brainstorming session we came up with some ideas that could help improve user experience:
- personalizing account
- adding more local store feeling to Amazon website
- supporting local/small businesses
- building network/community within Amazon to let the users see the reviews posted by people they know or influencers
they follow instead of reading random feedback
During our initial interviews (6 people) we were able to find following
- Clicking "Prime / 1-Day" checkbox doesn’t properly filter products available for the next day
- The need to remember to click "1-Day Shipping" option at checkout page is frustrating
- Time-consuming to type the name of specific products in the search bar (lack of img search)
- Many people were not aware of hidden features within users' account
- Not intuitive filters / Too many options to select from
- Items on "Wishlist" don’t have the priority feature
- Help / Support - almost impossible to find contact information
- Orders / Subscriptions - they do not appear in chronological order
- Products sold by small local businesses are not visible
- Interviewees were concerned about quality of the products
- Some people don’t trust third-party sellers
Whiteboarding and Brainstorming
After thorough analysis of the current user flow and receiving feedback from the interviewees, we began brainstorming and thinking about potential solutions:
3. INFORMATION SYNTHESIS
Main Goals for Redesign:
We created our persona based on in-depth research and initial interviews with Amazon customers. Our persona reflects the behaviors and motivations of the users we were interviewing.
The next deliverable which gave us a deep understanding of social behavior of our targeted audience was the empathy map. We observed our interviewees during the initial meeting, listened to their responses, and noticed their reactions. It helped us a lot with creating a map that reflects the needs and frustrations of Amazon's clients.
4. CONCEPTS GENERATION
User Journey Map
Whiteboarding and creating a user journey map helped us with identifying the painful parts of the process and thinking about the opportunities. It was crucial for us to envision the whole process, to see where exactly the problem starts, in which stage of the process, and identify the best way to address the user needs.
Findings and Ideas for Solving the Problem
Make sure user is receiving a curated list of products which will be available on a desired day
Quick Filters (icons)
Icons which represent different features of a specific product, work as quick filters, without using text descriptions
Interface free of distractions that could pull the user away from shopping and checking out
Help / Support
Create a designated icon in the nav bar to let users find it easier
Introduce the feature of prioritizing the items on Wishlist to let others know what we want to receive in order of importance/most desirable
Subscriptions & Orders
Place the subscriptions and orders in chronological order - the most recent one at the top of the page
Make icons (like IMG search) more highlighted, intuitive, easy to find; add label
Small and local businesses
Support small businesses and show their products as an alternative; add tab at product page
5. INTERACTION VISUALIZATION
After creating maps and graphs and thinking through our strategy, it was time to start putting our ideas in the shapes of buttons, icons and other UI elements and create the first wireframes.
Low-Fidelity Paper Wireframes
Wireframes - Version A
Users who we tested Wireframe A with:
- were confused by Sign Up / Sign In not being in Nav bar
- liked the layout of the wireframe more than current Amazon website
- would not want to prioritize importance on the Wishlist page and would probably not use the feature even with iterations
- foresaw it being difficult using "Image Search" on desktop
- would like more category suggestions for items that they were not familiar with
- said that filters helped with categories they were not familiar with
- would like to know what filters were applied to help refine search
- would prefer an “Advanced” filter option, if they needed to refine search more
- pointed that "Add to Cart" button was not clear
- noticed that "Local/Small Business Seller" button was too large and took hierarchy
- would only like to see if there is an option to buy a product locally later in the process (ie. before checkout, but not on product page)
- pointed that having all the information on one page (cart contents, delivery address, payment info, billing address, etc.) would be too busy
- wanted breadcrumbs
- highlighted that the "Security" icon was too big and distracting
Wireframes - Version B
Users who we tested Wireframe B with:
- were more likely to sign up after they invested some time (e.g. on research, etc.)
- were not interested in the features like Amazon Spark (they took too much space)
- wanted less clutter on filter side panel
- liked less clutter on "Search Results" page
- would like more interactive search bar - getting better suggestions in terms of category
- wanted to know in which category they were at the moment
- pointed that search bar needed to be bigger
- wanted to have more information about the product at product page
- would never use metrics like 391 out of 420 ppl to help make their mind
- liked cart and checkout pages - they made sense to them
- didn’t need an img search on their desktop
Comparison Between Version A and Version B
In the version A users liked
- the search feature - top icons
- visual aesthetics of layout - was cleaner
In the version B users preferred
- sign up process - was very easy
- functionality ( filtering, checkout process, components)
I'd like more category suggestions for items that I am not familiar with.
It would be great if less scrolling is involved (more condensed and concise information).
I wouldn’t press sign up button. I will probably first find product and then sign up.
Users are more likely to sign up after they invested some time e.g. on research etc.
Homepage with clean and decluttered interface. Nav Bar containing only most important categories.
Your account tab with drop down menu divided into sections
Distinguished 'Lists' tab where user can easily find desired subcategories
Huge search bar with adequate categories suggestions
Results page where user can select preferable date of delivery and use quick filters
Results page with easy to modify view of the results
Product page with an accordion - product description
Product page where reviews filters are utilized
Product page with uncovered product description accordion
Cart page with minimalistic design, and 'return to shopping' cta
Screens with two call to action buttons and summary of the order
Short & sweet screen with 'create an account' form
Checkout page 1/3 with shipping details
Checkout page 2/3 showing payment method
Checkout page 2/3 with useful checkbox
Checkout page 2/3 showing error message
Checkout page 3/3 with 'place order' cta and confirmation
High-fidelity prototype was created after couple of iterations. We utilized users feedback and changed the parts in the previous versions of our wireframes, which weren’t intuitive / effective enough. In the final version of the prototype we wanted to make sure that users are not taking any unnecessary steps towards checking out and placing the order.
After utilizing all of the findings from A/B testing and creating screens for high-fidelity prototypes, we tested them to make sure that user flows are seamless and users' needs are addressed adequately.
“All of the filters on the prototype seem to be applicable and make sense. It looks pretty streamline. I like it”
8. REFINING AND REPEATING
Amazon Redesign project was a huge learning for me. I learned a lot about conducting interviews and usability testings but also expanded my knowledge in the area of e-commerce industry.
One of the most important things I discovered was to be customer-centric in my redesign approach, many times ask "Why" and don't necessarily trust my gut.
I've also learned that testing everything helped us a lot with making sure that our redesign had an optimal impact not only on business but also on customer experience.