Spring into the
Calm of
nature with just a simple screen touch

Ecom's (with brands like Max Fashion and Splash) is the leading fashion retailer in the middle east and the gulf region. While the sales of these brands inside malls and offline stores have been growing year by year, the sales from online channels (Eg Maxfashion.com) have been on the decline. It is principally because customers do not get to try the products before purchase (to check the fabric, the fit and the overall look) and hence are reluctant to buy stuff online.

wireframe
problem

The Problem

Adsnurl has decided to build a new and independent fashion e-commerce app. This app shows the limited customer set of products (approx. 500), but the key differentiator being that customer can get these products on the same day for trial (less than 2 hours).

The customer has to just pay a nominal fee of 7 AED per product as a trial fee (Which has to be paid upfront. Cash on Delivery is not allowed for trial fee payment). Once delivered, the customer can try all the clothes ordered, decide to buy or reject each product.

Customer will have 30 minutes to try all the products while the delivery guy waits. In case the customer chooses to buy a product (let’s assume the selling price is 100 AED), the trial fee is waived off and adjusted in the cost of the product. The rejected items will return to the delivery guy.

task

The Task

  • To create Basic Design Guidelines including Typography, Color Palette
  • To design Product Details Page (PDP), Cart or Bag Screen (where a bunch of products is added for trial)
  • To create Post-order journey screens (tracking after order after placement, rejecting or accepting the products post-trial and making payments for accepted products)
  • To create Information Design and Hierarchy (Communicate the entire Trial Model, Trial Fees, Conditions.

To begin with, I needed to build my case. One does not simply start making a product. It’s critical to get all these insights before embarking on the design itself to ensure that the team is solving the right problems and aligned on the project goals.

The flowchart below outlines the core stages of my redesign process. I chose to take an iterative approach, testing and improving the design throughout.

approch flow

A bit more details…

Discover — Lorem Ipsum is simply dummy text of the printing ?

To thoroughly investigate the problem space of online shopping, I conducted observations in stores and online for fashion brands and other competitors. And then I conducted interviews based on topic maps. Next, I coded users’ responses by looking for commonalities in the challenges users faced and their contexts.

diagram

What people love in store

  • First-hand experience with the product (touch and see)
  • Staff accessible when needed
  • The environment made room for people to explore and be inspired

What people love online

  • Can look at lots of items quickly
  • Save items to list
  • Able to check product details and availability online

Understanding User

My principle is “Start With Why” to clearly understand why users would need this app. Why should they care? It establishes the context and can help identify the problem users are facing.

We ask to find purpose. It guides the narrative and defines the value proposition.

diagram2

When designing for international markets, having a more international sample often reveals problems that could well exist for domestic users, too. We found that there were no distinct differences between cultures when it comes to main usability issues such as navigation. It resonates with this finding by Jacob Nielsen:

“People are the same the world over, and all the usability guidelines remain the same. After all, usability guidelines are derived from the principles of human computer interaction (HCI), which are founded on the characteristics of computers and the human brain and the many ways the two differ.”
stats

User Persona

Discover — How do users shop online and in-store? (LOREM)

First, I created a provisional persona for a typical user based on online research and the base of users within my friends and family. This persona was created with assumptions and not fully research-based, but it was something that I came back to throughout my project to guide my design decisions and priorities. (If this was a bigger project I would want to validate with more user interviews.)

user
Fatima Noor, 31

Sr. Executive, Etihad

About

Fatima is from Kuwait, working in Dubai as a Senior crew member in Etihad Airways. She is a busy person with lots of meetings and activites to end. With such a busy lifetyle, it gets difficult for her to take time out of her career/home needs and buy the right apparel. Running on tight schedules, she misses her ‘amazon delivery most of the time, and to schedule a return is a hassle. She wonders how will she get over this crisis.

Behaviors
  • Happy with work
  • Very competitive
  • A problem solver
  • Fashionista
  • Selective
  • Good manager
Needs/Goals
  • Want to buy clothes
  • Want to try the fit
  • Check the fabric
  • Avoid time wastage in stores
  • Trusted shopping
  • Make life easy

Job Stories

I used the Jobs To Be Done framework to explore a context in which a user would use it and understand their motivation and desired outcome.

It culminated into artefacts called Job Stories:

Situation | Motivation | Outcome

When I am shopping online, I am confused with sizes and I wish I can try them before buying.

I want to go out on a family event, and I do not have time to go to the store so I want it delivered home.

I want to try all my dresses so as to buy the best fit and avoid the hassle of returning.

I want a single & simple way to watch a lot of items quickly and save my hours of queue.

I don't have much knowledge of fabric, want to touch & feel before buying the dress.

Usability Tests + User Interview

I opted to further validate my assumptions by usability testing and interviewing a comparative demographic: millennial, online-shoppers who are users of Amazon, Zara, Myntra, H&M, etc.

Assumption #1

A significant portion of users who reach the home screen has the intention of buying specific items

Findings:

Answers collected to support the assumption that there is a significant portion of users who shop online only when they have purchase-intent for a specific item(s):

What percentage of the time are you shopping online for a specific item versus shopping without a specific item in mind?
user

6 out of 10 users tested said that they shop online with specific item in mind 90% or more of the time

Only 4 out of 10 users noted that they shop online without specific item in mind more often

Assumption #2

Users with specific items in mind look forward to having the option to try the fit and fabric as well

Findings:

suvey

Users’ behaviour in response to the above scenarios further validate assumption #2, as users with purchase-intent will go for significantly more than place order online

Assumption #3

Time taken to try apparel by a user (as discussed by a group of 10 female)

Findings:

User’s time requirement to try an outfit varies with item, and if they are trying to create a match

sizes

Assumption #4

A significant portion of users are willing to pay for the products they order to try and later buy it

Findings:

I asked users if they are willing to pay for this service per product, to which most of them agreed — however, the behaviour was a bit confusing.

How interested are you to pay for the home fitting service?
user

6 out of 10 users tested said that they shop online with specific item in mind 90% or more of the time

Only 4 out of 10 users noted that they shop online without specific item in mind more often

Defining Pain Points

People want to be able to quickly decide an outfit without compromising their creativity and sense of self. Statement pieces reflect personality. Individuals who have statement pieces, tie their identity with their outfits.

Pain Point 1

Making a collection of products based on availability for a home test fit. Assuming not all the product will be eligible. For a brand selling all kinds of lifestyle products, the possibilities of having products which are not eligible for test fit is quite high.

Pain Point 2

Making a single Order Id for both: products for test fit & products purchased instantly; e.g. the user has already purchased socks but wants to try out shoes

points

Pain Point 3

Identifying the time required to try the products ordered for fit — if it is feasible and finding a solution. Based on Assumption 3, the time will vary as per the order type — 3 t-shirts will take as much time as a Dress.

Pain Point 4

Tracking the entire order, time calculation and successful purchase/return of products. A clarity in logistic-ops is a must.

To help prioritize the issues, I used a 2x2 map to help rank the category of issues by how important they are to the business (x-axis) and the users (y-axis).

Usability Tests + User Interview

I opted to further validate my assumptions by usability testing and interviewing a comparative demographic: millennial, online-shoppers who are users of Amazon, Zara, Myntra, H&M, etc.

hierarchy

I had to keep in mind the multiple use cases where the user will just buy/test-fit or both, and also the time & fee adjustment accordingly.

product flow

What I felt is to play with toggle buttons for the Test Fit feature, and not to disrupt the Law of Similarity

screens

UI — Making the product scalable for Arabic

Knowing that the product is targeted both for Arabic and non-Arabic, I had to make it scalable for two design versions: an English and an Arabic one. Of course, I first designed the English version, which can adapt to the Arabic UI by mirroring the design right-to-left (RTL). But when you’re designing specifically for Arab users, it’s not enough to just mirror the design. There are some local specific usability considerations to apply.

astronaut

Copy and type:

Using screen real estate smartly: Arabic is a “wordier” language; therefore, it might take up more space. I had to keep this in mind when designing layout and UI element pixel size

Paying attention to legibility: Arabic characters are very complex; they have overhanging and looping features. The type needs to be at least four points larger than the corresponding English type to achieve the same degree of legibility. Also had to avoid bold and italics for the same reason.

Reading pattern:

Mirrored F-shape: Arabic-speaking users mirror the F-shaped reading behaviour, so had to put the most relevant information on top, as many left-to-right (LTR) sites do.

Icons that indicate direction: e.g. play or rewind buttons on media players, progress indicators, and a clock’s hands should always rotate clockwise too;

Icons that represent objects usually held with the right hand (e.g. phone icon);

Any words are written in other languages and Hindu-Arabic numerals (1,2,3, etc.);

Icons with user expectations: consider whether there is a user expectation for the icon to look a certain way. Also, if changing the icon’s alignment would change its meaning.

Images: had to make sure that the images are culturally appropriate for target users

whatsapp

Color palette

The color are picked carefully to match the flat aesthetic of the app design

color palette

Poppins

Heavy: a b c d e f g h I j k l m n o p q r s t u v w x y z a b c d e f g h I j k l m n o p q r s t u v w x y z

Regular: a b c d e f g h I j k l m n o p q r s t u v w x y z a b c d e f g h I j k l m n o p q r s t u v w x y z

Typography

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries

Continuing with the UI, Kept the category page pretty similar to standard eCommerce layout as not to confuse the user. Keeping a filter for Home try on if the user is focussed is pretty sure to try before buy whatever the item is.
koovs screens

A solution to keep both — the normal and Test fit products in a single card as discussed in the pain points, hence the toggle button will help me identify the product and its further lifecycle.

In case there is no product for a test fit, the user will simply proceed with the regular checkout

Selecting the timing is very critical since the task mentioned me the delivery to be in hours — I am not using the date selection here, assuming it is for the same day.

Terms & Conditions are very critical here:

Based on Assumptions, the following things are to keep in mind

The user can try X number of products in Y time. This has been researched. Based on product selected, if the time calculations exceed Y time, further selection of products to be denied

In case we want to exceed time Y to Y1, the price of the product selected should increase; this is to ward off any constraint on demand & supply line. The price can go from AED3.00 to AED 4.00 if the time 30 minutes exceeds to 45 minutes

A limitation on products for test fit is must — based on previous research, no more than 3 dresses, or 6 t shirts etc can be selected for test fit. This data will come from more research

Safekeeping of product packaging — all tags and packaging must be kept as is it in case of a return, otherwise, a penalty is to be charged.

The user can edit its information before confirming the order

cart screens

The user can easily track the order on the map; in case there is no in-app navigation — a button to navigate it to maps is there. Once the order is received, in other countries — I might have gone with a confirmation OTP, however not for the markets of Middle East. Upon a successful trial, the user can simply use the toggle to accept or reject the product.

The final price payable will be calculated accordingly — and based on that the user will proceed to the payment page or give cash on delivery.

Development Process

Ads & URL’s application development team along with the client’s

For developing a sleek mobile application that maximised the global user experience and enhanced efficiency, we followed a well-defined process. Our development process comprised the following points summarizing the overall engagement.

  • Extensive product planning
  • Defining the scope of work
  • Setting delivery timelines
  • Quality assurance of all the features before release – Ensuring post-production maintenance schedules

Success

The engagement with Ads & URL helped the food app in UK attract more customers.

  • Creating and delivering the customised orders to users in real time.
  • Building cutting-edge back-end to manage all the orders with great performance.
  • Great ratings and feedback on the respective App stores from the customers.
  • Exponential growth in customer registrations inside the platform.
  • Provided deep analytical insights to service providers on the basis of their total orders and revenue.

Have a project?
Let's get connected

Share the details of your project – like scope, timeframes, or business challenges you'd like to solve. Our team will carefully study them and then we’ll figure out the next move together.

PROJECT INQUIRIES
  • sales@adsnurl.com

  • +91 9999995467

OUR LOCATIONS
  • america
  • uae
  • india
  • canada
OUR PROMISE

We care about your intellectual property rights

We have created products with perfection. The world knows it. We have done it for brands that rule the industry. We will do that for you.

graph
Protection of Confidentiality
agreement
Transparent Agreement
graph
Culture of Respect
agreement
Value of Reputation