MaskFM
Discipline
Role
Interaction Design
UX research, Personas, Wireframing, Design System, Hi-Fidelity Prototyping
Year
Members
2022
Sanjana Danait
Aaditya Shete
Rayna Arora
Visual design
Overview
Mask FM is a revolutionary concept that integrates music with the everyday use of electronic masks. It aims to provide users with a unique music experience while prioritizing safety and connectivity. This UX case study will outline the design process and user experience considerations behind the creation of Mask FM.
The Thing From The Future
As the world adapts to new norms of wearing masks for health and safety reasons, there is a growing need for innovative solutions that enhance user experience while wearing masks. Additionally, with the rise of digital connectivity, there's an opportunity to integrate technology into everyday accessories like masks to provide additional functionalities.
My focus revolved around these key prompts-
Based on these prompts, I came up with the following speculative scenario as the first cut of my concept-
"In the future, we are living through constant waves of pandemics. The role and dependancy on Masks have Grown. To deal with the gloomy times, people turned to music and the Music industry has boomed and has become a source of Upliftment and Exhilaration."
Objective:
The primary objective of Mask FM is to create a seamless and engaging music experience for users while wearing electronic masks.
Identifying User needs
Due to time constraints, for the purpose of the project i assumed my users to be my classmates as we were all in the same boat and felt the pain of having to wear masks. I conducted 5 semi structured interviews with a diverse group of participants to delve deeply into their experiences and perspectives regarding mask-wearing. These interviews allowed for open-ended discussions, enabling participants to articulate their thoughts, feelings, and challenges related to wearing masks in various social contexts. Through probing questions and active listening, we explored themes such as the perceived limitations on socialization, the impact on self-expression and creativity, and coping strategies employed by individuals.
To complement insights gained from interviews and gather broader perspectives, we administered a survey to a larger sample of respondents. The survey was designed to quantify and validate findings from the interviews, providing statistical data on the prevalence of specific challenges related to mask-wearing. Participants were asked to rate the extent to which they felt masks limited their socialization, creativity, and self-expression, as well as to provide additional comments and insights into their experiences.
Findings
Through a combination of semi-structured interviews and surveys, our study revealed that a significant proportion of individuals perceive masks as limiting factors affecting their socialization, self-expression, and creativity. Participants expressed frustrations regarding the challenges of communication, loss of human connection, and constraints on individuality imposed by mask-wearing.
Limitations on Socialization
83% of survey respondents reported feeling that wearing masks somewhat limits their ability to socialize with others
Impact on Self-Expression
56% of survey respondents indicated that masks affect their ability to express themselves."
Concerns around Upkeep
40% of respondents expressed concerns related to mask maintenance and upkeep.
Brain Storming and How Might We?
Upon analyzing the survey data findings on mask upkeep and management, I utilized the insights to brainstorm ideas on how integrating music with an e-mask could potentially address the challenges related to socialization, self-expression, and other aspects.
Crazy 8s
Defining Features
MaskFM is integrated with a new E-mask that has built in Audio and display that can be controlled via the app. The app allows you to chose your music, control mask audio, see what others are listening to and see your compatibility with other's music taste. You can customise the appearance of the mask, from colours to self drawn patterns or display your music. This allows for self expression through your mask and music leading to a feeling of exhileration.
Mask Customization:
Users can customize their electronic masks interface through the app, choosing from a variety of designs and patterns.
Real-time Location Tracking:
The app includes a map feature that shows users nearby, allowing them to connect and listen to music together.
Mask Stats:
Users can check the quality of their mask filters and receive updates when they need to be replaced.
Social Connectivity:
Users can add friends through QR codes on their masks and assess friendship compatibility based on shared music preferences.
Roadtrip Mode:
Users can join virtual "roadtrips" with other users and listen to curated playlists together while exploring different locations.
Community Engagemnt:
virtual concerts or live DJ sessions accessible through the map for users to come together and forge new connections in a virtual space.
Wirefarmes
Low-fidelity wireframes allowed me to visualise the the ideas that stemmed from the brainstorming exercise and was further refined after personas were generated.
What Interested users the most?
I tested out a low fidelity wireframe with users and surprisingly the 'Music Compatability ' recieved the highest rating from users. Users loved the idea of being able to find friends with similar music taste through a scanner.
This helped me prioritize features that needed to be built out for the initial MVP.
Building the Visual Langauge
I first created a moodboard, focusing on evoking the emotion of Exhilaration. This helped me further identify keywords and design directions through which i generated a color palette and a component library. I Developed a visual identity for Mask FM that reflects its modern and innovative nature.
Explorations
I explored several visual directions like neomorphism, used the IOS and material Design libraries to determine a UI that would fit the concept. Through feedback i realised that the previous styles caused visual overload .I finally ended up making use of the glassmorphism style which accuractely conveyed the app's futuristic mood.
Hi Fidelity Screens
Due to time constraints, I first developed Hi-fidelity screens that fit one Use Case. Adding friends though the mask and listening to music togeter. Thus my designs focused on showcasing the 'scan' mask , 'music compatibility', and 'Road trip' feature.
Splash screen animation
Home screen
QR Scanner
Add Friend
Compatability animation
Roadtrip Feature
Friend Profile
Narrative Arcc
Upon completing the hi-fidelity designs, we had to merge all the group members' apps into a single story for a short film that demonstrates how our main character uses their phone throughout the day. To plan out this story, we created a 'Narrative Arc', which is a chart that outlines the film's events, timings and the emotional highs and lows of each persona.
Phone Story
To create this final short film, we integrated all 4 apps and designed the interactions necessary to seamlessly connect them together. We also included sound design to enhance the movie and give the audience more context through audio effects. We have used the concept of Showmanship and Exaggeration in our interactions and audio effects
to emphasise the emotional Journey of the User.
MaskFM begins at 02:10 seconds
This course taught me how to keep users engaged and make them feel as if they are living an experience while using a product. Making the movie taught me the importance of audio and video effects to denote emotions..