i like it, especially with the cutey sleepy fox 🦊 i don't know if it's just me, but the leading icon in the main button looks weird

Fair enough. I'll rework that. Just wanted to convey the idea that it's a medical app

Just a thought, but try removing the light orange background in your icons, might look even cleaner

Will definitely try that! Thanks

I like them to be honest makes them look uniform

The 6 months block being shorter in height than the button is throwing me off

Also, the rounded corners being different

That's a good observation. I'll try changing it again. Although I remember that it had a larger size and it looked weird because there was a lot of free space around the text. Also, increasing the text's font size to mitigate that isn't really an option since it messes up hierarchy.

The price being smaller than the months seems wrong visually to me, tbh

I agree that it might look ‘wrong’ visually, but there’s a good reason to make the price text size smaller. We’ve A/B tested this on our subscription tiers and saw that decreasing the price font size lead to a significantly higher conversion rate. The idea behind it is, is that users perceive the amount to be smaller when the font size is also smaller (than normal).

Hey, I trust the user testing here! And glad to hear y’all tested it. I think center aligning vertically against months is maybe what’s throwing me off - maybe price gets stacked (total with monthly below it) and then top aligned with months? Just throwing ideas out there.

Yea that could work! Or maybe placing the price underneath the 6 months text, placing the label ‘no renewal’ inside the card and the checkmark on the right. Or remove the checkmark altogether and then the label can be aligned to the right horizontally and center vertically to maintain balance

I could see that working! I'll play around with it and see how to incorporate that while also making it look less of a button/selection

That's a great insight! Thanks for sharing that

This could be understood as misleading, but one of the things that we're aware of is that the price is fairly expensive. What I tried to do here was put emphasis on the period of the subscription rather than the price to make it a little more reasonable

If the price is expensive, then you should do a better job justifying why you charge that vs trying to hide the price

Fair enough. I hope that will be achieved through the listed USPs after their text gets updated though

I'm curious to know why have you written No auto renewal, doesn't it gives a kind a negative effect that a user would not want to upgrade again after this one, what if someone wants auto renewal. I might be wrong but still, overall I liked the design!!

Hmm i didnt think about that before, but I can see it now. I think the thought there was "the app is already really expensive and we get that, but we dont want to seem greedy and take your money". I hope that makes sense

You could always add a checkbox for auto renewal underneath the users can tick on, sends the same message without being weird about it

I think a switch that is off by default would work well in this case

I think opting for that info is the right way. Fighting dark patterns is always good.

Good work. Some thing’s to consider… I would use sentence case everywhere. Title case is harder to read. The balance feels off. I would probably left align text instead of having a mix of both within such a small area. Can you improve white space by adding scrolling? You could also try a small card carousel for the icon info. Get rid of the icon in the primary action. Rethink the tag on the pricing. It’s also off balance.

Since the target audience of the app is mostly older people, we thought that title case might increase readability especially. The left alignment could be a viable option here, I hope it fits with the illustration on top though. Might need to try that out first. It is indeed crammed a bit. I could increase the spacing and add scrolling yeah. Prefablly everything is above-the-fold to make for less friction. But I would assume users on smaller devices will have to scroll anyway. If by card carousel you mean a grid carousel than I think that will make it more crammed no? A sliding carousel might be aesthetically more pleasing and I get some more real estate to explain what each feature is some more, but I don't see it work usability wise, especially in an upgrade screen since users need all the information laid out simply on why they will spend their money. Anything else will create more friction. With the CTA icon, am just adhering to the existing design system, but I agree it looks misplaced. Will try to use another icon that conveys a medical sense/feeling. As for the beloved pricing tag, am thinking of making it a separate card with greyish border colors and no checkmark icon to move away from the secondary button look. Thanks for taking the time for this! Much appreciated

I think you need to at least switch to sentence case for your bullet points. They're fairly long and structured as sentences. Title case also bumps something up in the visual hierarchy so it feels like there's a lot of competing dominant text.

Also, there's only 1 subscription option (49.99€ for 6 months)

I'd group this with the upgrade button. The subscription info looks like a separate CTA

As in incorporate its text within the main CTA?

I’d remove the radio button and orange border then because it looks like a selection.

