Swatch Page Redesign
Swatch Page Redesign
Swatch Page Redesign
@ Eternity Modern
@ Eternity Modern
@ Eternity Modern
Company
Company
Company
Eternity Modern
Eternity Modern
Eternity Modern
Stakeholders
Stakeholders
Stakeholders
Design Team
Developers
PM
Design Team
Developers
PM
Design Team
Developers
PM
Role
Role
Role
UX/UI Design
UX/UI Design
UX/UI Design
Tools
Tools
Tools
Figma
Miro
Jira
Figma
Miro
Jira
Figma
Miro
Jira
Timeline
Timeline
Timeline
2 weeks
2 weeks
2 weeks
Company Brief
Company Brief
Company Brief
Eternity Modern is an E-commerce website for people who love Mid-century and vintage style furniture.
Eternity Modern is an E-commerce website for people who love Mid-century and vintage style furniture.
Eternity Modern is an E-commerce website for people who love Mid-century and vintage style furniture.
Project Brief
Project Brief
Project Brief
The project is about the swatch page redesign, which involved auditing the current website, discovering pain points, and proposing solutions to improve the overall user experience.
The project is about the swatch page redesign, which involved auditing the current website, discovering pain points, and proposing solutions to improve the overall user experience.
The project is about the swatch page redesign, which involved auditing the current website, discovering pain points, and proposing solutions to improve the overall user experience.
The design goals were to ensure efficient completion, enable rapid changes, and maintain consistency with the current brand throughout the user experience
The design goals were to ensure efficient completion, enable rapid changes, and maintain consistency with the current brand throughout the user experience
The design goals were to ensure efficient completion, enable rapid changes, and maintain consistency with the current brand throughout the user experience
Design Process
Design Process
Design Process
01
01
01
Problem
Problem
Problem
The current swatch page doesn't meet customers' needs. More information needs to be added, and the existing layout limits usability.
The current swatch page doesn't meet customers' needs. More information needs to be added, and the existing layout limits usability.
The current swatch page doesn't meet customers' needs. More information needs to be added, and the existing layout limits usability.
02
02
02
Goals
Goals
Goals
1. Collect feedback from the customer service team.
2. Define inquiries.
3. Summarize findings.
4. Deliver design solutions.
1. Collect feedback from the customer service team.
2. Define inquiries.
3. Summarize findings.
4. Deliver design solutions.
1. Collect feedback from the customer service team.
2. Define inquiries.
3. Summarize findings.
4. Deliver design solutions.
03
03
03
Design Process
Design Process
Design Process
For the initial user research, I talked to the customer service team and collected all the recent feedback and problems that were questioned by our customers about the swatch page to understand the current problems. During the synthesis phase, I used affinity mapping to analyze pain points and define the priorities. Then, I generated workflows to understand where the process that users were having trouble with. As a result, I created Lo-Fi and Hi-Fi Prototypes. After publishing the new design online, I will follow up with the customer service team and confirm the redesign solves the pain points.
For the initial user research, I talked to the customer service team and collected all the recent feedback and problems that were questioned by our customers about the swatch page to understand the current problems. During the synthesis phase, I used affinity mapping to analyze pain points and define the priorities. Then, I generated workflows to understand where the process that users were having trouble with. As a result, I created Lo-Fi and Hi-Fi Prototypes. After publishing the new design online, I will follow up with the customer service team and confirm the redesign solves the pain points.
• UX Research: Conducted comprehensive user research using various methods, including user interviews, surveys, and usability testing, to gather deep insights into user needs, behaviours, and pain points.
• UI/UX Design: Combined research findings with design principles to create user-centred designs, including wireframes, high-fidelity mockups, and interactive prototypes, ensuring a seamless and intuitive user experience
• Deliverables: UX Strategy, Survey and collecting feedback, Persona, Task Flow, Sketches, UI, Prototype.
04
04
04
Research and Collecting Feedback
Research and Collecting Feedback
Research and Collecting Feedback
I created several questions and asked marketing teams to send out this survey through emails with promotions.
The goal is to create a more intuitive, visually appealing, and user-friendly interface that provides a seamless experience across all devices.
I created several questions and asked marketing teams to send out this survey through emails with promotions.
Do you know we provide a free swatch service?
What other information would you like to see on the swatch page?
What could we do to make this site more useful?
Affinity Map
Affinity Map
Affinity Map
The findings from my research were organized on an affinity map to better understand the shopping journey from the homepage to the product page and then the swatch page; it helps to determine priorities moving forward in the process. With this project's short timeline, it was important for me to understand what I should focus on to maximize the website's benefit.
The findings from my research were organized on an affinity map to better understand the shopping journey from the homepage to the product page and then the swatch page; it helps to determine priorities moving forward in the process. With this project's short timeline, it was important for me to understand what I should focus on to maximize the website's benefit.
The findings from my research were organized on an affinity map to better understand the shopping journey from the homepage to the product page and then the swatch page; it helps to determine priorities moving forward in the process. With this project's short timeline, it was important for me to understand what I should focus on to maximize the website's benefit.
Findings
Findings
Findings
Based on the Study, here are the 3 problems I decided to focus on:
Difficult to find the swatch page
Difficult to know detailed information about fabrics, such as “ is this fabric pet friendly?”
Difficult to see the texture on small swatch images
Based on the Study, here are the 3 problems I decided to focus on:
Difficult to find the swatch page
Difficult to know detailed information about fabrics, such as “ is this fabric pet friendly?”
Difficult to see the texture on small swatch images
Based on the Study, here are the 3 problems I decided to focus on:
Difficult to find the swatch page
Difficult to know detailed information about fabrics, such as “ is this fabric pet friendly?”
Difficult to see the texture on small swatch images
05
05
05
Ideation
Ideation
Ideation
I created task flows for steps a user typically goes through to complete two common tasks on the Eternity Modern website:
I created task flows for steps a user typically goes through to complete two common tasks on the Eternity Modern website:
I created task flows for steps a user typically goes through to complete two common tasks on the Eternity Modern website:
1. A quick and easy access to the swatch page.
2. Layout information clearly with bigger images and add hi-res showcasing videos.
1. A quick and easy access to the swatch page.
2. Layout information clearly with bigger images and add hi-res showcasing videos.
1. A quick and easy access to the swatch page.
2. Layout information clearly with bigger images and add hi-res showcasing videos.
Sketches
Sketches
Sketches
06
06
06
Develop + Test (with Before and After comparison)
Develop + Test (with Before and After comparison)
Develop + Test (with Before and After comparison)
Presented design proposal to the team with before and after comparison with an explanation of why.
Tested the proposed user flow with the marketing and customer services team, collected feedback and confirmed the solution.
Collaborated with the developer and confirmed the feasibility, workload, and time it may take.
Presented design proposal to the team with before and after comparison with an explanation of why.
Presented design proposal to the team with before and after comparison with an explanation of why.
Tested the proposed user flow with the marketing and customer services team, collected feedback and confirmed the solution.
Collaborated with the developer and confirmed the feasibility, workload, and time it may take.
Tested the proposed user flow with the marketing and customer services team, collected feedback and confirmed the solution.
Collaborated with the developer and confirmed the feasibility, workload, and time it may take.
Collaborated with the developer and confirmed the feasibility, workload, and time it may take.
07
07
07
Final Prototype
Final Prototype
Final Prototype
Reflection
Reflection
Reflection
I learned from this project about the importance of communication, collaboration, and self-driven.
I learned from this project about the importance of communication, collaboration, and self-driven.
I learned from this project about the importance of communication, collaboration, and self-driven.
Communication: Since this project was carried out during the pandemic, when remote work processes were yet to mature, communication issues and misunderstandings were common. Therefore, I used before-and-after design comparisons to help me showcase and explain the changes.
Communication: Since this project was carried out during the pandemic, when remote work processes were yet to mature, communication issues and misunderstandings were common. Therefore, I used before-and-after design comparisons to help me showcase and explain the changes.
Communication: Since this project was carried out during the pandemic, when remote work processes were yet to mature, communication issues and misunderstandings were common. Therefore, I used before-and-after design comparisons to help me showcase and explain the changes.
Collaboration: Although this was a small project, it was an end-to-end process that included many stakeholders, such as the customer services team, marketing team, design team, and developer team. Every step of the collaboration was crucial to the teamwork.
Collaboration: Although this was a small project, it was an end-to-end process that included many stakeholders, such as the customer services team, marketing team, design team, and developer team. Every step of the collaboration was crucial to the teamwork.
Collaboration: Although this was a small project, it was an end-to-end process that included many stakeholders, such as the customer services team, marketing team, design team, and developer team. Every step of the collaboration was crucial to the teamwork.
Self-management: Due to the change in the work environment, more self-management and motivation can help improve work completion. For example, I wanted to replace online meetings with written documentation. Therefore, I listed the questions I wanted to gather feedback on and used surveys to increase work efficiency while avoiding misunderstandings. This experience made me realize the importance of developing my own working methods.
Self-management: Due to the change in the work environment, more self-management and motivation can help improve work completion. For example, I wanted to replace online meetings with written documentation. Therefore, I listed the questions I wanted to gather feedback on and used surveys to increase work efficiency while avoiding misunderstandings. This experience made me realize the importance of developing my own working methods.
Self-management: Due to the change in the work environment, more self-management and motivation can help improve work completion. For example, I wanted to replace online meetings with written documentation. Therefore, I listed the questions I wanted to gather feedback on and used surveys to increase work efficiency while avoiding misunderstandings. This experience made me realize the importance of developing my own working methods.