The Calm – UI UX Design Project

About Project:

The Calm is a microsite created to help people find everything about what is Anger? To How to control it. This microsite aims to be "The Calm"ness to the people. It is a quick source of information with a collection of beautiful tunes to calm your inner voice and valuable guided Tips and Therapies.

Main target audience – 18 to 30 years old

Duration of the project – 4 months

Tools used – Adobe illustrator, Adobe XD

The Problem:

We deal with problems such as Depression, Anxiety, Anger and all are interlinked to one another. As times in advance, our mental health concern keeps getting worse. In today's hectic and fast lifestyle, giving time to our mental well being and our Anger issues seems next to impossible. Every day people deal with problems like Insomnia, Stress, Anxiety, Anger, Zoning out and many countless more similar issues. People who are trying to fix these struggle to form a healthy habit and could not find right source of Information.

The Solution:

The goal is to create a Microsite that helps people to find all the Information in one source. This microsite will focus on one particular subject that is "Anger" and will promote the information about What is Anger? To Types of Therapies and Tips to Calm down the Anger.

Design Process:

The research was done using the design thinking process. Starting with empathise phase to define and ideate phase to brain storm the user problems and its solutions:

Generic placeholder image
Empathize

Empathising involves developing a deep understanding of the users and their needs. It requires empathizing with the users, observing their behaviour, and conducting interviews or surveys to gather insights.

Generic placeholder image
Define

In this stage, you analyse the information gathered during the empathy stage to define the problem statement. This step helps you reframe the problem and identify the challenges. It involves analysing user needs, pain points, and desires to form a clear problem statement that guides the rest of the process.

Generic placeholder image
Ideate

In the ideation stage, you generate a wide range of creative ideas to address the problem statement. Techniques like brainstorming, mind mapping, or storyboarding are used to stimulate creativity and ideation.

Generic placeholder image
Prototype

Prototyping involves creating scaled-down versions of your ideas, which can be anything from sketches and wireframes to physical models or digital prototypes. The goal is to quickly and cheaply visualize and communicate your concepts to get feedback from users.

Generic placeholder image
Test

In this stage, you gather feedback on your prototypes from users and stakeholders. The feedback helps you evaluate the viability and effectiveness of your ideas. By observing how users interact with the prototypes, you can gain insights into what works and what needs improvement. This iterative process allows you to refine your concepts and iterate through multiple rounds of testing until you arrive at a successful solution

Generic placeholder image
Implement

After iterating and refining based on user feedback, you implement the solution. This stage involves transforming the final prototype into a fully functional product or service. It may require collaboration with developers, engineers, or other specialists to bring the solution to life.

User Research:

User research is the process of understanding the behaviours, needs, motivations, and preferences of the target users of a product or service. It involves qualitative and quantitative methods such as interviews, surveys, observations, and usability testing. It helps designers gain insights into user expectations, pain points, and goals, enabling them to create user-centered solutions.

After my initial stage I conducted a survey titled "Short survey for my College project". The survey consisted of total 7 questions.

This survey gathered total 41 responses from age group between 18 to 30 year old. Following are the survey questions and answers:

Generic placeholder image
Que.1



Generic placeholder image
Que.2



Generic placeholder image
Que.3



Generic placeholder image
Que.4



Generic placeholder image
Que.5



Generic placeholder image
Que.6



Generic placeholder image
Que.7



Generic placeholder image
Que.8



User Persona:

A user persona is a fictional or real representation of a target user group. It is created based on user research findings and includes demographic information, goals, motivations, behaviours, and other characteristics. It help designers empathize with users and make design decisions based on their needs

Generic placeholder image
User Persona 1
Generic placeholder image
User Persona 2
Generic placeholder image
User Persona 3

Empathy Mapping:

Empathy mapping is used to develop a deeper understanding of users and their experiences. It involves creating a visual representation of users' thoughts, feelings, behaviours, and pain points. Empathy maps include four quadrants: "Says" (what the user says), "Thinks" (what the user thinks), "Does" (what the user does), and "Feels" (what the user feels)

Generic placeholder image
Empathy Mapping 1
Generic placeholder image
Empathy Mapping 2

Information Architecture:

Information architecture (IA) involves designing the navigation, labeling, and hierarchy of content to ensure easy access and usability. IA helps users find and understand information intuitively. It includes techniques like sitemaps, user flows, and wireframes to map out the structure and relationships between different pages or sections of a digital product.

Use Flow:

Color Typography:

Wireframes:

Final Screens: