QuestHaven: Bringing Fun into the World of “Adulting” (A UX Design Case Study)

QuestHaven: Fantasy RPG-style app to help with managing and completing everyday tasks. (View Prototype)

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.

PROJECT BRIEF

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)

PROBLEM

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.

In these tumultuous times, everyday life and tasks can feel both pointless or overwhelming as we’ve all transitioned remotely. 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.

2020 has been a rough year for everyone, but teens and young adults are among those hit hardest by mental health concerns.

A recent survey found that 80% of students have experienced some negative impact to their mental health due to the pandemic. 20% say their mental health has significantly worsened. (National Alliance on Mental Illness, source)

RESEARCH

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.

Competitive Analysis/Market Research of various productivity mobile apps.
Habitica Screenshots of various screens.

INITIAL ASSUMPTIONS & CONSIDERATIONS

Assumptions:

  • Most teens and young adults are in school or work.
  • Majority of teens and young adults have mobile devices–specifically smartphones.
  • Our target audience will likely be tech-savvy (digital natives) and use technology on an almost daily basis.
  • Task management apps can overwhelming to learn when there are too many features (as seen with market research)–best to focus on iterating a few user flows/tasks
  • Target group of teens and young adults highly value and miss friendships and a sense of community.

Considerations:

  • Some users might not normally use digital for task management (paper & pen oriented).
  • The COVID pandemic likely affects mental health more during this time (highlighting the idea of a balanced life vs. promoting hustle culture).
  • 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?)
  • 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:

  • Heightened negative emotions overall (overwhelmed, stressed, bored, depressed/low mood, lonely, etc).
  • Social isolation is taking a toll and illustrates increased loneliness–everyone misses intimate interactions with friends in person, and engaging with their communities.
  • Prioritizes work/school responsibilities and tends to neglect self-care/emotional & mental well-being.
  • Prefer customizable and flexible productivity apps.
  • There is a pattern of apathy–lacking motivation overall in putting efforts towards relationships and school work.
  • Variety of lifestyles (planners, procrastinators, etc.) but all are fairly tech-savvy.

SYNTHESIZING DATA

Our Affinity Map on Miro

KEY QUOTES

“What’s the point?”

“I need to schedule reminders for personal things or else I won’t get to them.”
“I can’t be bothered to really do anything.”
“I miss my friends, it’s just not the same, and we’re all sick of Zoom.”

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.

My persona of Jessica Perez

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.

My group member’s persona of Jake Sims (Credit: Anissa Santos)

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.

DESIGN

SKETCHES & WIREFRAMES

Quick sketch of sign-up, login screens
Considering placement of buttons for main screen (home)
Login and create an account, sketching onboarding flow

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.

Sketching out “Chests” = Folder system for tasks, and writing out possible main steps in each part of the app
Sketched overview of main screens (home, add tasks, inbox, today and upcoming)

LOW/MID FIDELITY WIREFRAMES

Low fidelity wireframe of how our users might choose their hero (aka avatar)–based on RPG and fantasy classes/origin

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.

Mid-fidelity of our create a hero flow
Mid/low fidelity of our us drafting our home page with a test image (yes, a frog wizard, haha!) + testing out a look for the tasks page.

PROTOTYPE #1

Design and UI related assets/process–we looked into different color palettes, typeface combinations, and pixel art icons to match our theme
We decided to focus on prototyping the Tasks page (here we have the Stats page and Inventory mocked up if we were to fully flesh out the application)
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 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.

PROTOTYPE #2 (High-Fidelity)

Here is our onboarding flow. Users can decide to SIGN UP or LOG IN, but for the sake of showing–we went with the SIGN UP assuming users are checking out QuestHaven for the first time.

We provide options for users to create an account via email or to connect with other social media.

The user selects their origin–Elf or Human, and potentially more in the future.

User selects their class–each origin (HUMAN, ELF, OGRE, etc) has different looks and titles for their classes.

Here the user customizes the color and look of their character. This can vary from their hair, armor, and more. If users don’t care to customize, they can settle with the default and get back to customization later. Once they’re done–they enter the realm and this takes them to the Home page.

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

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.

Today’s tasks view

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.

Upcoming quests view

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.)

Left: Chests page, Right: Health (sub-list, preset 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 view of Health list
Upcoming 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.

Notification examples (Credit: Anissa Santos)

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

  • 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.
  • Users are open to, and even excited for, new fun ways of planning–but information architecture determines the effectiveness of a productivity app.
  • More ways to access one page does not necessarily make the flow more efficient.
  • Placement and groupings are essential–this helps indicate what the elements’ functions are.
  • 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”
  • Develop unique UI assets to solidify app identity.
  • Solidify user experience with animated transitions and effects.
  • Create desktop version for synchronous usability.

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.

QuestHaven: Fantasy RPG-style app to help with managing and completing everyday tasks. (View Prototype)

--

--

Kyle A.

Kyle A.

Designer, musician, dragon hunter. Sleeps with too many pillows.