MonstroLife😈
__________________________________________________________________________________________________________
01 Project Brief
__________________________________________________________________________________________________________
Scope: Branding, Illustration, UI, UX, Micro Animation
Duration: 3 months
Tools: Illustrator, Photoshop, Procreate, Figma, Principle
Date: 2020
Awards: Best Interactive Design Award (2020) and Best User Experience Design Award (2020) from Vancouver Film School
_____________________________________________________________________________________________________________
Gamified Adulting Mobile Application
A gamified mobile application that teaches how to adult, how to live on their own in the real world, with friendly life monsters who will be with you along the journey.
⚠️
"How can we help young people to be prepare for being an adult, living on their own and dealing with all of the 'adult' stuffs ?"
The Problem Setting:
After graduated from high school or college, young people started to moving out from their parents to start their own life. They will have to encounter a lot of first time responsibilities that they never deal with before.
After graduated from high school or college, young people started to moving out from their parents to start their own life. They will have to encounter a lot of first time responsibilities that they never deal with before.
People can feel lost and don't know how to get themself together on their own.
You don't know what you don't know. You don't know what you need to know.
"There is no guideline of how to become an adult in real world"
"Most of their life are depends on Google search results"
Solution:
A Gamified Mobile Application that teaches and provides all informations that young people should have known before becoming an adult with the following features:
What's in the app ?
01. Lesson
Game-system lesson with concluded knowledges from trustworthy sources. There are 5 categories of the lessons, Finance, Health, Basic Living, Work Place, Communication, which user can choose based on what they would like to learn.
In each lesson, it will be divided in 3 parts which are:
1. Story: a scenario of player and the monster
2. Session: where all the information will be provided
3. Question: True-False questions.
Player will receive experience points and rewards after each lesson and perhaps an achievements.
02. Profile
Players can create their own avatar. They can customize to be anything they want.
Player can use their experience points to buy new special costumes, like Halloween for example.
Player's informations such as progress, achievements, Friends list can be found here.
03. Daily Life Hack
Provides randomize useful life hack for player everyday. Players can also share and save for reading later.
04. Community
The app provides a safe space for players where they can share their own experience or discuss on any topic about life.
05. Monthly Challenge
Special challenge every mont. Top three users who got the highest experience points during the month will get limited items that they can use for customize their own avatar.
Let's talk Process !
01. Research
To identify the real problem, I started by broadly looking at different aspects, including the competitive analysis to see if there is any existing app on adulting, online discussion forums research, and statistics. I also conducted interviews and surveys to pin point the pain and what they think is the main problem for target group of becoming an adult. Upon non-formal research, i found:
1. Finance, workplace, Health, Living Alone, Relationship are top 5 topics that young people are the most concerned.
2. It is true that online sources is easily access. How ever, a lot of people just give up on learning because contents are overloading, boring, and full of technical terms. For example; Taxes, Mortgage; First labour act. It was overwhelmed and hard to understand for them. Also, they are not sure how trustworthy the information it is.
3. 80% from survey and interviews stated that they have minimum knowledge of what to expect and what should they know. For instance; a lot of people doesn't know how to cook or do laundry when they first move out.
After that, I continued with design research documentations so I can understand target group better and have a clear picture on what are their focus and behavior be like.
User Profile
Affinity Diagram
Primary Target Group
Secondary Target Group
Customer Journey Map
Experience Map
Mental Model
Competitive Analysis 1
Competitive Analysis 2
Competitive Analysis 3
02
Planning
After gather all of the researches, I have enough information to start the design process.
First thing that I did was created Work Breakdown Structure so I know what was already done and what I need to do. Work Breakdown Structure keep track on the process.
Work Breakdown Structure
03
Branding
In design process, I started by creating brand identity guidelines. I made brand pyramid because it helps me articulated my brand identity. Then i continued with logo, name, and character designs. At the end, I made mockup to see how it will look like on real products.
Brand Pyramid: The big idea "Become friend with your own monster" is come from the fact that we all have monster to deal with in life. I want to convey the message that becoming an adult is not scary and bad as you think. You just need sometime and understanding, like becoming friend with someone.
Color Palette: I chose vibrant and colorful colors because I want to express the brand identity as friendly, fun, and cheerful.
Logo Sketches: experiment of ideas crown (achievement), initial letter, monster
Final Logo with different styles. The name MonstroLife came from the idea of "Monster of Life" since people seeing adulting task as a monster in daily life.
Character Designs: I designed 5 monsters to represent each life problem categories that i found from research process. I go for a friendly and cute design because I want the design to be appealing to user, not scaring them away.
04
App Design
After I have brand identity, I continued with information architecture for production solution. I made sitemap so I can have a clear picture of the application. I also created user flow so i can understand how the user go through my app from one point to another.
Site Map
Example of User Flow and Wireframes
Micro-interaction Planning: designed how the animation in the app going to look like.
After a lot of sketches, drawings with feedback from my mentor,
I moved to work in Figma and start creating wireframes and pages with design.
I moved to work in Figma and start creating wireframes and pages with design.
Prototyping and Design in Figma
Since Figma is a great tool for creating a prototype, I also did user testing during design process to see how users are interacting with the app. This process helped shaping my app to meet the need of users.I also got a lot of useful comments and feedbacks from target group.
In person user testing
Online user testing
After I refined my app from user testing feedback, I moved to work in Principle to bring my imagination to life by creating animation.
Animating in Principle program
⚡️Final Assets✨
Mockup: Notification bar and Home screen icon
Mockup: Appstore
Mockup: Instagram
Mockup: Desktop Version
Case Study: MonstroLife
Take away from the project:
This project is one of my favorite project I have created. I had so much fun creating all the little monsters and learning new stuff ! It was my first time conducting user interview and doing user test on my own. I also have to learn how to use Principle Software from scratch at the end of the project.
There are a lot many challenges I have encountered in the making of MonstroLife.
- Time constrains: I only have 3 months to create a project and since there is only me working on the project, I have to cut down a lot of features or what I plan to do, such as more user testing and research, so I can finish the project in time. If I have more time, I would like to connect with people who might be helpful for this project such as a financial advisor or even people who have done similar project related to Adulting before.
- If I can redo the project again: I would do more in depth in user research. This project was created during the COVID outbreak so it was difficult to do in person interview, which I believed that I will get more insight from. I can only do a couple online interviews which it was helpful but I think it can be better.
- Doing A/B testing for the monsters and interface designs: one of the feedback I got during the final presentation is that design of the monsters might not be appealing for the western industry, which make me realize that I didn't do a test for the visuals. I was too focused on the usability testings. If I have more time, I might do A/B user testing on visual references to see which one users preferred more.
- Changing the questions in survey (or making another one after narrow down the focus of the product): Looking back to the project now, I feel that the questions I asked in the survey was too generic. Some of the questions wasn't necessary and it didn't help creating the project. Also, doing the survey might not be the most effective way to get in depth
- Organize, Organize, Organize !!
Along the process I also realize how messy I am with the design process. I learned it the hard way from not having a file naming system or organized layer while working. Since it was a solo project, it was ok but I can imagine how hard would it be if I decided to continue and work with other people. Moving forward, I am planning to spend more time to work on organizing design systems and naming conventions.
Overall, I was really happy with the outcome and learning curve I have gained 😄 I got a really good feedback and I am planning to continue working on this project in the future, perhaps trying to develop it as a proof of concept and trying to pitch as a start up project later on.
