uxdesign.cc – User Experience Design — Medium | Vivian Ngai

In this case study I share and present the whole process I went through to create a rapid low-fidelity prototype, and show what I was able to achieve in a few short (or, long) days in my first week of UX school!

The project

The objective of the project was to design a rapid prototype for a mobile app for one of our classmates’ needs.

Research I: Exploratory

Interview — Let’s talk

I started the project conducting an open-ended, semi-structured interview — that is, I had a script for broad questions on lifestyle, interests, hobbies, goals, and frustrations to better understand her and what might help her make an aspect of her life better. As the interview went on, I picked up on some things she brought up a few times and probed further into them.

Affinity Diagram — Data organization

From the interview, I colour-coded and created an affinity diagram to look for trends and relationships between themes she mentioned most.

A few key values and themes that stood out:

• Health, Well-Being, and Personal Growth/Development — she mentioned the importance of mental and physical health is to her, including a desire to learn new skills and develop better habits
• Meditation — Relatedly, this was mentioned as something she enjoys to do but doesn’t as often as she’d like. She know this helps her stay calm and less reactive. She occasionally attends a meditation group…
• Social — In addition to attending a meditation group, the importance of her connections and social network was mentioned

Planning

Who’s it for, their problem and goals

Next, I developed a “user persona” which is based on my classmate from my interview with her:

User persona. (*identifying information modified for privacy)

I also then identified the goal and problem to be the basis of my app.

One of the big goals she identified is to meditate more so she can be less reactive to things and improve her mental health and well-being.

She already has a meditation practice, however, it’s not as regular or frequent as she’d like.

She identified the hardest part is starting. Despite trying tried different methods of starting and maintaining a habit, none of them seemed to work because there was no accountability or incentive.

With that in mind…it was clear she needed an app to help her, and others like her — that is busy people who need some accountability, incentive, to establish and maintain a regular meditation practice.

Research Part II: What’s already out there? What’s missing?

Once I had a focused goal and problem identified, I looked at a few of the top meditation apps out there to compare features, and see if there are gaps to fill that can solve my peer’s problem.

Two of the most common features amongst them:

• Solo meditations only
• Pre-recorded meditations only

These features of existing apps didn’t strike me as one that encourage one to start meditating, and to keep doing it. That is, meditating on one’s own to prerecorded meditations don’t provide much accountability or incentive.

Designing the app

Starting with my peer’s problem of feeling no accountability or incentive to start/maintain meditation, her overall valuing of a social connection/support, and gap in the current meditation app market for one that had features that are more conducive to achieving a regular meditation practice, I came up with the idea to have a live group meditation app.

Presenting: Peace Collective app

The Peace Collective app is designed for those that want a regular meditation practice, but haven’t able to. This app presents various scheduled live group meditation programs you sign up for. What’s different about this app from other meditation apps is:

1) users commit to a consistent schedule > consistency creates habit;

2) social and live > meditating with others, and especially in real time creates a sense of belonging, support, and of course, accountability

Storyboard

I quickly created a storyboard of my user’s situation:

Scenario User Flow

Next, I got to designing the user flow of the app:

User flow for a new user; signing and committing to a meditation groupUser flow for an existing user; tuning into live meditation session

The features I included that would encourage commitment and accountability were:

Features:

• Very simple, linear flow to minimize any distractions or complications
• A profile and goals set-up page where user will receive customized programs according to their needs
• Automatically turns notifications on their phone
• Encourages users to add their meditation program to their calendar
• A meditation facilitator that guides the meditation live
• A live counter that shows how many other meditators are in the “room”
• A countdown timer before the meditation starts for urgency/excitement
• Once the meditation starts (timer goes to “zero”) — the screen automatically refreshes to just focus on facilitator
• A process tracker and stats page for encouragement

The user flow and features were integrated into some rough (very rough) rounds of user interface (UI) sketches.

Prototype

Once the user interface sketches were refined a bit more, they were turned into a low-fidelity clickable prototype on POP.

Here’s the clickable lo-fi prototype. (Keep in mind that it’s still a very early version so not a lot is clickable, but demonstrates the user flow and experience. Click on the screen to see where to click to the next screen)

Selected screens in hi-fi

Usability Testing

I conducted usability testing on my peers and friends (including the one that this was designed for). I wanted to test the flow and interface to see if it made sense, was missing anything, had too much stuff, and if it was easy to accomplish the big goals of committing and meditating.

The two main scenarios of this app, and what was tested were:

scenario 1

You’ve just downloaded the Peace Collective app. Find and commit yourself to a meditation program and add it to Google calendar.

scenario 2

You’ve just received a push notification that your scheduled mediation session is starting. Check in with your fellow meditators before the session starts, and go through to complete your session.

Findings

Overall, users found the interface quite clear and simple to accomplish the goals. For the most part it was clear what pages were. I noticed that it took some users a bit longer to understand what the Profile & Set-up page was, however, this may have been them not reading/noticing the screen title at the top (or my bad handwriting in the prototype!).

The user that I designed it for really liked the countdown so she can wrap up what she may be doing (which I hadn’t thought of — I was just thinking it would create some excitement or urgency). She also liked the feature where you can just see the number of other meditators to have a sense of belonging (without sacrificing privacy). She was a put confused when the meditation starts if its streaming her camera or the facilitator (but again, this was a limitation with the prototype not labeled).

Another suggestion was to be able to add more exit points, however, I wanted to keep it focused and linear so users would commit.

Summary

Overall, I’ve learned a lot about how so many various components came together. Starting from a very open direction (design an app), to narrowing in to creating an app prototype that solves a peer’s problem (meditating more). Despite how it’s ideally presented — a liner process — I’ve seen how it’s more like a zig-zag between phases. Research informed planning, but then required more research, and lots of different versions of the user flow and screen sketches came before the prototype…which of course was then tested by peers and revised based on feedback. Based on the tight turnaround time though, and it being my first time going through the UX design process — I’ve learned a lot by doing and was excited to see it all come together!

Rapid Prototyping of a Meditation App was originally published in uxdesign.cc on Medium, where people are continuing the conversation by highlighting and responding to this story.