toptop.jpg

This is Power Up.

Power Up is a mobile app that encourages users to meditate through gamification. In order to gain points and move on to higher levels, all you need to do is dedicate 5 minutes of your time to meditating. This concept is one of the core philosophies of meditation: it is better to commit to a short amount of time meditating every day rather than spending hours meditating every blue moon.

Another unique concept that is implemented in my app is the idea of “power poses.” Since many people feel so restless when attempting to meditate while seated and completely motionless, I incorporated these full-body stretches to help distract people’s minds and at the same time- improve their posture and confidence.

If you’d like to learn more about my entire process and why I took my app in this direction, please read my case study below.

Screen Shot 2019-01-05 at 1.16.36 AM.jpg

A Case Study

Summary

Context: This is was my second project at Ironhack’s UX/UI Design Boot Camp.

Client: The National Wellness Institute is an organization founded in 1977 with the mission of providing health promotion and wellness professionals unparalleled resources and services that fuel professional and personal growth. NWI wants to release a series of digital Wellness Tools that will be available to all of their members. It can be focused in any category that relates to personal wellbeing. The only requirement is that it tracks the user’s progress.

Challenge: Choose an area of wellbeing and create an app that allows users to track their progress and send such information to their NWI coach.

Time Limit: 2 weeks (1 for UX, 1 for UI)

Scoping out the Competition

Since yoga and meditation have been important to me and my mental health for about 10 years, I decided that I wanted my app to be in this field. As a UX designer, it is so helpful to be someone who falls the target market that you are designing for. It’s much easier to empathize and understand all the frustrations and motivations related to the topic.

I researched meditation apps and started using new ones on my phone. The ones I researched were: Breethe, Headspace, Calm, Insight Timer, and Nike Run Club. I chose these apps because they are so popular and people that might be interested in using my new app would probably already have experience with some of these. You might be wondering why Nike Run Club is included in this list. They actually offer a guided running/meditating feature. I spoke with one interviewee that won’t run without these audio tracks.

newcompfeature.jpg

Then, I created a Market Positioning chart to identify any gaps in the current market. Most of the apps were similar in many ways and fulfilled a similar purpose. Nike Run Club was the only one with a wildly different aesthetic as well as the only one of these 5 that guides users through a very active session. The other 4 practice a form of meditation that is very passive in comparison. I found a blue ocean for apps that practice meditations that are a bit more active than sitting down and a bit less intense than going for a run.

position+(1).jpg

Research

Riding a Tidal Wave to #1 🏆

I have to admit that I was very surprised after releasing my survey into the wild west that is the internet. I only posted it in Reddit and kept getting upvoted and upvoted minutes later. That same day I received a notification informing me that my stress survey was voted to the #1 position in the Reddit SampleSize thread. I received over 660 responses to my survey, which meant I had SO MUCH DATA. 🤩

660 survey responses, 7 in-depth interviews


Quantitative Data:

yyyyy.png
ajdhsfd.png

I was very excited about my survey results because I felt like there were so many people out there that could benefit from stress relief. Some didn’t know where to start, some worried that they weren’t spiritual or religious enough for meditation, and others couldn’t stay still. Furthermore, if I could attract any of the 41% of people that felt like meditation didn’t “work” for them in the past by presenting it as something else with a new name and costume then that’s a huge pool of people!

Additionally, most of my survey respondents were between the ages of 18-24. Their top 3 stressors are work, school, and financial issues. Their stress can also come at any time, they reported. The hour doesn’t matter. To manage stress, the #1 tool they use is music. 59% have tried meditating before.

Qualitative Research

I interviewed 7 people about meditation, including a yoga instructor in Miami. Here are some quotations from people I interviewed:

“Meditating feels passive. I prefer feeling proactive because I’m restless.”

“Meditating is boring for me. I’m just counting down the minutes.”

“Stress makes me feel like I don’t work hard enough.”

“I feel like I’m weak if I need an app to help me.”

Searching for trends

I needed to make sense of all of my data, so the best way to do that is grabbing a fat wad of sticky-notes and diving into an Affinity diagram. Once you’ve written every piece of information that stood out to you as a frustration, motivation, lifestyle habit, other—then begin to organize it the most thoughtful way possible (because there are multiple ways to organize ideas). Here is what I discovered from that process.

Top 3 Blockers:

  1. People don’t know how to meditate.

  2. Meditating seems too passive for them.

  3. Stress makes people feel weak and not want to ask for help.

Top 3 Motivations:

  1. Focusing better

  2. Knowing you’re not alone

  3. Viewing habits as a game

Creating a user persona

personaaa.jpg

This is Danny the Distracted Dude. He represents the majority of our users. He’s tried yoga before before, but he wasn’t into it. He spends a lot of time online. He usually feels kind of stressed out and behind on his life. His favorite way to relax is to smoke and play video games. He’s not very reliable and difficult days make him feel depressed fairly often.

Brainstorming & Prioritizing

With Danny in mind, I asked myself: How might I…? And I kept making questions that started with those words. How might I… help stressed and anxious Danny when he finishes a hard day? How might I teach coping methods to manage stress and anxiety? How might I stop people from thinking they’re weak if they want or need help? How might I help quiet their minds so they can focus? How might I create new habits? How might I use his interests and motivations to appeal to him through a wellness tool? This got me started on brainstorming—or ideating.

With this project, I used colored pencils instead of post-its for my ideating process. But I still separated them from each other with loose circles. As a way to let my brain’s guard down, I would write bad ideas on the bottom to help me think about…

With this project, I used colored pencils instead of post-its for my ideating process. But I still separated them from each other with loose circles. As a way to let my brain’s guard down, I would write bad ideas on the bottom to help me think about the opposite point.

Once I had all these ideas written down, I needed to organize them into 4 quadrants based on the level of effort it requires and how impactful it might be. This is known as the Moscow Method.

Finding the minimum viable product

Screen Shot 2019-03-12 at 12.31.00 PM.png

From here I determined my Minimum Viable Product (MVP). This is the leanest possible solution to the main pain points I discovered. My app would provide 5-minute engaging physical and mental instructions through video demonstration. Throughout the video, users would follow along with “power poses”. There would be a friend feature on the platform so people can encourage each other and everyone feels less alone. Finally, there would be a music component since it’s such an effective method of stress relief with people.

This addresses the real pain points that I studied because:

  1. If they don’t know how to meditate they could watch this how-to video

  2. This isn’t passive meditation. They are using their bodies in a way that’s not typically associated with guided meditation.

  3. Stress makes them feel weak, but power poses make people feel better

What are “Power Poses”?

This is a concept that comes from Amy Cuddy, a social psychologist at Harvard. The idea is to make yourself physically bigger by stretching and taking up more space. We see this all the time with body language. Nervous people make themselves small while confident people make themselves big. Science already proved that doing something like holding a fake smile makes people closer to actually feeling happy, so it’s really the same idea applied to posture for the sake of gaining a confidence boost.

If you’re interested in learning more, you can search for her TED talk, which is the second most watched TED talk ever.

AmyCuddy_2012G-embed.jpg


“Our bodies can change our minds. Our minds change our behaviors. Our behaviors change our outcomes.” -Amy Cuddy

Prototype Testing

I immediately got to work creating a low-fidelity paper prototype as soon as I had my MVP. I tested my screens and I was pleased to see most people could successfully and (usually) easily navigate through my “happy path”. Some were not so confident about navigating through my screens for the first time, and I know on-boarding screens are an absolute must if my app were to be developed.

Here are all the screens I drew for the paper prototype “happy path”. At this time, I was still using the name “Focus Boost”, but I tested that against “Power UP” and changed it. 🙃

Here are all the screens I drew for the paper prototype “happy path”. At this time, I was still using the name “Focus Boost”, but I tested that against “Power UP” and changed it. 🙃

“Oh, I wasn’t expecting to see that. I thought I would see my friend list or something like that.”

“Oh, I wasn’t expecting to see that. I thought I would see my friend list or something like that.”

This screen needed to be redesigned to match user expectations more. The first thing you see when you click on the “Friends” tab on the footer of the app is the box asking you “How do you feel?” I decided that the home screen of my app would have the latest statuses posted there on the feed, while the friends tab would be more about searching for a friend and the directory of contacts you already have.

“How can I edit my goal?”

“How can I edit my goal?”

This is the screen that tracks their progress. It makes note of every time a user finishes watching the full 5-minute video. This paper screen was missing a button to edit the weekly goal, even though there was a weekly goal being referenced. Honestly not sure how I let that happen, but thank goodness for user feedback getting you where you need to be.

While researching meditation, I learned that experts think it’s most important to just practice meditating daily over anything else. It could feel useless or unproductive, but meditating for 5 minutes every day is more beneficial than meditating for 40 minutes every blue moon. This is the reason why I wanted a meditation session that is so short. Users would also not be able to do a session more than once a day in order to encourage them to return tomorrow and the day after that. Also, one of the main reasons I made it short is because my user persona often feels “behind” on his work and I wanted to give him a sense of achievement.

With my mid-fidelity prototype, I was having a mini crisis. Once the splash page dissolved into the main home screen, almost all of my testers were trying to click the large square with an X in it, which is supposed to be an image placeholder. So I learned that if you’re going to use an image placeholder, you might be better off using the icon with a mountain and little sun. Moving forward with this screen’s design, I knew that I either had to make the image that would go there into a link or I could redesign the screen’s layout and purpose. I did the latter.

“Please stop clicking the X, it’s not a link.” 😭 —me

“Please stop clicking the X, it’s not a link.” 😭 —me

