Case Study: A UX tale of two centers’ digital transformation
Welcome to our UX tale of two centers’ digital transformation. For our third project in the UX Immersive Course by MISK, our team set out on a journey to reflect the experience of AlKhayyat Centers 1 & 2 on a digital platform. Join us as we take you through the journey of creating a digital solution that truly reflects the unique needs of visitors and enhances their overall experience.
Disclaimer: This UX design project was conducted as part of a student project and is not associated with AlKhayyat Center or any other business.
Project duration: Three weeks
Project type: Group project
Role: Involved in all of the processes
Teammates: Noura AlMutahar, Abdulrahman Hakami, Sufana Hammad, Lama Hamdan.
Tools: Figma, FigJam, Adobe Illustrator, Google Slides, Optimal Workshop, Zoom.
The Problem: AlKhayyat Centers are falling behind the competition
AlKhayyat Center, a popular shopping and dining destination in Jeddah, is facing the challenge of falling behind the competition in providing a digital experience to its customers. The lack of a digital presence has resulted in missed opportunities to connect with customers.
The Solution: Digitizing the center’s experiences
Digitizing the center’s experiences to meet the evolving expectations of its customers, while addressing the common issues faced by customers in the physical experience that can be improved through a digital solution.
Design Process Double Diamond
From High-End Stores to Trendy Coffee Shops: A Look at AlKhayyat Centers One and Two
AlKhayyat Centers 1 and 2 are commercial buildings located in Jeddah, Saudi Arabia. While the buildings are located next to each other, they target different audiences and offer different experiences for visitors. AlKhayyat Center 1 provides a wide range of high-end stores that cater to visitors looking for luxury shopping, while AlKhayyat Center 2 is a trendy coffee shop destination, considered a socializing zone that caters to visitors looking for a lively and social atmosphere.
Business research
To create a digital experience that stands out, we conducted a business analysis of AlKhayyat Centers 1 & 2. Our goal was to gain a better understanding of the business’s position among its competitors, identify its strengths and weaknesses, and analyze how digital platforms could be used to resolve physical pain points in the current visitor experience.
C&C Analysis
Our methodology involved a comprehensive C&C analysis of both direct and indirect competitors.
Key findings
1- Our competitors had an online presence (website and Application).
2- The majority of our competitors didn’t provide online shopping.
3- The majority used map integration as a navigation system along with a written description.
4- The majority of them had a “Plan your visit page”.
5- Our competitors provided a page with the latest events/promotion.
User research
To create a digital experience that truly resonates with visitors, we put ourselves in their shoes and conducted a contextual inquiry at AlKhayyat Centers 1 & 2. Our goal was to observe their behaviors and needs, identify their frustrations and triggers in the current experience, gain a deeper understanding of their demographic, and evaluate their level of digital literacy.
Contextual inquiry
We conducted three site visits during weekends, weekdays, and different times of the day. In total, we observed 15 users and had the opportunity to speak with them about their experiences and pain points.
To synthesize the data gathered from the contextual inquiry, we created physical models that helped us visualize our findings and identify key pain points in the current experience.
Physical models
Key findings
1- Users showed a pattern of using digital devices while shopping
2- The centers target different audiences, but some users visit both.
3- Pain points experienced in both buildings can be categorized into 3 main themes: Information, crowdedness, and parking.
Developing our personas
We decided to create two personas to help us better render the different needs of each building. These personas were developed based on the data gathered from the contextual inquiry and physical models.
Meet Nadia — AlKhayyat 1 visitor
Nadia’s journey map
Meet Louai — AKhayyat 2 visitor
Louai’s journey map
Creating two personas for our project helped us empathize with the users and gain a deeper understanding of the unique issues experienced in each building, as well as the common pain points shared between them.
Did I lose you yet?
Don’t worry, it’s okay if you got a little lost in all this talk of personas and pain points, the following diagram will help you catch up!
The problem
Before sharing with you our solution let’s take a quick detour to The Business needs that we had to consider in our solution.
Business Needs
The solution
Developing our solution
Sitemap
Then we moved on to create the sitemap, and to ensure that the navigation within our website was intuitive we conducted a closed card sorting with five participants using the Optimal Workshop tool. Which resulted in the following sitemap.
Users Flow
To help us imagine how each persona will be using our website, we started by creating multiple iterations of each page using the crazy 8s method, then we moved on to creating a hybrid flow combing (User flow + Wireflow) for both Nadia and Louai:
Nadia’s flow: she is planning to visit AlKhayyat Center later today, but first, she needs to check the store opening hours, location, and parking availability:
Louai’s flow: he is planning to meet with his friends today at AlKhayyat Center, before visiting he wanted to reserve a table and check the parking availability:
Usability Testing
In order to evaluate our progress and identify potential design issues in AlKhayyat Center website, we conducted a moderated usability testing with 5 participants. The study involved assigning participants the following task: “You’re trying to visit AlKhayyat center later today, but before visiting you want to check the store’s working hours, location on the map, and parking availability”.
Through this process, we were able to gather valuable feedback from participants on their experience using the website and identify areas for improvement, which included 3 major changes:
Mockups + Annotations
Design system
High-Fidelity Prototype
Working on this project was a challenging and rewarding experience for our team. Creating a digital experience that would reflect the unique needs of visitors to both AlKhayyat Centers 1 & 2 required a comprehensive research and design process that pushed us to our limits. From developing two personas to conducting contextual inquiries for the first time, we learned valuable skills that we will carry with us in future projects.
As we move forward, our next step for the project involves developing a desktop version of the website, which will provide visitors with a seamless and enjoyable experience regardless of the device they are using.
Finally, we would like to express our gratitude to our instructors Rahaf Abunijem and Nouf Alghamdi, who provided guidance and support throughout this UX design project. Their expertise and feedback were instrumental in helping us to develop a user-centered design that met the needs and preferences of our target users.
