Mango Media - Design Agency Bristol + Berlin



Tranquil is a mobile app for anxiety and self-help.

This design is inspired by research, scenarios, storyboards, lofi/hifi wireframing + persona's. The purpose of the app is to improve its users wellbeing by addressing problems such as anxiety or stress that may occur during their studies.

Visual Design Conceptual Design






Bristol, United Kingdom


User experience + interface design + branding


Sketch, Invision, Illustrator, InDesign, Photoshop


I have redesigned the interface with the fresh branding to display how the app could look in this new style. By eliminating information I have merged parts of the app into a more user friendly experience which now has an intuitively familiar layout making it easy to navigate. I feel this interface creates a significantly more calming user experience + addresses the targeted demographic better than the UI on the current version of the app.


For the shorthand logo an ice cube is perfect because it represents 'chill - slang for relaxing. I have illustrated a simple line graphic of a cube with a few melting drips just to give it more flavour + make it stand out.

Calm and peaceful and without noise, violence or worries. Other potential names considered: Chill, Candle, Deep...

How are you?

Tagline and main title on homepage. A greeting exchanged when you meet someone that you know. Although this phrase is sometimes used for asking others about their health, it is more commonly used as a friendly greeting. Tranquil needs to come across human and caring as it is used as an alternative for people who do not having a friend, family member or loved one asking: "How are you?"

Colour Palette

The color palette brings together a collection of cool + calming tones. Using white type contrasts with bolder accent colours of purple + turquoise, creating a sense of balance + stability.
For views with more information a onyx gradient provided clear visibility for the text against the background video. An ombre of blues, purple and turquoise was used for views featuring menus in a subtle + understated approach in order to induce a sense of serenity and peace.

See Project

Conceputal User

To put it simply, UX is imperitive to good website design because it tries to fulfill the user’s needs. Its purpose is to create a meaningful user experience that allows users to define customer journeys on your website that are most conducive to business success.

User Goals

• To use the app in order to reduce stress and feel more relaxed • Be able to find and access advice easily • Intuitively understand data • Controllable and flexible

Functional Requirements

• Anonymously store data related to wellbeing • Able to review changes in stress levels • Should display data intuitively • Strong learnability with navigation

Non-functional Requirements

• Perform tasks as fast as possible • This service should be free • A secure database • Responsive for all devices

A persona is a fictious character created to represent a user type that might use a site.

Core Needs

Angela feels she could benefit by from professional counselling, however her financial situation + lack of free time make this nearly impossible. An application in her pocket that she can access 24/7 could be what she needs to help improve her personal wellbeing.

Reasons for use

Angela works full-time in addition to studying for her degree + finds a large part of her free time is taken up with research for her PhD. Demands to produce high-quality research whilst also being committed to a full time job often forces her into a state of high levels of stress + isolation. She has been struggling to motivate herself to work + at times finds herself procrastinating + avoiding coursework.

Current Knowledge

Angela feels that in order to get a foot up on her competition + improve her long term career prospects, it would be beneficial to enhance her research skills through intellectual and practical exchange between herself and other designers.

Angela Davis

Political Activist

Age: 45
Gender: Female
Nationality: American
Employer: Central St Martins

User scenarios help user experience designers understand how users may interact with the product.

Angela is a post graduate researcher working full time while researching into her chosen discipline. It is no myth that PhDs are an intensively stressful endeavor due to sheer amount of work required, + Angela feels that her mental health is gradually deteriorating.

Time Management is one of the crucial stress factors for Angela which combined together with the high demands of her job along with physical + emotional exhaustion have lead to increased feelings of depression. To numb the pain she reaches for the bottle, masking sadness + despondency with booze. However, today she decides to put down the bottle + tries to find help as she is aware her lifestyle choices are negatively affecting her studies. Financial difficulties have left her reluctant to seek support as private therapy can be costly, so she decides to search the internet for free alternatives.

Angela was recommended Tranquil as research at the University of West England has proven it to provide a positive solution for students struggling with anxiety and depression. She is enjoying that she can utilize the app from the comfort of her own home or on the go if needed.

Users of the app are presented with a calming colour palette which has been created based on colour theory + the principle that certain colours can affect emotion positively. The home page has a serene moving image of a snowy mountain scene which Angela loves.

Over a period of a month she logs her feelings in the easy to use charts. Access to the social element of the app assures Angela she is not alone and helps to reduce her feelings of isolation. After using the app for several months she finds that she has been completing more assignments on time and finally feels tranquil.

Related Projects

Let's start creating your award winning website today!

Anything is possible,
Let's make your dreams a reality.

Get in touch!