Mindful App - UX/UI Design Case study

John Rodrigues
Jan 17 · 7 min read

Introduction

Project description

The mindful app is designed to provide students with mindful micro meditation tasks and help students make friends on campus.

We started with a How might we statement: How might we make students on the Jefferson campus do mindful exercises.

Learning objects: Through this project we wanted to test the build measure and learn methodology, test and measure our assumptions through pretotyping methods from “The right it” book written by Alberto Savoia, Googles first engineering director

My role

The project started as a group project and turned into a individual project at the later stage of the process. Brainstorming was done in a group of 4. I worked on prototyping, interaction design, defining the strategy, evaluating our assumption and measuring the user engagement under the guidance of Professor Mike Begley. The duration of the project was 2.5 months.

To sum up

My role: UX strategiest, interaction designer, user researcher ( It’s just hard to define a role, since the role changed based on the problem we are solving, however I can categories into those above-mentioned categories )

Toolbox

User experience design strategy tools: 1. Build measure learn 2. The right it model 3. the hooked model
Prototyping and interaction design tool: 1. Pen and paper 2. Sketch 2. Flinto

Research

How might we ?

How might we make students at Jefferson university do mindful exercises?

Who?: Jefferson university students | why? : Help them live a mindful life

Brainstorming

Have you played cards against humanity? if yes, we did something like to come up with ideas, we tried this new approach of brainstorming where we had asked ourself how might we? and then picked the cards to come up with new ideas- the cards included various research insights which helped us to design the product based on the user research insights — these cards were designed by our professor ( Highly experimental, but it worked)

The design criteria for my product was

1. Quick and easy as Tinder

2. Convenient as a ATM

3. Connecting as a match.com

4. Invested as Lego

In order to build an engaging user experience, we utilised the hooked model, to define, what triggers the users to use the product. what will be the action, what will users invest and what will be the reward.

What triggers the users? students experiencing stress due to constant school work — trigger: gets a notification

Action: Looks at the watch and clicks on the micro meditation task.

Investment: Based on the user use interface adapt and recommend micro meditation tasks.

Reward: As a reward, students get to meet new friends on campus ( like match.com)

Storyboarding

To deeply understand the problem and show the user’s journey, we did the storyboarding.

Storyboard showing the user pain points, action, trigger, reward and the journey of using the product

Defining the assumptions

To discover and define our assumption, we did a risk evaluation matrix. The riskiest assumption was

Students on campus will do micro mindful exercises when we remind them, students will be excited to meet new friends on campus and will take the effort to meet them.

riskiest assumption matrix

Pretotyping

Testing our assumptions and user engagement

How can we test out ideas without the product being built? That’s where the pretotyping strategy comes into the picture. We created posters and created an event on social media. We asked the users to follow the mindful Instagram page, once they followed us, we sent them quick mindful tasks, once they completed it, we connected them to a new friend.

Pretotyping method: Fake door+ mechanical turk

*YODA= your own data

After the preptotyping experiment, we measured our assumption.

So initially we said: Students on campus (how many )will do micro mindful exercises when we remind them and they will be excited to meet (how many did )new friends on campus and will take the effort to meet them ( how many did?).

XYZ hypothesis

676 students came to know about mindful app in which 25 students showed interest i’e 4%, out of 25 students 14 users completed the task ie 56%, among the 14 students 9 (64%) students completed two tasks and made friends.

Qualitative data

“I felt good, usually people forget to take a break and when people do this it feels soothing”

“Three tasks for one friend is bit too much”

Insights and takeaways

  • Through this experiment, we measured our assumption and see how many people are actually doing the exercises and making new friends
  • Collected our own data ( YODA) to support the hypothesis
  • Collected qualitative data and made changes based on the user’s feedback.

MoSCow- Must have, should have, could have and won’t have

In order to define and priorities the app features, we separated our features in must-have, could have, won’t have and should have.
Some of the must-have features were- onboarding, micro meditation tasks, community, location and time details, control to not share the private data, analytics on the task completed, terms and conditions.

MoSCoW methods for prioritising the app features

Wire-framing and prototyping

I started to sketch out the ideas on paper which helped me understand the things missing the app and understand the app flow better. I used these sketches to communicate my idea with the stakeholders and get feedback

sketches of mindful app

User testing

we created the wireframes to get early qualitative feedback from the users, we conducted user testing and documented the feedback.

pictures from user testing
Pictures from user testing

Visual Design

picture from the mood-boarding session

After we completed the ideation and prototyping phase we headed towards visual design phase to make the app delightful and communicative to the users

Mood-boarding helped us define the product branding. The product would be, futuristic, luxuries, aerodynamic, calm, simple, colorful and quick

UI Kit

UI The mood boards helped us to formulate the product vibes and themes, and I created the UI kit based on the mood boards we created. UI kit includes logo, colors, fonts, buttons, graphs, icons, models

UI kit includes icons, buttons, graphs, models

Wire-framing

we created mid-fidelity UI and represented the app flow.

App flow and UI made in sketch

High fidelity UI

The interfaces were designed in Sketch. The UI includes splash screen, onboarding home page with meditation tasks, community page, and analytics page. The visuals were kept consistent wrt to colors, fonts and overall branding of the app

Mindful app UI made in sketch

Micro- interactions/ motion design.

Keeping in the mind the basic principles of interactions: Trigger — rules — feedback -loops and modes. The micro-interactions were designed in flinto . which make the app delightful and communicative

Mindful app video

Summary.

In this projected, we implemented pretotyping methods to build measure, learn and quantify our assumption. I learn’t to work in a team and also as a individual.The design critique sessions helped us learn how to provide constructive criticism and also positively receive feedback. When we were stuck we used first principle thinking to define our next steps , through this project I got better understanding of UX strategy, user testing, micro-interactions, visual design and more.

Thank you for reading

John Rodrigues .

MS in user experience and interaction design from Thomas Jefferson University

Portfolio | Youtube Channel | Instagram | Linkedin

John Rodrigues

Written by

MS in user experience and interaction design student at Thomas Jefferson university | Founder of D&D SmartLabs| Product designer at Blackstone Jefferson

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade