UI/UX Design case study: The red sea mall digital experience

Saad Hafiz
Bootcamp
Published in
7 min readOct 25, 2023

Hello and welcome, I’m excited to showcase how the digital design experience will allow users to interact before and during their visit to the Red Sea Mall.

The red sea mall
Red sea mall

Project Overview

We are a team of five UX designers who worked on a three-week Misk Skills project to create a digital experience mobile application for the Red Sea Mall in Jeddah, Saudi Arabia.

With the main goal of creating a mobile application that helps digitize and enhance the overall experience when visiting the Red Sea Mall.

Project Process

Double diamond model
Double diamond model
Case study content

Business Research

Business Research Goals

  • Find out more about the red sea mall and why people visit it.
  • Find out the main features that are available in other competitors.
  • find out about the available facilities and services in the mall.

About The Red Sea Mall

Red Sea Mall is a must-visit shopping and entertainment destination in Jeddah, Saudi Arabia. It is one of the largest malls in the country, with over 450 stores and a variety of entertainment options.

The red sea mall
Red Sea Mall, Jeddah: A Shopping and Entertainment Destination

Location: King Abdul-Aziz Road, Jeddah, Saudi Arabia

Size: Over 242,000 square meters

Stores: 450+ (clothing, home goods, electronics, etc.)

Dining: 73+ restaurants and cafes (traditional and international)

Entertainment: Indoor amusement parks, bowling alley, movie theater

Facilities and services: Large prayer room, restrooms, baby changing facilities, nursing rooms, parking facilities, valet parking, lost and found services, security services, customer service, wheelchair and stroller rentals, ATMs and banking services, Wi-Fi access, elevator and escalator access, event coordination and management services.

Red Sea Mall is known for its impressive architecture. The mall is designed to resemble a wave, with a curved glass-covered atrium that is 120 degrees wide. The atrium is home to a cascading waterfall and lush indoor gardens.

The red sea mall impressive architecture

Competitive analysis

we compared local and global competitors based on their features in the following analysis

Competitive analysis

Some of these features are very important and are available in both of our main competitors. the features are:

  • Interactive Map: an interactive maps that helps the users to seamlessly navigate the mall.
  • Visit Planning: planning the visit ahead of time by selecting all the locations the user want to visit.
  • Nearest Parking/Gate: the closest gate and parking lot to the locations selected in the plan.
  • Online Smart Parking: viewing all the available parking spots in a parking lot with the help of sensors and navigating back to the parked vehicle.

User Research

User Research Goals

  • Find out the purpose of visiting the mall.
  • Find out frustrations and needs when shopping or navigating through the Mall.
  • Find out which demographic visits the mall.
  • Find out the user’s overall experience when visiting the mall.
The five W’s of the red sea mall user’s
the 5Ws of the Red Sea Mall users

Research Methodologies

Three methodologies were used to conduct the user research.

1- Screener survey

2- Interviews

3- contextual inquiries.

Screener Survey

A screener survey of 8 questions was conducted with 57 responses to find general information about the mall’s visitors.

Survey question 1
Survey question 2
Survey question 3
Survey question 4
Survey question 5
Survey question 6
Survey question 7
Survey question 8

Based on these 8 questions a general demographic of the mall visitors was discovered.

The demographic is:

Survey results

Interviews

We asked red sea mall visitors 10 questions to further understand the general user experience in the mall and the visitors needs and frustrations. based on these questions we were able to come out with helpful answers that turned into an affinity map to help us gather helpful insights.

Affinity Map

An affinity map showing the answers of the interviewees.

Helpful insights

  • Users find it hard to find parking.
  • Users want an easy way to find their stores.
  • Users associate their shopping with a certain gate.
  • Most users do plan their visit to Red sea mall.
  • Majority of users dislike crowds.
  • Difficulties in figuring out the best route to take from gate to store due to similar paths.
  • Difficulty in finding a parking spot and remembering its location later.

Contextual inquiry

We decided to visit the mall as a group to perform the inquiry. we were able to find helpful things including:

1- A list of almost everything available at the mall

A list of almost everything available at the mall

2- All the available service machines inside the mall

All the available service machines inside the mall

3- always changing pop-up events.

A pop-up event

4- All the available entertainment options.

All the available entertainment options

User Research Outcome

After applying the three chosen research methodologies we were able to conduct a persona that will help us visualize our users in order to achieve their goals and serve their needs.

Persona

A persona. which is a visualization of our user’s. the red sea mall visitors

Problem Statement

the Problems our persona face when she visits the red sea mall

Solution statement

The solutions of the persona’s problems

Application VS Website

Now that we have an idea for what the solution will look like, how are we going to implement it? as an application, or a website?

Showing why did we choose an application instead of a website
feature prioritization. showing what are the features and how important are they
MoSCoW Method

User’s Journey

now that we have everything we need to create our application. lets take a look at the user’s journey before using the application.

  • Journey Map
the Journey map of the persona’s journey before using our application
Journey Map

Lets look at another way that will help us visualize Lujain’s journey.

  • Storyboard
a Storyboard visualizing the persona’s journey before using our application
Storyboard

Now that we have a clear understanding of our persona’s goals and needs and clear visualization of her journey and how to fix and enhance it. and a clear idea of what the solution is, and how to implement it. it’s time to start designing.

Mid Fidelity Wireframes

half of our user interfaces in mid-fidelity format
the other half of our user interfaces in mid-fidelity format

High Fidelity Wireframes

half of our user interfaces in high-fidelity format
the other half of our user interfaces in high-fidelity format

User Flow

A user flow showcasing the entire application and how it works
Annotated User Flow

Now lets take a look at the user’s journey after using the application.

  • Stroyboard
A storyboard visualizing the user’s journey after using our application
  • 3D Video Showcase

This is a video created to resemble a user’s experience inside the red sea mall when using the application. seamless and easy navigation to the destination.

A 3D video simulating the user’s journey inside the red sea mall after using our application.

Test and Iterations

Before

Test iterations with showing the chnages made after testing

After

Test iterations with showing the changes made after testing

Application Showcase

A prototype video showing the application and how it’s used

Thank you! 🤗🤗

Thank You for reading this article. I hope you liked it and found it helpful. Support me by following me and showing some love by hitting that clap button.

--

--