Prana is a yoga web app that helps people with busy lives get back into and create and maintain a routine. It was part of my UI for UX Designers course.
UX/UI Designer
- wireframing
- prototyping
- UI design
- animations
August 2019 - September 2019
The goal was to create a fitness app that allows users the ability to complete workouts, track progress, schedule workouts, and to allow for a community of users to form within the app.
We were given some basic parameters in order to help us focus on the UI of the app, rather than focus so much on the UX aspects. I did make changes to the concept, to make the programs yoga-specific.
To start things off, I broke Prana down into 3 main user flows. First, a new user would want to learn about the available exercises, set up daily challenges, and create a schedule. Secondly, a user who is unfamiliar with yoga would want to be shown a yoga routine so she or he can learn the basics of yoga.
Next, I came up with a workflow that adds a community to Prana. Assuming that the company would have an Instagram page and a blog, this is a great way to keep the user engaged and inspired with the brand. There’s also a way to add friends so you can work towards your yoga goals together and also challenge each other or share classes.
With my 3 user flows in mind, I then created a series of 3 low-fidelity wireframe flows that I made into prototypes using Marvel to ensure the flow made sense.
After these were completed, I began work on the mid-fidelity wireframes. Mid-fidelity wireframes saw the addition of new screens to fill out any missing pieces in the workflows and here is where I implemented UI elements like buttons and improved the navigation. I used Figma for this process.
When I first came to the idea for Prana, I knew that the app had to represent an escape for the user. The user persona provided for the project mentions that the user (Rebecca) has a busy work schedule and a child. That means that Prana needed to be her escape from her busy life and a moment to let go of her daily stress. To effectively practice yoga one must be in the moment and not concerned about things outside of the practice at that moment. Prana needed to represent breath, light and airiness, and a moment of calm.
These were my original 2 mood boards. Once it came to adding colour into my app, though I really liked the colours from the first mood board on the left, they simply didn’t work. Not only was the contrast not acceptable, but the pink gave the wrong impression. I settled on purple and teal after preference testing and testing for contrast in the WebAIM.org contrast checker.
The final mockups you see below are a result of numerous iterations. I began by building upon the mid-fidelity wireframes and applying visual design principles, typography, colour, and imagery, including creating the icons. I also created a gif from an illustration for the video loading screens. Prana was designed mobile-first, and then I added breakpoints for tablets and desktop sizes.
With the current state of Prana, the style guide was created. This is an overview of the colours, typography, iconography, photography dos and don’ts, and so on. Everything that a designer would need to create a new Prana page if the need should arise.
The final prototype for Prana combines simple gestures with a light airy design. The app is uncomplicated and lets the user focus on getting into their yoga practice. I created this prototype with Figma.
Designed and built by Jessica Hurford in 2024 using Webflow.
