Daily Vitamins Challenge

Got your point Suvam. But If a user is consulting with a doctor then he/she must get vitamin recommendations from the doctor only. What I am saying is, in order to provide more accurate recommendations you are constraining and losing most of the users. I am not questioning your tradeoff. It is up to you how much you give value to it.

Hey, Amish Whatever you said is correct for most of the users but we need to take precautions while suggesting proper vitamins to the users. Majority of the fitness enthusiastic user make their dietary plan according to their BMI and based on their BMI, RDI(Recommended Daily Intake) made. Whereas in India, we don't directly buy vitamins because of our habits, and daily lifestyle instead we first consult with the doctor and do necessary checkups before buying any vitamins. https://en.wikipedia.org/wiki/Reference_Daily_Intake https://takecareof.com/articles/what-vitamins-supplements-should-i-take https://www.healthline.com/nutrition/vitamin-deficiency The platform needs proper information about users whether it could be Dietary intake or medical reports to provide proper vitamins. I hope you understood my solution. Thank you!

Hi Suvam, your design is very engaging and minimal. I really liked how you manage your colors throughout the design. I got a lot of inspiration from your design. Here are a couple of issues I found with the design. While completing a health profile you are asking for vitamin intake in some sort of unit. I think this will be a big constraint for most of the users to not use your app for this challenge purpose. You expect users to do a blood test or calculate consumption which most users have not done. You can ask some sort of general questions (daily lifestyle, habits, etc) which users can answer immediately. After completing the health profile, I suppose that the profile will be automatically saved. So you can just show the edit button on the next screen, I don't think there is a need for the save button. Otherwise, your design skills are great, you did really great job. Correct me if I suggest anything wrong.

Thank you for the feedback, it is insightful and worth noting. I will consider all the suggestions in my next iteration.

Pros: - Intuitive, seems to follow the well known pattern of navigation and design - Simple, the information is clear and no cognitive friction with possibly overwhelming inputs - Clean, the contrast and spacing is well balanced, the status of buttons and CTAs are visible - Reduced frustration, showcasing the steps taken and remaining, the opening screen after login is a good starting point - Exit points available on all screens - Consistent and coherent Improvement recommendations: - Simplifying the daily intake page (possibly pre written standard dosages? chart more visible?) Current setup requires many additional steps for a user which might be off putting to some - In the symptoms, medial illnesses and Diagnosis - how would it look like to choose multiple ones? Seems like it works only for one. Something to think about. Maybe add "tag like" buttons below the input boxes to showcase what was already chosen (like article tags on blogs) - Different colour depending on the results. It states there is a deficiency, but the colour green will indicate "all good" for most users - they will most likely not read the whole text after seeing it's green

Hi very good design for the challenge, the approach of quiz seems to be the best way to find out the vitamin deficiency few suggestions to make your design uniform in your second screen there seems to be lot of space between the image and heading you can decrease that and position the image and description somewhere near vertical centre to have the white space above and below you can increase the description font size by 1-2 px to make it more legible

The application that is quite useful for users who are concerned with their health. The appearance of the application is also quite attractive and easy to understand. hopefully the application can be completed properly and can be used for users who need it.

A very useful application in the digital era. The display of the application and the information provided is complete. I hope applications like this continue to be developed and useful for the community. Good luck!

The UI and UX that you create are easy to understand and simple, making it easier for users to use the application you created without having to think long

Nice design simple and clean, and easy to understand

Hi Yash, Great attempt for this design challenge! Also, you conducted good research. I want to bring your attention to the following things that will make this design even better. 2ND SCREEN: - I advise you to make this design more inclusive by providing more gender options (nonbinary, agender, etc.). But if you mean sex here, this is also a good idea to include also an intersex option. This small thing helps not to discriminate based on gender. Besides UXD need to be equally engaging and useful for as many people as possible. - It's better to add a progress bar or something like this to inform a user of how much time is needed to complete the questionnaire. Users feel more comfortable when they know how much time they need to invest. - I would add kg/lbs to weight and cm/ft to height because it's not apparent which metrics are used here. As a user, I don't know what number to enter. - Great idea to use a grey colour for the back button. I would advise you to make a small adjustment. It seems to me that the contrast ratio is too low here. WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text. Try to use a contrast checker next time. 3RD SCREEN: - Nice idea to use AI to analyse skin but I would add some language here. The users want to know and to be informed why s/he needs to take vitamin D. Also, it's not instantly clear whether the user's level of vitamin D is low or ok. may add adjust UX writing here (low, excellent, etc.) Maybe, add also explanation action why the AI consider this level low. 4TH SCREEN: - I would advise adding another concerns option/button or broadening the variety of options. A user might be a vegan and that's a reason to take vitamins, etc. 5TH SCREEN: - Add some language here and create groups of vitamins that have low, great levels. That will ensure that users can instantly and easily see which vitamins need to be taken. Besides, it's not obvious why you use blue, green and orange colours for different vitamins. - Add a tittle personalised recommendation plan to screens 5 and 6 because it's not obvious without it. I got it only because of your screen explanation. 6TH SCREEN: - It looks like there is a huge list of supplements. Try to add a search function to provide a faster way of finding needed supplements. Same for Vitamins can be applied. 7TH SCREEN: Allway try to keep your design consistent. Use consistent icons for vitamins and diet pills. Why do the morning icons for the vitamins and diet pills differ from the afternoon ones? Plus, the red crossed circle refers to no symbol. Try to find a better icon for vitamins/pills.

