Howdy partner! I'm a multi-faceted digital designer drawing from my background in graphic design to create beautiful, and functional designs.
Improving the user experience (UX & UI)
Breathwrk is an app to practice mindfulness and after using it myself, I noticed a gap across the UI and UX where improvements could be made. The primary issue I found was that the app displayed cognitive overload and the UX and usability weren't working together. I had been learning about how UX, (in terms of a broader design practice) didn't exactly ensure the usability of the solution. Identifying the basics of usability I could see the navigation could be better, and the content wasn't intuitive (meaning it wasn't clear or it was the wrong level of content at the wrong time). Observing the competitive landscape I looked at the UX approach from alternative top-rated mindfulness apps (Balance, Headspace, Smiling Mind) I found what worked well and compared it with what wasn't working well for Breathwrk. Stripping back the old information architecture I rebuilt it by thinking about the profiles and personas so I could provide better journeys for the user as they moved through the app. Using Miro I went through user journeys roughly noting how things could be improved.
The changes - old vs new
Welcome page and setting up a profile
Hold on! I'm still writing this part of the case study! Thanks for your patience.
Personal dashboard and discover page
Something you've probably noticed by now is the drastic change in the colours of the UI design. The original colour palette didn't make a lot of sense, The text was too heavy in the wrong places, and the overall UI was clunky and didn't give that immediate feedback that can be the difference between a good user experience and a clumsy user experience.
Let's start by looking at the dashboard. The original version begins with a dark box taking up the majority of the screen. I suspect driving the user to use the sleep meditation seeing as it was almost 9 pm as I was exploring this. Regardless, across all pages, there were predominantly white or light backgrounds for this to be a successful attempt at night mode.
You'll see in the top right corner a very random avatar, which I found to be above all else, completely unnecessary. Granted it is in one of the less important spots for the user to tap. Looking at the profile allows the user to view a streak count, or to be able to compare your statistics with other users of Breathwrk. I may not yet have learnt enough about user personas and UX to make an accurate assumption here, but I found this to be quite unnecessary given the app's purpose. The personas I used as I made my way through the app, none of them, were inherently eager to turn their mindfulness into a competition.
Redesigning the dashboard I removed the avatar as its need is unlikely, but I kept the profile statistics available. Instead of 1 exercise available for a quick selection, I broke it into 3 calling the quick classes. Below that, in more of the primary real estate you'll see 'Your day' where the user can see what they have scheduled and make quick edits. I used some of the space I saved from the big black box suggesting 1 exercise, to create a banner to purchase the full version of the app. The hierarchy of content now goes from "Use this one exercise" to quick classes, a glance at the profile stats, and then planting the seed to purchase the full version.
Discovering via category and meditation screen
Hold on! I'm still writing this part of the case study! Thanks for your patience.