Navigate faster!
How it started
A business owner launching a new fast food in town decided he needs a mobile app for it, in which users could see the available menu, order food, and see the progress of their order.
I first started the process by doing an interview with the founder, which was the one and only stakeholder to understand the business needs.
WHAT DID I FIND OUT? 🤔
I found out that he didn’t have a brand yet, just the name, but no logo or anything else, so I also had to do the brand identity for it.
During the interview, I asked more questions about what is the business focused on and he told me an important insight, since it’s located between 3 high schools he wants it to be focused on kids and kid meals.
OHHH THIS IS AN OPPORTUNITY FOR ME 🤩
That was exactly what I was looking for, I had a free hand to do the whole brand identity so I dug deeper into the color psychology and I chose a combination of 4 colors that are friendly, childish combined together and represent perfectly the kids that we're targeting:
After this, I was looking online for friendly fonts that could help me in creating a logo just by using fonts, not vectors, and so I did, I found a font called Somatic but it still needed something, so I came up with some vector shapes and made a mouth to look really playful and friendly to match the brand.
Here’s the result:
LOOKS PRETTY COOL, DOESN'T IT?
Next, I started to look for fonts to use in the app, and since I wanted to keep consistency I was looking for a font that can look good both in titles and paragraphs. All I had in mind was just Poppins but it’s so overused and I just didn’t want to go along with it then I found the perfect similar Google Font, called Lexend.
It looked amazing in both titles and paragraphs and matched perfectly the brand I was creating.
Ok so next I started working on a wireframe to start the onboarding, login, and also I made a user flow to count the number of total screens that needed to be made and keep the track of it.
Onboarding Wireframe made in FigJam
Main user flow
How it went
Also, I forgot to add in each paragraph, that at any stage I was at, I was constantly consulting with the founder and he was so happy about the process that I just couldn’t feel better!
I was so hyped about how the whole brand identity turned out so I couldn’t handle myself to just go into a high-fidelity wireframe and so I did, I created the onboarding screens right away using 3D elements to match the playful and friendly style ✨
COOL, LET'S MOVE ON! 🥳
Next, I started building the create an account flow, forgot the password flow, and only after this I got to work on the inside of the app.
WHERE'S THE APP ANYWAY? 🥳
Alright, here we are starting the actual app. I started it by creating a bottom menu component, smoothly animated in duo-tone icons, using the Untitled UI Icons , a cool icon library I found on Product Hunt.
COOL, LET'S MOVE ON! 🥳
Next, I needed to ideate more based on the business needs, I jumped back to FigJam and I did some competitor benchmarking, from apps like Glovo, Tazz, Foodpanda and TakeAway.
I sketched out the main screens, and then I found an amazing way to fill the white background with something really smooth and playful, an icon pattern created with Flaticon Pattern Generator, and it turned out to fit like a glove, here is the pattern and some main screens:
Final insights
Throughout the process, I’ve worked with only 1 developer who was building the app in Flutter and we collaborated pretty well in terms of clearing out any confusion, creating new screens that I missed out and also the hand-off was great. Ciprian wasn’t very experienced with Figma but I walked him through it in a meeting and he understood it right away.
TIME FRAME 🗓
The whole design process took me about 2 months but I could’ve done it earlier if it was needed, but since it wasn’t urgent we took our time to do everything nice and easy.
PRESENT DAYS 🚀
Nowadays we’re currently waiting for Ciprian to launch it on Google Play and Appstore therefore we’ll correct the eventual problems and work more on the UX.
RESEARCH 🔎
We’re planning to run surveys and user interviews after the app is live to gather more important insights and improve the user experience.
Wrap up
WHAT MISTAKES HAVE I MADE AND WHAT TO DO TO PREVENT THEM?
As usual, I forgot some important screens like a page where the user gets redirected when they don't have an internet connection, Terms and Conditions, and Privacy. In order to prevent this, I had a meeting with Ciprian and we wrote down every screen in FigJam.
Thanks for reading!
Let's work together!