Mobile App/Website - growfit
UX Case Study
Introduction
Worked on user personas, user research, user flow, sketching, wireframes, prototypes, building information architecture, creating wireframes, prototypes, visual design, UI elements to support the development of the app and website.
Collaborated with developers and the internal team to align with the needs of the consumer. Helped in designing, Landing pages and other internal pages for website, Plan Screen for mobile app.
Project Details
Duration: 2 weeks (Website) + 4 weeks (Mobile App)
Team: 2 Designers, 4 Developers
My Role: Head of Design
Platform: IOS, Android, Web
Year: 2018
Tools: Sketch, Adobe XD, Photoshop, InVision, Illustrator, After Effects, Pen and Paper
Empathize - Define - Ideate - Prototype - Test - Implement
With Design Thinking, bringing designs to life is a circuitous journey of many discoveries. Moving forward on the right track involves taking several steps backwards, several times.
Problems to resolve:
1. Consumers that value quality and nutritional value of food. The focus is on making informed decisions.
2. Consumers who don’t have enough time to think about what to buy beforehand, or don’t have much time in-store.
Goals
- Structuring content in a way that encourages engaging interaction.
Enabling users to effortlessly access different nutritional information and other details.
Going Forward
Exploring > Research > Materializing > Execution
My Task
- I analyzed the information closely through user research and chose to carry some of the elements such as quality and nutritional value of food.
- Some of the valuable pieces of information/features were price, nutritional info, calorie count, and adding to shopping list.
- I, also had the task of designing in making the experience simpler and shopping a better experience for consumers in mobile app and website.
- To provide quality information through design for the consumer in providing a great source of information from price to nutritional value.
Brainstorming With The Team
User Story Map
Empathy Map
Persona
Card Sorting
Observation & Findings
After getting idea about whom we were designing and also about their requirements, we initiated on an iterative design process to develop a meaningful solution. On putting together the different level of information from brainstorming, user story map, empathy map, persona, card sorting, we started with the findings to guide design decisions.
Insights
- Many potential customers haven’t tried shopping for food online.
2. Many potential customers fall between 23-50 years.
3. Many potential customers hope online shopping will help them save time and avoid long lines while making payment at checkout.
4. Many potential customers are budget conscious.
5. Many potential customers don’t have enough time for shopping.
6. Many potential customers hope for information/features such as price, nutritional info, calorie count.
7. Some of the users are worried about quality of food.
8. Many potential customers want to eat delicious healthy food while maintaining good health.
9. Many potential customers want to achieve health goals through a planned program.
10. Many potential customers want to get rid of their unhealthy lifestyle but not able to find how and where they can get healthy diet plans specifically planned for them.
User Flow
Information Achitecture GROWFIT Website
User Flow - GrowFit website
Home Page > Product Page > Product Description Page > Shopping Cart Page > Contact Information Page > Shipping Address Page > Payment Page
About: Physique Builder Smoothie
The quest for building muscle at the gym has always been an elusive one. Many a bodybuilder will tell you that it’s a fine balance of exercise, reps, and nutrition, that can give you the gains you desire. While your trainer has you covered on the workout, we’re here to give you your protein fix. The Physique Builder Post Workout Smoothie delivers the proteins you need, when you need them.
Insights & observations
1. To add visually appealing images to connect with the end user
2. Add product description and details for subscription
Low-Fidelity Wireframe
Medium-Fidelity Wireframe
Icon Sketch
Icon
High-Fidelity Wireframe
About: The Lean Machine
By reducing carb intake and increasing healthy fats, the Lean Machine program trains the body to burn fats as its primary fuel source. This results in rapid, healthy weight loss, stabilisation of blood sugar levels, reversal of fatty liver, and improved energy. Not to mention glowing skin and lustrous hair!
Low-Fidelity Wireframe
Medium-Fidelity Wireframe
Icon Sketch
Icon
High-Fidelity Wireframe
Mobile App Screens
The app screen has been done in collaboration with other designers and developers. Delivered brand and UX integrations in the form of graphic, motion, and product design samples. Some of the old screens are redesigned for better user interaction.
Building features is easy, building the right features for the right people is challenging.
Product Thinking
- Problems: Users want to get rid of their unhealthy lifestyle but not able to find a solution and also where they can get healthy diet plans specifically designed for them.
- Target Audience: Users fall between 23-50 years.
- Vision: Eat delicious healthy food while maintaining good health.
- Strategy: To engage users through chat, customised diet plans to achieve desired goal.
- Goals: Provide customised meal plan and recipes to suit user needs to maintain good health.
- Features: A fully-loaded shop with nutritious ingredients and snacks for good health.
Insights & observations
1. Use of real images instead of vector images for diet chart
2. Take Diet chart, Chat, Shop, Profile to bottom navigation
3. To highlight with timings for diet chart
4. To add Expert Details for Expert screen with Choose the Expert button
5. To add image add feature on chat screen
6. Shop screen to have header image for highlighted product.
Some of the Old Screen & New Screen - Diet Chart Screen
We have added 3 days on the new screen where the user can now view their diet chart also worked on visual look and feel on the screen. Added real images of food in the new screen.
Some of the Old Screen & New Screen - Expert Screen
We have added expert details button where user can get more detailed information(we have added testimonials button in the expert details screen), choose an expert button where user can chat from this window on the new screen also worked on visual look and feel on the screen.
Some of the Old Screen & New Screen - Chat Screen
In the new screen one can now share photos providing a much better experience. Profile photos can also be added.
Some of the Old Screen & New Screen - Shop Screen
In the new shop screen we have added hero image. Search and cart on the upper right corner.
User Flow - Mobile App
Please click on the videos below
1. Open the Shop on the Grow Fit App.
2. Select the product that you want to subscribe to and click on the ‘Add to Cart’ button.
3. Once the product is added, click on the ‘Go to Cart’ button below.
4. Select the ‘Subscribe and Save’ option
5. Choose the schedule that works best for you – weekly, bi-weekly or monthly. Select your dates.
6. Click the ‘Subscribe’ button below.
7. Now you can either go back to edit your subscription or proceed to checkout. Your subscription is done!
Description
The one diet app to help you achieve your health goals. From meal plans to personal nutritionists and a supportive health community, find it all on the GrowFit app. GrowFit has highly-trained dietitians and nutritionists specialise in keto and low-carb counseling, and can help achieve fitness and weight loss goals in a healthy manner. Shop everything you need straight from the app, and enjoy app-exclusive discounts and offers. You can also shop for a fresh meal subscription in select cities in India.
GrowFit collection of features to achieve health goals:
* Plans for weight loss or gain
* Growy chat bot to help through onboarding process.
* Simplified user experience in some of the previous designed screens
* Chat with your personal dietitian
* A fully-loaded shop with nutritious ingredients and snacks
* Meal subscription services (for select cities in India)
* Motivational community
* Delicious and easy recipes
* Find a meal plan and recipes to suit your needs
* Talk to other people on their journey
* See real health results
GROW FIT DATA
* Diet charts deployed: 72,000+
* Total weight lost: 42,000+ kg.
* Inches lost on waist: 14,000+
* Happy and healthy clients: 150,000+
Next Steps
•Put up more mock-up pages and move up the prototype with color and images to a higher fidelity.
•Conduct more user testing and research ways to deliver more personalized content to the user.
Conclusion
I learned that the answers always lie within the users’ responses, and that thorough research always results in a better product. Conducting research for this project actually gave me insight into how challenging and rewarding it can be to restructure a website and an app that hosts hundreds of product pages.
To provide some help, I was able to execute a few design changes within the app, and happy to receive positive feedback. We noticed a much bigger problem other than a lack of expediency or simplicity; I fully enjoyed and learnt new things while exploring, designing and testing the digital features.