UX Case Study
← Back to portfolio
Portrait of Abiodun Adebayo
Abiodun AdebayoUI/UX designer
Mobile Shopping App · UX Case Study

Abstar: Building Trust and Loyalty in Cross-Border Mobile Shopping

Tools used: Figma and Miro
A hand holding a phone showing the Abstar home screen with popular brands, a men's shoes banner and an Originals promotion

About Abstar

A cross-border e-commerce platform with an integrated rewards system, enabling seamless international shopping while earning exclusive benefits.

Project Overview

Target Audience

Online shoppers who value convenience and a seamless shopping experience.

Challenge

A lack of trust in the delivery process and the absence of compelling incentives hinder repeat purchases and long-term customer loyalty.

Project Duration

October – December 2022

SSituation

The growth of e-commerce in Nigeria and Africa faces several significant challenges. Logistical difficulties, unreliable delivery networks, and limited payment infrastructure create major barriers for both businesses and consumers. High operational costs and a lack of consumer trust further hinder adoption. Additionally, poor internet access in rural areas and concerns about fraud discourage online transactions. Overcoming these obstacles is essential to unlocking the full potential of the online shopping market in the region.

TTask

To address the challenges in Nigeria and Africa's e-commerce sector, solutions should focus on key areas. Enhancing logistics through efficient local delivery networks can improve reliability, while strengthening payment infrastructure with secure and diverse options will facilitate seamless transactions. Optimizing supply chains can help reduce operational costs, making e-commerce more sustainable. Expanding internet access in rural areas will increase market reach, and fostering consumer trust through robust fraud prevention measures and transparent policies will encourage wider adoption. Implementing these strategies is crucial for the sustainable growth of e-commerce in the region.

AAction

I conducted extensive user research through interviews with both prospective and end-to-end users to gain a deep understanding of their needs and pain points. This research provided valuable insights that informed my design decisions, ensuring that user requirements and expectations were accurately captured. Additionally, I created a user journey map illustrating the complete end-to-end process, which was reviewed with the business stakeholders before the design phase commenced. This approach ensured alignment and a user-centric design strategy.

RResult

I designed a prototype that showcases end-to-end user journeys in the e-commerce sector, addressing key challenges such as delivery inefficiencies, payment barriers, high operational costs, and trust concerns. By tackling these issues, the solution supports stronger growth for the region's online shopping market. Additionally, I introduced a cash rewards platform, enabling users to earn cashback on every purchase made through the Abstar online shopping platform. Post-launch user feedback highlighted that the platform significantly saved time and provided a more seamless, user-friendly shopping experience.

Design Process

I applied the design thinking process to approach problems from a solution-focused perspective, allowing me to tackle complex and ambiguous challenges effectively. Below is the project timeline outlining the key phases of my work.

  1. Empathise
    • Qualitative Research (Interviews)
    • Problem statement
    • Project goal
  2. Define
    • Research data analysis
    • Empathy map
    • Identify pain points
    • User personas
    • User journey
  3. Ideate
    • Brainstorming ideas
    • Information architecture
    • User flows
  4. Prototype
    • Drawing wireframes
    • Creating design system
    • High fidelity & visual design
    • Prototyping
  5. Test
    • Usability test

User Research

Before starting the design process, I conducted foundational research to address key questions: What should we build? What challenges do users face? How can we effectively solve these problems? To gather in-depth insights, I used a primary research method (interviews). I spoke with 12 users, aged 22 to 45, to understand their thoughts, opinions, experiences, and emotions.

Here are some of the questions I asked:

1How often do you shop online?
2Which online shopping websites do you frequently use?
3How often do you encounter delivery issues when shopping online?
4How important is it for you to have multiple payment options, such as PayPal, credit cards, or Klarna?
5How much do you typically spend on online shopping each month?
6What types of items do you purchase most frequently online?

Empathy Mapping

To understand the processes, emotions and frustration that people experience around the problem we are trying to solve, I created an empathy map.

SAYS

  • Delivery charges are too high.
  • Orders are paid for but not promptly confirmed.
  • The website lacks regular updates.

DOES

  • Enjoys playing basketball and tennis.
  • Prefers shopping from trusted websites.
  • Places 2–4 orders per week.

THINKS

  • Shopping in physical stores feels monotonous.
  • Limited time is available for in-store shopping.

FEELS

  • Frustrations arise when making online payments.
  • Experiences anxiety during shopping.
  • Encounters excessive charges.

Pain Points

1

User Experience Issues

  • Complex navigation and difficult to find products due to poor categorization and filtering.
  • Slow website/app and pages take too long to load, leading to frustration.
  • Unintuitive checkout process and too many steps or requiring unnecessary details.
2

Shipping & Delivery Problems

  • High shipping costs, no free delivery options.
  • Slow, unreliable delivery, late, lost, and misdelivered packages.
  • No real-time tracking, lack of visibility into order status.
3

Product & Order Issues

  • Inaccurate product descriptions and misleading images or incomplete details.
  • Fake or low-quality products and unverified sellers leading to distrust.
  • Out-of-stock items and items appearing available but later canceled.
4

Payment & Security Concerns

  • Limited payment options and lack of preferred payment methods like PayPal, digital wallets, or BNPL (Buy Now, Pay Later).
  • Security concerns and fear of fraud, data breaches, or phishing scams.
  • Hidden fees and unexpected taxes, shipping, or service charges appearing at checkout.
5

Personalization & Trust Issues

  • Too many ads and irrelevant suggestions cluttering the experience.
  • Privacy concerns and unwanted tracking and data sharing.
  • Lack of trust in reviews and fake or manipulated customer feedback.
6

Customer Support Frustrations

  • Difficult return/refund process and complicated policies or extra charges.
  • Unresponsive customer service and delayed responses or chatbots that don't solve issues.
  • Lack of live assistance and no direct human support via call or chat.

