Fortress eCommerce Full Site Revamp
Fortress eCommerce Full Site Revamp
Fortress is one of Hong Kong’s most established electronics retailers, but by 2021 its digital experience no longer supported how customers were shopping. With over 60% of traffic coming from mobile, users struggled with outdated navigation, inconsistent UI patterns, slow product discovery, and a multi-step checkout flow that contributed to drop-offs.
The goal of this revamp was to modernize the eCommerce experience, focusing on simplifying the cart and checkout flow, improving search and navigation, and aligning the web and app journeys into a cohesive cross-platform system.
The redesigned experience reduced friction across key user paths, improved task completion efficiency, and established a scalable design foundation for future features and campaigns.
Fortress is one of Hong Kong’s most established electronics retailers, but by 2021 its digital experience no longer supported how customers were shopping. With over 60% of traffic coming from mobile, users struggled with outdated navigation, inconsistent UI patterns, slow product discovery, and a multi-step checkout flow that contributed to drop-offs.
The goal of this revamp was to modernize the eCommerce experience, focusing on simplifying the cart and checkout flow, improving search and navigation, and aligning the web and app journeys into a cohesive cross-platform system.
The redesigned experience reduced friction across key user paths, improved task completion efficiency, and established a scalable design foundation for future features and campaigns.
Fortress is one of Hong Kong’s most established electronics retailers, but by 2021 its digital experience no longer supported how customers were shopping. With over 60% of traffic coming from mobile, users struggled with outdated navigation, inconsistent UI patterns, slow product discovery, and a multi-step checkout flow that contributed to drop-offs.
The goal of this revamp was to modernize the eCommerce experience, focusing on simplifying the cart and checkout flow, improving search and navigation, and aligning the web and app journeys into a cohesive cross-platform system.
The redesigned experience reduced friction across key user paths, improved task completion efficiency, and established a scalable design foundation for future features and campaigns.
Timeline
Oct 2021 – Jun 2022
My role
UI/UX Designer & UX Researcher
Responsiblities
Led UX research synthesis and identified core opportunities
Ran a UX workshop to define pain points and HMW directions
Designed responsive website flows and aligned app journey updates
Created wireframes, prototypes, and high-fidelity UI cross platforms
Presented designs to BU/leadership and incorporated feedback
Deliverables
Cross-platform responsive website redesign
Mobile app journey alignment & component updates
Revised IA, task flows, and mobile-first UX documentation
High-fidelity UI design system components
UX workshop materials (journey maps, HMW outcomes)
Tools
Figma
Adobe Illustration
Our design process integrates research,
problem identification, and visual redesign.
Our design process integrates research, problem identification, and visual redesign.
Stakeholder Interviews
We conducted four interviews with Business, Technical, and Customer Service teams to uncover constraints, goals, and misalignments.
Problem Identification
We analyzed pain points, business needs, user feedback, and data to guide a seamless redesign and highlight key opportunity areas.
UX Workshop
We ran a half-day UX workshop using personas, journey mapping, and HMW exercises to turn pain points into actionable design directions.
UI Design
The UI phase focused on responsive web and app flows, refining aesthetics, accessibility, and brand consistency across all touchpoints.
Stakeholder Interviews
Stakeholder Interviews
To align expectations and identify challenges, we conducted four stakeholder interviews with the Business, Technical, and Customer Service teams in October–November 2021 to uncover constraints, goals, and misalignments.
To align expectations and identify challenges, we conducted four stakeholder interviews with the Business, Technical, and Customer Service teams in October–November 2021 to uncover constraints, goals, and misalignments.
Me (in the yellow cardigan) during an interview with the Business Team on Oct 26, 2021.
Me (in the yellow cardigan) during an interview with the Business Team on Oct 26, 2021.
These discussions surfaced critical insights that shaped the redesign strategy:
These discussions surfaced critical insights that shaped the redesign strategy:
BU Priorities
Improve navigation and search accuracy
Simplify the checkout flow
Increase visibility of campaigns and promotions
Improve site performance during peak sales
Tech Team Priorities
Improve system stability and speed
Strengthen promotion logic and campaign handling (e.g. better manage heavy traffic during flash sales)
Unify interaction patterns across app and website
Reduce complexity in the checkout process
CS Priorities
Improve “Contact Us” page hierarchy
Highlight inquiry and delivery-related information
BU Priorities
Improve navigation and search accuracy
Simplify the checkout flow
Increase visibility of campaigns and promotions
Improve site performance during peak sales
CS Priorities
Improve “Contact Us” page hierarchy
Highlight inquiry and delivery-related information
Tech Team Priorities
Improve system stability and speed
Strengthen promotion logic and campaign handling (e.g. better manage heavy traffic during flash sales)
Unify interaction patterns across app and website
Reduce complexity in the checkout process
Existing pain-points
Existing pain-points
The mobile app—designed several years ago—was functional but misaligned with evolving behaviors. The website, however, had become fragmented and difficult to navigate.
The mobile app—designed several years ago—was functional but misaligned with evolving behaviors. The website, however, had become fragmented and difficult to navigate.
Major issues included:
Inconsistent filters and taxonomy
Cluttered product detail pages
A multi-step, error-prone checkout flow
Slow performance during flash sales
Disconnected experience across web and app
Major issues included:
Inconsistent filters and taxonomy
Cluttered product detail pages
A multi-step, error-prone checkout flow
Slow performance during flash sales
Disconnected experience across web and app
UX Workshop
UX Workshop
On December 7, 2021, we ran a 5-hour workshop using Personas, User Journey Mapping, and HMW exercises. This helped the team align on the core opportunities and define a focused design direction.
On December 7, 2021, we ran a 5-hour workshop using Personas, User Journey Mapping, and HMW exercises. This helped the team align on the core opportunities and define a focused design direction.
Top “How Might We” Statements
Top “How Might We” Statements
"HMW make search more accurate" (Product listing page)
"HMW provide a simplified cart edit experience" (Shopping cart)
"HMW make product detail page content simple and attractive in a smooth way" (Product detail page)
"HMW reduce unnecessary steps to check out" (Product detail page)
"HMW make search more accurate" (Product listing page)
"HMW provide a simplified cart edit experience" (Shopping cart)
"HMW make product detail page content simple and attractive in a smooth way" (Product detail page)
"HMW reduce unnecessary steps to check out" (Product detail page)
"HMW make search more accurate" (Product listing page)
"HMW provide a simplified cart edit experience" (Shopping cart)
"HMW make product detail page content simple and attractive in a smooth way" (Product detail page)
"HMW reduce unnecessary steps to check out" (Product detail page)
These statements guided the feature roadmap and ensured cross-team clarity as we moved into design.
These statements guided the feature roadmap and ensured cross-team clarity as we moved into design.
These statements guided the feature roadmap and ensured cross-team clarity as we moved into design.
Cross platforms redesign
Cross platforms redesign
From Left to Right: Responsive website and mobile app designs in Figma.
From top to bottom: Responsive website and mobile app designs in Figma.
During the UI design phase, I focused on creating responsive components that worked seamlessly across both the mobile app and responsive website, addressing the needs of Fortress’s mobile-first users.
Collaborating closely with the Senior Designer, we built a unified design system that ensured visual and functional consistency across all digital touchpoints, while optimizing the experience for mobile usability and accessibility.
During the UI design phase, I focused on creating responsive components that worked seamlessly across both the mobile app and responsive website, addressing the needs of Fortress’s mobile-first users.
Collaborating closely with the Senior Designer, we built a unified design system that ensured visual and functional consistency across all digital touchpoints, while optimizing the experience for mobile usability and accessibility.
Alongside the website redesign, we also worked on the app redesign to ensure alignment in both the user journey and design elements, creating a cohesive experience across platforms.
I actively participated in weekly meetings with the BU and leadership team, where we presented the latest design and user journey updates, gathering feedback to make necessary adjustments.
Alongside the website redesign, we also worked on the app redesign to ensure alignment in both the user journey and design elements, creating a cohesive experience across platforms.
I actively participated in weekly meetings with the BU and leadership team, where we presented the latest design and user journey updates, gathering feedback to make necessary adjustments.
Design solutions &
key learnings
Design solutions & key learnings
Design solutions & key learnings
This project marked my first experience working on a complex eCommerce full-site and app revamp. Through this process, I learned that research is crucial in defining the problems and aligning key priorities with the team. By setting clear expectations through research, we were able to streamline the redesign process, enhance the user experience, and ensure consistency across platforms, delivering a seamless digital solution.
This project marked my first experience working on a complex eCommerce full-site and app revamp. Through this process, I learned that research is crucial in defining the problems and aligning key priorities with the team. By setting clear expectations through research, we were able to streamline the redesign process, enhance the user experience, and ensure consistency across platforms, delivering a seamless digital solution.
