E-store with meditations and yoga practices

How we developed an online store of author's audio meditations and video yoga practices

Client

The client is a certified specialist in Hatha yoga, yoga for pregnant women, and Ayurvedic medicine. The client has produced and recorded the author’s meditations and video practices to share with future clients.

On the website, the client wanted to share not only the products but also their unique philosophy and mission to engage customers more and get to know each other better.

Сhallenge

The main challenge of this project was to meet a very tight deadline and launch the MVP product just in time.

It was coordinated teamwork of developers, project managers, designer, and a client, who constantly kept in touch to quickly solve emerging issues.

Solution

Our team has developed an online store based on WooCommerce. The site includes 2 types of products: audio meditations and video yoga practices. They are available in the custom user space.

Meditations are divided into packages designed specifically for certain phases of life. Meditations and yoga practices come with the author’s instructions before the practice. Along with the yoga practices comes the author’s scheme, tied to the women’s cycle.

Mood board & Structure

The client provided us with the future site structure and a clear style guide with plenty of references. The client recorded a video describing the visual features they liked in other projects and concepts. The styling also needed to incorporate flowing natural shapes and elements. It was straightforward to set the style, knowing exactly what the client preferred.

Home Page

We started with the Home Page because we had all the content and images ready for it. On this page, we worked out and polished the entire project style. Along with the desktop, we designed a mobile option, so that the developers could start their part of the work.

Meditations

This was one of the most exciting pages we worked on designing. The client has 10 audio meditations that are divided into topic packages. Some meditations can be included in several packages at once. The user can buy the whole package as well as individual meditations. It was important to consider the UX so that the user does not have any problem with the purchase. Also, the user has the opportunity to listen to an audio preview of the meditation in a pop-up.

Color coding

Each meditation is represented by a particular color that is associated with the theme within. The specific colors are our client’s original idea.

Animation

One of the graphic elements, a circle around the photo, is animated as the user listens to the audio. It rotates smoothly as it plays.

Author's photos

Each picture is a unique client photo. It was a basic principle not to use stock photos so that the site would convey the personality and spirit of our client as much as possible.

Other pages design

After the Home page, we designed the Yoga Practices page with a video preview. The About page was a challenge to show the client’s «journey» not just in the text as an article, but rather as a visual timeline to control the user’s attention and encourage them to read more.

User Profile &
Check Out

We created Checkout and User Profile based on WooCommerce. We stayed close to the WooCommerce box, applying well-established styles to the rest of the pages to keep up with the deadline.

Key Development Features

We created a website from scratch to promote and sell unique products related to yoga practices and meditations. We have implemented the ability to purchase the products offered on the site and the ability to listen /view them through the user account directly on the site itself.

Woocommerce & Product Bundles

We have implemented the purchase of products through WooCommerce. Meditations are divided into packages that include several individual meditations. We integrated the Woo Product Bundles plugin to implement the logic of adding items to the cart with a package solution.

Integration with Paypal, Prodamus & Cloud Payment systems

For the product payment on the site, we have integrated international payment systems, which will be convenient for users from different regions.

HTML-5 audio player integration

One of the most important functionalities of these sites is the audio player, which should be simple and easy to use. We have integrated a familiar and convenient HTML-5 audio player, which allows customization of the project’s corporate colors.

ACF & WordPress Gutenberg Plugin

We used the ACF & WordPress Gutenberg plugin because the site had a lot of logical blocks that are used on all the pages. These are the product blocks, the About block, and the Instagram block.

Swiper-js library

We connected the swiper-js library to implement a slider with our client’s diplomas on the About page and a block with the Instagram feed. This library allows you to make the slider convenient for mobile devices.

Video covers
preview

We created custom covers for all the yoga videos that are used not only on our website but also in the client’s profile on Vimeo.

Feedback and communication

We used Jira to track the project. We kept in constant contact with the client on Telegram. The project had a fairly tight deadline, so we were constantly in touch so as not to miss anything important and quickly process feedback.

Audio and Video Feedback

We received the requirements and the design suggestions from the client in a video format, where the client shared the screen, showed us the structure and references, and described the task nuances.

We received feedback on the finished designs in the audio messages on Telegram.

Results 🎯

Our team has developed an online store based on WooCommerce. The site includes 2 types of products: audio meditations and video yoga practices. They are available for listening and viewing in a custom user space.

Deliverables

Website for selling audio meditations and video yoga practices.
Integration with Paypal, Prodamus and Cloud Payment.
Integration with HTML-5 audio player.
Integration with the WooCommerce plugin to implement the products purchase.
Integration with Woo Product Bundles plugin to implement the logic for adding items to cart with a batch solution.
Integration with ACF plugin and WordPress Gutenberg to reuse blocks.
Using the swiper-js library to implement a slider.

Project in figures (including development)

People

600 +

Hours

70 +

Design layouts

Technologies and tools

Figma, Apache, PHP, MySQL, WordPress, WooCommerce, JS, jQuery, Bootstrap, Scss, PayPal