BACK HOME

Styli Fashion

A fast fashion e-commerce platform by Landmark Group

Website: https://stylishop.com/

Project duration: OCT, 2019 - AUG, 2020

STYLI wants to be the voice of Arabic fast fashion culture, primarily serving countries like Saudi Arabia, Kuwait, Bahrain, UAE etc. With localized shopping app, warehouses in Riyadh and Arabic first customer support, Styli aims to capture an experience that resonates with the GCC fashionistas. It is the first online-only venture by Landmark Group, which is the largest retail and hospitality organization in the MENA region.

Team: Nikhil Singh, Mohammed Sharafeldin Hamed Aly Sedky and Rahul Rawat.

My Role: Led the project as Sr UX Designer, owned design sprints on Jira and helped in product planning.

Is the GCC a lucrative market for new fashion e-commerce player?

Compared to global standards, GCC(Gulf Cooperation Council) consumers are “underserved” on online offerings, especially on product and service quality. Several gaps in the consumer proposition of existing players have led to a fragmented market which leaves a room for a new player. Growth here is driven by very high internet penetration and young, digitally engaged demographic. Online spend by this demographic is significantly high (Ex: Avg online monthly spend in UAE: 1400-1600 AED, in Saudi Arabia: 900-1100 SAR)

And with the Landmark group's capabilities in this region, STYLI stands to benefit massively from it in targeted customer marketing, product sourcing, supply chain and partner ecosystem. Becoming a dominant player in this market also implies a strong foothold in the MENA region.

What is the role of design here?

With an MVP already launched, I joined the firm in Oct 2019 and outlined the following design goals to further our efforts.

- Analyze online customer behaviour through qualitative and quantitative research.

- Conduct a design audit to highlight the UX flaws & UI consistency issues in the product.

- Create a design system to revamp the experience of the consumer app. Use this design system to build our internal platform for visual merchandising and inventory management.

- Set up usability testing and data analytics tools to iterate the product(Contentsquare, UserZoom, Hotjar etc.).

Iteration process for the product

User research deck

Summarizing key insights

We conducted a design audit exercise to identify potential usability issues in the current MVP based on standard e-commerce practices. The visual experience felt fragmented as many design elements were inconsistent with each other.

This compelled us to build a design system that would extend to our internal products as well.

VIEW FULL AUDIT REPORT HERE

Key takeaways from the audit

Build a design system to enforce

• Consistent UI
Accessibility(AA standard)
Arabic language support

Redesign: Product discovery journey

• Categories -> Listing page -> details page.
Structure category levels as L1, L2, L3 and L4.
Merchandising + Forward flow through Tagalys.

Bring standard ecommerce tactics

• Highlight discount & savings
Introduce product badges - trending, popular etc
Dark patterns: “only 2 left in stock”(Scarcity) or “14 people viewed this” (Social validation)

Redesign: Checkout journey

• Bag -> Address page -> Payment
• Show checkout progress
Integrate maps to capture address. GCC doesn't use pincode
Integrate Apple Pay & Tabby for payment

Order management

• Create post-purchase experience: Track active orders, Manage returns, Order history.
• Edge cases like failed payments, incomplete transactions and failed deliveries.

Loyality & rewards

Integrate the Shukran loyality program of Landmark group to Styli.
• Use credits as rewards for customers and for managing faster refunds

Product Architecture

Prototype

Product Discovery Journey

• Categories: L1(Men, Women), L2(Clothing, Accessories)

• Product Listing Page: PLP-L2, PLP-L3

• Filter and sort function

• Keyword search, Notifications

Product Details page

• Product details, SKU ID

• View size options and delivery estimate

• Colour options, model information

• Return policy and similar recommendations

Checkout Journey

• Bag with edge cases like out of stock, low inventory alert

• Sign up or Login. Option for guest checkout too

• Address page

• List based selection for province, city as GCC does not have pin code system

Payment and Confirmation

• Different Payment options along with Styli Credits

• Thank you page, Confirmation screen

Order details and Returns

• Edge cases - Item return to origin, Delivery rescheduling

• Return eligible items and the flow

Design System

(A) We noticed a significant customer dropoff in PDP to Bag funnel. Researchers found that customers lacked purchase confidence due to size issues. Also, they felt the return-refund process is cumbersome.

- Solution: Integrate the FITFINDER to recommend the size to a customer. Bring customer ratings & reviews with polling on three options: "True to size", "Small" and "Large".

(C) Product listings to Filters page has a significant user dropoff. How do we encourage product discovery using filters?

- Solution: Add open filter modals or snippets on the listing page. Their increased visibility would increase their usage.

(E) Growth hack#1: Add to bag directly from the product listing page, hence skipping the details page and uplifting funnel conversion.

(B) A high volume of Cash on Delivery orders is creating a negative impact on business, especially with refunds and last-minute cancellations.

- Solution: Prepaid salience - Bank offers on credit/debit card, integrate Aramex pay/Tabby(pay later), and charges an extra fee for COD(adds friction).

(D) First-time users drop off during the login/signup process of checkout. How might we create a frictionless checkout experience while also registering them?

- Solution: Use the email and phone number from shipping details while they check out and create a temp account. Nudge them to create a password on the order confirmation page instead.

(F) Growth hack#2: Abandoned cart strip on the home page. Use "scarcity tactic" to nudge them for checkout.

Key learnings and takeaways

Although users have a very fixed mental model for e-commerce, localization of product and services for a market is necessary for long term success. Styli Fashion achieved a market share by being an Arabic first e-commerce platform.

A "try before you buy" model can help e-commerce businesses save cost by charging users a small annual fee. Free return services leads to margin leakage if the return volume is high. But they are essential to boost customer purchase confidence and offer a seamless experience.

Invest in visual merchandising(strategy, internal tools) to create truly immersive shopping experiences online. It's essential for online metrics such as engagement, time on site and compared to physical retailers, online stores can easily tailor the shopping experience to different user types.


Next Project

  • RoundGlass Cross Px

    A holistic healthcare application for care seekers

    Book doctor appointments, get customized health information, safely share your digital health and medical records with doctors and access digital prescriptions right in your phone

    RESEARCH | WIREFRAMING | UI DESIGN