For all things to do with the Figma collaborative design tool www.figma.com. For commercial or other addons, please go to /r/FigmaAddOns
Mental Health App (practice) - feedback needed
feedback
I've recently created a new app design with the topic "Mental Health". I'm not finished yet, but would like to know what you guys think so far.
Context: The App is supposed to be an helper with certain things. The quiz at the start determine what issues the user is facing and where they could need help. It also will get like an relaxing section with various tricks that can calm you or your mind down.
I've got plenty more ideas, but before I'm designing them I want to know if my path right now is good or not and what could be better.
Thanks in advance!
Sort by:
Best
Open comment sort options
Best
Top
New
Controversial
Old
Q&A
I really like the colour palette and illustration details. Personally, I wouldn't use the display (Playfair) font on the buttons, but only for the largest titles. The buttons in the first screens also have some weird top light, not sure if it's intentional as on the other screens they are just one color. Maybe try a softer color for the input fields. If you're using an icon in the button skip the circle, or maybe instead of a black circle use a full color that is just a bit lighter than the orange. The "skip" link needs to be a bit lower as it's too close to the button and doesn't have enough contrast on the beige background. Overall a good start :) Keep on working on it - gl!
Maybe the text is a bit too small too, but would have to look at it on a phone
Also, there's no way to pause or quit the quiz. Maybe add a close/cancel button? However, I figure you're more focused on the overall visual design rather than the functionality at this point
Wow thank you so much for the detailed feedback. I'm not exactly sure what you mean with the button on the first screen, maybe it just looks like that, but I've applied just one color to every button. Yeah, I could change the font inside the buttons and look what its like. I figures the "skip quiz" could be problematic, I prob need to change the overall position or add "more text" to highlight it, like with the "Don't have an account...".
And yeah good addition to close or cancel the quiz, I didn't think about that, thank you.
Thanks again for the feedback, I really appreciate it!
This is looking great so far. I agree with the above re. limiting the use of the Playfair font beyond titles.
Aesthetic wise the only thing I’d say would be to consider other illustration variants. Those block colour human silhouettes are ubiquitous at this point, and have really lost their charm. For something like a mental health app I’d be looking for something a lot more organised and human. The plants are a good start. But yeah. Ditch those out-of-the-box ‘Humaaans’ and let your creativity take you to new frontiers!
Thank you so much for the feedback and yeah those human illustrations are kinda overused, but since I'm not really good with making those I just tried to go with something I've seen a lot and maybe can do myself. But I can surely try something new and see how things go!
Thanks again.
I believe in you! Go download some things from thenounoroject and mod them, experiment with them, shape them to your own. Less is more. There some broom app designs out there where barely any illustration is used. I reckon you’re going to land on something unique in your own time :)
Wow thanks, I really need more source for Inspiration and stuff. At the Moment the only Thing I'm using is Dribbble or just Google images. I'll keept that in mind, thank you :)
I like the colour palette but do check the contrast ratio for the button text colour to its background for accessibility
thank so much :) And I did, accoarding to "realtimecolors" it works. I can check it again and see.
Decent palette, something about the orange seems off. Maybe it is too saturated for the rest of the UI. I would confirm that orange-on-tan is accessible too.
Buttons with icons feel odd when there's a circle around the icon. Too many edges to scan visually, it seems cluttered as a result.
Inputs with placeholders as labels - not very usable, there is 3rd party research to reference on this. You could consider getting rid of the 'confirm field and allow a toggle for visibility of the entered password. As long as the user has the account tied to their email, they can recover/reset later so confirm is not critical and introduces friction to registration.
Colored social icons - might look nice to flatten the color to match your palette, maybe your dark gray.
Quiz colors seem out of place, it would be easier as a user to focus on the text rather than rely on color here. Some are hard to read and the screen feels awkward.
Overall aesthetic is solid, just some small tweaks to make it even better.
The Orange is so standing out because my thought process was that I need a color that stands Our really strongly to incourage the user to click Button or just do it General yk? Since its mental health app, I thought about using the color to help the user overcome their anxieties. I'm not so sure if you know what I mean.
I could see how it looks if there is no circle.
Sure sounds pretty plausible, thank you
You mean like the Google, Apple and Facebook icon?
Yeah I Was already kinda struggling to make an pleasing looking Quiz section, maybe its still not there...
Thank you so much for your time, I really love when people are just taking someone serious and give their all to help them. I really appreciate it :)
Good work so far, mate.
More info and research about Form labels and Placeholders: NN group article
Yes, the social media icons with a flat color might feel more polished in this UI. I think you use whitespace well, and focus on one primary action per screen, so a more intense color may not be necessary - the main action already stands out without it. Maybe a more calming color would fit your palette and support your brand goals as a mental health app to reduce anxiety.
First sketch looks great although I have some suggestions.
Screen 1 - I’d adjust the color of the lightbulb to make it visible. The contrast is too high, it’s hard to see against your light bg. Looks like the color of the bulb doesn’t fit with the color scheme that you’re going for.
Screen 2 - the placeholder texts in the input fields are tiny , so is the login option. And the “or”
Screen 3 - skip quiz is too low on the screen. Imagine trying to press on that thing - looks like you’d need a stylus.
Overall, I’d say work on your skills with accessibility. Color contrasts, text sizes, white space needs improvement. The look and feel has potential, so keep on working on it..
That's actually a good point i didn't think of that, i can def adjust the color or maybe replace it altogether
I could try and See how things look when I'm making these a bit bigger
Yeah I really need to come up with something different, it's just i thought about that and like I don't want to make the User skip the Quiz but still give them the Option to do so, but my approach was prob not the best
Yeah I always has my issues with texts and colors.
But I really love and appreciate the time you took to make such detailed feedback, thank you so much!
No worries.
Always use figma mirror to see how it looks like on the phone.
Pass the phone around, ask your family and friends about these elements and observe how they use it. Then you'll get the feedback that you need.
Thats a really good idea, I'll try that out :).
Thank you
cool! I think maybe one or two things need to be a bit more spaced out. Namely the small orange buttons (‘Get Started’ etc.), the text feels a bit tight.
Also in the last screenshot the green pop up with text seems off. The left margin is a lot narrower than the right margin, and it needs a bit more space to breathe above and below the text
Yeah text-wise I notice I have to change things up.
Yeah I noticed, things look a bit tight and not really much room to breath. I'll need to adjust that, thanks for the feedback :)
It's very pretty in a good way. Soothing colors.
That said, text-wise, I don't think you're using the phrase "mental" correctly here.
"Mental" is an adjective, not a noun.
Thank you, means so much! Yeah text-wise I prob need to look over everything again, since this isn't the final and I just used whatever came to my mind first, but still thank you for the feedback!!
The only nitpicky thing I can think of is... remember color contrast for accessibility, if that's a focus of yours. Some of those foreground + background combinations may not pass contrast ratios needed, particularly on the survey answers, such as the darker green with dark text. But if that's not your thing, I think it looks really good!
Not nitpicking in my opinion. Accessibility should be your thing.
Your quiz questions, which are your radio group labels, are probably too small and far away from the radio options. When scanning the page, it's easy to read 'Take your time!' and skip past the question which is the most important thing to read first.
Also consider removing the exclamation marks in your headers. They look 'shouty'.
Your 'How does the quiz work' sheet needs an 'X' close button or a 'Got it' button as an alternative to swiping, for users who may be able to perform precise pointer movements.
All in all, this is a great start. If you address the feedback in these comments, you'll have a pretty decent design. Good luck!
Getting the MyMind app vibes from this.
Never heard of them before, but I can see what you mean
Can I take your design to practice my SwiftUI skills?
Uhm, sure, let me know how my Design helped or inspired you :)
reminds me a lot of claude AI’s colors and app design. very nice
Thank you :)
I love the colors. Very warm and inviting.
Yeah, I love beige in General such a nice color.
Don't know if anyone mentioned that but the spacing between take the quiz and skip the quiz should be larger, at least 40-48 px if you want it to be also accessible
Yeah "skip skip" causes some Problems I really need to redo it. Thanks for the feedback:)
I like it! But the black text on the orange button is quite hard to read. Did you use an accessibility contrast checker? I don’t think there’s enough contrast to be legal in many countries
I know this is just a practice design, but since the WCAG guidelines are actually required by law in many countries (and the fines can be ridiculously high if done wrong), it’s great practice to make an actually legal design, which is usable by everybody
—-
Also, I personally think that the “skip tour” button needs a bit more space around it, and also that color you should check in the contrast checker, to see if it works on that background color.
In the other buttons, the circle around the icon is unnecessary, and I don’t think it adds anything.
—-
Lastly, I don’t think the display font (which you use in the headers) fit in the buttons. Perhaps you can use the font you use for the body text, with slightly different font settings?
I think the Black text shouldn't cause any problems but I need to check that again, the Orange on beige prob causes some issues and I need to either recolor these or idk underline to make it obv that it's clickable.
Yeah skip Quiz also is problematic, font size, color, spacing, need to change that.
Thanks for the feedback and the time you've taken to give me such an detailed feedback :)
Look really nice! Can I ask where you get these kinds of illustrations from?
Thank you :). I made them myself, but those kind of humans you can find on humaaans (thats lterally an website).
I would say aside from changing the font on the button, change it altogether. The font feels very "business-like" to me which is the opposite of how i feel if i'm taking care of my mental health. same with the color scheme. feels very cold to me
Yeah I get that "business-like" isn't what is supposed to be achieved here, but since I'm no expert whatsoever with fonts, what font would you suggest? Or even use 2 different fonts, if yes which?
Thanks for the feedback :)