Enhancing the UI of The Dubai Mall app

Project Overview

The Dubai Mall, one of the world's largest shopping malls in UAE also known as the home of the Dubai shopping festival. Thousands of people shop at the mall day in and day out and I wanted to design an e-commerce experience to compliment this mega structure with my design touch.

Note: This case study is only based on a part of the happy path of a user journey.

Problem

I wanted to design a concept e-commerce app for the Dubai Mall that compliments the visual aspect and the user experience with the current Dubai Mall application available out there.

My role

UX research, Ideation, UI pattern Library, UI design

Time

1 Week

Tools

Pen & Paper, FigJam, Figma

Goals.

I had to define a few goals for myself to make sure I align myself and the design that serves a purpose.

Goals

  • To understand how the e-commerce platforms work/ The current state
  • To understand the competition out there for online shopping
  • How does each competitor out there differentiate from each other in terms of the experience and solution

Research.

A research board to align myself on the task

User Research.

After discussing, and interviewing a couple of individuals who do online purchasing, I was able to gather a few concerns they face in general when using e-commerce applications. Listed below are a few;

Insight #1

Can I buy products as a guest?

Oftentimes than not individuals often visit online e-commerce stores in a rush to purchase a specific item. They are curious if they can purchase items without the hassle of registering themselves.

Insight #2

Can I access my social accounts?

Considering that humans are connected with social media platforms. Users prefer to register using their same social credentials.

Insight #3

Can I search for anything I want?

Availability and accessibility of information are very much relevant in the current context of the software industry. Users prefer the freedom to choose their preferences.

Competitive Analysis.

Based on my research board ☝️ I began my market research by identifying a few market competitors in e-commerce shopping in the middle east region.

By analyzing these competitors closely, I was able to get an idea of the key features they provide and the online shopping standards to follow.

Note: I limited my market research to 2 apps that are operating in the UAE. Also with the assumption that the apps have done their background research on the user base and their needs.

Define.

Defining Problems.

While researching I was able to identify a couple of problems users mentioned and convert them into problem statements.

For this I used a Point of View Statement (POV) method to come up with the How Might We… questions to help me solve the problems.

User Flow Diagram.

Since I was focusing on a small part of the user’s journey I decided to connect the solution using a user flow diagram to understand the user’s journey through Hi-Fi wire-frames. I’ve only prototyped fewer screens below to understand the flow.

Key Takeaway:
Using a user flow diagram, helped me to understand the decision-making touchpoints as a user.

Visual Design.

Mood Board.

I created a simple mood board with a collection of Dubai Mall-related application screens and other competitor UI screens along with colors and fonts to be used.

Key Takeaway:
Creating a mood board always helps me to stay aligned & stay current with the design, keep UI elements consistent, and to help build the UI style guide.

UI Library.

A simple approach with component-based visual element design helps me always to keep the UI consistent, for design hand-off and to expedite the visual design.

Project Reflection.

I was amazed at the Dubai Mall application out there and wanted to create a simple eCommerce app experience to shop for products.

I focused more on the brand identity to keep the design aligned with the current app out there.

Though the design is not a complete end-to-end experience design, I was able to deliver a basic eCommerce experience along with a User flow diagram, Mood board, and UI pattern library.

What could have been done better.

/ I could have designed the entire user journey along with related sub-journeys to come up with a complete eCommerce app experience.

/ The UI pattern library components & variables could be optimized better.

/ The prototype could have been shared with the interviewed users to understand if their problems were addressed by the design or not.