AFI Mobile App

AFI is a table reservation and food ordering app that I worked on as a capstone project during my Product Design Program at Dufuna (Sponsored by UK-Nigeria Tech Hub).

Client

Dufuna

Project Date

February, 2021

AFI Mobile App

AFI is a table reservation and food ordering app that I worked on as a capstone project during my Product Design Program at Dufuna (Sponsored by UK-Nigeria Tech Hub).

Client

Dufuna

Project Date

February, 2021

Project Summary

Client Brief

African Food Incorporated (AFI) is a chain of restaurants with a vision to deliver the best African cuisine to everyone across Africa. After a detailed analysis of the competitive landscape, African Food Incorporated’s founders John Kiagiri and Lola Mustafa decided to create an online food reservation and ordering system for all types of restaurants across the continent.

Their goal is that anyone anywhere in Africa can either:

Order food from, or
Book a table in any restaurant;

from the neighbourhood food shack to the 5-star restaurant.

Background

This project covered all aspects of product design and involved the creation of one product with three different touchpoints (End User Mobile & Web Apps, and Admin Web DashBoard). This portfolio will focus mainly on the Mobile App.

To solve the problem, I was paired with a teammate during the research and early creation phases. High-quality prototypes and final presentations were done by me.

JUMP TO DESIGNS

Project Phases

Click on card to scroll to phase.

1. EMPATHY

Survey Preparation, Interviews, Data Cleaning & Organization, Empathy Mapping

Zoom, MS Word, Miro

2.DEFINE

Identifying Pain Points, Themes, and creating User Personas

Miro

3.IDEATE

Converting pain points to opportunities & features. User flow, User journey, etc.

Miro

4.PROTOTYPE

Design, Prototyping, Sharing, Testing, & Revisions.

Figma

EMPATHY

We developed a survey to know if people would love ordering food, and making reservations. We also tried to understand factors that would encourage them to do this or not to do it as the case applied. We interviewed about 20 volunteers with unique qualities.

We created an empathy map to help us easily visualize the information we had gathered.

View on Miro

DEFINE

Analyzing the data from the empathy map helped us define our problems by understanding exactly what the final consumers desired from such an app.

We were able to uncover themes, understood the goals and frustrations of the users, and with these, we created user personas that represented our users.

IDEATE

With the problem now clear, we focused on trying to solve the problems outlined in our users’ pain points. We also looked for opportunities. Using the impact vs complexity prioritization technique, we succeeded in determining the MVP (Minimum viable products). A couple of ideas we had include:

A feature to allow other users to review a place with photos & videos of the eatery to help users who prefer ordering food from places they’ve seen.
Showing peak hours for restaurants to help users who dislike crowds to decide easier while making reservations.

User Flow & User Journey Maps were also developed for the MVPs.

View on Miro

PROTOTYPE

The whole idea came to life following the design of a high-quality prototype that represents our MVP. Of course, this was after sketching & low-quality prototyping stages.

The prototype was given to users and 90% of them could complete the important tasks that the app was created to do.

The program also had my solution reviewed and accessed by Mentors (experienced Product Designers).

VIEW PROTOTYPE

AFI MOBILE APP

Design Breakdown

TYPOGRAPHY

Font Family – Montserrat

ICONS

I went for a minimalistic UI design, and that made me go for stroked icons. Filled icons were only used to show active or selected elemens. Phosphor Icons from the Figma community was used for ease and consistency.

Samsung Galaxy S10 Top View Mockup e1649689551658

COLOURS

To improve ease of navigation, recognization and a fluid UX, I used colours consistently throughout the UI.

Buttons & Accents

Minor items like, Badges, Services, Stars

Texts, Borders, Lines, Inactive buttons

Screens

Top Level Screens

Onboarding Screens

Reservation Screens

Food Ordering Screens

Other Screens

© Axenic Arts Design MMXXI. All Rights Reserved. Huge thanks to Anthony Boyd for his Amazing HQ Samsung Galaxy S9 Mockups, and to the Trio who spent time creating the Phosphor Icon Pack: your works have made my life way easier.

This & That Inc.

Solomon Buchi

AFI Mobile App

Client

Project Date

Category