Mapply

Shop, navigate, and collect rewards. All in one place.

Mapply redefines navigation in busy spaces like Westfield Century City Mall. Think smart maps, AR directions, and rewards that make every step of your journey as efficient as it is rewarding.

My Role

UX Designer / Researcher

Key Stakeholders

Westfield Century City management and mall customers

Partners

Esmé Ison, Emma Doyle, Xander Turnbough

Problem

Westfield Century City is a 1.3 million-square-foot outdoor shopping mall in the Century City commercial district. Thousands of people visit there to shop, work, and eat. Currently, there are 57 spots where customers can enjoy food, and 31 of them offer takeout options. Yet, there are only 3 allocated curbside parking spots out of 5000.

This imbalance creates stress for users who want quick, efficient pickup options for food and goods.

Design Challenge

How might we make the parking experience less stressful, overwhelming, and time-consuming for visitors picking up food at Westfield Century City?

Solution

Mapply is the ultimate map app that makes getting around a breeze. It combines powerful maps with handy tools like API integrations and in-app browsers, making it your one-stop shop for errands. Seamlessly order and pick up items from local businesses without switching apps.

AR Wayfinding

Ditch the map, lose the frustration. Mapply's AR wayfinding guides you straight to your destination, no wrong turns needed.

Built-In Rewards

Malls love Mapply too. Exclusive points and discounts after your spree keep you coming back for more. Handy tab tracks your rewards and expiration dates.

Navigation Made Easy

Get directions however you prefer. Choose clear audio instructions for hands-free convenience, or use the smartwatch app for a quick glance on the go.

Research: Identify User Needs

Desk Research

Our initial research highlighted significant pain points:

Limited Parking for Pickups: Only 3 out of 5000 spots are "takeout" parking.
Traffic Congestion: Blocked entrances and unclear parking signs frustrate drivers.
Canceled Curbside Pickup: Previous curbside programs failed due to disorganization.
Negative Reviews: 27.2% of Yelp reviews are 1-2 stars, citing parking confusion.

One of the negative reviews left on yelp which concerns about their parking situation at Westfield Century City

User Interviews

We interviewed 10 diverse users, including regular mall-goers and Uber drivers, to uncover key pain points.

Overwhelmed by long lines and chaotic parking.
Difficulty locating specific restaurants or stores.
Lack of clear updates on food pickup status.

“Most of the restaurants at the mall are the closest locations… but the whole parking thing turns me off so much - The lines are long and I get overstimulated there… I don’t think it’s worth it.”
Francis, Westfield Century City Employee

Persona

As a team, we were determined to understand our users deeply—figuring out their goals, needs, and how they navigate things. We conducted user research to create two detailed user personas, one for regular users and one for Uber drivers.

Software Engineer, 28
Hybrid worker living in Century City area
Tech savvy and progressive, likes to be quick and efficient
Goal: Efficient lunchtime pickups without parking hassles.
Pain Point: Navigating the confusing parking layout.

Anika Frandsen

User Journey Map

The user journey map illustrates the steps users take during the pickup process, aiding in pinpointing pain points and recognizing areas for improvement. Specifically focusing on the "Going to pick up" and "Parking" stages, the map revealed various user challenges and opportunities, prompting dedicated attention to these aspects throughout the design process.

Help stay notified of order updates.

How might we integrate food ordering sites with navigation?

Help me avoid any parking inconveniences as much as possible

How might we match estimates for food pickup with driving time?

How might we use AR on phones to guide customers through the mall?

How might we create more informative entry signs?

How might we create alternatives to physical mall maps?

How might we create dedicated pickup spots for those who don’t want to shop?

Some of the interesting insights we got from user journey map
(Pink: goals & motivation, blue: opportunities)

Overview of Mapply’s user journey map
(Click here to check out the detail)

Sketches & Wireframes

We sketched out our ideas for the initial visualization process based on insights from initial user interviews, our business goals, and a heuristic evaluation. It was like a quick test run to figure out what users genuinely need versus what could be optional. This way, we got a clearer picture before diving into the nitty-gritty of the design process.

After doodling our initial ideas, we brought them to life using Figma to create simple wireframes. These wireframes were fleshed out just enough to throw them into the user testing ring.

First paper prototype for Mapply which helped us to understand how it feels to interact with Mapply before creating a digital wireframe

First digital wireframes created based on the paper prototype

Usability Testing

We put our hands-on prototype to the test with 10 real users, watching them navigate and interact with the app. Our goal was to understand if participants understand how to move through the prototype and the purpose of Mapply app, and whether our AR walking directions are intuitive or not. We introduced our users with a brief synopsis, and set each user up with a brief background before observing their actions while moderating.

Try Our Testing Prototype

Testing Phase 1: Information Design

Insight: Problems to Solve

Information Overload

Users found the order summary page and the timer off-center, making it visually confusing.

Organize the Order Summary Page

We moved the timer to a more central location and consider making other adjustments to improve the visual hierarchy.

Unclear Category Labeling

Some users questioned the need to call out "restaurant" as a category, asking for more specific information.

Implementation: Revisions Made

Revise Category Labels

We implemented more descriptive or intuitive labels for categories beyond just "restaurant."

Small Font Size

Many of users found the text on the menu page and the AR information to be too small to read comfortably.

Improve Information Clarity

Font size and color contrast were increased, and we provided clearer explanations for potentially confusing terms.

Testing Phase 2: Feature Functionality

Insight: Problems to Solve

Implementation: Revisions Made

Missing Information

The purpose of entering the parking number and the details of the coupon offer were missing.

Limited Features

Some users expressed a desire for additional features, such as the ability to store coupons within the app.

Limited AR Functionality:

Users suggested additional options for AR navigation, including different paths for accessibility and seasonal changes.

Provide Context and Explanation

We added that the purpose of entering the parking number is to make sure that customer gets free parking while pickup.

Develop a Coupon Storage System

A system within the app where users can store and manage their coupons for easy access was created.

Expand AR Features

We explored adding different paths for accessibility and consider changing the color depending on events or seasons.

Solution

Final Product

After ironing out the wrinkles from our usability study, we dived into the creative process on Figma to craft the final screens.

Our mission was crystal clear: to cook up a visual identity that resonates with our brand's essence and message, summed up as "no more headaches, just good food." It's not just about looking good; it's about creating an experience that's as enjoyable as a fantastic meal.

With Mapply, users can find themselves happily benefiting from the program’s navigation system, where they can be directed throughout the mall with ease.