Westfield London Mobile App
A Case Study
This project aimed to propose enhancements to Westfield London’s mobile application. After identifying several key gaps and potential points of improvement in the shopping mall’s existing app, I designed and developed a working prototype that showcased new features. These included augmented-reality navigation and product try-ons, in-app event bookings, and more.
My roles: UX research, app interface design, prototyping
Tools used: Adobe XD, Canva
My roles: UX research, app interface design, prototyping
Tools used: Adobe XD, Canva
Identifying the problem
A preliminary study of Westfield’s existing app was conducted, examining its features and defining gaps in its functionality. In addition, I also studied the apps of Westfield’s main competitors and noted multiple features that would enhance their application further.
At this stage, I also conducted user-based research by first identifying Westfield’s main target demographic groups, interviewing representatives from each group, and creating user personas from each customer segment. The respondents provided insights into what they’d like to see in a shopping mall app, their device and design preferences, along with their mobile app usage patterns.
Several points of improvement were identified:
Augmented-reality functionality
Using AR to navigate within the mall, or to try on products virtually
Bookings and reservations
Enabling users to book slots in events or make restaurant reservations directly within the app
Retail discovery
Creating a simple way for users to explore new retailers, retail categories, offers, and events in Westfield
Conducting user research
Based on the identified target user groups, I then sought to speak with representatives of each segment to understand their mobile app preferences, especially when it comes to one for a shopping mall. Following that, I created user personas for each segment, along with customer journey maps and empathy maps. This helps to get in the mind of the user, and shaped the way that I designed certain aspects of the UI later.
Defining user workflows and project scope
With the proposed enhancements in mind, I took a closer look at designing the ideal process flows for users to reach the above objectives.
Designing low-fidelity wireframes
Once the project scope has been defined, I started with simple low-fidelity wireframes to map out the design of the prototype.
I ran these wireframes past representatives from Westfield’s target customer segments to obtain feedback, then improved the wireframes before moving on to the next stage.
Designing high-fidelity wireframes and a working prototype
With the low-fidelity wireframes complete, I began developing a fully-designed prototype of the application. I adhered to Westfield’s existing branding guidelines throughout the app, e.g. fonts, colour schemes, and art style.
Once the screens were designed, I also made the prototype fully interactive and clickable.
At this stage, I obtained user feedback during the design process.
Use the interactive prototype viewer on the right to explore the app prototype yourself!
With the low-fidelity wireframes complete, I began developing a fully-designed prototype of the application. I adhered to Westfield’s existing branding guidelines throughout the app, e.g. fonts, colour schemes, and art style.
Once the screens were designed, I also made the prototype fully interactive and clickable.
At this stage, I obtained user feedback during the design process.
Use the interactive prototype viewer on the right to explore the app prototype yourself!