Zorlu World

iOS application
Lead UX/UI design - 2018
Mockups of Zorlu App for the App Store
Above / Various screen mockups for the App Store

The Brief

Zorlu World & Performing Arts Center is a large complex located in the heart of Istanbul. The compound contains an upscale shopping center, a five-star hotel, cineplex, residences & offices, as well as the largest performing arts center in the country. I was tasked with creating an app which included (amongst other things) a store directory, wayfinding system, and a QR reader for discounts and rewards through participating stores and vendors.

User Research

Working alongside the marketing team at Zorlu Center, I was able to streamline relative quantitative data in their possession during our 1 month long discovery phase. Through this discovery phase, we determined many of the pain points customers were having while visiting the shopping center. This informed points of emphasis that we needed to address that we weren't even aware of.

We were able to combine this with qualitative data from around 100 in person interviews we conducted with the Zorlu team in the shopping center throughout a two week period. This allowed me to create user personas  as a sort of baseline for the needs of the user that would be using the app.

User Persona Card
Above / One of the User Personas that was used to inform design

Typography & Colors

Type was set in Whitney Screen Smart in 3 weights. This font was chosen because it is malleable enough to match the Zorlu Center aesthetic while also being optimised for the screen.

Small part of the initial typography style guide
Above / Small part of the initial typography style guide

Wanting to portray a minimal and elegant aesthetic in order to keep with the branding of Zorlu, a primary blue hue was used more as a highlight and accent color to provide delight to the user. The blacks, whites, and grays were all comprised from different  tones of the primary blue in order to keep a consistent look and feel throughout the app.

Color Palette used in the App
Above / Blacks, whites, and grays were all derived from the primary blue color

Iconography

Over 40 custom icons were used in order to perpetuate the feeling of exclusiveness and chicness established by type and colors.

Active state of icons used in App
Disabled state of icons used in App
Above & Below / Some of the icons that were used throughout the app. Active and Disabled sets were done for all icons. Tab interactions were a point of emphasis to differentiate the Zorlu World app from its competitors.
Bottom Tab interaction GIF

Userflow

After getting approval on type & colors and developing assets such as photos, videos, and icons, lo-fi wireframes were created and tested in order to quickly ascertain the quickest and easiest steps users would be able to use in order to reach their goals.

Initial wireframes showing sign up process and user flow from Home Screen to Qr Scan
Above / Wireframes showing the initial sign up process and a common flow from home to QR scan

Onboarding

Through our research, we learned that a big problem of the previous app was the difficult sign up and login processes. The user would have to get a text code each time they wanted to login, which was extremely tedious. Working with developers, we eliminated that step and tried to helps users understand the functionality of the app while also showcasing a bit of personality through relevant illustrations through our onboarding process.

Splash Screen illustrations
Above / Early onboarding screens
Home Screen

Home

We decided on creating 5 scrollable cards on the home screen based on previous research and user testing. In this last iteration, users can quickly go to STORES, to access the directory and maps, REWARDS, to see the latest offers from stores and restaurants exclusive to app users, QR, in order to take advantage of those offers or to see scanned item history, EVENTS, for upcoming concerts and shows, and finally WI-FI, to connect instantly to the free internet service provided by Zorlu.

Home Icon

Directory

A simple, clean, and familiar interface allows users to search for or scroll to find stores, restaurants, and more throughout the shopping center. Filtering based on 15 categories such as womenswear, menswear, electronics, food & drink, is also provided. An unexpected income stream came up for Zorlu because we were able to collect and provide user search data which they, in turn, were able to monetize.

Food and Drink Icon
Director Screen with Food and Drink Option Selected
Map and Route Screen

Navigation & Maps

Due to the overall architecture of Zorlu Center, wayfinding was a major pain point for people who went there. An indoor navigation system was developed by placing over 200 beacons to work with the user's smart phone to map out routes to stores, restrooms, parking, and other facilities. A ROUTE button, placed on relevant screens throughout the app was created to allow the user to quickly open the map in multiple places throughout the app.

Map Icon

Rewards

The Rewards sections was used to engage users with current promotions and sales at participating stores & locations. A meticulously designed CMS system with photo dimensions, copy word count, and more was provided so marketing team at Zorlu would be able to easily update these cards internally.

Rewards Icon
Rewards Screen
QR Screen

QR

Zorlu wanted this to be a main function of the app. Users can quickly scan QR codes for discounts & rewards throughout the shopping center. Participating stores and locations throughout the Zorlu complex were outfitted with a QR generator which the user would be able to scan by using this option.

QR Icon
Home to Rewards Screens GIF

Events

Another CMS system that allows users to see upcoming shows, events, as well as performances was provided. Just like with Rewards, the marketing team at Zorlu would be able to easily and efficiently update the Events section by providing a few fields of information that would seamlessly integrate into the app.

Events Icon
Events Screeen
More Options Screen

More options

A fly-out menu with secondary options (or another place to find primary options) was provided in the more button on the bottom tab. Users could access their profile, wallet (a record of QR transactions), settings, and more in one step. We also put a wi-fi option here in case the user got disconnected while they were somewhere else besides the home screen in the app to quickly reconnect.

More Option Icon

WI-FI

A main priority was allowing a quick and easy wi-fi connection for users. Our research showed that a lot of the visitors to Zorlu Center were familiar with the way Starbucks handled wi-fi connections in Istanbul and had positive feelings towards its ease of use. We decided to use a very similar system, with one caveat: users had to sign up for the app in order to take advantage of the free wi-fi.
Zorlu wanted to build a database and this was their main way in incentivizing new users to not just use the app but to sign up for it as well.

Wi-Fi Icon
Connect to Wi-Fi Screen
Profile Screen

Profile

Even though a profile screen was not initially planned, through user testing and then A/B testing, we realized that users were looking for a profile section for this app and were slightly disappointed when they couldn't find one and were frustrated looking for one. We allowed this to be a place to store information and invite friends while providing another settings screen as well as a sign out button to create a sense of security.

Profile Icon
Components Used throughout App
Above / Various Components

Conclusion

The Zorlu World App was awarded with the App store App of the Day immediately after launch. There were over 11,400 downloads and sign ups within the first six months. High ratings and mostly positive reviews also confirmed the successful launch of the project.

Need help on a project?

get in touch