Mango Media - Tranquil



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

This design is inspired by research, scenarios, storyboards, LoFi/HiFi wireframing + personas. The purpose of the app is to improve its user’s well-being 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 + main title on homepage. A familiar 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 as human + caring as it is used as an alternative for people who do not have a friend, family member or loved one asking: "How are you?"

Colour Palette

The colour 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

Conceptual User

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

User Goals

  • To use the app in order to reduce stress + feel more relaxed
  • Be able to find + access advice easily
  • Intuitively understand data
  • Controllable + 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 fictitious character created to represent a user type that might use a site.

Angela Davis

Career: Political Activist
Age: 45
Gender: Female
Nationality: American
Employer: Central St Martins

Core Needs

Angela feels she could benefit 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 + other designers.

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

Angela is a postgraduate researcher working full time while researching into her chosen discipline. It is no myth that PhDs are an intensively stressful endeavour due to the 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 + 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 that has been created based on colour theory + the principle that certain colours can have a positive effect on our emotions. 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 reassures Angela she is not alone + 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 + finally feels tranquil.

Related Projects

Start creating an award
winning website today!

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

Get Me Started!