<?xml version="1.0" encoding="utf-8"?>
Open full project

Hi everyone!

This is my copy for the app with yoga classes and meditations. Please note, that the design for the landing page is based on templates from Figma Community. 

OmYoga is an app where users can practice yoga online or book sessions offline. The content highlights the benefits of the yoga app, including its personalized classes, expert guidance, and community-building aspects. Each section (e.g., "Why Choose Us," "Best Selling Products," "Offline Classes," "Online Classes") targets a specific aspect of the user's journey.

The tone is friendly and motivational. The descriptions are short but informative. Also I avoid jargon, which ensures accessibility for all users. 

Headers like "Level Up Your Yoga Practice Anywhere" and "Find Your Perfect Yoga Class Nearby" immediately inform the user about the core offerings.

Calls-to-action (CTAs) such as "Download the app" or "Learn More" are prominently displayed and actionable.

The offline and online yoga class descriptions show differences between the two modes, ensuring there’s no confusion about what the app offers.

Tools used

Figma

From brief

Topics

Share

Share your insights — leave a project review and help others grow their skills

Reviews

3 reviews


Thanks for your sub, Inna!

You did an amazing job here! I love the inverted pyramid ( might have something you could improve ). I adore the black-and-white hero image.

There is only one thing that I would like you to think about. You used a balanced alignment with a center orientation for text. The lady in the background is a golden ratio (Fibonacci), which emphasizes a different point from the CTA. How should we fix this?

Great vibes!


Hello Inna,

Your website design has a strong foundation, with a visually appealing layout and a clear emphasis on promoting the yoga app and its related services. The Hero section, with its captivating image and prominent call-to-action button, effectively draws attention to the app's benefits. However, there are several areas where improvements can enhance the user experience and accessibility, particularly when it comes to WCAG compliance.

Starting with the Hero section, the white small text over the image background creates potential readability issues. This could pose challenges for users with visual impairments or those in bright environments. To address this, consider adding a semi-transparent overlay to darken the image, thereby increasing the contrast between the text and background.

Throughout the site, headers and key elements highlighted in orange are visually engaging but may lack sufficient contrast for users with color vision deficiencies. Enhancing the brightness or saturation of the orange, or adding complementary design elements like subtle shadows or outlines, could make these elements more distinguishable while still aligning with the site's branding.

The product section is well-organized, with a clean and straightforward design. However, consider improving the focus on user interactions by increasing the size of clickable elements, such as buttons and icons, to meet accessibility guidelines and create a more user-friendly experience. Similarly, adding hover states or slight animations can provide users with additional visual feedback.

The footer could also be optimized with better contrast to ensure all links and text are easy to read.

In summary, the website already does a great job of presenting its purpose and structure, but with a few thoughtful tweaks, it could become even more user-friendly and accessible. Enhancing contrast, refining text readability, and polishing small design details won’t just help with WCAG compliance—it will make the site feel more inviting and enjoyable for everyone. These changes don’t have to be overwhelming, and even small improvements can make a big difference for your audience.


I'd certainly give it a go, perhaps showing areas of operation would help also because I'm not clear which territories this App operates within.


26 Claps
Average 4.3 by 6 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>