Designing RedSea Mall app

RedSea Mall is one of the biggest Malls in Jeddah, Saudi Arabia. It was a turning point to our little indoor navigation startup “NaviBees”, we were starting to get attention from big clients. and I was asked to get the requirements from the managing board, research user needs, and come up with a user friendly design for the app.


The Problem

REDSEA Mall is a three story 242,000m² building. It has 18 gates and hundreds of stores. People lose their way easily and sometimes can’t find what they came to buy, although it is there .. “somewhere”. This affects business negatively.

We tried to find out what more difficulties do people face so that the whole picture could be seen. Therefore, an online survey has been conducted asking for things that bothered people most when they visited the mall. We found out some interesting comments:

Our Anchor

Based on our research we decided to focus on the most 2 common challenges related to our technology:

  • Make people find their way fast and easily.
  • Help people remember what they came to buy.

Being responsible of the designing part, I started exploring how we achieve those goals as transparent and intuitive as possible.


Prototyping

I always start prototyping by thinking what if we have unlimited resources, and no restrictions.. What does it take to build the perfect App? Then I move backwards trying to reach a common ground using the limited resources we have.

Our app is mainly used for navigation, and some people find maps difficult to read.

Can we make something that is more intuitive than a top view map?

I came across Monument Valley and thought: 
Why don’t we build an isometric indoor map? With a simple character showing your place instead of a solid blue dot.

It sounded as a good idea, easily gamified, though I knew it wasn’t easy, as the quantity of art needed to be done seemed doubtful. How scalable is that solution for upcoming similar projects? If we adopted an easy 2D approach, users won’t be able to rotate the map and some stores won’t be visible, nor they will be able to identify directions easily…etc.

I then quickly started to sketch the idea, giving it a chance to know whether it was worthy or not.

isometric indoor map view inspired from monument valley game

Unfortunately, we didn’t have enough resources nor time to test the idea, which would have been interesting to try.


Testing Variations

Great designs are not created instantly, but with continuous trials and errors. That’s why we tried different variations to come up with a simpler solution.

We used to present a demo app that starts with a map view to our clients. Yet providing such map to real users is like leaving them alone without guidance. After testing another variation for the home page, we found out that it is more accessible and discoverable to have the stores categorised, and then show the map later.

We then had some basic understanding of how would the app look like. Ready for the next fidelity level.

Wireframe of the main layout

Testing Interactions

I used Principle for designing the prototype, a very quick tool and well integrated with Sketch. It was to test how the interactions of the app would look like and, a couple of variations for the shopping view.

A normal list view of shops was an obvious architecture:

Though I was asked if we can make it look even better? I started experimenting with Google material Cards to see how the brands in full view looked like.

We decided to keep the list view, as we found out that the card view lacked accessibility: in order to reach the end of the list users will need to swipe many number of times. I tried to overcome such thing by an easy access alphabet letters at the bottom. We agreed that the list view was more straightforward, as well as seeing about 5 stores at once.


Iconography

Not only do icons make apps look prettier, but also make things more recognisable. After settling on the main categories that will appear on the home page, I started designing our own icon set to be cheerful, consistent and easy on the eye.

By now the App is almost ready, except for the App icon. It was suggested to use the mall logo, but I thought we can do a simplified version of it. Therefore, I used only 1 red wave from their logo, made it more geometrically correct and put it on the blue background.

The real thing

We went many times to the mall, testing the app ourselves and telling our friends to use it and give us their feedback.

Our look while people tested the app (this is Jonathan Ive)

I have also conducted some usability testing sessions, watching people using the app and take notes of issues that they find difficult to understand. We used these information and added:

  • Favorite shopping list in the app
  • Push notifications when people pass near stores that are on sale.
  • A friendly dialogue asking people to turn on their bluetooth, instead of a pop up that is instantly closed by users without reading it. Since our technology relied on bluetooth.

We were really proud of what we have created as a team. As well as, the managing board at RedSea Mall were amazed by the App. Yet our main interest were the real users of the app, if they were going to love it and actually use it, that is the real success.

Lessons learned

RedSea Mall app was the first B2B product I worked on. Trying to satisfy the business needs is very critical since they are the ones who are paying for the app. Though putting the end user in higher priority is as critical since they are the ones who will actually use the app. Whenever I found contradictions between the two interests, I learned to argue with the managing board in order to reach something that please both.

Designing RedSea Mall was a great adventure, and seeing people use the app during their visits to the mall is quite rewarding.

I‘d like to thank the whole team for the hard work.

Available on the App store and Google play.