TAMASHA
"Tamasha" is a social media gaming app that aims to help communities play, engage and generate value through elements like immersive audio, virtual gifting and giveaways. It is the future of social interactions, a virtual space where people create meaningful relationships via live social games.
LIVE APP
SOCIAL MEDIA
GAMING
FREELANCE PROJECT
USER EXPERIENCE
USER INTERFACE
LEAD UI/UX DESIGNER
10 WEEKS - 2021
The Design Process
DISCOVER
There was a time constraint in this project. The goal was not to have extensive discussions or to develop a perfect solution, but to make quick decisions, to get commited and to be able to act strategically.
I started to discover, which were divided into three parts :
Identifying the Problem
Understanding Existing App
Competitor Analysis
Stakeholder & Expert Interviews
Design Brief
IDENTIFYING THE PROBLEM
Be it a 22 yr old young man or a 60 yr old woman, social media has become an integral part of everyone's lives. It has changed the way we look at the world and how we communicate and interact with our friends, acquaintances and loved ones. Let's look at social media and real money gaming industry in India.
448millions
Social Media Industry (2021)
539millions
Real Money Gaming Industry (2021)
"The problem with current social media applications is that it is endless scrolling with very less interactions unless initiated by the first hand user of these applications. Also various audio-room based applications becomes monotonous and non interactive after a while. If we look into gaming applications, there is no/very less post game interactions."
UNDERSTANDING THE EXISTING APP
I overviewed the existing app & noted down features that needed attention. Some of the previous screens are :
Pain Points that were seen :
Looks like a Game App
Confusing User Flow Journey
Social media Aspect missing
Hierarchy is missing
Cluttered Home Screen
App Architecture ignored
Nav Bar - Crowded & Unorganized
No importance given to Social Aspect
Empty Hamburger Menu
Features as well as UX can be revamped
COMPETITIVE ANALYSIS
Tamasha aims at bringing in the social media and real money games together, so I looked into various social media and real money gaming apps. I analysed them based on various touch points like company's requirement, app features, user experience, etc.
I defined the insights that came from the competitive analysis into two parts :
STRENGTHS of Other Apps w.r.t. Tamasha
Familiarity for the Users
Good User Experience
Large User Base of these apps
Has the trusts of the Users
Keeps Users hooked without incentives
WEAKNESSES of Other Apps w.r.t. Tamasha
Doesn't cater both games & social media
Some are not real money apps
Doesn't have exclusive gifting
Doesn't let Users host games/clubs
Doesn't have layer 2 engagement
DESIGN BRIEF
To design a digital solution in form of app that
-
Reimagines a social media platform in Social media 2.0
-
Is the future of social interactions
-
Is a virtual space where people create meaningful relationships through live social & real money games.
-
Allows communities to play, engage & generate value with elements like immersive audio, virtual gifting/giveaways
-
Empowers creators with an ability to monetise their talent in engaging communities through games.
STAKEHOLDERS & EXPERT INTERVIEWS
Stakeholder and expert interviews can help identify what will make a product a success from the business side, and what's possible. These interviews are valuable research tools used to kick-start the design process. They focus on extracting information from three main areas in UX design:
-
User needs. How will the design help the users?
-
Business goals. How will the design support business objectives?
-
Technical limitations. What technical obstacles needed to be overcome?
These interviews are a great way to get the lay of the land. They helped me understand user behavior, distinguish constraints, and identify pain points.
Stakeholders and Experts
Siddharth Swarnkar
Co-Founder
Saurabh Gupta
Co-Founder
Aditi Ajit
Product Manager
Questions
User Based
-
Who are the users?
-
What are the users' pain points?
-
What factors dictate how they will use the product?
-
What kinds of interfaces will likely work best?
-
What has worked well in the past? What has not?
Project Based
-
What is this project's objective, in your view?
-
Why is this project important?
-
What does success look like for this project?
-
What concerns do you have about this project?
-
What challenges do you see this project possibly running into?
-
Are there any technological limitations?
-
What are a few product concerns?
Insights
01
Uneducated
User base
05
Wants to earn pocket money
02
Located in
Tier 3 places
06
Unsatisfied with messenger
03
Wants excitement
07
Moves to whatsapp later
04
Feels lack of community
08
Unsatisfied with Hosting experience
DEFINE
CREATING USER PERSONA
User personas are archetypical users whose goals and characteristics represent the needs of a larger group of users.
On discussing with the founders of Tamasha app, I was able to define the User types in broad categories.
Once I gathered all this valuable research, I moved on to the next step of defining the data I collected. I tried using various methods and tools to aggregate and validate the research data. Themes, patterns and trends emerge through affinity mapping and persona definition, which lead to a necessary revised needs and requirements.
Creating User Persona
Empathy Mapping
Customer Journey Mapping
A person living in the Tier-3 city, who are uneducated and have basic knowledge of technology.
EMPATHY MAP
Empathy mapped is used to articulate what we know about a particular type of user. It externalizes knowledge about users in order to create a shared understanding of user needs, and aid in decision making. I started mapping out what my user says, thinks, does and feels in order to empathize better.
A customer journey map can be a powerful tool to help you visualise and clarify current or future states of customer experience in all stages of the customership. I started mapping that out for a scenario as a host of games :
DEFINE
After defining stage of creating affinity map, persona and the customer journey map, a lot of themes, patterns and trends emerged. These moved me to the development stage where I listed down needs and requirements of the app, scenario of an ideal situation when these needs were fulfilled, and later on adding structure to it by defining Information architecture, User flow and wireframes.
Wireframes
User Flow
Information Architecture
Scenario
Needs and Requirements
CUSTOMER JOURNEY MAP
NEEDS AND REQUIREMENTS
After diving into research I understood that the product should focuses on values such as
1. Social and Community Forming,
2. Ownership,
3. Engagement,
4. Forming Connections and
5. Rewards (Psychological & Material)
These help me define the needs and requirements in the app :
Easy Hosting Games
Easily Hosting Games and Earning commissions through it is an integral part of this app. A user will be able to create & host games.
Real Money Gifts & Rewards
Real money Gifting, Emojis as well as exclusive Gifs are ways to improve the social connections between the Users
Owning & Promoting Clubs
A User will be able to create and promote a club which will have their group messages as well as audio-rooms in order to interact.
Levels and XP
Increase in Levels and XPs, additional offers level- wise in order to keep the users engaged in the platform.
Games in Audio Rooms
The audio rooms can also have games that a user can play within the clubs for free. Gifting each other will be another way of interaction.
War zones in games
The user can also play war zones like games, one club vs others or by dividing themselves with the club. This way they will have the experience of playing as a team.
SCENARIO
Among all the different need and requirements, I narrowed down the most relevant one to create a scenario which showed the implementation in best way possible. It will help me see if the solution is valid or not.
INFORMATION ARCHITECTURE
After understanding the scenario, I started mapping out the Information architecture. It focuses on organizing, structuring, and labeling content in an effective and sustainable way.
USER FLOW
User flow is the path taken by a prototypical user on a website or app to complete a task. The user flow takes them from their entry point through a set of steps towards a successful outcome and final action, I mapped it out.
DELIVER
After development stage where I listed down needs and requirements of the app, scenario, defined Information architecture, User flow & wireframes I moved on to the delivery stage. The goal of this is to make the final designs & make the respective changes, all thoughtout.
Visual Design
Iterations
Prototype
User Interface
VISUAL DESIGN
WIREFRAMES
Next in the process was wireframing, where I made low fidelity overviews of the app to establish the structure and flow of possible design solutions. These made me understand how the User will interact. These are some of the wireframes.
The next step was to look at the visual element of the app. Visual design aims to improve a design aesthetic appeal and usability with suitable images, typography, space, layout & color. Visual design is about more than just aesthetics. These can be into few categories:
Typography
Ab
Chivo
"Chivo is an Omnibus-Type grotesque Sans Serif typeface. It's ideal for highlights & headlines for its uniqueness."
Title
20 px
Chivo Bold
Chivo Medium
14 px
Chivo Bold
Chivo Medium
Button
14 px
Chivo Bold
Ab
Inter
"Inter is a typeface designed for screens. It features a tall x-height to aid in readability of mixed-case and lower-case text."
Body
16 px
Inter Medium
Inter Regular
14px
Inter Medium
Inter Regular
12px
Inter Medium
Inter Regular
Colour Palette
Color creates ideas, expresses messages, spark interest, & generate certain emotions. The idea behind this palette was to create & energetic vibe that matches with app. The app was made in dark theme, considering time & use such gaming-social media app.
Tamasha Colours
Text & Foreground Colours
#EE088A
#D92B54
#FD6768
#BEBDC9
#908E9F
#FFFFFF
#EE088A
Highlight Colours
Background Colours
#332D49
#140B27
#565375
#6D5ED4
#36E5B8
#FFAB01
#FFE301
#5854EE
#4B75C8
Iconography
Icons are meant to be simple, visual elements that are recognized and understood immediately. I tried to use the standard icons for the app so that it is easily recognizable
The background of the app was dark, so I chose to work on solid icon, white for the unselected state & tamasha gradient for the selected state.
Unselected state
Selected state
Iterations are very important aspect of design process. Through iterations, I understood, explored and validated my assumptions. These happened both in wireframe and user interface levels.
UX Writing
The content style in an app can help establish a product's personality. I worked around the Voice, tone and style of the app emphasizing on the same, it was :
- Clear and Short : The audience of app is not very educated therefore the text should be clear and short
- Reliable : The text is truthful
- Friendly : App should appear user friendly
ITERATIONS
Wireframe Level
1st
Final Iteration
When I designed the 1st wireframe for the home screen, the idea was to have a clean design highlighting the personalized games that were selected while onboarding.
However, after discussions & looking at behavioral patterns of users, we realized the need to show social media + games aspect of the app in 1st fold. I made multiple variations & finally got the final iteration, where the goal was achieved.
User Interface Level
On the left image are some of the screens that I made for various flow within the Tamasha app, and on the right are the comments that we wrote while having multiple brainstorming sessions. The iterative process is a continuous process, it happens even post production by analysing & observing user behaviours, looking at data like no. of clicks, & much more.
USER INTERFACE
Splash screen
Walkthrough Screens
"A graphical walkthrough screen depicting the illustration style that is used throughout the app."
An app's user interface is everything that the user can see and interact with. It was very important for me to come up with a User Interface that makes the user's experience easy and intuitive, requiring minimum effort on the user's part.
Some screens
Onboarding screens
"A fast onboarding process using Mobile Number & OTP, which further takes the user to game selection screen ensuring they come to a personalized home screen."
Home Screen
Promotional Banner
"These banners highlighting the offers and games on auto scroll."
Featured Events
"The featured events focuses on famous creators and games with big prize pools and rewards."
Popular Games
"Personalized and curated games to be shown here."
My Contests
"Only appears if the user has pre registered for any contests."
Tokens and Free Contests
"These are the free or token based contests."
Horizontal Scroll
"They highlight the community building (Club) section of the app."
Dropdowns
"These dropdowns shows all the games of the app based on the category they fall in."
Hamburger Menu
"An easy to access hamburger menu which gives the user an overview of their profile and their stage of completion."
Discover
"A graphical walkthrough screen depicting the illustration style that is used throughout the app."
Create a Club
"An easy creator module that lets a user create club in a few steps."
Create Contests
"A simple easy to create contest module, which decreases the user load."
Go live
"A user can simply go live, invite people, host audio rooms and games.
Gifting
"Mini profile with voice intro, details and gifting."
Club Page
"All the live audio rooms at one place."
Game Lobby
Leaderboard
Refer and Earn
KEY LEARNINGS
This project taught me various things like :
-
Working in a tight deadline
-
Empathizing with the User
-
Taking business goals into considerations while designing
-
Communicating the needs and requirements with various stakeholders
-
Being aware of the limitations, in terms of technicality as well as manpower.
-
Fast paced wireframing, visual design and protyping
