Shopping Centre App Case Study

A retail app that doesn’t get in the way

This is a case study for a concept mobile app, done as school assignment for a fashion shopping centre, that aims at simplicity, fluidity and unobtrusiveness, while providing a platform for both the customers and businesess involded to have a little fun together.


Introduction and goals

During one of our studio assignments in school, we were approached by Madeo to try our hand at designing an iPhone app from scratch (Android and other platforms were omitted this time for the sake of simplicity). The client was an outlet shopping centre and the key points that we needed to implement into the app were:

  • Store locator with search and navigation
  • VIP Club with perks for returning customers
  • News section
  • Implement iBeacon technology in creative ways

These features should then play into the following main goals, based on the philosophy that customer loyalty is a key business strategy:

  • Increase customer loyalty
  • Increase time spent in the shopping mall
  • Reach new customers

Given that we had these goals set in the beginning, we could align our concepts to them throughout the process. However, I set myself two other internal goals:

  • Let users accomplish their goal as quickly as possible, so that they can actually leave the app
  • Be a little fun and have personality

I consider the former an important aspect in most kinds of everyday apps. Being over the top and yelling for attention is not cool in the smartphone world of short attention spans.

The target audience to have in mind throughout the process is 17+ mid-or-high income, active lifestyle fashion lovers.


Competition

Shopping centre apps are interesting concepts. They essentially need to exist, because every other competing mall has them, and yet there is few things people usually do with them: they locate and contact individual stores and they want to know about sales and interesting deals (this is based mostly on my humble research). But these apps don’t always put that front and center and instead try to tell users about events or gift cards (also: their maps are often ridiculous).

What’s wrong with that is that the app’s focus doesn’t align with that of the user. It tries to sell us on a story we don’t want to hear; it’s distracting us from our goal. Instead, it should pick up on the most probable use case while gently but clearly providing clues on the other ones (this is true for this kind of app; it might be different for others).

Selected existing shopping mall apps

Concept

As mentioned earlier, I believe the app should focus the most on locating the user on a map and allowing him to search for a particular store. Other features that need to be easily accessible are:

  • Information about the centre— how to get there, opening hours, parking info, contact
  • Magazine — store openings, events, tips
  • Sales — current deals
  • Profile — a user should be able to sign up (why is that will be broken down later) easily but at the latest possible moment
  • VIP Club, challenges and rewards — this is also explained below

Challenges

What this particular shopping centre has to its advantage is the use of iBeacons — small wireless “beacons” scattered around the place that help users to pinpoint where exactly they are. This is new — and useful.

We can use beacons to power “Challenges”. These are fun little tasks that reward the customer with a certain perk upon completion. Some examples of challenges can include:

  • “Find out the cumulative price of mens’ striped shirts in Retro Jeans”
  • “Get from the main entrance to Adidas in less than a minute”
  • “Find a pink love message on the ceiling of Levi’s”
  • “There’s a dementor coming! Quickly hide in a nearby changing room”

When the user succeeds in one of the challenges, he’s offered a reward:

  • “Get a free cocktail at Freshbar”
  • “You have 20 % off on everything at Nike”
  • “Don’t move; our staff will be with you in a minute to give you a special prize”
  • “Send a selfie to our big screen next to the fountain”

The purpose of Challenges is to cater both to customers and shop owners — customers get free stuff (but they can also never take part if they want — it’s entirely voluntary and doesn’t take any effort to “dismiss” and opt out) while shop owners can engage more people (and not be completely annoying about that).

The way I implemented these, as you’ll see later, would play to all the main goals (increase customer loyalty, increase time spent in the shopping mall and reach new customers).


Structure

From the beginning I wanted a very flat hierarchy. That means having few organisational (“depth”) levels which in turn is easier for the user to understand and makes navigating the app more fluid and psychologically unobtrusive.

At one point I took it too far — I had just one screen (the map) with five or six custom buttons, scattered around, that would trigger different features. That was A) not native to the platform at all, B) cluttered as hell and C) downright confusing.

I also wanted to pronounce the primary function — the map screen — as much as possible, and to let it take up as much screen estate as possible. Therefore I’ve decided to ditch the traditional bottom tab bar for a clean menu button, so there’s not too much going on on the screen at the same time.

Early stage wireframes for the map screen

After a couple of rounds of revisions of the app’s architecture, I arrived at the following structure, which in my opinion strikes a nice balance between flat and deep hierarchy. It has four main sections, of which the Map view has the most functionality (you don’t even have to leave it for most use cases) — remember, stores and sales/deals are what matters:

  1. Map
  2. Deals
  3. Magazine
  4. Information
  5. Profile

Let’s go through them.

Note: I omitted the name, logo and particular details of this shopping centre where possible.

Main sections of the app

Map

This is where most people’s needs will be satisfied. After you launch the app you are immediately taken to a floor plan of the shopping centre with your location highlighted. You shouldn’t have to select a section of the app before being presented with one, which I saw as a common mistake among competing apps.

The shopping centre’s app main screen

Apart from that, there are a few other features on this screen:

Challenge icons
The map will show current Challenges (their locations) with a blinking marker. These are designed to be distinct, but not too intrusive. When the user clicks on one, a summary of the Challenge comes up in a little pane (also containing the VIP Club icon, linking it to the large button bottom-centre) that leeds to full detail. I made the exact process in the app clearer by using animated transitions — shown in its own section in this case study.

Once the user completes the challenge (that can be either going to a specific location under specific circumstances or correctly answering a question), only then he’s prompted to create an account.

