MINDR.
Give your mind a break, or give your mind a work out.
PROJECT TIMELINE
4 Weeks
METHOD
Screener Survey
User Interviews
Affinity Mapping
Feature Prioritization
Design Studio
Prototype Design
Usability Testing
Sketch
Invision
DELIVERABLES
Persona Development
Journey Map
Wireframes with Annotations
Usability Testing Report
Functional Prototype
Client Presentation Deck
OVERVIEW
My team and I were asked to develop a responsive website that’s under the topic of health. After going through many topics within the health categories such as fitness, nutrition, addiction and mental health. We have decided to focus on exploring health for the human mind because we believe many people are feeling stressed now days and this is a problem area we can explore and can help a lot of people to solve their issues.
Manage time and return to work in a better frame of mind.
OVERVIEW
My team and I were asked to develop a responsive website that’s under the topic of health. After going through many topics within the health categories such as fitness, nutrition, addiction and mental health. We have decided to focus on exploring health for the human mind because we believe many people are feeling stressed now days and this is a problem area we can explore and can help a lot of people to solve their issues.
GOAL
Manage time and return to work in a better frame of mind.
Quick and easy stress reliever.
Ease their stress in ways that are distracting and mindful.
RESEARCH
SCREENER SURVEY
By using our screener survey, we were able to identify the right people for user interviews. Out of 30 people who answered our survey, we chose 4 people to ask a series of questions that can help us find out how they relieve their stress.
We chose these people because they all have commonalities of dealing with stress
Talking to friends and families in their social circle
Doing physical activities.
Doing social activities.
RESEARCH
USER INTERVIEW
From our screener survey we found our users are in the age range from 22–45. They use social media daily and they feel stress usually. We conducted 4 interviews from the people who participated our survey.
Stressed by a lack of time and control.
4/4 Users
Knew when they needed to de-stress.
4/4 Users
Wanted to relieve their stress in a healthy, non-destructive way.
4/4 Users
went to YouTube and Instagram to de-stress.
4/4 Users
Here are some quotes from the interviews:
“Besides just making you laugh, it serves absolutely no other purpose. But sometimes, that's what I need too. So maybe it has a purpose.”
(User 3, User Interviews)
“I love YouTube! It's my best form of therapy.”
(User 3, User Interviews)
SYNTHESIS
Our next step was to use affinity map to synthesis the data we gathered from our user interviews to identify the main persona and define problem statement.
PERSONA
JOURNEY MAP
PROBLEM STATEMENT
Brief distractions allow people to take a break from their stress.
Although distractions do not solve the cause of their stress, they help users improve their mood and refocus on the issue at hand.
Peggy is a busy student whose stress over her school deadlines affects her both physically and emotionally.
How might we provide Peggy with a quick, easy distraction
so she can reset her mind and get back to work?
DEFINE THE PROBLEM
DESIGN
DESIGN STUDIO
Our team held 4 Design Studios over the course of 2 days. Our first 2 Design Studios yielded several great ideas and a number of possible features for our website. Thinking that we had a narrow enough scope of the website and layout, we started to draft our MoSCoW map in order to prioritize features.
MoSCoW MAP
Sign Up process
Profile page view
Favorites
Saved user personalization of content after subscription
Search
About section
MUST
SHOULD
WON'T
Newsletter - Mindfulness
Upvoting
Playlists
Original on-site content on how to relieve stress
User viewing history
Easy navigation
Timer system (timer and overlay message)
Short aggregated Mood-lifting content (photos, videos, memes in various categories)
Short aggregated Mindful content (exercises, stretching, breathing, quotes/mantras)
Filter (user filtering of content categories)
Categories for filter
Share buttons (social media, texts/emails)
New content daily
COULD
Stress Tracker (checker)
DESIGN
MID-FI WIREFRAME
By the end of our fourth Design Studio, we came away with a solid concept that was ready to become a mid-fi wireframe. We kept our MoSCow Map in mind and were able to let go of some impractical elements and kept our key features prioritized.
Must have features in mid-fi wireframe ( from MoSCow Map)
TIMER SYSTEM
EASY NAVIGATION
After picking a timer, the app will lead the user to this screen for two options. User can pick for a break or pick for a work out for the mind.
MOOD-LIFTING CONTENT
Diverse content to help users de-stress is aggregated from websites that they are familiar with.
USABILITY TESTING
1ST ROUND TESTING ON MID-FI WIREFRAMES
We did our 1st round usability testing on the mid-fi wireframes on 4 users. Here are the positive feedbacks and issues we found.
Positive feedbacks from usability testing:
Able to identify the buttons on the home screen.
4/4 Users
Knew the difference between "give my mind a break" and "give my mind a workout"
4/4 Users
Completed each task under 30 seconds.
4/4 Users
Issues found in usability testing:
USER QUOTE: “When it tells me how much time I have, will it allow me to custom my time?”
Difficulty finding Filter Button.
Cannot customize timer.
Recommendations:
Redesign the Filter Button to make this button more visible.
Allow customization after users sign up.
DESIGN
We took all findings from the 1st round usability testing into consideration and created a responsive website that's easy to navigate.
HI-FI WIREFRAME
SOLUTIONS
Solution for Difficulty finding Filter Button.
Redesign the Filter Button to make this button more visible.
Redesign the timer options and gave an option of "customize my time".
Solution for Cannot customize timer.
FINAL MOBILE WIREFRAME
GIVE YOUR MIND A BREAK
When users choose give your mind a break, they will be provided a list of contents that are related to loosening the mind. Such as cute animal photos and videos and funny videos. The categories of the contents based on our user research.
Animated prototype
GIVE YOUR MIND A WORKOUT
When users choose give your mind a workout, they will be provided a list of contents that are related to exercising the body and mind. Such as yoga, breathing technique, meditations or positive quote of the day.
Animated prototype
USABILITY TESTING
2ND ROUND TESTING RESULT
Quote from the users:
“I really like the idea... I think it’s really great that [MINDR.] has a timer. A lot of times you start off by taking a break and it turns into procrastination and you end up staying in that break forever.”
Felt the website was very easy to navigate.
5/5 Users
Knew what the website is supposed to do, de-stress.
5/5 Users
Liked the feel and the colors of the website.
5/5 Users
Felt that the timer was very useful and effective.
5/5 Users
DESIGN
RESPONSIVE WEBSITE
Homepage hi-fi wireframes in desktop and mobile
NEXT STEP
Customizing Feed: when creating an account, you will have the capabilities customize their preferences and integrate their social media with their MINDR. Account.
Customizing Timer: the user will be not only be able to customize the amount of time when entering the content pages, but also able to customize the amount of time remaining before the next reminder screen returns.
Favorite Videos and Pictures: go to recents and favorites, be able to go pack and look at your histories.
LEARNING
Keep an open mind: We were able to find out what are the users needs and goals instead of trying to come up with an idea by keeping an open mind and trust in our research result.
Spend time on research and synthesizing: Spent time on synthesizing user interview datas together, allow all teammates stay on the same page of understanding users’ pain points and needs.
Learn more from your teammates: It was not easy to navigate through different personalities, but because we all had the same goal of finding the best solution for the users need, we were able to work together as a team harmoniously and learn from each other's strengths and weaknesses.