top
Amazon
Amazon
Improving user experience engagement with website by 51% in a faster and easier purchasing experience through a redesigned process of user research and testing
Improving user experience engagement with website by 51% in a faster and easier purchasing experience through a redesigned process of user research and testing
Improving user experience engagement with website by 51% in a faster and easier purchasing experience through a redesigned process of user research and testing
My Role
My Role
As the sole UX researcher and UX/UI designer during the time frame of 12 weeks, I had identify the problems and challenges that has arise and opportunities for to improve the overall user experience.
As the sole UX researcher and UX/UI designer during the time frame of 12 weeks, I had identify the problems and challenges that has arise and opportunities for to improve the overall user experience.
Time frame
12 Weeks (Mar 2024 - Jun 2024)
Field of Work
UX/UI Design, Website Design
Research Method
Research Method
Usability Testing, Design Processes,
Usability Testing, Design Processes,
Platform
Platform
Desktop
Desktop
Time frame
12 Weeks (Mar 2024 - Jun 2024)
Field of Work
UX/UI Design, Website Design
User Research
User Research
Usability Testing
Usability Testing
User Flow
User Flow
Wireframing
Wireframing
Prototyping
Prototyping
UX/UI Redesign
UX/UI Redesign
Here is a link to a video mock up I have created! (SPOILERS: JUST A MOTION TEMPLATE I HAD FOUND TO USE USED)
Here is a link to a video mock up I have created! (SPOILERS: JUST A MOTION TEMPLATE I HAD FOUND TO USE USED)
Note: You can view the 'Before' and After of the web design here! Please use full screen for a bigger view!
Note: You can view the 'Before' and After of the web design here!
Please use full screen for a bigger view!
Note: You can view the 'Before' and After of the web design here! Please use full screen for a bigger view!
Project Overview
Project Overview
Project Overview
Amazon is an American multinational corporation and technology company focusing on e-commerce, cloud computing, online advertising, digital streaming, and artificial intelligence. Their platform provides customers with a seamless online shopping experience, featuring personalized recommendations, competitive pricing, and convenient delivery options.
Amazon is an American multinational corporation and technology company focusing on e-commerce, cloud computing, online advertising, digital streaming, and artificial intelligence. Their platform provides customers with a seamless online shopping experience, featuring personalized recommendations, competitive pricing, and convenient delivery options.
So what is wrong with Amazon?
So what is wrong with Amazon?
Amazon's website is a platform that should provide a seamless and simple online shopping experience for people around the world. However, key problems have yet to be resolved, and a solution has yet to be provided.
Amazon's website is a platform that should provide a seamless and simple online shopping experience for people around the world. However, key problems have yet to be resolved, and a solution has yet to be provided.
What do I want to achieve out of this project?
What do I want to achieve out of this project?
Simplified Online Shopping Experience
To redesign the online shopping experience to be much simpler and easier for users worldwide to utilise Amazon.
Simplified Online Shopping Experience
To redesign the online shopping experience to be much simpler and easier for users worldwide to utilise Amazon.
Enhanced Navigational Efficiency
To improve the efficiency of users' navigational experience to prevent unnecessary errors and increase engagement.
Enhanced Navigational Efficiency
To improve the efficiency of users' navigational experience to prevent unnecessary errors and increase engagement.
Challenges that I have encountered
Challenges that I have encountered
Challenges that I have encountered
1
Alignment Issues
Excessive information disrupts the alignment of elements like title, price, and rating.
Alignment Issues
Excessive information disrupts the alignment of elements like title, price, and rating.
2
Visual Hierarchy Confusion
Overwhelming UX layout causes confusion within the visual hierarchy as to where to look first.
Visual Hierarchy Confusion
Overwhelming UX layout causes confusion within the visual hierarchy as to where to look first.
3
Obscured Product Information
Unnecessary context obscures product specs and functionality.
Obscured Product Information
Unnecessary context obscures product specs and functionality.
4
Lengthy Checkout Process
The checkout process is lengthy and goes below the fold.
Lengthy Checkout Process
The checkout process is lengthy and goes below the fold.
5
Confusing 'Offer' Step
An 'Offer' step, promoting membership, can confuse users during product purchase.
Confusing 'Offer' Step
An 'Offer' step, promoting membership, can confuse users during product purchase.
So I asked myself…..
So I asked myself…..
"How might we be able to redesign and enhance the users' online shopping experience so they can navigate the platform simpler and easier?"
"How might we be able to redesign and enhance the users' online shopping experience so they can navigate the platform simpler and easier?"
In order to find out…
In order to find out…
In order to find out…
Where redesign improvements are mostly needed, I had conducted various testing methods and giving various tasks to complete so that I could get some results that would prove the areas that required improvements to be done. Some usability testing I had conducted includes:
Where redesign improvements are mostly needed, I had conducted various testing methods and giving various tasks to complete so that I could get some results that would prove the areas that required improvements to be done. Some usability testing I had conducted includes:
First Click Test
Due to the website's layout is cluttered with too much text and many images. I wanted to track user clicks to see how they navigate to a specific location on the site.
First Click Test
Due to the website's layout is cluttered with too much text and many images. I wanted to track user clicks to see how they navigate to a specific location on the site.
First Click Test
Due to the website's layout is cluttered with too much text and many images. I wanted to track user clicks to see how they navigate to a specific location on the site.
Tree Testing
Numerous duplicate options in the navigation bar and hamburger menu, I decided to test how well users navigate Amazon based on specific questions. Incorrectly used keywords add to the confusion, reducing user engagement.
Tree Testing
Numerous duplicate options in the navigation bar and hamburger menu, I decided to test how well users navigate Amazon based on specific questions. Incorrectly used keywords add to the confusion, reducing user engagement.
Tree Testing
Numerous duplicate options in the navigation bar and hamburger menu, I decided to test how well users navigate Amazon based on specific questions. Incorrectly used keywords add to the confusion, reducing user engagement.
5 Seconds Test
Due to excessive text in product titles, descriptions, and misaligned images, I tested users' memory of specific information. This will help improve usability elements based on what users can actually remember.
5 Seconds Test
Due to excessive text in product titles, descriptions, and misaligned images, I tested users' memory of specific information. This will help improve usability elements based on what users can actually remember.
Usability Testing - Participatory
Creating a practical experience for participants by giving them a random scenario without prior context. This approach helps me observe how they navigate the site, their choices, and their thought process.
Usability Testing - Participatory
Creating a practical experience for participants by giving them a random scenario without prior context. This approach helps me observe how they navigate the site, their choices, and their thought process.
Note: These are some questions from each of my research methods I conducted to gain results from users!
Note: These are some questions from each of my research methods
I conducted to gain results from users!
Time to showcase some more research processes to do
Time to showcase some more research processes to do
After a considerable amount of user testing having to be conducted and finding pain points based on the recorded statistics, I then worked through multiple activity processes to define:
What were the current problems.
Redefining what were the current features and ideas on the original design.
What should be changed in terms of UX and UI.
After a considerable amount of user testing having to be conducted and finding pain points based on the recorded statistics, I then worked through multiple activity processes to define:
What were the current problems.
Redefining what were the current features and ideas on the original design.
What should be changed in terms of UX and UI.
Prototype Fidelity Breakdown
These are some features that I have thought of to be implemented by breaking them down for a bit more clarify of the concept.
MOSCOW - (Must have, Should have, Could have and Would like but won't get.)
Here I have done the MoSCoW activity so that it can help me with clearly defining what needs to get done before the deadline to avoid unneccesary troubles. The timeframe/deadline for the creation of this solution will need to be done by the time it is WEEK 11
Forced Ranking
Here I have done some forced ranking for some features/idea with the highest score being the most important the lowest score being the least important.
UI Breakdown
Here I have done some UI Breakdown activity of some features/idea that I want to implement into my solution that could help contribute to the improvement of the webpage.
Prototype Fidelity Breakdown
These are some features that I have thought of to be implemented by breaking them down for a bit more clarify of the concept.
MOSCOW - (Must have, Should have, Could have and Would like but won't get.)
Here I have done the MoSCoW activity so that it can help me with clearly defining what needs to get done before the deadline to avoid unneccesary troubles. The timeframe/deadline for the creation of this solution will need to be done by the time it is WEEK 11
Forced Ranking
Here I have done some forced ranking for some features/idea with the highest score being the most important the lowest score being the least important.
UI Breakdown
Here I have done some UI Breakdown activity of some features/idea that I want to implement into my solution that could help contribute to the improvement of the webpage.
Prototype Fidelity Breakdown
These are some features that I have thought of to be implemented by breaking them down for a bit more clarify of the concept.
MOSCOW - (Must have, Should have, Could have and Would like but won't get.)
Here I have done the MoSCoW activity so that it can help me with clearly defining what needs to get done before the deadline to avoid unneccesary troubles. The timeframe/deadline for the creation of this solution will need to be done by the time it is WEEK 11
Forced Ranking
Here I have done some forced ranking for some features/idea with the highest score being the most important the lowest score being the least important.
UI Breakdown
Here I have done some UI Breakdown activity of some features/idea that I want to implement into my solution that could help contribute to the improvement of the webpage.
Prototype Fidelity Breakdown
These are some features that I have thought of to be implemented by breaking them down for a bit more clarify of the concept.
MOSCOW - (Must have, Should have, Could have and Would like but won't get.)
Here I have done the MoSCoW activity so that it can help me with clearly defining what needs to get done before the deadline to avoid unneccesary troubles. The timeframe/deadline for the creation of this solution will need to be done by the time it is WEEK 11
Forced Ranking
Here I have done some forced ranking for some features/idea with the highest score being the most important the lowest score being the least important.
UI Breakdown
Here I have done some UI Breakdown activity of some features/idea that I want to implement into my solution that could help contribute to the improvement of the webpage.
Prototype Fidelity Breakdown
These are some features that I have thought of to be implemented by breaking them down for a bit more clarify of the concept.
MOSCOW - (Must have, Should have, Could have and Would like but won't get.)
Here I have done the MoSCoW activity so that it can help me with clearly defining what needs to get done before the deadline to avoid unneccesary troubles. The timeframe/deadline for the creation of this solution will need to be done by the time it is WEEK 11
Forced Ranking
Here I have done some forced ranking for some features/idea with the highest score being the most important the lowest score being the least important.
UI Breakdown
Here I have done some UI Breakdown activity of some features/idea that I want to implement into my solution that could help contribute to the improvement of the webpage.
Now for the fun design process
Now for the fun design process
Now for the fun design process
Now that all the research and testing has been completed, I did some sketches by using the original design as an inspiration and then adding in my own improvements into the design so that I could 'redesign' the platform to potentially solve the users' current pain points.
Now that all the research and testing has been completed, I did some sketches by using the original design as an inspiration and then adding in my own improvements into the design so that I could 'redesign' the platform to potentially solve the users' current pain points.
Now that all the research and testing has been completed, I did some sketches by using the original design as an inspiration and then adding in my own improvements into the design so that I could 'redesign' the platform to potentially solve the users' current pain points.
Redesigned Amazon's Homepage
The amount of content displayed has been simplified to less the amount of unnecessary information being shown while adapting a more modern and cleaner aesthetic feel to the design.
The spacing between text has also been increased so that readability can be much more legible now for users who may have eye impairments, making it difficult for them to read.
View More
Redesigned Amazon's Homepage
The amount of content displayed has been simplified to less the amount of unnecessary information being shown while adapting a more modern and cleaner aesthetic feel to the design.
The spacing between text has also been increased so that readability can be much more legible now for users who may have eye impairments, making it difficult for them to read.
View More
Redesigned Amazon's Homepage
The amount of content displayed has been simplified to less the amount of unnecessary information being shown while adapting a more modern and cleaner aesthetic feel to the design.
The spacing between text has also been increased so that readability can be much more legible now for users who may have eye impairments, making it difficult for them to read.
View More
Redesigned Amazon's Homepage
The amount of content displayed has been simplified to less the amount of unnecessary information being shown while adapting a more modern and cleaner aesthetic feel to the design.
The spacing between text has also been increased so that readability can be much more legible now for users who may have eye impairments, making it difficult for them to read.
View More
Redesigned Amazon's Homepage
The amount of content displayed has been simplified to less the amount of unnecessary information being shown while adapting a more modern and cleaner aesthetic feel to the design.
The spacing between text has also been increased so that readability can be much more legible now for users who may have eye impairments, making it difficult for them to read.
View More
Redesigned Amazon's Homepage 'Below the fold'
By utilising the current layout of the categories such as "More Items to Consider" & "Ways to save and get more value on Amazon" it will make the layout a bit more intuitive for users previously navigate their way around below the fold of Amazon home page.
I had also incorporated a similar layout to Amazon previously so that it could display products within various categories so that it could be much more clear and detailed in terms of product info.
View More
Redesigned Amazon's Homepage 'Below the fold'
By utilising the current layout of the categories such as "More Items to Consider" & "Ways to save and get more value on Amazon" it will make the layout a bit more intuitive for users previously navigate their way around below the fold of Amazon home page.
I had also incorporated a similar layout to Amazon previously so that it could display products within various categories so that it could be much more clear and detailed in terms of product info.
View More
Redesigned Amazon's Homepage 'Below the fold'
By utilising the current layout of the categories such as "More Items to Consider" & "Ways to save and get more value on Amazon" it will make the layout a bit more intuitive for users previously navigate their way around below the fold of Amazon home page.
I had also incorporated a similar layout to Amazon previously so that it could display products within various categories so that it could be much more clear and detailed in terms of product info.
View More
Redesigned Amazon's Homepage 'Below the fold'
By utilising the current layout of the categories such as "More Items to Consider" & "Ways to save and get more value on Amazon" it will make the layout a bit more intuitive for users previously navigate their way around below the fold of Amazon home page.
I had also incorporated a similar layout to Amazon previously so that it could display products within various categories so that it could be much more clear and detailed in terms of product info.
View More
Redesigned Amazon's Homepage 'Below the fold'
By utilising the current layout of the categories such as "More Items to Consider" & "Ways to save and get more value on Amazon" it will make the layout a bit more intuitive for users previously navigate their way around below the fold of Amazon home page.
I had also incorporated a similar layout to Amazon previously so that it could display products within various categories so that it could be much more clear and detailed in terms of product info.
View More
Redesigned Amazon's category products page
On the category page displaying various products relevant to the chosen category, initially all filters on sidebar would be opened, filling the screen with tools users weren't going to use. I simplify this by closing all filters initially so that users won't need to go through the trouble of closing them themselves.
The filter sidebar would usually have options that wouldn't be used so often and they are scattered throughout without a clear organisation. This was fixed by placing the most often used filters at the top so that users won't have to go through the trouble of finding the right filters in the pool of irrelevant filter tools.
View More
Redesigned Amazon's category products page
On the category page displaying various products relevant to the chosen category, initially all filters on sidebar would be opened, filling the screen with tools users weren't going to use. I simplify this by closing all filters initially so that users won't need to go through the trouble of closing them themselves.
The filter sidebar would usually have options that wouldn't be used so often and they are scattered throughout without a clear organisation. This was fixed by placing the most often used filters at the top so that users won't have to go through the trouble of finding the right filters in the pool of irrelevant filter tools.
View More
Redesigned Amazon's category products page
On the category page displaying various products relevant to the chosen category, initially all filters on sidebar would be opened, filling the screen with tools users weren't going to use. I simplify this by closing all filters initially so that users won't need to go through the trouble of closing them themselves.
The filter sidebar would usually have options that wouldn't be used so often and they are scattered throughout without a clear organisation. This was fixed by placing the most often used filters at the top so that users won't have to go through the trouble of finding the right filters in the pool of irrelevant filter tools.
View More
Redesigned Amazon's category products page
On the category page displaying various products relevant to the chosen category, initially all filters on sidebar would be opened, filling the screen with tools users weren't going to use. I simplify this by closing all filters initially so that users won't need to go through the trouble of closing them themselves.
The filter sidebar would usually have options that wouldn't be used so often and they are scattered throughout without a clear organisation. This was fixed by placing the most often used filters at the top so that users won't have to go through the trouble of finding the right filters in the pool of irrelevant filter tools.
View More
Redesigned Amazon's category products page
On the category page displaying various products relevant to the chosen category, initially all filters on sidebar would be opened, filling the screen with tools users weren't going to use. I simplify this by closing all filters initially so that users won't need to go through the trouble of closing them themselves.
The filter sidebar would usually have options that wouldn't be used so often and they are scattered throughout without a clear organisation. This was fixed by placing the most often used filters at the top so that users won't have to go through the trouble of finding the right filters in the pool of irrelevant filter tools.
View More
Redesigned Amazon's direct product page
On the product page itself, I have rearranged the layout of the current product page so that I may be able to get the reader to view the webpage in a ‘F’ shape format and scanning rather than reading.
I have also sketched some CTA buttons for ‘Add to Cart’ and ‘Buy now’ to be closer to the product itself as in the previous design, there were 3 columns of content being display and the product being on the far left, and the buttons being on the far right. Having them next to each other makes it feel like the buttons are meant to be used for this product.
View More
Redesigned Amazon's direct product page
On the product page itself, I have rearranged the layout of the current product page so that I may be able to get the reader to view the webpage in a ‘F’ shape format and scanning rather than reading.
I have also sketched some CTA buttons for ‘Add to Cart’ and ‘Buy now’ to be closer to the product itself as in the previous design, there were 3 columns of content being display and the product being on the far left, and the buttons being on the far right. Having them next to each other makes it feel like the buttons are meant to be used for this product.
View More
Redesigned Amazon's direct product page
On the product page itself, I have rearranged the layout of the current product page so that I may be able to get the reader to view the webpage in a ‘F’ shape format and scanning rather than reading.
I have also sketched some CTA buttons for ‘Add to Cart’ and ‘Buy now’ to be closer to the product itself as in the previous design, there were 3 columns of content being display and the product being on the far left, and the buttons being on the far right. Having them next to each other makes it feel like the buttons are meant to be used for this product.
View More
Redesigned Amazon's direct product page
On the product page itself, I have rearranged the layout of the current product page so that I may be able to get the reader to view the webpage in a ‘F’ shape format and scanning rather than reading.
I have also sketched some CTA buttons for ‘Add to Cart’ and ‘Buy now’ to be closer to the product itself as in the previous design, there were 3 columns of content being display and the product being on the far left, and the buttons being on the far right. Having them next to each other makes it feel like the buttons are meant to be used for this product.
View More
Redesigned Amazon's direct product page
On the product page itself, I have rearranged the layout of the current product page so that I may be able to get the reader to view the webpage in a ‘F’ shape format and scanning rather than reading.
I have also sketched some CTA buttons for ‘Add to Cart’ and ‘Buy now’ to be closer to the product itself as in the previous design, there were 3 columns of content being display and the product being on the far left, and the buttons being on the far right. Having them next to each other makes it feel like the buttons are meant to be used for this product.
View More
When it comes to UI, a Style Guide definitely helps
When it comes to UI, a Style Guide definitely helps
For the style guide, I have chosen to use similar colour palettes that was used in the original design so that I can keep its originality within the redesigned website.
I have also created visual CTA buttons with a dark cyanish colour and a light brown colour for text when a convention or a option is highlighted with a hover effect.
For the style guide, I have chosen to use similar colour palettes that was used in the original design so that I can keep its originality within the redesigned website.
I have also created visual CTA buttons with a dark cyanish colour and a light brown colour for text when a convention or a option is highlighted with a hover effect.
For the style guide, I have chosen to use similar colour palettes that was used in the original design so that I can keep its originality within the redesigned website.
I have also created visual CTA buttons with a dark cyanish colour and a light brown colour for text when a convention or a option is highlighted with a hover effect.
Here are the final designs
Here are the final designs
Here are the final designs
After creating the style guide along with following my sketches as a guideline, I was able to create the final high fidelity design of the redesigned Amazon website which will help to solve the current pain points that are within the original Amazon website.
After creating the style guide along with following my sketches as a guideline, I was able to create the final high fidelity design of the redesigned Amazon website which will help to solve the current pain points that are within the original Amazon website.
After creating the style guide along with following my sketches as a guideline, I was able to create the final high fidelity design of the redesigned Amazon website which will help to solve the current pain points that are within the original Amazon website.
Amazon's Homepage
Here I have create a more simplified and condensed version of the website with significant less options in the navigation bar.
Below the navigation bar, I have include only the top 10 popular departments as it is more generally viewed by the user base to purchase products.
View More
Amazon's Homepage
Here I have create a more simplified and condensed version of the website with significant less options in the navigation bar.
Below the navigation bar, I have include only the top 10 popular departments as it is more generally viewed by the user base to purchase products.
View More
Amazon's Homepage
Here I have create a more simplified and condensed version of the website with significant less options in the navigation bar.
Below the navigation bar, I have include only the top 10 popular departments as it is more generally viewed by the user base to purchase products.
View More
Amazon's Homepage
Here I have create a more simplified and condensed version of the website with significant less options in the navigation bar.
Below the navigation bar, I have include only the top 10 popular departments as it is more generally viewed by the user base to purchase products.
View More
Amazon's Homepage
Here I have create a more simplified and condensed version of the website with significant less options in the navigation bar.
Below the navigation bar, I have include only the top 10 popular departments as it is more generally viewed by the user base to purchase products.
View More
Note: This is a Low Fidelity Design VS a High Fidelity Design
Note: This is a Low Fidelity Design VS a High Fidelity Design
Amazon's Category Products Page
When users click onto the electronic department from homepage to view more products, the page shows them a lot more different products such as monitors, phones, tablets, etc.
If users want to look more at a specific type product, they can click the 'view more' button below each carousel.
Amazon's Category Products Page
When users click onto the electronic department from homepage to view more products, the page shows them a lot more different products such as monitors, phones, tablets, etc.
If users want to look more at a specific type product, they can click the 'view more' button below each carousel.
Amazon's Category Products Page
When users click onto the electronic department from homepage to view more products, the page shows them a lot more different products such as monitors, phones, tablets, etc.
If users want to look more at a specific type product, they can click the 'view more' button below each carousel.
Note: This is a Low Fidelity Design VS a High Fidelity Design
Note: This is a Low Fidelity Design VS a High Fidelity Design
Amazon's Category Products Page
When users click onto the electronic department from homepage to view more products, the page shows them a lot more different products such as monitors, phones, tablets, etc.
If users want to look more at a specific type product, they can click the 'view more' button below each carousel.
Amazon's Category Products Page
When users click onto the electronic department from homepage to view more products, the page shows them a lot more different products such as monitors, phones, tablets, etc.
If users want to look more at a specific type product, they can click the 'view more' button below each carousel.
Amazon's Direct Product Page
On the direct product page, I have simplified the amount of information users would normally see, by combining the 'About', 'Specifications', 'Delivery' and 'Rating/Reviews' into one big tables with 4 switchable tabs to view.
Because of this, I was able to make use of the space and reduce the amount of scrolling that users would had to go through.
Amazon's Direct Product Page
On the direct product page, I have simplified the amount of information users would normally see, by combining the 'About', 'Specifications', 'Delivery' and 'Rating/Reviews' into one big tables with 4 switchable tabs to view.
Because of this, I was able to make use of the space and reduce the amount of scrolling that users would had to go through.
Amazon's Direct Product Page
On the direct product page, I have simplified the amount of information users would normally see, by combining the 'About', 'Specifications', 'Delivery' and 'Rating/Reviews' into one big tables with 4 switchable tabs to view.
Because of this, I was able to make use of the space and reduce the amount of scrolling that users would had to go through.
Amazon's Direct Product Page
On the direct product page, I have simplified the amount of information users would normally see, by combining the 'About', 'Specifications', 'Delivery' and 'Rating/Reviews' into one big tables with 4 switchable tabs to view.
Because of this, I was able to make use of the space and reduce the amount of scrolling that users would had to go through.
Amazon's Direct Product Page
On the direct product page, I have simplified the amount of information users would normally see, by combining the 'About', 'Specifications', 'Delivery' and 'Rating/Reviews' into one big tables with 4 switchable tabs to view.
Because of this, I was able to make use of the space and reduce the amount of scrolling that users would had to go through.
Note: This is a Low Fidelity Design VS a High Fidelity Design
Note: This is a Low Fidelity Design VS a High Fidelity Design
Amazon's Checkout Process
I have completely recreated the checkout experience to be more visually appealing as well as simple to use while also implementing a backtracking function for better user experience.
Although the checkout process might seem longer than the original design, this recreated design is to help users accurately make sure that their shopping experience is as detailed as possible so that they won't feel worry about something going wrong or something was accidently purchased.
Amazon's Checkout Process
I have completely recreated the checkout experience to be more visually appealing as well as simple to use while also implementing a backtracking function for better user experience.
Although the checkout process might seem longer than the original design, this recreated design is to help users accurately make sure that their shopping experience is as detailed as possible so that they won't feel worry about something going wrong or something was accidently purchased.
Amazon's Checkout Process
I have completely recreated the checkout experience to be more visually appealing as well as simple to use while also implementing a backtracking function for better user experience.
Although the checkout process might seem longer than the original design, this recreated design is to help users accurately make sure that their shopping experience is as detailed as possible so that they won't feel worry about something going wrong or something was accidently purchased.
Amazon's Checkout Process
I have completely recreated the checkout experience to be more visually appealing as well as simple to use while also implementing a backtracking function for better user experience.
Although the checkout process might seem longer than the original design, this recreated design is to help users accurately make sure that their shopping experience is as detailed as possible so that they won't feel worry about something going wrong or something was accidently purchased.
Amazon's Checkout Process
I have completely recreated the checkout experience to be more visually appealing as well as simple to use while also implementing a backtracking function for better user experience.
Although the checkout process might seem longer than the original design, this recreated design is to help users accurately make sure that their shopping experience is as detailed as possible so that they won't feel worry about something going wrong or something was accidently purchased.
Note: This is a Low Fidelity Design VS a High Fidelity Design
Note: This is a Low Fidelity Design VS a High Fidelity Design
Now for the big question, how does the new compare to the old?
Now for the big question, how does the new compare to the old?
Now for the big question, how does the new compare to the old?
To test how effective the redesigned platform was, I had conducted another series of test to see how well the redesigned platform works compared to the original.
To test how effective the redesigned platform was, I had conducted another series of test to see how well the redesigned platform works compared to the original.
First Click Test
The redesigned platform improved the success rate from 44% to 67%, indicating that the modern, simplistic navigation bar with essential options was an effective solution.
Tree Testing
The redesigned platform improved the success rate from 10% in the original design to 89% and reduced the average time taken from 18.5 seconds to 7 seconds.
This indicates that simplifying options made navigation easier and more efficient for users.
5 Seconds Test
Comparing previous results, participants remembered similar amounts of content after 5 seconds, including the brand and product.
This suggests that while condensing and simplifying content reduced context, people still struggle to remember extensive text within such a short period.
First Click Test
The redesigned platform improved the success rate from 44% to 67%, indicating that the modern, simplistic navigation bar with essential options was an effective solution.
Tree Testing
The redesigned platform improved the success rate from 10% in the original design to 89% and reduced the average time taken from 18.5 seconds to 7 seconds.
This indicates that simplifying options made navigation easier and more efficient for users.
5 Seconds Test
Comparing previous results, participants remembered similar amounts of content after 5 seconds, including the brand and product.
This suggests that while condensing and simplifying content reduced context, people still struggle to remember extensive text within such a short period.
First Click Test
The redesigned platform improved the success rate from 44% to 67%, indicating that the modern, simplistic navigation bar with essential options was an effective solution.
Tree Testing
The redesigned platform improved the success rate from 10% in the original design to 89% and reduced the average time taken from 18.5 seconds to 7 seconds.
This indicates that simplifying options made navigation easier and more efficient for users.
5 Seconds Test
Comparing previous results, participants remembered similar amounts of content after 5 seconds, including the brand and product.
This suggests that while condensing and simplifying content reduced context, people still struggle to remember extensive text within such a short period.
First Click Test
The redesigned platform improved the success rate from 44% to 67%, indicating that the modern, simplistic navigation bar with essential options was an effective solution.
Tree Testing
The redesigned platform improved the success rate from 10% in the original design to 89% and reduced the average time taken from 18.5 seconds to 7 seconds.
This indicates that simplifying options made navigation easier and more efficient for users.
5 Seconds Test
Comparing previous results, participants remembered similar amounts of content after 5 seconds, including the brand and product.
This suggests that while condensing and simplifying content reduced context, people still struggle to remember extensive text within such a short period.
First Click Test
The redesigned platform improved the success rate from 44% to 67%, indicating that the modern, simplistic navigation bar with essential options was an effective solution.
Tree Testing
The redesigned platform improved the success rate from 10% in the original design to 89% and reduced the average time taken from 18.5 seconds to 7 seconds.
This indicates that simplifying options made navigation easier and more efficient for users.
5 Seconds Test
Comparing previous results, participants remembered similar amounts of content after 5 seconds, including the brand and product.
This suggests that while condensing and simplifying content reduced context, people still struggle to remember extensive text within such a short period.
Reflective Learning
Reflective Learning
Reflective Learning
1
What challenges did I encountered during this project
I faced numerous challenges in UX and UI design, from research to prototyping and animating. The most difficult aspect doing a lot of the user research and testing as through the project I had found testing to not be one of my strong suits, but regardless, I am proud it had turned out well in the end.
2
What did I achieve out of this project?
As I was the lone member in this project, there were many challenges that I had to overcome and through those challenges within the 12 weeks (3 months), I was able to prioritise each tasks that are needed to be complete with time management being the foundation of this project.
3
What are my future goals after this project?
Working on this project has now allowed me to become a much stronger designer in all aspects and UX and UI design and I hope to continue improving much more in the future.
1
1
What challenges did I encountered during this project?
I faced numerous challenges in UX and UI design, from research to prototyping and animating. The most difficult aspect doing a lot of the user research and testing as through the project I had found testing to not be one of my strong suits, but regardless, I am proud it had turned out well in the end.
What challenges did I encountered during this project?
I faced numerous challenges in UX and UI design, from research to prototyping and animating. The most difficult aspect doing a lot of the user research and testing as through the project I had found testing to not be one of my strong suits, but regardless, I am proud it had turned out well in the end.
2
2
What did I achieve out of this project?
As I was the lone member in this project, there were many challenges that I had to overcome and through those challenges within the 12 weeks (3 months), I was able to prioritise each tasks that are needed to be complete with time management being the foundation of this project.
What did I achieve out of this project?
As I was the lone member in this project, there were many challenges that I had to overcome and through those challenges within the 12 weeks (3 months), I was able to prioritise each tasks that are needed to be complete with time management being the foundation of this project.
3
3
What are my future goals after this project?
Working on this project has now allowed me to become a much stronger designer in all aspects and UX and UI design and I hope to continue improving much more in the future.
What are my future goals after this project?
Working on this project has now allowed me to become a much stronger designer in all aspects and UX and UI design and I hope to continue improving much more in the future.
Let's Collaborate!
Let's Collaborate!
Let's Collaborate!
The ideal solution always starts with you. Let's collaborate to make your
imaginary ideas come into reality together!
The ideal solution always starts with you.
Let's collaborate to make your imaginary
ideas come into reality together!
