A trusted name in Hong Kong since 1975, Fortress needed to adapt to a mobile-first market, with over 60% of users browsing via mobile (2021 Google Analytics). 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
Role
UI/UX Designer
Deliverables
Tools
Stakeholder Interviews
We held four interviews with three teams to gather diverse perspectives, identify gaps, and foster collaboration across teams
UX Workshop
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
UI Design
The UI phase focused on refining aesthetics, accessibility, and brand consistency across all digital touchpoints
To ensure alignment between expectations, requirements, and the challenges currently faced, a series of four interviews were conducted in October and November 2021. These interviews involved key stakeholders from three critical teams: the Business Team (BU), the Technical Team and the Customer Service Team (CS).
The objective of these interviews was to gather diverse perspectives, identify gaps, and foster collaboration across teams to create a comprehensive approach to problem-solving.
We gathered key insights from three teams, each with distinct priorities and goals:
BU Priorities
Enhance usability for navigation and search
Streamline the checkout experience
Increase visibility of content and promotions
Optimize performance
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
CS Priorities
Highlight delivery inquiry options
Improve the visual hierarchy of the "Contact Us" page
On December 7, 2021, with support from Design Manager Ray and four additional designers, we conducted a half-day UX workshop utilizing Personas, User Journey Mapping, How Might We (HMW) framing, and HMW voting to transform pain points from the existing Fortress website into actionable design directions. The 5-hour session, including short breaks, fostered collaboration and strategic problem-solving.
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)
After conducting thorough research and conceptualizing the brand identity, I created two distinct moodboards for Fortress's website revamp.
Moodboard Style 1 presents a vibrant, youthful, and energetic design, characterized by a bold color palette of orange and yellow. The focus is on dynamic visuals, engaging layouts, and interactive features such as flash sales and category-based navigation, all crafted to create an exciting and user-friendly shopping experience.
Conversely, Moodboard Style 2 adopts a corporate and professional tone, employing a muted color scheme of white and gray, with orange as a secondary accent. This design emphasizes clean layouts, structured product displays, and functionality-driven design elements to ensure clarity and reliability.
Upon review, Moodboard Style 1 was selected as it aligns closely with Fortress's brand identity, known for being energetic and consumer-focused. This choice positions Fortress as an innovative and forward-thinking retailer in the competitive tech market.
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.