Testers expressed a lot of enthusiasm for the humor and playfulness that the app exhibited. I kept this in mind and hoped to bring out my app’s fun personality even more so when I design the high-fidelity screens.

“Who is this old man with the beard? I’d love to see more of him in your game.”

“Who is this old man with the beard? I’d love to see more of him in your game.”

visual competitive analysis

others.jpg

Most of the popular meditation apps I found in the market usually looked overly serious or sentimental. They all used similar imagery which consisted of rain drops, sunsets, ocean waves… you get the idea. I didn’t want my meditation app to have that same kind of look because it turns many people off. I know a lot of the people I encountered during my research felt like they didn’t relate to that aesthetic. If it does resonate with them, there are countless meditation apps for them already. I can’t compete in such a saturated position. I decided to go with a more unique angle.

Nostalgic Appeal as inspiration

nostalgic.jpg
Tapping into fond memories can be an invaluable tactic, especially for engaging millennials. Alongside hectic work schedules, unrelenting responsibilities, and more, fond memories make us smile.
— Forbes Magazine

I decided that my app’s aesthetic would be more playful and lighthearted than other meditation apps for two main reasons. Reason #1 is my users love playing video games when they’re trying to relax. Reason #2 is to achieve a unique look. Whoever said meditation needed to be so serious? A guided meditation can come in different appearances and still achieve the same purpose. Even monks that meditate every day preach that meditation should be approached in a childlike, innocent way. It’s more than ok to have fun with it! The most important parts to keep in mind are just to consistently practice and to be present.

I created a mood board that had images and colors that inspired me. I wanted my brand’s attributes to be playful, freaky, and young. I had these 3 words floating around in my head when I as selecting the images to put in. I tested the mood board, received feedback that the overall vibe of it matched my brand attributes, and then created a style tile. The style tile is the real beginning of creating a unique look for your app instead of just scrapbooking images off the internet.

Screen Shot 2018-12-03 at 12.01.26 PM.png

On the left you can see the logo I made. I wanted it to resemble an old 8-bit style video game. I really loved the background color, which is like a vibrant neon green. However, it was so strong. I decided to keep this color in my palette, but use it more as a “pop” rather than a background color covering most of the screen. Cartoons and illustrations are passions of mine, so I knew I wanted to implement some of that cartoony flavor.

Screen Shot 2019-01-05 at 5.00.22 PM.png

I created this digital art on Adobe Illustrator to use as a background for my screens. I used a heavy filter, which made it really dark though. It wasn’t extremely visible, but it gave my interface that kind of retro feel that I really wanted to go for.

greenface.png

This guy was also created on Adobe Illustrator by yours truly. I wanted a figure to speak directly to users and guide them around the app instead of having some kind of unknown narrator/speaker. I thought it would be a great place to insert personality and fun design.

Once I started to have a grasp on the look of my app, I created a style guide to help direct me when making the final screens. Elements such as buttons and fonts should be very consistent, and it’s important to still go with the same look in the future if additional screens need to be created. The idea is to keep it looking fun and like a video game. There are many bright colors in the palette, but backgrounds should be dark in order to support the vibrancy of the green, pink, and blue.

power_SG.jpg

Mockups

powerUPscreens.png

Video Demonstration

User testing results were very encouraging for me. Everyone was so excited to use the app and really loved the design. 100% said they would at least try the app out of curiosity. The eye-catching colors, pixelated effect, and humor were all mentioned and praised. Most importantly, they all got through my “happy path” with no issues or mistakes made.

Error Screens

I also created some quick error screens that could display while using Power UP. The one with the lock would show if a user tried to post a status on the main home screen without first completing his Power UP session. The second screen would show if a user tried to complete more than one Power UP session on the same day.

error.png

Conclusion & Next Steps

This project was a blast for me. It was a lot to take on since I’ve just started designing prototypes, but I feel like I got much better at using a lot of the programs that a UX designer should be comfortable with. 😊

If I were to continue with this project (if somebody out there wanted to fund it, wink wink), I would give the old bearded man a pixelated effect, so that the visuals could be more cohesive. Surprisingly, faking that poor resolution/ pixelated effect took me a lot of time but I love the overall effect and I got a ton of positive feedback about it.

We would need to plan the 5 minute video (and maybe have more than 1 different recording in the future), then storyboard it, and then develop it. We could start this whole process by just recording a short video with real people rather than making an animation. This would be MUCH cheaper and we could still then see if doing 5 minutes of meditating and power poses were helpful to people.

And of course, we need to continue to build, measure, learn. I would really like to conduct some more usability tests with 18-26 year olds to see if they could easily navigate through my app or if they made some mistakes along the way. If different users were making the same mistakes, I would certainly be interested in tweaking my screens to help avoid that.

Furthermore, I would love to hear feedback from senior designers. Their advice is the ultimate gift. This was all completed in a matter of 2 weeks and those 10 days flew past me. I’m proud of what I’ve created, but I’m sure the end result could be improved somehow.