Welcome to the Home of Luxury
This story is about how we designed a beautiful shopping experience for a luxury fashion & beauty e-commerce Ounass and what we learned in our journey so far.
Ounass presents a carefully-curated edit of exclusive capsule collections from local and international designers of the highest caliber, housing the Middle East’s widest range of top-tier designers. From fashion and beauty to lifestyle and homeware.
Since launching in December 2016, Ounass boasts over 500 luxury brands as Al Tayer Group’s first and exclusively digital e-commerce site.
When
Ounass was originally developed as a Hybrid Application. In 2018, we kick-started a project to convert our Hybrid App into a fresh new Native app experience.
Why
The hybrid app experience was slow and our users complained that it was difficult to shop on.
“I couldn’t make the transaction over the app. In the end, I had to call and pay over the phone.”
“Difficulty making payment. The site would say not working all of a sudden a few times. I tried to log in to the app, and my login info did not work. So app was useless. Finally made a purchase by calling customer care. Difficulty making payment. The site would say not working all of a sudden a few times. I tried to log in to the app, and my login info did not work. So app was useless. Finally made a purchase by calling customer care.”
“App is soooo frustrating to use. Very slow and keeps refreshing your search!”
How
Our approach was simple. Be customer-centric! Identify our customers and understand their pain points.
What is a hybrid app?
A (hybrid app) is a software application that combines elements of both native apps and web applications. Hybrid apps are essentially web apps that have been put in a native app shell.
To give you context this is how Ounass used to look like when it launched:
Discovery & Research
Design research is a necessary ingredient for creating, developing, and delivering a successful product. Before we jumped into solutions we planned various activities that helped us with structuring our product roadmap.
VVIP’s
Shops very frequently and mostly via their own stylists and assistants; Very informed about fashion and knows exactly what they want; Are invited to runways and exclusive events where they can pre-order directly; Belong to Emirati and Saudi’s very wealthy families.
VIP’s
Frequent shopper, mostly via personal shopping; Very demanding and impatient; Expects discounts as a sign of attention; Age XX-XX: browse online; XX+: don’t shop or browse online; Emirati / Arab expats (brought up abroad) / Indians / Saudi.
High Spenders
Frequent & experienced online shopper; Compares items and prices across websites; more impulsive customer — won’t think long to get new & exclusive items; Understands and accepts higher prices due to “Dubai” location; Appreciates 2-hours delivery in Dubai.
The Price Conscious
Occasional & experienced online shopper; deliberate and planned; Compares items and prices across websites; Stores items in bag/wishlist till discounts and/or salary; When shopping beauty- detailed information, reviews and how-to-videos are very important.
Saudi’s
Frequent shopper; Inspired from local influencers on social media; Word of mouth is extremely strong; New to e-commerce, expectations are shaped by previous experiences (also negative ones); Have major trust issues towards paying in advance online
Typography
Colors
Iconography
Onboarding
Mobile app onboarding is a designed series of instructions or interactions that help the user ease into the app’s experience. The purpose of these onboarding screens — also referred to as walkthroughs — is to introduce the app and demonstrate what it does.
Ounass onboarding welcomes new users by giving a short introduction on what it’s about, and reasons why our customers should shop on our platform vs competitors by highlighting unique selling points. The one cool thing about Ounass onboarding is that it all happens on a single page.
Discover Ounass
First impressions are important. Understanding how people use homepages is critical for creating a proper homepage design. There are two important functions to consider from the homepage.
- Show users content that they can engage with.
- Show users injection points that can direct them to the desired content.
On Ounass we welcome all our users with a greeting for example “ Good Afternoon Anum”. In the first fold the user can engage with their wishlist, quick access to other genders, search and interact with editorial and shop content. We also highlight our unique selling points with the intention to wow our customers.
- Immediately after onboarding, we auto-detect location and ask the user to confirm their store.
- When the user returns to our app the second time, we trigger the gender selector to be open by default.
- Below the fold, we highlight quick access to categories and product recommendations.
Product Listing Page
There are a number of solutions we introduced to our product listing page. With addition to Filter and Sort, we also give our users access to quick filters. Quick filters are smart and work dynamically. Below is an example of how filters work — in this instance if you select Clothing, then we will show you subcategory of Clothing — Casual Shirts, Coats & Jackets, etc.
With respect to our listings achieving a good balance in the list item information is key to improving the user’s ability to find the products they are looking for. A good visual context of the item, quick ability to wishlist, promotion type, and visibility of multiple color variations make for our balanced product listing.
Filters
Keep it simple. That’s the number one rule for configuring filters. The easier they are to identify and operate, the better your users will like them. Our filters are always exposed, so the users can easily navigate between different attributes and select desired filters. To solve the problem of which filter is applied on which attribute, once selected we highlight them as tags on the header.
There are two ‘Click to action’ buttons — Reset and Done. Once the user selects a filter, reset becomes active (which will reset all applied filters). In order to see applied filters on the product listing page, the user can exit the filter page just by clicking on done.
Product Display Page
It’s not just a product, it’s about introducing a lifestyle. People are inspired by products when they see it in context rather than the item itself. With respect to highlighting the key information: brand name and price is always visible in the first fold.
If a user clicks on add to bag, a bottom sheet interaction slides up, and shows user color options, and size options -
Shopping Cart
A simple rule in interaction design is to try to create an experience that matches the way that the users perceive the world, and therefore make it more usable and intuitive. Walking into a store, adding products to the cart, and having that one last chance to review everything before you go pay is the same experience we want to offer to our online shoppers.
We also give our users quick access to support if they want to get in touch with us on concerns or feedback. They just have to click on the help bubble icon on the top right and it opens a sheet as seen below.
Checkout Experience
Customers crave simplicity. With online shopping moving quickly towards mobile, convenience is becoming a must for consumers. Overcomplicating the check out process can result in cart abandonment and loss in conversion.
What you see below is an example of a single page checkout that our returning customers see. Bag summary, delivery address, and payment type are saved from their previous purchase and all they have to do is review and click ‘Buy Now’.
Now you’re probably thinking what’s the experience like for guest users. We’ve broken it down into 3 steps:
- Step 1: The user needs to enter their shipping information and select a delivery time slot.
- Step 2: The user has to select their preferred payment method.
- Step 3: The final step is the order review page. The user gets a chance to review their details before continuing with their purchase.
Order Success
Wooing the customers with attractive offers, impressing them with a beautifully designed application, funneling them through a well-optimized checkout and finally convincing them to purchase, it is nothing less than a victory. These are your most valuable customers!
But the journey doesn’t end here. To add value, a beautiful message at the end of the purchase can go a long way. It not only helps us make repeat sales, but it also leaves an everlasting impression which adds to the goodwill of the company and helps to build the brand.
We also make sure other important information is highlighted like Estimated delivery, Order summary— a snapshot of items they have ordered, quick access to their order details and a summary of the next steps.
The Future is Bright
We’ve made a lot of progress in such a short time towards reaching this far, but there is still more to do. As we continue to work towards our vision by providing our customers with the best online luxury shopping experience, we want to do that with honesty and transparency. This post is a beginning in our efforts to share more of our processes and our insights, so look forward to more articles in the coming months.
To my team, I can’t thank them enough. With their continued support and endless enthusiasm, designing and building this product so far has just been an amazing journey.
Want to experience Ounass first hand, download the app here.
