MallConcierge

MallConcierge is an interactive tool that provides mall visitors useful and relevant information centered around their wants and needs easily, efficiently, and enjoyably.

Unlike the static mall map directory, with it’s long list of shops, the MallConcierge allows shoppers to find specifically what they’re looking for, along with a location and route noted on an interactive map. Shoppers are able to search and locate stores, items, sales, mall events, parking, and restrooms with ease and speed.

The purpose of this project was to redesign what I perceived to be a flawed design and create an interactive digital proof-of-concept prototype – in this case, the static mall map directory.

I assembled a small team – Bhuvana Devigere and Amir Alabbas – to oversee this project from start to completion.

Context

Startup Project

Timeline

September – November 2014

Collaborators

Brief

If you’ve ever been to the mall, chances are you had to use the mall map directory to find a restroom, store, restaurant, or anything that’s at the mall.

It’s often a painful experience, though – it certainly was for me during the winter holidays!

Trying to find your destination in a list of countless other names is often incredibly difficult to find. It’s a classic case where the signal gets lost in the noise.

It’s a flawed system and there should be a better way, especially given the powerful and convenient technologies at our fingertips already on our smartphones.

What should the map directory look like in our modern technological world?

Territory Definition

Exploration

Our team explored a variety of ideas about the context, the users, and the technologies that could be used to support the interaction.

We considered our revised mall map directory as a phone app, but felt that option had some irreconcilable barriers, such as:

#mk-icon-box-5a30d2333c303 .mk-box-icon-2-icon { font-size:128px; color:#ffffff;background-color:#4a7489; } #mk-icon-box-5a30d2333c303 .mk-box-icon-2-icon:hover{ }

Technology Barrier

Users without a cellular device cannot utilize an app.

#box-icon-5a30d2333f5a9 h4 {color:#e74c3c!important;}

Aptitude Barrier

Users who don’t know how to download an app to their phone can’t utilize the service.

#box-icon-5a30d2334022f h4 {color:#e74c3c!important;}

Data Barrier

Some users might have limited data plans on their mobile devices, which may discourage them from downloading an app.

#box-icon-5a30d23340dae h4 {color:#e74c3c!important;}

Reception Barrier

Limited cell reception in a mall may restrict access to an app and it’s functionality

#box-icon-5a30d233415dc h4 {color:#e74c3c!important;}

Ideation

Our team agreed that our solution, whatever it may be, should overcome the barriers posed by using a phone app.

After distilling our ideas, we imagined the solution as an interactive object that would be a local fixture in the mall, not only to address the barriers above, but also for a couple of major reasons:

ACCESSIBLE & DEMOCRATIC
Our Solution
serves anyone who visits the mall, not just those who install an app in their mobile devices.
FAMILIAR & CONSISTENT
Our Solution
can still be a static structure, yet deliver a dynamic and interactive experience with improved usability.

Discovery and Exploratory Research

Methods

We thought we had a great idea and intuitively felt we had the right features. Rather than operate in a bubble, though, we went out to get our feet dirty.

Observation

I made ethnographic observations and behavioral mappings of mall patrons, taking special note of body language and timing how long they stood at the mall map directory.

#box-icon-5a30d23347e61 h4 {color:#72a1cf!important;}

Expert Interviews

We needed expert opinions regarding the wants and needs of users in a mall context – who better than mall employees?

I interviewed information desk employees, discussing their perspective on mall patrons’ concerns, as well as mall administration staff discussing concerns from their perspective.

#box-icon-5a30d23348396 h4 {color:#72a1cf!important;}

Questionnaires

Questionnaires were employed to 50 mall patrons to understand their mall experience.

#box-icon-5a30d23348863 h4 {color:#72a1cf!important;}

Literature Reviews

We reviewed literature and researched other sources regarding shopper behavior, marketing strategies of malls, search navigation structures, and categorization of mall stores.

#box-icon-5a30d23348ff8 h4 {color:#72a1cf!important;}

Interviews

We interviewed mall patrons, friends, family, colleagues – anyone who was open to discussing their own mall experiences and expectations.
These interviews helped us identify behavioral variables, such as activities, attitudes, aptitudes, motivations, and skills.

As a result, we identified and mapped significant behavior patterns which would ultimately help shape our user personas.

I employed a  variety of methods in the interviews, such as:

  • directed storytelling
  • contextual inquiry questions
#box-icon-5a30d2334942f h4 {color:#72a1cf!important;}

Takeaways

Our field work and research did a great deal for us, from confirming suspicions we already had to illuminating problems and solutions we never considered.

Most of the takeaways from our exploratory research would later become the most salient aspects of our final product, such as:

Information

