Mediday - Meditation App

User-centered Design(Student Work)
Mediday - Meditation App
Role: UI & UX Designer / Project Designer / User Researcher

Course Name: User Centered Design of New Media
Keywords: App Design, Human-centered Design, User-centered Design, User Research, Mental Health


The general requirement of this course of UCD of New Media is basically to apply different UCD methods in a design project. More specifically, we designed an app and did adequate user research to evaluate it. Moreover, with the specific project requirements of following the "UN 2030  Agenda for Sustainable Development”, and in light of the role of student, we had decided to consider possible directions from the aspect closest to ourselves. We accordingly chose the track of improving the quality of life which is specifically associated with the aspect of well-being and good health.

MEDIDAY - Meditate Everyday

Mental stress and health problems are one of the most well known diseases among young people and it evermore increases (Rosenberg, 2019). Taking figures presenting stress among young adults (aged 20-21) it can be discovered that the amount of “psychological distress” rose by 78% between 2008 and 2017 (Rosenberg, 2019). Moreover, Al-Qahtani and Alsubaie (2020),conducted a study with 260 students, showing that 42,7% of the students reported a high level of stress resulting from an “academic domain”, e.g. from the university. Thus, it is reasonable to assume that mental stress and mental imbalance might also be a large issue among future generations.

The human-centered design circle

Research Approach

In the "new norm" of working/studying from home and lack of physical contact with others, it is important to take care of mental health. That is why mindfulness and meditation app was designed for college students. Through the design process, we would like to know:

(1) what are their knowledge and attitudes towards mindfulness and meditation? (2) How do people perceive a mindfulness and meditation app? (3) How to design a useful and engaging app by using user-centered design methods? The design phases were based on the proposed human-centered design cycle by Maguire (2001). In the following sections, it will be applied and explained specifically to the  project.


Phase 1&2 Context of Use and Requirements

Given the current COVID-19 situation, the WHO published a series of messages used in several communication streams to support mental and psychosocial well-being in different target groups. At the same time, considering the researchers own identity as college students, we are correspondingly more familiar with the target group. Before the COVID-19 pandemic, it was estimated that approximately 15% to 20% of students will need to be screened to determine the need for support (Dowdy et al., 2015). Considering the potential emotional impact of the pandemic, this proportion will certainly be higher. Hence, a meditation app was decided on. A preliminary idea was set up and the basic intention is to pay attention to the mental health of college students.

By evaluating mental health smartphone apps, Bakker et. al. (2016) give out 16 recommendations for future health apps, including reporting of thoughts, feelings, or behaviors, mental health information, real-time engagement and gamification. All these recommendations are guidelines to the detailed interface requirements (see table below).

Recommendations for future mental health apps(Bakker et al., 2016)

In order to obtain the demand for this application as completely as possible. It is a way more objective way to collect demands from both the side of human and existing products. While currently considering the time and other constrains. We decided to put forward the own needs based on the student status. Therefore, there were actually no direct users which could be detected in this phase. First, in view of basic user requirements researchers need to know what users needs are. Possible needs might be relax and release pressure through using this app, such as various options of sounds and comfortable layout or color; to learn more about mental health and professional meditation; include more natural elements; including a gamification might make engagement with the app more interesting. Second, another key factor which can be outlined are product requirements. Through a small-scale competitive products analysis, as we did some research on the existing products of meditation on the market, such as Mindfulness, and Headspace. In addition to basic application requirements such as login and personal information, these products all provide different types of relaxing sounds and courses. These two functionalities should be indispensable. Additionally, the design styles of these apps are very simple and clear and might be a good element to also incorporate in ​Mediday.

After observing classmates and summarizing own personal needs the persona for the application has been created: Frank Ortega (see Figure of Persona below).


In analyzing and designing systems and softwares we need better means to talk about how they may transform and/or be constrained by the contexts of user activity: this is the only way we can hope to attain control over the “materials” of design (Carroll, 2000). To elucidate further, scenario design is the intuitive approach.  Through the internal discussion with the researchers, and the conversation with students, and association of persona herein. We mainly defined four processes of the using context, (1) Since the lockdown measure for the pandemic started, all of Frank Ortega’s classes have been moved online. (2) After a study day and sitting for a long time, Frank feels not only physical fatigue but also mental anxiety. He needs to get some emotional satisfaction, pleasure, comfort and relaxation in order to feel mentally balanced again. (3) At that time he remembered that the meditation app might help him. So he clicks on the app and takes a lesson. Followed the video tutorial for a simple meditation. (4) After using several functions the application provides, Frank feels better.

Phase 3 Design

Design Solution

In total, five min requirements have been determined, hence, 1) to offer different sounds, lessons and professional articles about mental health; 2) include a gamification part for checking progress. 3) incorporating a profile page; 4) setting parts and 5) a natural style for the whole app layout.

The Structure of MEDIDAY

