Fuel-Prep— An e-commerce app for fitness enthusiasts
Project Brief 📋
The goal was to create a mobile e-commerce experience for users to browse the catalogue, find items they’re looking for, initiate a checkout and complete the purchase.
This was an assignment for 10kdesigners
Personal story 👀
Back in January 2021, I was serious about achieving my fitness goal which was to lose body fat and gain muscle. I used to meticulously measure the weight of my meals and track calories. At that time, There was no app which used to deliver meals (near my area) according to my fitness goals. I had to track my calories and I wasn’t sure if I was tracking accurately.
Being a civil engineering student who wanted to be a product designer and wanted to achieve an aesthetic physique, I had too much on my plate and was slowly starting to burn out. At one point, tracking calories got too tiring and I decided to approach restaurants if they would deliver meals according to my needs. Most of them said no until one restaurant finally agreed to deliver at a high price. I was happy with the service at first because I no longer had to go through the hassle of calculating calories since the meal prep providers used to do it. Over time I faced a few problems with the service :
- Sometimes if I was traveling the next day and had to cancel the order, I had to call the restaurant and they had to tell the cook to cancel. Most of the time they would forget to cancel the order due to miscommunication b/w the staff and the food would go to waste.
- I had to go tell the cook in person if I wanted to change something in my meals. (The restaurant had different cooks for different timings). Most of the time they would forget to do the changes due to miscommunication b/w the staff.
- I used to be in a state of anxiety because I didn’t know exactly when I would get my food. I couldn’t track my order.
Life of a newbie when it comes to tracking calories
- I’m going to start tracking calories and achieve my fitness goal 😍
- Did I add 1 or 2 tbsp of olive oil? ☹️
- I don’t remember how many chapathis I ate 😢
- Ughh this is too stressful 😭
- I quit tracking calories, I’m going to eat what I want 🙂
From this story in my life, I decided to design an e-commerce app for fitness enthusiasts like me who would like to get their meals delivered according to their fitness needs.
(I also have a small surprise at the end of the case study to show you the benefits of tracking your calories)
Design Process 🤓
Research 📝
I decided to research on the pros and cons of using a meal-prep service and understanding the business side of things when starting a meal prep business by referring to the following sites :
Insights after referring to these sites
- I understood the benefits and disadvantages of using a meal prep service.
- Some of the most important benefits are it saves you time and helps you achieve your goals (surprise at the end of this case study)
- Understood different type of business models regarding meal prep delivery.
I decided to study various already existent meal delivery apps . In the process, I tried to understand why certain things were done in a certain way in those apps.
I used Mobbin AND UI Sources to understand user flows, patterns of these e-commerce apps and for inspiration.
Information Architecture & Wireframing ✍️
- This stage helped me to clearly define and represent how the user will navigate through the app and the information to be displayed on the screens.
- I prefer to do my IA and wireframing on paper first and then on figma as it gives me more freedom to explore and make mistakes early on in the design process.
After IA, I had a pretty good idea of how to create the app, what and where to include. So I moved to the next step Low-Fidelity wireframes.
Final Visual Designs 🤩
Onboarding
- Onboarding is usually the set of screens shown during the first interaction with the app. It is a sort of introduction that somehow imitates communication in the non-virtual world with a greeting.
- Another part of the onboarding mission is informing a user about the benefits they get with this product or basic operations they are going to do.
Login/Sign up
- Sign up is the last thing users want to do. Generally, users are not willing to sign up until they see value in doing so. Signing up is somehow an unavoidable evil they have to deal with. That’s the reason I added social sign in along with conventional email sign up and log in.
First time user experience for new users
- The reason why I wanted the user to pick a few options was so that they would get recommended meal plans once they select their goal and preferences.
Home page
- This is the home screen of the Fuel-Prep. In this flow, users will be able to see all products, search, and apply filters.
Package option
- Once the user selects a meal plan, the user has to decide on the duration and frequency of the plan.
- The user also gets to see the price of the entire meal plan in advance. Since this app mainly focuses on selling meal plans instead of a single meal, I’ve decided not to show the price of individual meals which is common in popular food delivery apps like Zomato, Swiggy, etc.
Product Page
- The product page consists of different type of meals along with information regarding its calories, carbs, proteins and fats and it also has a CTA which proceeds to the cart section.
Search & Filter
- A good set of filters and facets also ensures an improved user experience. By helping users drill down to their needs with ease, it eliminates the need for numerous searches queries just to find something specific
Cart & Checkout
- The checkout page is the nexus point of the entire site. It is where all the action happens and because of that, it is important to make it as effective and possible.
Other screens
- What if the user’s cart is empty? What happens when the user places an order?
- Keeping the above scenarios in mind I designed the following screens for the app.
- I’ve also designed a settings screen in case the user wants to edit his/her profile, cancel or modify and existing order and for many other purposes.
Liked the project? Feel free to try out the actual prototype of the app below!
Learnings and Takeaways 📖
- Starting this project was the hardest part because I was thinking of the final outcome before I even started working on it and felt overwhelmed. There’s this famous quote which helped me a lot.
“You don’t try to build a wall. … You say ‘I’m gonna lay this brick as perfectly as a brick can be laid,’ and you do that every single day, and soon you have a wall.” — Will Smith
- Even though I was given a time period of 2 weeks, I spent the first week just consuming content about design and e-commerce apps. I still wasn’t taking action until I came across this post on twitter by visualizevalue.
- I feel Iterating in design is similar to putting in the reps when it comes to building your strength in the gym.
Now it’s time for 🤫
- I wanted to show you what happens when you start tracking calories at each meal and workout 6 days a week.
- If you want to understand more about quantified nutrition (measuring foods you consume) and achieving your dream physique, then check out LOSE FAT, GET FITTR by Jitendra Chouksey.
- Thank you for reading till the end. Means a lot to me.
- I would like to than Sunal Sood, Sahil Pandita and Apoorva Patil.
- And do reach out to me on LinkedIn or Twitter for any feedback, discussions, or collaborations, I’d be more than happy to have a chat with you!