User Personas

Michael Ogunlaja

Define

After conducting user research and gathering key insights, I developed a detailed persona to clearly define my target audience. This deeper understanding of user needs enables me to make informed design decisions, ultimately enhancing the effectiveness and user experience of my designs.

Portrait of Michael Ogunlaja, the persona
Full Name:
Michael Ogunlaja
Age:
32 years old
Favourite Brand:
Tiktok
Status:
Accountant
Country:
Nigeria

About Michael

I'm a 32 years old from Lagos, an Accountant employee at MTN Nigeria in the city of Lagos, Nigeria.

Office LocationMaryland, Lagos

Full Time / Part TimeFull Time

About The Application Process

Simple and educational application process that provides me with timely updates on the next steps in the process and provides clear and straightforward information regarding the delivery status.

Ideate

User Flows

Following this, I used FigJam to create a User Flow, mapping out how a potential user would navigate the application. I focused on three key scenarios:

  • A new user registering for an account before proceeding with the online shopping process.
  • Browsing and selecting desired items or brands, adding them to the cart, and completing the checkout.
  • Automatically receiving rewards upon successful checkout, which are added to the user's rewards section.
User flow covering sign-up, shopping and checkout, and rewards. Click to inspect at full size.

User Story

Michael Ogunlaja, the user behind the user story

  1. Michael is at home and wants to purchase a pair of stylish trainers.

  2. With a busy schedule and no time to visit a physical store, he searches for an e-commerce shopping app and downloads Abstar. He is pleased to find the app intuitive and easy to use.

  3. Browsing through the selection, he selects a pair of shoes, places an order, enters his address, and confirms the purchase.

  4. Shortly after, Michael receives his new trainers and is delighted with his purchase.

Information Architecture

Three primary areas: Home, Order and Profile.

Wireframe

Brainstorming Solutions

Creating initial sketches allowed me to generate ideas before transitioning to design software. By identifying key areas of friction, I explored multiple design alternatives to refine and enhance the user experience through subtle yet impactful adjustments. My focus was on optimizing usability rather than making major design overhauls. Throughout the redesign process, I remained aligned with the target audience's needs and the company's mission to ensure a user-centered approach.

Sketches

Low Fidelity
Login interface and online shopping sketches.

Validate

Lo-fi Wireframes

As the initial design phase progressed, I ensured that screen designs were informed by user research insights and feedback. Building on the initial sketches, I began developing wireframes to further refine and elaborate on the concept.

Welcome & sign-up, shopping and reward screen wireframes.

IterateUsability Testing

Using the finalized digital wireframes, I developed a low-fidelity prototype. The primary user flow I connected focused on product selection and ordering, ensuring the prototype was ready for usability testing.

Usability Study & Research Strategy

Before initiating the usability study, a comprehensive research strategy was developed. This outlined the project background, research questions, key performance indicators (KPIs), methodology, and the use of both moderated and unmoderated usability testing. The unmoderated usability study was conducted using the Maze app.

Key Objectives. The primary goal of the usability study was to evaluate the ease of placing an order and completing a purchase. Additionally, it aimed to identify any challenges users encountered during the process.

1st Findings:

  • Users need a structured onboarding process.
  • Users need a more straightforward editing process.
  • Users need a more intuitive way to search for products.

2nd Findings:

  • Users want more detailed product information before placing an order.
  • Users want a seamless way to integrate their Reward Wallet with Google Wallet.
  • Users want a quick re-order option.

Design Enhancement from Usability Study

Insights from the usability study led to the addition of a dedicated button for direct access to the products section, resolving users' challenges in locating it. Furthermore, the initial design was refined to improve modification capabilities, ensuring a more seamless and intuitive user experience.

Before usability study

Home screen before testing: the Originals banner has no button to reach the products

After usability study

Home screen after testing: the Originals banner gains a Shop Now button

Prior to usability testing, the interface lacked a search bar, limiting users' ability to find products of their choice efficiently.

Before usability study

All Products screen before testing, with no search bar

After usability study

All Products screen after testing, with a search bar for latest trainers

Design System

Typography

Roboto

Google Fonts

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789

Regular 400Medium 500Bold 700ExtraBold 800

Colour Palette

Icon

Icon set: favourite, home, search, wishlist, profile, wallet, rating star, toggle and menu

Components

Each component shown with its default, hover, selected and click states.

Hi-fi Mock-ups

Hi-fi Prototype

The final high-fidelity prototype featured streamlined user flows, ensuring seamless navigation and a smooth checkout process. It effectively addressed user needs by providing an intuitive shopping experience, allowing users to easily find their desired products and track the real-time location of their delivery.

Prototype connections across onboarding, shopping and checkout, and rewards.

Inclusive Design Considerations

1

Utilized detailed imagery for products and rewards to enhance user comprehension of design elements.

2

Ensured accessibility for visually impaired users by incorporating alt text for images to support screen readers.

3

Implemented icons to enhance navigation and improve user experience.

4

Ensured the color palette adhered to WCAG standards for accessibility compliance.

Impacts

Two phones showing the Abstar Rewards splash and the Abstar home screen

Insights & Future Improvements

Insights:

  • Many users have constrained schedules, emphasizing the importance of seamless and convenient shopping solutions.
  • Mastery of tools enhances efficiency, but great design stems from critical thinking and problem-solving.
  • Design is an iterative process that requires continuous research to create better user experiences.
  • A deep understanding of the problem and a user-first approach are essential for effective design.

Future Improvements:

  • Conduct another round of usability testing to assess whether user pain points have been successfully resolved.
  • Continuously refine the e-commerce shopping app based on user feedback to enhance the overall experience.