A finger-lickin’ e-Commerce experience— UX case study
A virtual Restaurant created for those who don’t just want to eat
The Scene
Once upon a time in a far faraway land, there hailed a designer, the Gaga of Africa. Lol… just messing around
I will like to share with you a project I worked on. Sometime this year, it's an E-commerce web interface for an Urban food brand — “Cloud Kitchen”. Yummy right… Let’s dig in! ( Itadakimasu! ).
On this project, I collaborated with Bolanle Banwo Osadolo, the founder of the Genza brand.
Designing for e-commerce has always been a fun ride for me as I get to dissect the needs of the business, while I also chop down customers' problems by mixing possible idea solutions on a blank canvas in smaller chunks.
Working cross-functionally with the founder, and Geneza design team, which consist of:
Brand Design Director: Bolanle Banwo Osadolo
Motion: Cre8ivestudio8
Illustrations: Funto Coker, Seyi Ayoade, Geneza Design Team
Web developers: Cloud Kitchen
I created the end-to-end web experiences with the following features:
01 — E-commerce landing page
02 — Defining a user experience for the developer onboarding flow
03 — Simplifying the shopping experience
04 — Establish a working design system from scratch
Overview
Food is a fundamental portion of each culture. As civilization has advanced, food has advanced from being merely WHAT is ready to HOW it’s experienced and enjoyed. Cloud Kitchen is a Virtual Restaurant created for those who don’t just want to eat but also want an experience. Its mission; bring quality, tasty and nutritious meal experiences to doorsteps across Nigeria.
The Picture
The key problem with cloud kitchens was that cloud kitchens’ ideal customers could not relate or connect with the brand. The founder also communicated to us that he had close friends complain about how difficult it can be to place meal orders. Some even mentioned how the interface doesn’t feel modern enough and could not trust if the meal they sell is tasty enough. Unfortunately, there weren’t data or metrics to verify these points. But these were the key problem the business was facing
From my perspective, the bone problem seems to do with reinstating TRUST in the brand again. Hence why the entire brand is on a revamp and we had a tight timeline, so I had to work with the verbal problem and visualize a future outcome with the brand
The team and I recreated Cloud Kitchen’s vibe; using the Bold, vibrant and eye-catching visuals, and incorporated them into the web interface design. Allowing the interface stands out in a badass style!
The Geneza team and I understand the importance of consistency between brands. This means providing breathable experiences to users who are constantly suffering from the poor UX of other food sales sites.
Designing
I further went on into low fidelity designs of the web interface first. In this design phase, I prioritised the usability of the site as I designed, ensuring information within the pages of the site is easy to follow through and not bore users, I also made room to infuse the brand’s visual elements. As soon as the low-fidelity designs were approved by the brand director, I quickly began to convert to high-fidelity designs preparing to present our first iteration to the client.
The branding team derived the colour choices from the unique hues of familiar food.
Everything culminated in a loud, colourful and distinct statement. Taking that, I let my creativity fly wild while still thinking of the usability.
It was time to present my first design iterations to the client. Martins was thrilled at the design I came up with. I was excited too that he was impressed. I mean why wouldn’t he lol. At the end of the review session, I had feedback from the client on the home screen so I went back and made minor adjustments. And so we were good to go!
Design With Conflict
The hand-off process of this project to the dev team was not as simple as I thought. Personally, I had made my Figma board as organised as possible. I also provided screen flows of the interface and component libraries. What I failed to understand was not to assume everybody in the dev team would understand my board and have a structure in which to approach the designs. Thankfully, a developer from the team reached out to me that they were stuck. Was shocked because I thought why should anyone be stuck in my well-organized board. Putting my designer ego aside, I saw this as a gap that needs to be bridged for me to work with the dev team better. To resolve this, we had 2 walk-through sessions where I covered everything from the journey flow to verbally explaining how the micro-interaction would work. This was an interesting moment because I saw that a static Figma board wasn’t enough to carry the dev team through, sometimes jumping on virtual calls to have walkthrough sessions can make things extra smooth.
Our Destination
I moved the Cloud Kitchen theme to the website design. Colourful and seamless, the mobile version and website are intuitive, simple and hassle-free.
At the point of writing this, it’s still under development. but you can check out the brand on social media
Personal learnings
Don’t make assumptions: It’s easy to make conclusions from your own perspectives, but it’s even more important to think and verify situations to make executions faster. Now I make sure to not assume certain team member understands but speak up when I see this happening on current projects and see how I can help make the process faster.
Collaboration: Teamwork is the ability to work together toward a common vision. The ability to direct individual accomplishments toward organizational objectives. It is the fuel that allows common people to attain uncommon results.