Great work!

Very good UI/UX. Well made

Easy and interactive user experience. Design looks clean and seamless. Good job👍

Very well thought and designed. Winner for me already.

Very nice

such a clean and well-thought design like the colour pallet and the thought behind the screens in the description well done🙌

Thanks Hrithik for your insightful feedback. I will take care of the things and iterate on it.

Hey Goutam! I liked the approach of your solution for this week's challenge! I have a few suggestions to give though! I liked that you considered the problem of OTC drugs being harmful for the user. In this case, taking vitamins tablets leading to excessive nutrition leading to toxicity and so on would be a problem. Although, I see that you have given an option to shop for vitamins which is contradictory to what you have mentioned above in your explanation? So does the app provide any kind of warning before an user goes ahead to buy OTC medicines? I liked that users can upload their prescription and the pharmacist can see it and deliver medicines accordingly. Visually there are a lot of things going on which can be improved with practice and an eye for design. On the home screen, I feel there are categories everywhere which is not really an efficient way to make use of the home screen properly. You can make the main component of ordering medicine online using prescription (which is the hero feature) a bit bigger so it grabs more attention. Coming to the screen for uploading prescriptions, you can improve spacing in between elements a lot. There is text below the camera, scan and the paper icon which is barely even visible. You can also add the disclaimer or the side notes in a different container and less prominent as it is not so important in that screen. The visual hierarchy of the screen is bad. There is definitely scope for improving white spaces here and there which will come by practice. Apart from all that, you have gone a pretty good job at solving the problem! Good Luck

Hey Anastasiya! I really like the illustrations and colors you have used to make this app more playful and less medical. One suggestion I would make is changing "Ask an actual doctor" to something more like "Want more accurate results" then a paragraph explaining how and why. To me your copy makes it sound like your app isn't accurate. Visually I would consider adding some type of header on the last screen. I feel like the content doesn't seemed organized because it's all floating together. Maybe even adding a third card that says "Add patient" would help fill out and connect the sections. I hope my suggestions help!

Hey Rani, I really like your solution. First having the user go through an assessment or test and allowing them to add details and images helps with recommending the right product. Also asking for specific pictures is a great idea. Visually I am having a bit of a hard time because each section looks the same so I am not sure how to use them. For example the "Add more details" page on the left looks like information. I wouldn't know I need to type in there. Consider differentiating between fields and information more. I hope these suggestions help!

@Kishan Borad Thank you

User friendly and decent looking design.

Hi Jennifer, loved the idea that you used to implement this week's challenge. Your design is very clean and minimal. I really like your color usage and especially iconography. I got inspired a lot by your design. Great job.

@Leo Thank you so much for the super helpful feedback! Expanding the checkbox options to a full tap field is a a great suggestion… as well as reworking the progress bar. 👌🏻 Much appreciated!!

Hey Jennifer! I REALLY love that you have started with the users goals rather than just asking about their health. My assumption is people download the app for a reason so understanding what they want early on is very helpful. I also like the you considered the loading state. One thing I may consider is making the checkboxes more mobile friendly be allowing the whole area to be selected rather than a checkbox. It is difficult for some people to tap the small buttons so making the entire option highlight when selected makes it easier to use. The only other thing that I would consider exploring more is the percentage bar on the first screen. The style seems a bit dated and I almost didn't see the 38% text since it carries no visual weight. I hope these suggestions help. Good luck with the challenge.

