We started by studying user interactions with shopping mall websites, focusing on recent visits. We also analyzed the current site’s target audience and conducted in-person research at Ngee Ann City by speaking with customer service. Key Findings: Customer Service Insights: The Customer Service Officer was overwhelmed with calls, handling inquiries about directions, product details, stock, exchanges, and returns, often transferring them to other departments. Event organizers also relied solely on this line, adding to the inefficiency. User Behavior Patterns: From our research, we discovered two main user groups for the website: 1. Tourists: Users rarely visit shopping mall websites locally. Instead, they primarily access them when traveling overseas to plan their trips. This behavior highlights that tourists use mall websites for trip planning rather than for local shopping purposes. 2. Corporate Entities: The website appears to be geared more towards corporate entities, with leasing inquiries prominently featured in the main navigation bar, including detailed sections for promotional space, advertising space, office space, and retail space.
Our approach was not only to redesign the website but to make it more user-friendly for both tourists and corporate entities. Here's how we addressed each group's needs:
For Tourists: Enhanced Directory: Expanding the directory to include not just the atrium but also Towers A & B, which house offices, clinics, and co-working spaces—features that could benefit tourists as well.
For Tourists: Before: The current and upcoming events were spread across multiple pages, with excessive text that overwhelmed the audience with too much information. After: Events are now prominently featured on the homepage with engaging hero images and consolidated into a single, dedicated Events page, providing a clearer and more user-friendly experience.
For Corporate Entities: Corporate Event Portal: Introducing a portal to streamline event registration and management, enhancing efficiency and user satisfaction for corporate clients.
For Tourists: - Enhances convenience: A clear directory and event pages make it easy to find stores and services, encouraging longer visits and more spending. - Promotes inclusivity: Accessible design ensures a smoother experience for all visitors. For Event Organizers: - Simplifies event planning: Easy booking, venue selection, and coordination with mall management. - Streamlines processes: Digital tracking and approvals reduce paperwork and enhance efficiency. For Ngee Ann City: - Boosts global appeal: A modern, multilingual website attracts international shoppers and brands. - Improves efficiency: A detailed directory reduces staff workload, streamlining operations.
To ensure a cohesive design, I established a design system that defined the color palette, typography, and iconography, creating a unified design language across the website. With the design system in place, my teammates can easily follow the guidelines and create screens independently, requiring minimal assistance.
In addition to the mall's website, there is a corporate event portal that I designed to be both unique and aligned with the mall's branding. While it has its own distinct features, the design elements and overall style are carefully coordinated to maintain a cohesive brand identity, ensuring users recognize it as part of the same brand.
For typography, I selected Castoro for display text and Inter for headings and body content, ensuring readability and consistency throughout.
The website layout is structured using a 12-column grid system, with 40px margins and 16px gutters, ensuring consistent alignment and responsiveness across diverse screen sizes. This grid framework optimizes content distribution while maintaining a clean, organized interface. Spacing is governed by an 8pt modular scale, with increments of 8px (8, 16, 24, 32, etc.) applied consistently throughout the design. This 8pt spacing system aligns with Apple’s Human Interface Guidelines, achieving an ideal balance between density and whitespace to enhance both readability and overall usability.
In addition to the mall's website, there is a corporate event portal that I designed to be both unique and aligned with the mall's branding. While it has its own distinct features, the design elements and overall style are carefully coordinated to maintain a cohesive brand identity, ensuring users recognize it as part of the same brand.