Typical Challenge flow: Map with Challenge indicators > Mini-pane with sumary > Challenge information

VIP Club button
This button serves as a gateway to available and completed Challenges. It is located on this screen to be close to the user, in the prominent spot that is usually taken by buttons for posting new tweets, take photos etc. — therefore it encourages people to take action on it. But when they do, they can dismiss it as quickly, too. Clicking on a Challenge leads to the detail screen as seen above right. Visually, the VIP button is supposed to be a mix between luxury, fun and simple.

Stores button
This is probably the most important button in the app, as it brings up a list of all the stores. It is not buried in menus and it is not put at the same importance level as the magazine, profile and other less important features. Instead, it is given equal priority as the menu button across the top bar. Once you tap it, you can scroll through a list of all stores (list is the way to go here as it allows for more systematic and easy scanning than other solutions), divided into categories, search for them and drill down to see more detail.

I feel like the decision to filter through the store categories only by scrolling to them might be a little controversial, though I think it’s a worthy tradeoff for simplicity.

Typical store-searching flow: Finding the store among all of them > Proceeding to the detail screen > Directions take place back on the map (I was also considering a 3D version of this screen)

The detail screen presents information about the store, Challenges that are bound to it, reviews from previous visitors and also the option to call the staff or get directions to the store.

Having the whole “stores interface” as a popup over the map means the user doesn’t lose his place and still has the sense that he’s in the same screen in the app. He also feels less obligated to take action on a particular store and knows he can just dismiss this view without finishing with a specific action. This feeling is emphasized with light animations that trigger on pressing the Stores button — more on animations later.

Deals and Magazine

Deals and Magazine inform about sales, events and happenings in the centre. While Deals are themed in the same spirit as the Map, Information and Profile sections — I wanted them to feel part of the same purpose — Magazine has dark UI.

This is to signal that you’re browsing a slightly different part of the app and taking a break from marching towards your shopping goals. Magazine is an added bonus by the centre’s staff for you, and it should feel that way.

Deals and Magazine share a similar aesthetic, but Magazine does it in a slightly dettached, dark form

Information and Profile

I wanted to highlight only relevant contact information in the app. The shopping centre is accessible mainly by car, so the Information screen presents a map with a “Get directions” link (to Apple Maps) and relevant parking and opening hours info.

Profile is where you log in and tune your preferences — you are prompted to create an account for Challenges to work, so that the system can reliably link you to your email address (and also send you newsletters if you want).

Information and Profile screens also follow the “Present everything clearly” approach

Branding and Visual Design

As with other aspects of creating this product, branding and visual style also took numerous iterations, failed approaches and trying again.

There is a small style/branding guide that the shopping centre uses — it has defined colors, fonts and logo specifications. I took this guide and applied it where I felt appropriate, but making adjustments throughout. The main pink color is based on the centre’s visual guide — here it’s a color that defines interactivity and is complemented by a gold color, linked to everything that has to do with Challenges.

They use Futura as their main typeface; at first I went with that, but quickly found out that it doesn’t work so well as a UI font. I believe you should use only one font (two tops) in an app, so I went on searching for similar-feel fonts that would work well and tested Neuzeit Grotesk and FF Mark, among other geometric sans-serifs.

Visual design iterations

In the end though, the app felt overdesigned and not as light as I intended to. I switched the typeface for the native Helvetica Neue and it immediately felt more at home on iOS (an exception to this are shop names on the map screen).

That means branding is conveyed through colors and “playful lightness”, which is accomplished with animations — so that the result feels in line with the cheerful colors of the original guidelines.

Interactions

Without a doubt the “biggest” interaction is going through the menu. Users need to be able to fly through it fast and without feeling any effort. I think once you have a menu that doesn’t succeed in this, people are simply less likely to use it, as it begins to be a burden. Apart from being fast, it also needs to feel lightweight, and that’s a great opportunity for introducing “springy” animations.

While a common iOS pattern would be to blur everything behind the menu, here I just overlayed it with semi-transparent white color to help suggest thatyou’re very close to where you’ve been in the app. Play with the Framer prototype

For each of these prototypes I used Framer.js along with Framer Studio, which is probably my favourite design tool right now (while I’m on the subject, all visual design was done in Affinity Designer, which I have big hopes for to be my #1 tool for generating static assets). Framer is great for iterating on animation and interaction ideas and then showing your concepts to anyone.

Tooltip Framer prototype

As mentioned earlier, all content should feel effortlessly accessible. Popups should feel easily dismissable and not “heavy”. They shouldn’t impose.

Challenges Framer Prototype

Here the animations do what I believe they should in UI design: slight cues that explain functionality and translate it into unconscious emotions. This helps people understand the app and use it more quickly.

Stores Framer prototype

What’s not done

If this app was to make it into production, there are still things to work out.

  • How do store owners create their own Challenges?
  • What happens with completed challenges and how exactly do you claim your reward?
  • What if the shopping centre had multiple floors (hypothetically)? The map feature would immediately become much more challenging to design.

Summary

This app was a challenge, but a very fun one at that. I really enjoyed being able to apply product thinking on app design — to not just think about “how it looks”. Interactive prototypes were a highlight, too.

Most of the decisions I’ve made could probably be improved with more iterations and testing (although I think most of the main concepts in the app work well), but at some point you have to stop and go with something. I tried to find that balance here, however hard I found that to be.

Overall this was a great project and it showed me where my future in design might lie.

If you want to discuss further, send me an email