Accordingly, we made a rough mind map for this app. As you can see it on the right as the structure of this app. Eventually, through the above steps, after determining real needs of users, corresponding functions for the product on this basis can be designed. The functional requirements were determined and all functions will be divided into four main interfaces, presenting the structure of ​Mediday.

And then, based on the structure of Mediday, I designed the initial wireframe, or we can say low-fidelity(lo-fi) prototype in a way, of this app as you can see, as shown below. The main intention of designing this lo-fi prototype is to preliminarily see if the features we determined can be implemented well in the actual project. In addition, by designing this lo-fi prototype, we can more intuitively feel the general tonality of the entire app from the visual level. It could better help discuss and investigate the subsequent design steps. The initial prototype design is very useful for a project which starts from scratch.

The Lo-fi prototype of MEDIDAY

Design Choices of the first high-fidelity design
  • Color Scheme  
    In a project of application design related to mental health, color plays an essential role as certain colors can create different attitudes, moods and feelings. Literature shows that green indicates harmony, decreases stress and can be seen as a symbol of balance (Logan-Clarke & Appleby, 2009). Additionally, green was proven to help healing, relieves stress and is known as health giving (van Wagner,2009). The color can also be linked to the color-character theory, relating the color to bodily functions. Hence, green releases all kinds of tensions and has an influence on blood pressure of people (O`Connor, 2011). Lastly, green can be associated with happiness, peace, hope and also with natural phenomenons like trees and nature as a large (Naz & Epps, 2004). Literature also shows that a calming color scheme should be used to provide a grounding effect (Shafiq, 2018). For ​Mediday, ​especially a combination of green and blue color schemes have been used (see Figure below). In addition to green, blue was used as one of the main colors in the scheme. Blue was chosen as van Wagner(2009) also provided evidence of blue increasing calmness. At the end, with the inspirations from the nature, we extracted and determined the color scheme of this app.

Color Scheme of MEDIDAY
  • The Idea of App Icon  
    First, the icon entails an indicated infinity symbol accompanied by leafs on each side. The infinite symbol was chosen to represent that while using the application no limits exist and using the app often leads to endless bodily and mentally empowerment. In addition, the open sides should represent body and mind, thus, interacting with each other but also standing on their own. The leafs were chosen because Mediday focuses a lot on natural elements and entails a growing tree which is represented by the leafs. In general, the symbol is also ajar on the sitting Buddha, portraying a meditation seat. Blue and green have been used to comply with the general app colors and appearance.
The idea of icon design
  • The First Version of High Fidelity Design  
    Finally, the first version of hi-fi prototype was designed. As the application provides different functionalities and support options for meditation practices, different landing pages were designed to provide every service on an individual page.
    The design of navigation bar was, again, based on competitor apps but modified to the overall layout of ​Mediday. ​E.g. especially the meditation symbol was created by the researchers. As the application provides different functionalities and support options for meditation practices different landing pages were designed to provide every service on an individual page. In order for the user to be redirected immediately to individual pages which aims for a task bar was included at the bottom of the app.
    Furthermore, when entering the app a home page was created. At the top, a gamification presented as a tree is presented. The more users meditate the higher the tree grows. Below the tree a trending meditation lesson is being presented to users as a suggestion for the day. At the bottom of the home page, most recent educational articles are presented, giving an overview of what the user might read next and to empower them to learn something new. The dreaming bar shows how an interface would look like when the user listens to calming music for instance to, e.g. hold an individual meditation session or while trying to get to sleep. Next a meditation page entails meditation lessons users might attend. The illustration at the top of the page shall create positive feelings and prepare users mentally about what will follow. In the middle of the page, meditations are presented, already showing in the interface the name of the lesson, thus the focus of the meditation. Additionally, the approximately time of the meditation is presented so users can see if they can attend the lessons in the time they planned and a short introduction about what the lesson is about is also outlined.At the bottom of the meditation page, music suggestions are given. Thus, users might choose music to meditate on their own without any guidance. Moreover, the educational page entails information about meditation, psychological mechanisms and mental well-being (Figure 12). Videos as well as articles can be found on the page. Lastly, a personal profile page for users entails a profile name, picture and presents the chosen mood of the day (Figure 13). The last two days are also presented to show some figures of how meditation improved mental well-being. Below the moods statistics are presented entailing the duration of meditation or listening to music. Thus, users can keep track about their efforts.
The Hi-fi prototype of MEDIDAY

Phase 4 Evaluation


During the process of user testing, users should familiarize themselves with the mockup of the mediation app and explore it while thinking out loud. They will be shown the mockup of the app and asked to use different functions of the app and to navigate through the app. Users will thereby be asked how well they can handle the mockup and if there are any difficulties in using it. Finally, users will be asked about the general appearance of the app and what they would change in the app. The testing of the mockup and the answering of the individual questions during the usability testing will take about half an hour and will either be carried out in person, or, if the current situation does not allow otherwise, via Skype.


After testing the application with users some interesting results can be pointed out. In the following, results from the conducted usability tests on the applications structure and navigation, content, use of color and pictures, as well as icons and shapes will be presented.

  • Structure
    Overall, the comments and remarks of the participants during the user test were very positive. It turned out that the overall structure of the application is very straight forward which made it easier for the participants to navigate through the application and understand the structure. The simple design of the application with its four main pages was also described by participants as very user friendly and simple, as not too many pages are presented, so the user did not get lost in the application. However, some participants commented that the homepage seemed a bit disorganized due to a lot of text and that a tutorial at the beginning of the application for a "first-time user" would be beneficial to guide the user through the app in the best possible way and to increase the use of the app even more.
  • Content
    Regarding the content of the application, the education page was highlighted by participants as a particularly good idea and important help for new users. It was said that the content, such as the scientific articles, which are displayed on the educational site is especially helpful for people who have not yet studied meditation much, for example, to find out about the causes of insomnia. However, some participants found it hard to distinguish between the educational page and the meditation page at first glance. It was noted that the educational site could be called something else, or that the difference could be emphasised more on the respective pages. With regard to the applications content, some participants did voice questions regarding the very first page on which the users current mood can be indicated. As some users were unsure what the different smileys meant exactly and what mood they represented, some asked for some kind of ranking of the moods or a description of the smiley with words like "sad", "happy", or"anxious". They also asked if this page could be skipped if users did not feel like entering their mood. In addition, some participants were somewhat confused regarding the function of "my tree". they said that it was not clear what the tree was supposed to do and when exactly it would grow. However, since all users found the idea of tree growing very good and interesting, they wished that it would be explained in more detail in a tutorial or that a short explanation would be included.
  • Design Elements
    First, the colors used in the application were described by the participants as very appropriate, relaxing, appealing and pleasant. It was especially emphasised that the low saturated colors used in the application appeared as very soft and gave a feeling of calmness and mindfulness, which fits very well to the purpose of the meditation app, by relaxing and calming the user. Second, participants expressed that they found the rounded elements like the various windows on the homepage to look very coherent, clear, making them comfortable. Lastly, during the user tests, participants often voiced their liking of the pictures and illustrations used in the application. For example, some said that the illustrations used evoke a feeling of peace, as the natural aspects, such as the tree and the mountains, were perceived as very calming and created an overall consistent picture. According to participants, the illustrations fit very well with the intended purpose of the application, and the reference to plants and natural aspects was also rediscovered in the "tree growing" function, which was seen to be a positively perceived consistency.

Phase 5 Iteration

Given the results of user testing, we discussed internally how to improve this app from a user-centered design perspective. And there were three aspects which has a relatively high priority to optimize. They are the guiding journey, the emotional symbol, and the design of the gamification. By adding the pages of app tutorial in the beginning for new users, we aimed to solve the problems participants mentioned in the session of user research. That is, most of participants did not understand several functions, such as the existence of my tree, the specific differences between different pages, the meaning of emojis, etc. This tutorial info would save more learning and time costs for users. Next we removed some emojis to try to include different emotions with certain  general emojis, and the skip option was added to reduce user resistance of selecting. Moreover, to keep the consistency of design style for this app, the design elements in the page of "my tree" had been adjusted to a large extent. The color saturation was reduced to more match the color scheme of this app. And the sprout was used to represent the start-up growth phase of users' working process.

The tutorial design

The emotional symbols

The change of "my tree"


At the bright side of UCD process, UCD principles and development cycle give us a clear roadmap to the design process. First, It outlines and emphasizes the importance of users as the center in our design process. These principles emphasize the interaction between users and the developed system (the tool or technology). Therefore, as students ourselves, we first brainstormed the tasks and use of context for our app in the requirement phase by using many UCD methods like persona and scenario of use, which crystalized many useful design requirements, such as the education function, engaging games, simplistic UI etc. Then, we incorporated actual users in the evaluation phase and asked them to do usability testing by using the think-aloud method, and interviewed them afterwards. Completing this project was actually a very smooth process when everything is in line with the design circle of UCD design principles. While taking a sight on the downside of UCD, first, in the requirement phase, how representative of personas and profiles is and how they inform our design solutions is hard to articulate or prove. And the logic connection behind requirements and design is still somewhat arbitrary. Second, as Norman (2008) points out “listening to users” may lead to inconsistent and complex designs. It is true, in some sense, that our users proposed many valuable suggestions in the evaluation phase, but some of them are either contradictory to each other or against our initial design intentions. For example, some users wanted to adda social networking function, which we had thought about in the requirement phase, but we ruled it out because we did not want to cause pressure on users. Therefore, sometimes, some users’ ideas are inconsistent to those of others or designers, we need to make a decision between “listen to your users”and “ignore your users”.

Next Project