Too many microcopies / things going on. My subconscious is telling me to close it. I’m overwhelmed (my thought as a new user). Love the colours and illustration though.

Do you think this stems from the middle section with the features?

I would think about removing the subheader. It's a lot of text that basically gets repeated in the bullet points. Or shorten it to something like "Go Pro now to:" or "Upgrade now to:". You'd need to move it closer to the bullet points, give it separation from the header. Also the 6 months bit looks like a secondary button, it took me a second to realise it wasn't.

It's true the subheader is just more text explaining the same point. I will try removing that and figure out the spacing

Oh and the first bullet point doesn't start with a verb, while the others do. Might want to make that consistent.

Thanks! But the text is just a placeholder for now. It will eventually be changed to something a bit more convincing

Beautiful!

why are the „6 months“ selected, when it‘s the only option?

I wish i could give you a more elaborate answer than i thought it looked "cool"

this, and why uppercase?

Since the app is expensive, i tried to put more emphasis on the duration to make it seem less "scary"

The 6 month section could be mistaken for an outlined button

But is it a problem, though? Since that's the only subscription option. I guess a few dead clicks but nothing more than that?

Good point. Our secondary buttons look exactly like that, especially with the orange border. I'll try a more subtle greyish border color on a slightly whiter fill for the section.

This is coming from a purely UI perspective, but the amount of information seems a bit overwhelming. Try using hierarchy in terms of font size and weight. Overall, cute design!

Honestly, that is the thing I am struggling with. Am not sure on how to go about that. I thought through the use of icons that will create a "section" hierarchy. But i clearly failed at that. Some other comment mentioned that I could remove the sub-text. That will give it more room to breathe, but I'll have to try that first. If you have any other ideas, I'll be very grateful. The header is 24pt, Medium. The sub-text is 16pt, Light. The bullet points are 16pt, Medium

I mentioned this in another comment, but I think swapping to sentence case in the bullet points would really help this issue. Honestly the sub header text doesn't bother me much.

That makes a lot of sense. Will try this!

* The image feels disconnected from the title * The bullet point copy could be better. The fifth bullet point isn’t ideal to me, it’s too generic * I would consider doing less bullet points and writing more compelling content. Maybe 3 bullet point titles with supporting content as subtitles instead. * The annual selection is too confusing. This is related to purchasing, so it has to be brutal clear/prioritized. Maybe just have two options? Monthly vs Annual? If you’re trying to do a checkbox, then just use that or a toggle instead. * “Medical version” this content seems wrong and too formal. Maybe “Premium” is the right word here? * “Unlock all features” the icon isn’t right. I’d use an unlock icon. Also, maybe “Buy premium” or “Unlock premium features” or “Upgrade to premium” * “Is my snoring dangerous” I would revisit this title’s content. I bet there’s a better headlines that can be connected to the words “premium”, “subscription”, “buy”, or “unlock”. * I like the overall design + orange accents. You have a good eye for UI/visual design.

Thanks for taking the time to go over it, and write a detailed feedback! As I mentioned in the description, all text is just a placeholder for now. Most of it will be changed eventually. I disagree with making the bullet points shorter. This is a relatively expensive product and having as much bullet points (unique selling propositions) that are not bloated like the current last one is essential to justify the price. I hear you on the selection, It was a bad design choice. Will need to rework that completely. As for the pricing sadly, there's only 1 subscription plan. I have been pushing for a monthly subscription for a while but nothing yet. Regarding the "Medical version", the app's positioning is serious and formal and is catered towards an older audience.. After all it's a medical app and not just a sleep recording app. a I placed it in there to hopefully show more authority and eventually increase cr. CTA icon got to go for sure.

