WEB & MOBILE PLATFORM
eMindful
Fostering positive health benefits for individuals and companies using live-streaming meditation classes.
When eMindful first came to my company, TEEPS, I was excited because I knew we could do something special with such a valuable online product that featured a very poor visual and user experience. It was obvious that no matter where the product would end up - it would, without a doubt, be greatly improved. My first overall assessment of the platform identified some huge pain points from a user standpoint.
Firstly, there was no on-boarding process. At the very least, there should be at least a 3-4 screen intro that helped to acclimate the user to the platform and how they’ll benefit from using it.
In addition, the company required a user to take a 10-15 minute pre-course assessment for every meditation class they signed up, which is brutal. Also, this assessment came BEFORE the final push to schedule a class, which means it’s entirely possible that pre-course assessment data was being collected from users who didn't even sign up and may never take the final course.
Lastly, the act of joining a class was far from seamless. Upon clicking join, a popup window is initiated. If the user’s browser didn’t block this automatically, they are then taken to a third-party Cisco page which initiates a download for a new program. After downloading they then must install the program. Once installed, the user would then have to go back to the original class detail page and re-click the Join Class button. As far as I could tell, none of this was outlined anywhere on their site and I reiterated how poor of an experience it was.
The eMindful platform had a lot of growing to do
The original navigation was wide and confusing, with many main paths of traversal and each one had numerous extra sub-pages. My revised flow streamlined the menu, included an onboarding experience, and greatly simplified the site architecture.
The company had a mobile app presence as well as on desktop through the web browser. Neither was sufficient visually or usability-wise.
The existing eMindful branding was bland and at times felt too dark.
While eMindful was the company, they named the platform that they created eM Life. When our team was initially hired on, the first ask was for me to revisit their current mobile app. They desperately needed something better and more usable, so we were brought in to essentially re-skin what they already had and also needed our developers to fix the problems that existed.
As part of the re-skinning project, I made sure to focus in design elements that could look to the future and be reusable for eM Life 2.0, which I knew was coming soon after this. Most of the icons created were designed with the future in mind, as well as many of the design assets, such as the buttons, fonts, some colors, etc. The ultimate goal was to thread the needle on something that current users would still find familiar to the desktop experience but also provide something that felt new, fresh, and also pointed to the future.
The design elements had many early iterations, here showing more of an abstract type of solid visuals as opposed to the eventual thin-lined icon treatment.
While most of the experience was taken from the out-of-the-box app that already existed, some liberties were taken with how some of the functionality worked, like fitlering.
During this stage of design, I felt it was important to use textures for the white-space areas to create an airy, floaty feel, as I knew the future direction would not be as purple-dominant and harsh.
Apart from trying to solve the problems of the original platform, we also had goals of the new platform. One of which was user motivation for continuing to use the platform. Enter The Progress Tree. My idea was to create a visual and fun way for users to track their progress on the platform and how often they used it. The more often they returned their tree would glow more green and vibrant, and the more classes they took, from beginner level to advanced - they would see the tree grow from a Level 1 sprout all the way to a Level 7 fully-formed great tree. Not to mention users could also earn badges and unlock meditation skills, also viewable in their profile.
In the end, the client was ecstatic with the visual and UX directions we created and we managed to address their original site problems while accomplishing our own sought-after goals:
Reduced learning curve
With on-boarding and a more streamlined content flow, it now allows for an effortless user experience.
Freedom for users
Users now have complete control to experience the platform the moment they need to and are not restricted from accessing the content.
Instructors with more control
With increased visibility, the instructors now matter more and become a focal point for the users to get excited about and create a following.
Powerful motivational tools
By having increased accessibility and a visual representation of their progress, users will feel better about continuing their lessons.
The eM Life Progress Tree was a new way to track personal health progress
Much was determined through early wireframing, which helped inform the site architecture and how the site felt from a user perspective.
For the first round the client also wanted to see some examples in full color. Many iterations of the header and landing dashboard were attempted.
In addition to creating the web and mobile platform, the client also provided me with marketing opportunities for eMindful. It was also decided I would create the full marketing website for the new eM Life 2.0, which would require extensive time as I was the only designer on the project.
The final eM Life 2.0 platform featured specific design-led ideas, such as the Progress Tree, and also included brand new features that were derived from the client-side, such as a social community area called Vibe Tribes, where users could create groups for specific altruistic initiatives that eMindful provided and could then earn eM Life meditation credits for those organizations based on the groups usage of the platform.
The end result was meant to be the ending of the bridge that started with the original platform and the eM Life revamp. The new visuals were light, clean, and designed to the put the user at-ease. It also gave life to the fact that their main classes were live, so the color green was used to focus in on anything that revolved around their live classes, giving them a little extra color pop to stand out from the traditional pre-recorded offerings.
