Banking App

Grocereen App

An online e-commerce platform which allows
users to order groceries from the farm
straight to their door step

Client

HealthyEating Organization

Date

November – Decemeber 2020

Our Services

Wireframing (Low to High Fidelity)
Protyping and Mockup Design
Brand Identity
UI Styling Guide
Information Architecture
Usability Testing

Problem

A major problem is that the only way people can order fresh groceries is by visiting the supermarket

COVID 19 has limited how we live hence the way we order fresh groceries need to change

The Solution

Create an app that allows users to order fresh groceries. The user must be able to track the delivery from the store to their door step

Solution : Create an app that allows users to register their mobile money account, make money transfers and pay for vouchers/bills through the app.

Main Goal For App

The App should be simple and easy to use.
The App should encourage users to
eat green

Design Process

Research

Understanding more about the users

Ideation & Sketches

Developing wireframes
(Low to high)

Design

Applying UI Styles to High Fidelity wireframes

Micro Interactions

Animating the final design

The Design Process

Research: This involved getting to know more about the Users, this was carried out with a team of UX Designers in Ghana who helped in selecting users to test the product.

Ideation & Sketches: With the information gathered from our users which includes MVP, JTBD, I was able to develop user flows, low fidelity Wireframes and Mid Fidelity Wireframes

Design: App was being developed for iOS so I had to adhere to stict design rules for iOS which includes using similar design patterns to make the app easy to be accepted.

Micro Interaction: Main reason for the app was to design how users interact with the screen. Using Adobe XD, i was able to use common interactions users were already familiar with to make app easy to use.

Logo Design

Jobs to be done

User Flow

Low Fidelity Wireframe

Mid Fidelity Wireframes

High Fidelity Wireframes

The Result

Visual Hierarchy: Different font sizes have been used to represent different sections of the screen.

Colours: Different color has been used on both the CTA button and the active navigation bar button to make it easier for the user to identify

UI Style Guide: Following the material guidelines for both iOS .