LinkedIn


Sri Lankan Handicrafts E-Commerce Mobile App Design

UI/UX Case Study

The content of this UI/UX case study

  1. Introduction
  2. Identified Problem
  3. Design Process
  4. Empathy Map and User Personas
  5. Competitor Analysis
  6. User Journey Map
  7. Storyboard
  8. Identified Pain Points and Desired Outcomes
  9. Proposed Solution
  10. Information Architecture
  11. Wireframes
  12. Color Tokens
  13. Typography
  14. Components
  15. UI Design Decisions
  16. User Interface Designs – Detailed Screen Designs
    •  

    *Note: The final designs are presented through both mobile viewport mockups and full-length screens to highlight the user experience as well as the complete interface structure.
1. Introduction

This project aims to help users easily discover and purchase authentic Sri Lankan handicrafts while learning about the artisans behind them. The app allows buyers to explore culturally rich products and place orders through a simple, user-friendly mobile experience.

2. Identified Problem

Local buyers and international visitors to Sri Lanka who want to discover and purchase authentic Sri Lankan handicrafts struggle to find trustworthy online platforms that offer genuine products. And also, it is challenging to find meaningful information about the artisans behind them. Existing platforms are often outdated, have limited selections, and lack cultural context, making it difficult for users to shop with confidence and appreciation.

3. Design Process

I have utilized a design thinking process to identify user problems and create a user-friendly, goal-oriented design.

This design thinking framework guided every decision—keeping real user needs at the center throughout.

4. Empathy Map and User Personas

Empathy Map

Says

  • I want to buy authentic, meaningful handicraft items
  • I want online purchases and convenient delivery.
  • It’s hard to trust online stores for handicraft products
  • I want to learn the story behind each handicraft item

Thinks

  • Will these products really be genuine?
  • Is this a trustworthy seller?
  • It would be easy to have an online shop where I can easily buy these products
  • I hope I can explore unique and meaningful items online
  • I want to support local culture while shopping

Does

  • Browse multiple social media pages and online stores
  • Search for artisan information and product origins
  • Visit physical stores when online options are insufficient.
  • Compare prices and quality before buying
  • Share and gift handicraft items to family and friends

Feels

  • Excited when discovering unique crafts
  • Frustrated by limited and unreliable online shops
  • Frustrated when the existing online sources do not update properly
  • Confident and satisfied when learning the artisan’s story
  • Difficult to visit multiple physical stores
User Personas
5. Competitor Analysis
6. User Journey Map
7. Storyboard
8. Identified Pain Points and Desired Outcomes

Summary of Identified Pain Points

  • Lack of trust & authenticity
  • Fragmented and outdated platforms
  • Unclear pricing & reliability
  • Inconvenient discovery
  • Poor artisan & product information 

Summary of Desired Outcomes

  • A trusted, verified marketplace
  • Convenient online shopping without hidden details
  • Easy discovery of unique handicrafts
  • Rich cultural and artisan storytelling
9. Proposed Solution

The handicraft app provides local buyers and international visitors in Sri Lanka with a trusted digital marketplace to discover, learn about, and purchase authentic Sri Lankan handicrafts. By combining verified artisan profiles, detailed product descriptions, and a seamless buying experience, the platform helps users shop with confidence while understanding the cultural value behind each item.

10. Information Architecture

  • To ensure a seamless and intuitive experience, the app structure was mapped before moving into wireframing.

  • Therefore, when deciding the information architecture for this app, it separates into 3 main sections: authentication, main navigation, and transaction flow. This would help to ensure clarity in user pathways while maintaining a scalable and predictable navigation system.

  • Conditional form logic was introduced in the delivery stage to adapt the experience based on user type.

  • The buyer journey was mapped as a linear five-step flow to minimise decision points and reduce drop-off between discovery and purchase.

    • Buyer flow: Browse Crafts → Select Item & View Details → Add to Cart → Checkout → Order Confirmation

  • The artisan discovery path runs parallel to the main buyer flow.

    • Artisan Discovery flow: Browse Crafts → Select Item & View Details → Tap Artist Name → Artist Profile → Explore Artist’s Collection → Select Item & View Details → Add to Cart → Checkout → Order Confirmation

Information Architecture
Main User Flow for Buyers
11. Wireframes
12. Color Tokens

Design Tokens

  • All colors are structured as design tokens, as in the following image.

  • An example is  “Primarybrand/Text/Label”

  • This helps to improve:

  • Consistent usage across screens
  • Easy theming and updates

  • This token-based system ensures the UI remains scalable, maintainable, and accessible.

Primary Brand Color

  • #A8075B

  • A deep, warm tone used to represent authenticity, tradition, and craftsmanship.

  • This color is applied to brand identity. Multiple tonal variations were created as design tokens (e.g., 100 to 900).

Accent Color

  • #A48400

  • A golden accent color inspired by handmade value and cultural richness.

  • It is used selectively for: Call-to-action highlights and key emphasis elements.

 

Neutral Colors (Greys) → White, black, and greys

Semantic Colors → Green, blue, and red for success, information, and error

13. Typography

“Lato” is used as the primary font.

14. Components
15. UI Design Decisions
1) Design Layout and Scrolling Behavior
2) Concerns in Screens Designing

Design Decisions

1) Design Layout and Scrolling Behavior
  • Therefore, for those screens I add both the full-length screen and the actual mobile viewport version.

 

2) Concerns in Screens Designing
16. User Interface Designs - Detailed Screen Designs

Mobile Viewports For
  • Onboarding Screens

Mobile Viewports for
  • User Account Create Screen
  • Account Creation Success Screen
  • User Login Screen
  • Forgot Password Screen
  • Passowrd Reset Screen
Full Length Screen and Mobile Viewport For
  • Home Page

Categories are displayed as a horizontal scroll strip — allowing users to browse all craft categories with a single swipe without leaving the home screen.

Mobile Viewports For
  • Profile Page
  • Menu Page
  • Categories Page
  • Products List Page for a Selected Category
    (Example is for “Home Decors”)
Full Length Screen and Mobile Viewport For
  • Single Product Page
 In the mobile viewport, the bottom bar (Item Total + Quantity + Add to Cart) remains fixed while the page scrolls—ensuring the purchase action is always accessible regardless of scroll position.
(Sticky bottom bar — always visible while scrolling)
Full Length Screen and Mobile Viewport For
  • Shopping Cart Page

In the mobile viewport, the bottom bar is sticky—always visible while scrolling.

Full Length Screen and Mobile Viewport For
  • Delivery Details Page

At the beginning of the Delivery Details Page, users can select whether they are a local resident or a tourist. The form then adapts based on their selection.

The screens show the different form variations for local residents, tourists staying in Sri Lanka, and the mobile viewport, respectively.

Full Length Screens For
  • Delivery Details Page
    • Tourists Staying in Sri Lanka
    • Sri Lankan Resident
    • Delivery Details Completion Page
    • Delivery Details with Errors
Full Length Screen and Mobile Viewport For
  • Review My Order Page

In the mobile viewport, the bottom bar is sticky—always visible while scrolling – (Order Summary section is sticky)

Full Length Screen and Mobile Viewport For
  • Payment Details Page

In the mobile viewport, the bottom bar is sticky—always visible while scrolling.

Mobile Viewports For
  • Order Placed Success Page
  • Shopping Cart Page
  • Wishlist Page
Full Length Screen and Mobile Viewport For
  • Meet the Artisan Page

 

Full Length Screen and Mobile Viewport For
  • Artist Collection Page