Overview
As we go about our daily lives, work tends to pile up and fill our plate. Often, it can feel as if we have an endlessly growing list of things to-dos every day. For teens and young adults acquiring more life responsibilities, QuestHaven seeks to make the process of “adulting” more fun.
Problem/Challenge
Managing and completing everyday tasks while balancing life responsibilities can be overwhelming or monotonous. 
The Challenge: Design a tool or experience that helps teens and young adults complete everyday tasks in a fun, productive, and balanced way–all while engaging with friends & being part of a community.
Project Scope
Role: UX Designer, along with my partner (Anissa Santos)
Project Type: Mobile Application
Deliverables: User research documents (interview questions), User Flows, Persona, Sketches, Wireframes, Prototypes
Tools: Miro, Pen & Paper, Figma, Zoom (interviews, user testing)
Background
The requirements of social distancing due to the COVID pandemic disrupts one’s work-life balance, intimate relationships, and overall emotional and mental well-being.
Not having as many activities to look forward to due to pandemic restrictions can leave teens and young adults feeling unmotivated to accomplish daily tasks, or struggling to balance work and personal wellness.
UX Solution
Help users accomplish their tasks while integrating enjoyment and balance into their lives by:

- Designing an app that is intuitive, functional, and unique.
- Providing an incentive and source of escapism from the monotony of quarantine.
- Providing efficiency and empowerment through a flexible task organization and time management system.
- Offer a social environment and way to engage with friends & community through shared activities.
.  .  .
The Process
Market Research
I researched various productivity applications that are both most well-known & praised, as well as what our target group might have had experience with–such as: Google Tasks, Google Keep, ToDoist, Microsoft Outlook, Microsoft To-Do, the iPhone Reminders and Notes apps. Additionally, I looked into lesser-known apps that made their own twist into task management apps such as MinimaList, Any.Do.
More importantly, we realized Habitica (formerly HabitRPG) is a very similar competitor to our QuestHaven concept. This was something to think about and consider how we can differentiate QuestHaven from Habitica.
In our process, my team and I downloaded all these applications, used them ourselves and explored the user flow for potential steps an individual might take when using the app. We also took screenshots and compared the flows of each one to identify which ones had a more intuitive user flow, and which were off-putting and complicated.
Initial Assumptions & Considerations
Assumptions: 
1. Most young adults are in school or work.
2. Most have mobile devices–specifically smartphones.
3. Target audience will likely be tech-savvy & use tech daily.
4. Task management apps can overwhelming to learn when there are too many features (as seen with market research)
5. Teens and young adults highly value and miss friendships and a sense of community.
Considerations:
1. Some users might not use digital for task management (paper & pen oriented).
2. The COVID pandemic likely affects mental health more.
3. People normally like having options, flexibility and freedom (how do we create a task management system that is not too restricting but still offers structure?)
4. Personality differences and user lifestyles will impact how our users use the application (organized planners/go-getters, procrastinators, etc.)–consider user motivations.
.  .  .
User Interviews
We crafted a list of interview questions to learn more about the lives and experiences of teens and young adults. We approached writing these questions in an open-ended manner to gain the most insight on each individual’s frustrations, goals, and desires. It was helpful to foster a natural conversation–as we found once our interviewees shared stories or walked us through their day, it was then when we discovered and gleaned rich insights.
Major Takeaways:
1. Heightened negative emotions overall (overwhelmed, stressed, bored, depressed/low mood, lonely, etc).
2. Social isolation is taking a toll and increases loneliness–everyone misses intimate interactions.
3. Prioritizes work/school responsibilities and tends to neglect well-being.
4. Prefers customizable and flexible productivity apps.
5. Pattern of apathy–lacking motivation in putting efforts towards relationships and school work.
6. Variety of lifestyles (planners, procrastinators, etc.) but all are fairly tech-savvy.
User Personas
As we did our user interviews, we decided to create two personas in order to consider different personalities in our target users. We looked to identify what obstacles they might face, and how we can solve their problem by offering an opportunity/understanding their goal.
User Problem Statement
Jessica, a college senior, feels burnt-out from work and lack of social interaction. How might we help her establish work-life balance in a fun and innovative way?
User Scenario: Jessica just finished classes and wants to organize her schedule next week and interact with friends before she begins her work.
Jessica’s main priority is to be organized in completing all her tasks. Her desire and goal is to balance her life in a way where she can still have leisure activities and time with friends.
Jake, a high school senior, is failing to complete his daily tasks. How might we encourage him to organize his tasks and motivate him to complete his work and chores?
User Scenario: Jake is overwhelmed by all of his homework and chores and is at a loss on how to manage his health.
Jake’s main priority is to overcome the monotony/overwhelm in his life and succeed in completing his work. His main desire and motive is to have fun and become part of a community.
User Persona (Credit to Anissa Santos, my group partner)
User Persona (Credit to Anissa Santos, my group partner)
.  .  .
The Design
Wireframes & Sketches
We considered if users would like to sign up or login with other social media accounts–but also offered an alternative to create their own account via email if they did not want it linked with other accounts.
Low/Mid Fidelity Wireframes
We might include other options for the “hero avatar” in the future–such as elves, wolves, beasts, ogre, etc. Classes are similar to role-playing games (RPG), and determine unique strengths of a “hero avatar” (like speed, strength, defense) if we were to integrate this feature in users being able to train and battle each other.
.  .  .
Prototyping
Hover and click over each image to see captions.
We learned that the circular structure of the button placement was confusing to users (when we tested)
We learned that the circular structure of the button placement was confusing to users (when we tested)
We created an “Add Quest” on the home page as well as here in the Inbox/Today page–you can see here we only have TODAY and INBOX but no “UPCOMING” or calendar view–we found out how to add this in later in our prototype 2.
We created an “Add Quest” on the home page as well as here in the Inbox/Today page–you can see here we only have TODAY and INBOX but no “UPCOMING” or calendar view–we found out how to add this in later in our prototype 2.
We struggled here with informational architecture trying to figure out how to add more features without it cluttering up the screen and keeping it intuitive. We also realized that INBOX should likely be first before the TODAY. If people were to do quick capture of tasks–it would naturally go in the INBOX.
We struggled here with informational architecture trying to figure out how to add more features without it cluttering up the screen and keeping it intuitive. We also realized that INBOX should likely be first before the TODAY. If people were to do quick capture of tasks–it would naturally go in the INBOX.
Our “Chests” or folder system here that helps users categorize their tasks into separate lists. They can add their own, or choose to disregard the categories completely and stick to the inbox and today function.
Our “Chests” or folder system here that helps users categorize their tasks into separate lists. They can add their own, or choose to disregard the categories completely and stick to the inbox and today function.
Prototype #2
From Left to Right: Home page, “ADD QUEST” pop up from Red Button on Home, and “CHESTS” or folders feature (can be accessed from Home or Tasks lists
The Home screen gives the user an overview of their character and the different categories of their lives as preset. This is the aspect of QuestHaven that encourages users to live in a balanced way–prioritizing all aspects of health, work and having time for leisure.
Stats are on top as well as HELP and SETTINGS. This area displays their level, money/rewards, health bar, and experience points.
ALLIANCES are where we would integrate community related activities/features. Friends would be able to battle or join in challenges together (workouts, speed cleaning, baking together, homework, passion projects, etc). This is a way to fuel friendly competitive and boost users’ motivation to accomplish their tasks.
The ADD QUEST button introduces a pop-up. This is where users can add a task. They can set date & time, add a reminder, even set a timer (to incorporate time management/tracking), and add it to a “Chest” aka (a specific list, for example, a task can be specific to Leisure like, “Watch a movie tonight”).
Inbox view, users can add whatever they want here–this is where everything goes by default if not specified or sorted
Inbox view, users can add whatever they want here–this is where everything goes by default if not specified or sorted
User would swipe from the home screen to intuitively get to the main Quests screen. This houses all their tasks.

INBOX serves as a way for users to quickly put something down without thinking about it. This allows for flexibility if some users don’t like to sort their tasks. The little hourglass icon indicates a user’s task has a due date or timer.
The TODAY section filters tasks to just the current day. This helps the user focus and prioritize what needs to be done–potentially reducing the feeling of being overwhelmed. 

Throughout the tabs, the “ADD QUEST” button remains so users can add a task conveniently. It holds the same features as it did in the “ADD QUEST” pop up from the Home screen.
Here we get the more future-oriented view. The user can view their tasks by the week, then expand to see the whole month. The drop down allows the user to go back or forward to other months.

We have a calendar view, and a list view option at the top right area. The list view will likely be more time-based to cater to the more planner-look view. (For classes, events, appointments, etc.)
Chest page
Chest page
Health list (Chest): A sub list, or pre-set category for users
Health list (Chest): A sub list, or pre-set category for users
As you can see on the top right corner, you get a grid looking icon vs. a list one–this toggles between the list view of the Quest pages vs. the Chest page. It’s essentially going from list to folders, or vice versa.
Here, we see the Health list–these categories are essentially filters for specifically related tasks (such as, “Remember to take meds,” etc). Health can also include “Workout,” “Take vitamins,” “Get at least 8 hours of sleep” and more.
Today's view of Health List
Today's view of Health List
Future or Calendar view of Health list
Future or Calendar view of Health list
We kept a very consistent layout with all the list views. All lists function the same as the All “Quests” page. The only thing that we changed is the color–this can be customizable by the user. We felt that changing the color of each category better distinguished them from each other, and let users know they were in a different list more clearly.
Here are some custom notifications of how QuestHaven might notify users. We decided it would be fun to incorporate fantasy and RPG style language to keep with our theme and really immerse users into the experience.
Overall Findings & Conclusion
1. We cannot assume that people will automatically know what different icons symbolize–it is important to clearly label and define icons in a themed app.
2. Users are open to, and even excited for, new fun ways of planning–but information architecture determines the effectiveness of a productivity app.
3. More ways to access one page does not necessarily make the flow more efficient.
4. Placement and groupings are essential–this helps indicate what the elements’ functions are.
5. Refinement of core functions is just as important–arguably even more so–than adding on new features.
Next Steps
Further learning by creating more user scenarios and flows.
Conduct more usability testing & user tests with prototype.
Refine Information Architecture after conducting more usability tests.
Consider features and accessibility settings to cater to diverse user needs.
Ideate and integrate more features that give users an incentive or drive to accomplish tasks (Community challenges, inventory, weapon upgrades, badges and leveling up, items, stories, etc)
Design a first-time tutorial, or helper for app introduction; “Pop-up Tutorial”
Future Ideas
Once QuestHaven is accepted by more users, we can find ways to integrate a desktop version both in browser view or a possible downloadable application for offline use with the cloud. We will of course have to create our own assets and art–(we give credit to the talented artists’ who made these works, SOURCE).
We can also look into expanding features relating to community building, and ways to involve users’ friends–whether that is battling, training with one another, collaborating on tasks/projects together.
While we were inspired most by the challenges COVID-19 has presented to teens and young adults, we feel that this can be a useful tool beyond the pandemic. Combining elements of gaming with everyday tasks that we deem tedious, while fostering a supportive community can be just what we need to bring more fun and excitement in our sometimes monotonous and overwhelming world.

EXPLORE MORE PROJECTS

Back to Top