And I forgot to mention about the color choices. I just wanted to try something new, so I differentiate the onboarding process and the main screens. I think it gives a kind of indication to the users that the survey is done and the results are ready. It's just an experiment.

Hi Jennifer, Thank you for the feedback. I got inspired by your design only for the connectors. So thank you.

Hi Amish! Really thoughtful process here with your screens and the progression through the steps. I appreciate the connector lines between screens a lot. It is a nice touch to give the user options of vitamins to purchase on the spot from their results, while also offering an alternative brand if desired. Some feedback I have to offer is on the UI color choices. I am wondering why you chose a different color background for the last 2 screens vs the green screens in the first 5. I think the last 2 read clearer and would maybe advise the same treatment across all. In any case, well done!

Thanks for the feedback @Amy.

Very clean design, it shows all the details of vitamins and when to take. different styles for different questions, love that! I also love the daily schedule UI. I have used these kind of apps and it's very difficult to get the vitamins even after the questionary. This is very seamless process. Good job!!

Thank you for the suggestion , seriously i had no idea that people could be allergic to certain vitamins and coming to lab test or prescription part my aim was to help user find his deficiency based on his input though this method is not 100% efficient these were the main inputs on which i felt could judge the vitamin deficiency

Hi Ganeshwar, I really loved the concept of the app, but you should consider, whether a person is allergic to certain things or not, what if the AI suggests a person to take Vitamin A tablets, and he is allergic to it? And also the Vitamin Supplements doesn’t come under OTC Drug (Over-the-Counter Drug), so the AI cannot prescribe it unless it has an MBBS or equivalent degree. My suggestion would be to ask for prescriptions or lab tests from the users to confirm he/she has that deficiency.

Thank you for your feedback!! Leo Fredrickson, I understand what you suggest, I will give you a more detailed explanation. You may enter or search your symptoms in that search box, and in that case, you can buy it or add it to your schedule list. And the "book doctor consult" feature is optional; either enter your symptom or visit your doctor, which is why I included it. And on the "my care plan" screen, you can check your medication schedules as well as track your vitamin levels.

Hi Aarthi! I really like the idea of a vitamin tracking app that helps inform the doctors what you have been taking and what might the patient if they start taking it. I do kind of wish there was an option to fill out an assessment without making time with a Dr. I would be a lot more likely to use the app if I didn't have to wait to meet the doctor. Another thing I would consider is adding a bit more information on the far right screen. Initially when I looked at that chart I had no idea what it was telling me. It also looks like this is just showing me Vitamin D so I would love the option to see a summary of all the vitamins at once. I hope these suggestion help!

Hey Sky! This design is super clean. I am not sure how the vitamins on the middle screen are decided though. Did users go through an assessment or quiz to have items recommended to them, or are those just popular vitamins for everyone? I would also giving each product a bit more space on the screen on the right. Right now it's blending together a bit which makes it hard to see where one product starts and the other ends. Overall I think it's cleanly executed but the flow doesn't make sense to me for the given challenge. I hope this helps!

Thank you for your feedback leo.

Hey Aashi! Nice work completing this challenge. The flow you have created makes sense, but there are a few usability issues that I would consider. I would suggest allowing users to sign up with an email since not everyone uses Google products. I would also allow the information on the health card to be left blank since most people don't know all of that information. Visually I would consider using the background image for the first screen but removing it from the rest. Even with the overlay, it is distracting me from the content. I would also look into modern chart and data visualization styles for inspiration for the third screen. I hope this helps, good luck!

Hey Pratik, I like how simple you have made the onboarding process for this app. It may be helpful to have an option that allows users to get more accurate results by going to a Dr. to get their blood drawn. Visually I think that the vitamin illustration you used on the far right screen is competing with your color palette. I would consider using a different image and possible making it pink and green like the rest of the app so it all ties together. I would also consider making the fields on the middle screen have a white background when they have been filled out and possible have the grey background when they are incomplete. I hope my suggestions help!

Thank you Sir, for your valuable feedback, I will come up with new ideas and I will try my best to redesign it with perfect one.

Hey Anup, I don't completely understand your solution to this challenge. What do you mean when you say "per your reference"? Are users going to a Dr. before downloading this app so they can import that data and get recommendations? Looking at it, that's my best guess. Visually I would consider making the cards on the left screen white and removing some of the other color so there is a clear hierarchy to follow. Right now I feel like each card is trying to pull me attention a lot of different directions. The middle screen you did a great job, and the right screen I like but I would consider removing that grey line across the middle. If you have a lot of white space and a clear title, you don't need to block the content. I hope these suggestions help. Good luck!

