About Jogani

Jogani is a mobile organing catering platform located in Queenstown. The company’s mobile ordering platform allow people to order from the restaurant on their devices across Eastern Cape.

I collaborated with the CEO, who has a background in software engineering, to design the website application for Jogani. The goal is to remove the pain of online ordering with an innovative, seamless user interface. My primary role was to research, design, and test all UIs.

  • Rating:
  • Client: Jogani
  • Duration: 5 months
  • Role: Product designer

The Challenge

By utilizing the mobile app, I wanted to create the website that correlates with its branding and visual patterns. The client sent over the branding guideline from the Graphic Designer. The challenge was to combine research and visual elements to create an engaging ecommerce experience research and visual elements to create an engaging news and best advertising experience.

Market Research

We know that organic fruits are better for our bodies and the overall planet. The more foods are produced naturally in an organic manner without chemicals and pesticides, the more everyone benefits.

I conducted secondary research to determine the demographics of the potential consumers — their needs and expectations; analyze the scope of the current South African Organic produce market; assess competitor’s market positioning and analyze their website features; identify pain points of consumers and what difficulties they face when shopping online. The following data was noted:

* There is a high demand in the South African market for affordable organic fruits. Due to the associated high-cost, as of now, only the high-middle income people are the consumers. And only a few suppliers are there.

* The organic products market in South Africa has been growing at a CAGR of 25%.

User Research

To avoid assumptions about students’ preferences, I’ve narrowed the market research into a niche focused group and conducted a user survey from the current Ogani customers. The survey was done both online and in-person.

The survey was collected to understand the users’ goals, attitude, and priorities when ordering organic food online.

When asked about preference in delivery or pickup, most people preferred delivery because of convenience.

I then asked the most frustrating part when ordering organic food for a large group of people. Most people stated that making sure they have sufficient food for everyone and making sure enough gluten free and vegan options are readily available.

In terms of prioritization in selecting a vendor, most people look for affordability rather than speed and reputation in a catering event. Users prefer to schedule a time weeks or months in advance for catering so speediness is not as relevant for a catering event.

The Problem

After the survey, I narrowed down the main three prioritization: Convenience, Order Accuracy, and Affordability. I discovered that people favors accessibility and accuracy of orders during a big events.

The Solution

I aimed to create an interface that includes a large selection of options and food types so that users can find a suitable vendor. The goal is to motivate users to purchase the correct quantity and type of food.


Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe is primarily used to demonstrate the functionality of a site. I created the low fidelity wireframe on Figma.


  • Headlines, Body Text:Helvetica 16pt, 20pt
  • Body Text:Bold Quicksand 16pt, 20pt


Working on an e-commerce catering site was a unique experience. I had to research and take consideration of the internal and external triggers that drives customer to purchase a meal. By understanding the students’ needs, I’ve designed a site that’s simple, convenient, and easy to use. The next step is to continuously test the prototype and communicate the feasibility from design to code with the software engineer.

Final Product

Contact Me

Dont worry for contact i`m available

+27 76 037 9579