MAMAPUT: A UI/UX CASE SUDY
About a week ago, figma started a design challenge to build an e-commerce platform that solved an actual problem also putting into considerations the challenges in e-commerce. I had three ideas but the one that came up top is MAMAPUT. I chose this idea because I could easily empathize with the people who had problems trying to get local meals and not finding a suitable platform that met their needs.
The name was inspired by the popular name local food vendors are called. It is a platform that provides cooked local meals and delivers under 59 minutes. I discovered that it was a challenge to find an online store that sold local meals and the few ones i checked out either had a terrible interface or was frustrating to use.
MY OBJECTIVES TO FULFIL FOR THIS PROJECT.
I wanted to create an easy to use website that mirrored the same experience they had with other e-commerce stores they used;
- Research some of the problems encountered by users who used the existing platform.
- Develop a website that served the needs of the user.
HOW I APPROACHED THE PROBLEM.
For this project, I started out by carrying out some basic google search on e-commerce website that carryout meal delivery service. I found some sites including Jumia foods but only three sold local meals. When I checked the problems encountered with food ordering platform, the most recurring problem was a complicated menu which irritated users. This post summarize it better,
SKETCHES
Before i build a product to sketch down ideas of what i want to build. This helps keep things in focus, I use a paper and pen to sketch my wireframes and build from there, this makes things very easy. When drawing the wireframes, I considered the navigation to ease the user experience and also payment process, I decided to use restaurant terminologies and icons to help better the experience. This is what i came up with,
PROTOTYPE
I used figma to design the prototype which is really flexible and easy to use and learn. To help keep the tone of the website in focus, I created a mood board.
I took inspirations from behance, dribble and Instagram. To see what others have done and get ideas. Before heading into design, I set out the colors, font, icons etc.
The navigation was divided into 5 which included Menu, Order, contact, profile and cart.
The primary color used throughout the website is dark to draw users in and stimulate them. This is the rest of the prototype.
LOGIN
Made use of a lot of restaurant terminology to create the mood or feeling of being in a fancy restaurant. Although this page popup during checkout.
LANDING PAGE
The landing page had to impress first time customers and be inviting. This is why i changed the enter location button with continue so customers would not think of the process as a list of long forms they would have to fill to buy a meal.
MENU
The menu is easy to navigate and limited to just three options of the same food type. This method of grouping made dishes easy to find and order.
CHECKOUT AND PAYMENT.
I didn’t want to stress customers with the payment process so i opted for an eye view of both their cart and payment, didn’t want them going back to correct an order and then give up on using the site. After the checkout they get food fact display as the timer countdown.
TAKEAWAY
This project was really challenging, one of my major issues was getting the images of the food i used. Image credit goes to pinterest and Instagram. Really learnt a lot from this project one of them was creating a design system before designing is really helpful, also i didn’t create a working prototype and carry out user testing which is very important. Thanks for reading
You can view the file here.
Love to hear your reviews.