Hi Vedrana, I loved the idea that you used to accomplish this week's challenge. I suggest to give fewer choices in the form to make lessen the cognitive load of the user. Or categorize the different choices into different sections so that it will help the user quickly find the desired choice. Otherwise, good job, keep up the good work.

Hi Guruprasad! I have a few suggestions for you to go ahead with the next time you are solving a problem. Since the problem was about building an experience where the app can take input data about my body and then recommend vitamins on the basis of it. So, the obvious flow would be you entering about you first and then getting results from the app. (Since the user cannot remember about the exact medications but can definitely remember the name of the disease or know about the symptoms.) From this, you can go ahead with different explorations such as E-Commerce. Although, I liked that the app reminds the user to take medicines at specific times. But how does the app know about the timings? In the onboarding phase, there is a form field to enter the vitamins but not the nuances like medicine consumption times. There is also an activity tracker which shows a random graph but the graph doesn't tell me what data metric it is actually outputting. Detailing is needed there. Good Luck and thank you.

Hi Amish Thanks for the feedback. I will work on the inputs mentioned by you.

Hi Anjali, You did really great job on this challenge. I like the idea of notification design. But you need to more work on alignment and consistency. For example, try to keep consistent with the iconography throughout the design. The color contrast on the card on the 4th screen is also low. So try to design with all the aspects in mind. Otherwise, great job, keep up the good work.

This is a really great solution Pooja! The questionnaires look sufficient to know about the person, which also considers factors like allergy. But I was wondering why every form page doesn't have a navigation button? Also, I think a progress bar would be great so the users feel that they are closer to the finish line and drop off rates go down. One thing I noticed is that the spacing in between the texts of the card container is more than usual. Any specific reason for that? Apart from this, I can see users can favourite the vitamins so that they can access the names for later. How do I access the favourite page in your solution? I would have loved to see the home screen that the user would see after he is done with the onboarding and logs in the app normally. This solution has a lot of potential in it. You can explore multiple areas for solving problems by integrating this solution. Good Job!

Thanks Amish. Will keep that in mind

Hi Manasi, I liked the idea that you use to solve this week's challenge. There are some design issues that I would like to point out. 1) It is not a good idea to use some kind of input field in the form of all kinds of questions. 2) Try to keep some margin to the content all around the screen. Otherwise, great job, keep up the good work.

Thank for the feedback Amish! Really appreciate it. 🙏🏼

Hi Clement, I love the idea that you used to solve this week's challenge. I would like to point out design issues. Try to keep good color contrast throughout the design to provide accessibility to all the users. Otherwise, great job, keep up the good work.

Hi Leo! I appreciate your feedback. I'll take note of this for the upcoming challenges. Thank you so much!

Hey Jewel! I really like the onboarding/quiz flow you have created. You are asking the right questions, the spacing is great, and it's easy to go through. I would consider making some of the text a bit bigger. For paragraph text I would try to keep it around 16px at the smallest. I would also consider making the background white instead of the light pink so there is more contrast and the shadows are easier to see. In my opinion the colored background is pulling my attention from the content. Hopefully this feedback helps!

Hi there, you did a great job on this week's challenge. I like your idea to identify the vitamin deficiency of users during the onboarding process. I would like to suggest being more consistent with the iconography. The footer navigation contains half filled icon and half outlined icon. It will be a great idea to use filled icon for any active state icon and outlined icon for inactive state icon. Other wise great job, keep up the good work.

Hey Lauren, I really like the way you have designed the survey assessment screens. You have created a clear hierarchy so each screen is easy to use and understand. I also like that you have considered the loading state so users know the assessment is being analyzed. I would consider making the screens straight in the future. While the angled screens look great I would save that for Dribbble or other UI sites. When I am looking through your solution I have to turn my head slightly to read everything and it gets a bit annoying. Another suggestion I have is to consider making the selected items on the "Vitamin recommendation" screen outlined in green but still have a white background. I hope these suggestions help. Good luck with the challenge!

Hey Aman! I love the concept that you have come up with. Having the survey to collect information and then the e-commerce store to buy the products seems like it would be a great business. I would consider that most people don't know their eye power, body density, etc. and I am not sure that would be accurate without a dr. visit. It may be cool to connect this app to your Dr. so you can get the data imported and they buy the right products. Visually I would consider changing the field outline color to grey. Right now it's in red which is a universal color for an error or problem. This may confuse some users. These are just my opinions but I hope they help!