AfriCarib

Project Details

UX/ UI Designer/ Group Lead

Figma, Figjam, Canva

3 weeks

Group Members

Rayshaun

Tanya

Abigail

Danielle

Problem

Africarib needs to expand their reach beyond in-store shoppers. Without a strong digital platform, they risk losing customers to competitors with online shopping options.

Success would mean providing an intuitive and accessible e-commerce solution that increases convenience and widens Africarib’s customer base.

Solution

We designed five key UI screens; Home, Product Listing, Product Details, Cart and Checkout that enable users to easily browse, search, and purchase groceries online.

The flow was optimised for quick ordering and repeat purchases, supporting Africarib’s goal of expanding their reach through a seamless, user-friendly online experience.

Two smartphones displaying food shopping apps, one showing various food products and meal kits, the other showing shop by country options including Ghana, Jamaica, Nigeria, and the Dominican Republic.
Two smartphones displaying a food ordering app and a delivery tracking screen, set against a green background.

Process

A digital graphic illustrating a four-step process titled 'Discover, Define, Develop, Deliver' with detailed descriptions for each stage, including mood board creation, user flow design, wireframes development, and UI screens.

Mood Board

Collage of grocery store images including fresh produce, spices, packaged foods, and online shopping interfaces. Includes delivery service, branding, and target audience visuals of diverse people shopping.

Competitor Analysis

We looked at six food delivery platforms—three indirect (Lidl, Cook Food, Hello Fresh) and three direct (Samisonline, Afrobox, Afrobasket)—to see how Afri-Carib compares. We focused on UX, visual design, navigation, product discovery, checkout flow, and mobile responsiveness to spot strengths, weaknesses, and opportunities to stand out.

Image of six mobile phone screens displaying different grocery and food delivery apps with SWOT analysis charts beneath each.

User Survey

We ran an online survey to understand user needs, behaviours, and pain points to inform design decisions alongside competitor analysis.

An online grocery shopping survey form with sections on demographic information, shopping behavior, pain points and preferences, trust and decision making, final comments, and contact information.

Survey Insights

  • Demographics & habits:

  • Received 23 responses.

  • Mixed ages (20+); mostly in-store shoppers; 70% tried online but often preferred in-store.

  • Pain points

  • Limited item choice, delivery fees, confusing navigation, out-of-stock products.

  • Preferences

  • Fast delivery, saved baskets, clear images, simple checkout; cultural relevance moderately valued.

  • Trust factors

  • Professional site, positive reviews, usability; dislikes included lag, poor stock info, ads, and hard navigation.

Survey Results

Multiple survey result charts with questions and responses related to online grocery shopping, app usability, features, and trust factors.

Brand Goals

  • Build trust through professional branding, positive reviews, and clear communication.

  • Prioritise cultural familiarity, inclusivity, and accessibility.

  • Give users control with saved baskets, delivery options, and product preferences.

  • Deliver a fast, intuitive, and seamless experience with clear navigation and minimal loading delays.

  • Provide meaningful, relevant content that resonates culturally with users.

User Personas

Collection of three personal profiles with photos, including a 22-year-old male university student in Cardiff, a 36-year-old woman with curly hair who stays at home in Essex, and a 63-year-old retired woman in South London. Each profile has details about behaviors, motivations, goals, needs, and frustrations related to shopping and lifestyle.
Journey map with three user scenarios, each with steps: discovery, exploration, selection, checkout, and delivery. Each scenario includes a description and a user photo.

After creating the personas, we mapped out each person’s journey from discovery to delivery, capturing their goals and key touchpoints along the way. These insights guided decisions for our user flow, ensuring it addressed real user needs and behaviours.

User Flow

A detailed flowchart with multiple sections, including decision points, process steps, and various labeled boxes in different colors, illustrating a complex process or system.
Flowchart titled 'Mimi's Journey - Guest Checkout Flow' with numbered green circles 1 to 4 and the following steps: 1. Guest Log In/Register, 2. Guest Details, 3. Shipping Details, 4. Payment Method.

Design System

A detailed infographic showing UI design elements for a shopping app, including header, body text, iconography, color palette, product images, form fields, grid layouts, buttons, and branding for AfriCarib.

Wireflows

A series of mobile app screen mockups demonstrating the process of logging in, browsing products, selecting items, applying payment methods, and tracking delivery.

UI Screens

Sequence of mobile app screens showing the process of logging into AfricArib app, browsing products and countries, adding items to cart, making payment, and tracking delivery.

Collaboration

Working in a team required coordinating both schedules and perspectives. As the group lead, I created key documents—including a brief overview, a progress tracker, and meeting notes—to keep everyone aligned and on schedule.

I consistently monitored our progress, suggested design improvements, and helped the team stay on track. Despite a few challenges, I was fortunate to work with a highly engaged group that was passionate about our brand.

We shared ideas, built on each other’s creativity, and split the workload effectively which resulted in a strong product.

Next Steps

The next phase will focus on usability testing to identify friction points and gather feedback for improvements. We’ll also track key metrics like popular filters and bundles, completion rates, drop-offs during checkout or onboarding, meal kit vs. grocery preferences, and user feedback.

← Previous

Arctic Travels

Next →

Lux Car Co.