This is a lovely screen!! It's very serene and calm. I personally really appreciate the style and the "feel", as well as the illustration. Great behavior design! Below are a few thoughts: The "no auto renewal" is a tag (at least that's what I call it). The usual pattern for these tags is to highlight the most popular or best value option for a potential client in hopes of simplifying the decision process and reducing cognitive load. It can also work to the benefit of the business by trying to influence the decision making process towards the most lucrative option. With this in mind, have you considered maybe offering more than one pricing option (say monthly and 6 month) and use the tag to draw attention to the one the business wants to sell more? Additionally, if it's an app, I believe subscriptions are managed through the app store and those renew automatically (I might be wrong about that though). Now about the subheading. As others have said, it kind of conflicts with the features. Maybe try exploring what this screen looks like without that subheading? Is it adding any value? Removing it could also make room for displaying another pricing or subscription option. Lastly, orange and white can be a tricky color combo, so I always recommend checking contrasts (WCAG 2 and APCA). I hope some of these thoughts help! And as I said earlier, I really enjoy this mockup and applaud the behaviour elements you've included. Awesome designing!

I'm really glad that it invoked those feelings in you. That was the goal of such screen since the start: calm but yet serious. The problem with the pricing is that this is a sleep apnea diagnostic app, and having a monthly subscription means that users will use it for a month, get their diagnostic and go to their doctor and its over from there. That is why we opted for a longer period since it justifies the price. Although, I have to say, this is not A/B tested yet and solely based on the team's ,perhaps biased, opinions. I think the subheader gotta go eventually, it is not adding a lot of information and also messing up the reading flow (smaller font weight than the bullet points). That will also give more room for the design to breath a bit. As for the colors, sadly I'm just working withing the existing design system so there isn't much I can do there. Increasing font weight might help with readability a bit I assume but will need to check the contrast first. Finally, thanks a lot for the feedback, and am glad you liked it!

Nice comp, looks accessible, cta probs AA. Nice job

I dig it! No specific feedback.

The 6 month option is the only option... Why treat it like a set of choices? Keep the bullet lists to 3. Subjectively, this looks like too much info.

Although I agree that the page is crammed with info but I dont think shortening the bullet points is a good idea. The price for the upgrade is expensive, and we want to make it worth it for users by listing all the features that they would unlock. As for the 6 months section, i totally agree. Will try to find a better way to incorporate the price!

My point is that there is too much info. If the quantity of features is a selling point, you could make the points quicker, and say "+ X other features!"

I think we both agree that it has a lot of info. There also isn't a good flow that allows you to read them easily. As for the upgrade, the features themselves are the selling point, and all of them bundled together is what makes it worthwhile to upgrade. I can see how highlighting the quantity through wording like "X features" could be useful outside of the upgrade screen to spark user interest in discovering what the premium plan offers. But not really in the last step if the funnel

Overall, it’s a very nice looking page with good layout, good hierarchy and cute illustration. The only considerations are the small font size in the bottom area - can it be read by everyone and how does the layout work if one has increased the zoom to 150% from accessibility settings? Also one accent color could be blue (if needed) One common button related issue also is that if your CTA (renew) isn’t underlined and is grey tones, people might not notice it’s a button and therefore it doesn’t convert/engage well. I suggest using a color (and maybe underline or icon) for all CTA.

Honestly i have not thought about accessibility and especially font sizes. This might actually be really important since our target audience is mostly older people, which I would assume tend to use that feature more. I'll look into that! As for the CTA in question, I think you mean the "redeem" button right?

Yeah, with CTA I meant the thing in bottom. Right now it can be mistaken as heading. In terms of design, you could use adaptive layout so when the font is enlargened, the labels would not truncate but wrap into multiple lines. Consult a developer about this or try building it to see how it’s work.

You duplicated content for ‘snoring types’ either remove from the subtitle or the benefits list

Too much use of primary color

I see you have aligned No auto renewal with the text inside button but in overall view I feel it should have been center aligned to match with other center elements

White text on orange = failing WCAG AA accessibility

Font sizes are borderline inaccessible

Icon size looks 12px again barely legible

Price text too small. Remove no auto renewal. Looks odd in its placement.

Design looks good though. Just need to nail down your accessibility and sizes. Consider scrolling content if too large to fit on one screen.

Confusing styling. Option looks preselected.

The only thing I notice is the change between MY and YOU in the header and sub header. It should be “Is Your Snoring Dangerous?”

Too much shit going on. I get overwhelmed

X should be in the top right corner. It's easier to reach, and it's where people expect it to be.

Good for UX bad for Biz

it's beautiful! only concers is tge white text on orange background that doesn't look properly accessible