Mall patrons mostly ask the Information Desk for restroom locations. Many also ask for dates and times for special mall programming, such as:

  • mall yoga
  • Santa Claus
  • Easter Bunny
  • other special events
#box-icon-5a30d2334b4dc h4 {color:#72a1cf!important;}

Entry Point

The entry point of the static mall map directory is a flawed system:

  • The 1st and 2nd floors are on one side of the structure, while the 3rd and 4th floors are on the other side.
  • I experienced some frustration, myself, as I sometimes had to move back-and-forth to each side when searching for stores.
#box-icon-5a30d2334b992 h4 {color:#72a1cf!important;}

Security

Mall security is a silent but very high concern.

#box-icon-5a30d2334be13 h4 {color:#72a1cf!important;}

Advertising

Advertisements around the mall are an important source of revenue for the mall, aside from leasing space.

#box-icon-5a30d2334c5d0 h4 {color:#72a1cf!important;}

Time

  • The longest observed time spent at the mall map was almost 3 minutes, before giving up and asking for help.
  • The shortest observed time spent at the mall map was approximately 20 seconds.
  • The average observed time spent at the mall map was 1 minute 20 seconds.
#box-icon-5a30d2334c9f7 h4 {color:#72a1cf!important;}

Body Language

  • Mall patron body languages showed feelings of inconveniencing others while being inconvenienced, themselves when using  the current mall map directories.
  • Based on their facial and body expressions (such as frowning, huffing/puffing, head shaking, squinting) and based on user interviews, mall patrons are generally unsatisfied and sometimes upset with the experience of using the current mall map directory.
  • Perhaps the person with the shortest time simply gave up?
#box-icon-5a30d2334cedc h4 {color:#72a1cf!important;}

Concept and Generative Research

Methods

As we moved forward, we began conceptualizing through an iterative process to uncover what an ideal mall map directory system should be in the modern age.

Our UX team employed brainstorming sessions, using methods such as:

  • affinity diagramming
  • card sorting
  • task flow
  • storyboarding
  • cognitive walkthrough

Opportunity Areas

Based on our research, we concluded that the MallConcierge should include these most salient features:

  • show where restrooms are
  • find stores by name
  • find stores by products
  • contain information on mall programming
  • find places to eat
  • a way to alert emergency services, such as security
  • help and documentation on how to use the product
  • map of the mall
  • create a path on the the map from the user’s position to their destined store
  • allow advertisements to play when the MallConcierge is on idle mode

Sitemapping and Wireframing : sketches and intial concepts

Using our brainstorming methods, I considered how the MallConcierge should be designed and created sketches of potential wireframes and sitemaps. Later, our team convened to dissect the sketches, noting their pros and cons from an information architecture and usability perspective.

Low-Fidelity Prototyping

I digitally imported our paper mockups to create a low-fidelity prototype, allowing us to interact with initial features, explore potential functionalities, and further scrutinize our designs.

We only focused on stepping through a limited number of task paths (3 or 4), rather than creating the entire application for every possible experience.

Personas

As we synthesized our findings from the interviews and observations, I started defining personas based on our research, which not only included common behavioral patterns, but also outlier behaviors, as well.

#mk-icon-box-5a30d233cb697 .mk-box-icon-2-icon { font-size:32px; color:#ffffff;background-color:#527495; } #mk-icon-box-5a30d233cb697 .mk-box-icon-2-icon:hover{ color:#527495;background-color:#ffffff;border:1px solid #527495; }

Mockups : intial concepts

While I was doing UX research and finessing the sitemap and wireframes, my teammate, Bhuvana Devigere, created some rough mockups based on my own paper mockups to get a better sense of the navigation and to provide a usable template for our first User Scenario Video.

mockups by Bhuvana Devigere

User Scenario Video 1.0

Using our personas, I created a user scenario video with the intent to:

  • introduce the concept of an interactive mall map directory
  • show how different users (i.e.: personas) with different wants and needs (objectives) could interact with it.

Takeaways

Brainstorming = Openness & Flexibility

Our initial brainstorming sessions regarding what this product was even going to look like was fun and invaluable. Not to mention, it afforded us the space to be flexible and open to new ideas.

#mk-custom-box-5a30d233dfbf7 { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d233dfbf7 .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

Commit to nothing… yet

It’s important not to be married to your ideas, no matter how great you think it is. I often found that forcing myself to design at least 10 iterations off of a strong idea took me to other places I never would have considered.

#mk-custom-box-5a30d233e0613 { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d233e0613 .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

A Concrete Concept

The User Scenario Video helped make our product concept more concrete to our stakeholders, instead of simply describing our product with words and leaving it to the imagination.

#mk-custom-box-5a30d233e12e2 { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d233e12e2 .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

