Fortress eCommerce Site and App Revamp
Fortress eCommerce Site and App Revamp
Since 1975, Fortress has been a trusted name in Hong Kong. However, with over 60% of users browsing via mobile (2021 Google Analytics), the brand needed to adapt to a mobile-first market.To meet this demand, we redesigned their e-commerce website and app with a focus on mobile usability. The revamped experience improved navigation, performance, and overall usability—making it easier for users to browse and shop on the go. These enhancements led to better user experience and higher conversion rates, helping Fortress stay competitive and relevant in the digital space.
TIMELINE
Oct 2021 - Jun 2022
ROLE
UI/UX Designer
DELIVERABLES
Responsive design
Website design
App design
UX workshop
TOOLS
Figma
Adobe Illustrator
Our design process integrates research, problem identification, and visual redesign.
Our design process integrates research, problem identification, and visual redesign.
Stakeholder Interviews
We held four interviews with three teams to gather diverse perspectives, identify gaps, and foster collaboration
We held four interviews with three teams to gather diverse perspectives, identify gaps, and foster collaboration
UX Workshop
We conducted a half-day UX workshop to discover and turn the pain points into actionable design directions
We conducted a half-day UX workshop to discover and turn the pain points into actionable design directions
Problem Identification
We analyzed pain points, business needs, user feedback, and data to guide a seamless, user-friendly redesign
We analyzed pain points, business needs, user feedback, and data to guide a seamless, user-friendly redesign
UI Design
The UI phase focused on refining aesthetics, accessibility, and brand consistency across all touch points
The UI phase focused on refining aesthetics, accessibility, and brand consistency across all touch points
Stakeholder Interviews
Stakeholder Interviews
To align expectations and identify challenges, we conducted four stakeholder interviews in October-November 2021 with the Business, Technical, and Customer Service teams.
To align expectations and identify challenges, we conducted four stakeholder interviews in October-November 2021 with the Business, Technical, and Customer Service teams.
Me (in the yellow cardigan) during an interview with Business Team on Oct 26, 2021.
Me (in the yellow cardigan) during an interview with Business Team on Oct 26, 2021.
These interviews gathered diverse perspectives and key insights from each team to foster collaboration and develop comprehensive solutions:
These interviews gathered diverse perspectives and key insights from each team to foster collaboration and develop comprehensive solutions:
BU Priorities
Enhance usability for navigation and search
Streamline the checkout experience
Increase visibility of content and promotions
Optimize performance
Enhance usability for navigation and search
Streamline the checkout experience
Increase visibility of content and promotions
Optimize performance
CS Priorities
Highlight delivery inquiry options
Improve the visual hierarchy of the "Contact Us" page
Highlight delivery inquiry options
Improve the visual hierarchy of the "Contact Us" page
Tech Team Priorities
Improve system performance
Strengthen promotion campaign handling (e.g. manage heavy traffic during flash sales)
Simplify the checkout process
Align interaction design (IxD) and UX across app and website
Improve system performance
Strengthen promotion campaign handling (e.g. manage heavy traffic during flash sales)
Simplify the checkout process
Align interaction design (IxD) and UX across app and website
UX Workshop
UX Workshop
On December 7, 2021, we conducted a 5-hour UX workshop with Design Manager and four designers. Using Personas, User Journey Mapping, and How Might We exercises, we transformed pain points from the existing Fortress website into actionable design directions.
On December 7, 2021, we conducted a 5-hour UX workshop with Design Manager and four designers. Using Personas, User Journey Mapping, and How Might We exercises, we transformed pain points from the existing Fortress website into actionable design directions.
HMWs Defined from the Workshop
HMWs Defined from the Workshop
The workshop enabled us to identify and align on the most critical pain points, ensuring a focused approach to problem-solving. The workshop laid the foundation for the next phase - planning the revamp timeline - while also equipping the UX team with a structured approach to address future usability issues efficiently.
Here are the top 4 How Might We statements from the voting session:
"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)
The workshop enabled us to identify and align on the most critical pain points, ensuring a focused approach to problem-solving. The workshop laid the foundation for the next phase - planning the revamp timeline - while also equipping the UX team with a structured approach to address future usability issues efficiently.
Here are the top 4 How Might We statements from the voting session:
"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)
The workshop enabled us to identify and align on the most critical pain points, ensuring a focused approach to problem-solving. The workshop laid the foundation for the next phase - planning the revamp timeline - while also equipping the UX team with a structured approach to address future usability issues efficiently.
Here are the top 4 How Might We statements from the voting session:
"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)
Existing Pain-points
Existing Pain-points
The Fortress app, designed by our team several years ago, was based on research conducted at the time. The app’s overall UX was well-received, with no major challenges reported. However, the Fortress website is outdated, and the user experience is ineffective.
The Fortress app, designed by our team several years ago, was based on research conducted at the time. The app’s overall UX was well-received, with no major challenges reported. However, the Fortress website is outdated, and the user experience is ineffective.
Redesigning the Fortress Digital Experience
Redesigning the Fortress Digital Experience
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 Miu, 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.
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 Miu, 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.
From Left to Right: Responsive website and mobile app designs in Figma.
From top to bottom: Responsive website and mobile app designs in Figma.
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.