Scrutinize with fresh eyes

The User Scenario Video was also helpful because we were able to pause, rewind, and fast forward through and watch multiple viewings. As a result, the team and I questioned many of our structural, design, and usability decisions from an almost omniscient perspective.

#mk-custom-box-5a30d233e1c72 { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d233e1c72 .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

Refinement and Evaluative Research

Iterating

The prototype endured an iterative process as we refined interface elements, positions, color schemes, and other visual design decisions based on a variety of methods and principles.

The biggest refinement was the orientation of the map, which was guided by user testing and lit reviews.

Methods

We employed a variety of iterative methods to refine our designs and experience, such as:

  • Cognitive Walkthrough
  • Usability Heuristics
  • A/B Testing

We integrated our insights into a more polished design, both from a visual and usability perspective.

Sitemap Iterations

Wireframes v1

Wireframes v2

UI Design

We imagined a sleek and dark interface with thin typography would reflect the branding of the mall we were targeting.

Using one of Bhuvana’s UI mockups as inspiration, I tried to push the designs further to unify some elements and increase the visual legibility with the hope to increase it’s usability, overall.

UI Design by Bhuvana Devigere

UI Designs by Chris Moezzi

User Scenario Video 2.0

I created another user scenario video to illustrate how a more advanced prototype would look and work.

I used the the darker design color schemes that I created as the UI template for the motion graphics.

This video paid more focus to how the UI elements in the MallConcierge would behave.

User Testing

At this stage, we had to create a dynamic non-linear digital prototype of our product. This prototype had a semi-functional interface with multiple possible choices active at the same time and simulated a limited part of the application we had previously envisioned.

This prototype accepted user input, provided useful feedback, and utilized dynamic properties when necessary. We also had to communicate clearly what the user test was, and the successes and failures. Peers provided instructions for specific types of feedback we wanted to receive and the overall experience.

Takeaways

The SALES Feature

While users indicated having a SALES feature would be helpful, a few concerns were raised.

First, displaying all the current sales might actually hurt stores rather than benefit them. The reason: stores want people to come in and explore the sale and discover products. Reading sale details of each store, especially side-by-side, would cause shoppers to compare sales and neglect some stores.

As a result, we opted to only display which stores have sales, but not delve into detail what the sales are about or what items are included.

#mk-custom-box-5a30d2342c96f { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d2342c96f .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

The Parking Feature

How might we track and show mall patrons where they parked?

While most users liked the promise of a parking feature,

 

building a back-end system to connect with the Mall Concierge seemed like a huge undertaking. Not to mention, I didn’t think it was necessary for an MVP.

 

The next best thing: simply show points of exit/entry to the mall.

I thought that this trimmed feature wouldn’t impress users, but it actually tested positive on our prototype.

Yet another reason to test your designs and not simply assume!

#mk-custom-box-5a30d2342db3b { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d2342db3b .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

Language

I asked a friend, who happened to be a foreign exchange student from China, if she would help test the prototype. Since English isn’t her first language, I quickly realized we ought to incorporate the ability to change languages.

It makes complete sense to add other languages. After all, mall patrons are diverse and not just native English speakers – people of all ethnicities and cultures visit malls across the USA.

To accommodate international mall visitors, we thought at least a choice of options for at least the 5 major spoken languages of the world would be good for an advanced MVP.

#mk-custom-box-5a30d2342e9c8 { min-height:100px; padding:30px 20px; background-attachment:scroll; background-repeat:repeat; background-color:#f6f6f6; background-position:left top; margin-bottom:10px; } #mk-custom-box-5a30d2342e9c8 .mk-fancy-title.pattern-style span{ background-color: #f6f6f6 !important; }

Outcome and Reflection

Revisiting

While this prototype worked and got the idea across, there are still some features that need either finessing, testing, or elimination based on a number of insights.

For instance, the “Calendar” feature in its current condition occupies a large amount of screen real estate, yet, ironically, it’s also too small for a great interaction. A better solution is in order.

Accessibility

While I tried to make this product as accessible as possible, a few key ideas occurred to me after the project to make the MallConcierge even better:

  • Sound elements can strengthen the experience, such as when a user presses a button.
  • The text could perhaps use better contrast for better legibility.

Final Takeaways

While I’ve been involved in plenty of production pipelines, I’ve seldom had the opportunity to wear so many hats at once. Most rewarding, though, was the chance to oversee an interactive project from start to finish with an amazing team – from initial strategy and conception, to research, to generating, iterating and testing designs to shape the product, to delivering a refined interactive prototype.

We’re currently taking next steps toward developing MallConcierge.

Hopefully, you’ll see it in a mall near you, soon!