top of page
Finished floor tea pic.jpg

Adventure Log

Capstone Project
Forest Scene

Summary: Created an app made to help young professionals become more active in their daily lives by offering delight and rewards for completing physical activities during the day.

Roles and Responsibilities

Forest Landscape

Problem

What are we making

A fitness app that tracks activities using a tabletop avatar, experience leveling, and currency for customization as delight incentive to get people up and moving. The hope is to motivate more physical activity.

What does it need to do

  • People will be able to keep track of the time they spent exercising.

  • Offer suggestions and ‘adventures’ to help build healthy habits and more activity.

  • Create delight by having a user customize an avatar that they can level up and offer more customization with a currency granted for logging activities.

Audience

Who are we making this for

Younger adults, professionals over the age of 18 who’s jobs and hobbies have them sitting or stationary for most of the day. People who want to develop more active habits and maintain them.

Research

Research Methods

Competitor Analysis

User Surveys

User Interviews

Journey Map

User Flows

Usability Testing

When deciding on what apps to research, I decided to study one fitness app, one interactive game app, and one that blends both other app types to see how I could best incorporate features from both.

Competitor Analysis
Apple-Fitness-Plus-Feature.jpg
maxresdefault.jpg

Fitness (Apple)

  • Strengths: Offers a lot of potential avenues to manage your health and fitness beyond exercising and fitness. It has a lot of features to keep track of your progress. It counts steps for you automatically.

  • Weakness: It can be overwhelming the amount it offers, you are not sure where to start.

  • Opportunities: Be more friendly to new users, offer tutorials and or guides.

  • Threats: Apple is a trusted brand and the app can be easily transferred to other devices like apple watches.

Pokemon Go

  • Strengths: Fun, engaging, rewarding, themed with nostalgia content that people love to interact with.

  • Weakness: It focuses only on walking, linked to a lot of licensing , can be predatory with the in-game cash shop and micro-transactions. Not exactly focused on fitness but encourages walking.

  • Opportunities: Learn from the fun, offer more fitness opportunities

  • Threats: Very established App and brand, Reward system will be a challenge to compete against.

Citymapper

  • Strengths: It is very silly and very fun. It is very cute, it really motivates me to walk. Well designed, simple, navigation easy to go through. Paywall seems reasonable.

  • Weakness: It offers only walking, I would also like to strength train and I need help with nutrients. Overuse of Papyrus font.

  • Opportunities: Learn from the paywall and allowing a reasonable amount of content before asking for money. Learn from the delight and design.

  • Threats: Leaning on a beloved IP, mostly free.

User Surveys

User surveys were launched into several tabletop communities, young professional discords, and over Facebook as well as a pool of individuals selected for testing. Following are the results of the survey-

  • 33.3% (repeating of course) of our users live in suburban areas where as 37.5% live in rural areas.

  • 56.5% say they are physically active.

  • Of the users who answered the survey; 21% say they are active less than an hour a week, 26% said they are active 1 to 3 hours a week, 30% are active 3 to 5 hours a week, 13% said they are active 5 to 7 hours a week, and 8% are active more than 10 hours a week.

  • Of the users that said they were not active and offered multiple answers, 53.3% said lack of time was a blocker, 46.7% said lack of energy was a blocker, and 46.7% said lack of motivation was also a blocker

  • When asked what would help make users more motivated to be active, 87.5% said a routine would be helpful, 58.3% said being outside would be helpful, and 41.7% said music.

  • 79.2% said they would prefer to be outside when active and 33.3% said they would prefer to be active at home.

  • When asked what devices, if any, people use while they are being active, 68.2% said they used their phone.

  • When asked what do people find helpful when working on fitness; suggestions for activities based on goals was most important, creating custom routines or activity lists was second most important, and third most important was nutrition.

Summary-

The survey revealed that my users were already pretty active, which is nice! But there is still a good portion of users that need help with motivation and help establishing a routine where they are more physcially active. And the biggest take away, other than demographics for a persona, is that most of my users prefer to be active outside and with thier phone more than any other device.

Persona

From the survey, I discovered that 48.8% of users are between the ages of 26 to 35, 66.7% of users identify as Female. 50% are single, and 47.8% have a Bachelor's’ Degree. With that in mind, I created my persona-

Screenshot_31.png

Eliza ‘El’ Moore

Single - 30 - Female - Programmer
Lives outside of Boston, MA

Goals / Needs

  • Take care of her body by being more active

  • Find a way to get up and out of her chair a few times a day; develop healthy habits.

  • To make the process rewarding and entertaining.

  • She needs guided suggestions to get started.

To understand the users thoughts, a Journey Map was created to understand the process of deciding on a new routine that involves being more physically active.

An Empathy Map followed to help hone in on the user's needs- especially their pains and gains.

Process

User Stories
  1. As a new user, I want to sign up for an account so that I can access content offered by the app.
     

  2. As a new user, I want to set up my profile so that I can start saving and curating suggestions for my fitness based off my goals and activities.
     

  3. As a new user, I want to create an avatar so that I can participate in the reward/delight system.
     

  4. As a current user, I want to input my activities so that I can keep track of my progress and level up my avatar.
     

  5. As a current user, I want to create an ‘Adventure/quest’ listing so that I can share it on the app for other adventurers can add it to their own ‘logs’.

User Flows
Flow1 sign up.png
Site Map

In interest of the MVP, a site map was made to understand the relationships between the different pages this product needed.

TV - 1.png
Concept Sketches
concept sketches mirror_edited.jpg
concept sketches mirror_edited.jpg
concept sketches mirror_edited.jpg

Originally, I wanted to create screens for a device that was not a phone or a desktop for this project. I had some fun ideas for a treadmill machine screen or maybe a mirror workout device. A 'magic mirror', if you will.

When my survey came back, most of my users reported that they are physically active outside the most and with only their phones. While a fun idea in practice, designing something for a machine was just not what my users wanted at this time; but it would be something to hold onto for the future.

The first set of sketches for the wireframes was much more narrative. It featured a story where you approached an innkeeper at a fantasy inn and asked for a hero to hire. It would have led you into the character creation in a fun, seamless, interactive way!. However, as I thought about it more, I thought it would detract from the app's featuers and might alienate users who are not as into the Tabletop/RPG aspect of the app. Also I thought it would take too much time to illustrate at this phase of the development, but it is something I could revisit int he future.

Wireframe Sketches
Wireframes
Splash.png
Sign Up.png
Welcome Page.png
Profile.png
Enter Profile.png
Create a Hero.png
Choose a Class for Hero.png
Customize.png
Customize Done!.png
Adventures.png
Adventures Listing.png
Adventures Log.png

With the wireframes plotted and the elements in place, I began then to make the decisions about the design, color pallets, and textures.

Branding

Branding.png

I wanted this app to be different than most of the fitness apps, especially because the theme was so heavily leaning on tabletop fantasy gaming. I found two great images online of taverns or inns in a fantasy setting to get an idea of what sort of pallet to use as well as inspire some textures and moods. I went with a few different kinds of wood textures as well as parchment paper or vellum patterns.

​

The fonts Quando and Port Lligat Sans were chosen because they had good handwritten, adventure-esc, scroll-looking letters without becoming to unreadable. Old English would have been a nice touch, but I decided on readability instead.

Branding.png

The logo came from the idea of a Quill taking down a note, or writing in a log. It is also a play on following a trail or a line graph going up and showing progress! It is simple, but I think it matches the aesthetic of what the app is having fun with. This is tabletop! This is adventure! This is fun!

Usability Testing

I tested my prototype with six individuals; some were recruited from a tabletop discord, and others were recruited from volunteering at the end of my survey. I had each of the testers run through my five user flows. The following changes were made with their feedback:

Version 1
Customize Filled In.png
Customize Filled In.png

One of the testers brought up the organization of the Customization menu and how the order of the options did not make any sense. The large gap between the options was left over from the figure made for the wireframe and the mockup, so I changed the order of the options and closed the previously mentioned gap. In addition, I fixed some spelling errors as well as some of the language for buttons.

Version 2
Adventures + New.png
Adventures + New.png

Three testers struggled to realize there were two different menu items on this page, so I added a 'manila folder' esc visual to separate Adventures from Activity Log. I also changed the order of the Adventures on the list to show the most recently made Adventure at the top of the list instead at the bottom above the 'add adventure' option.

Version 3
Create a Hero.png
Create a Hero2.png

There was a struggle between each tester on how to tell when an option was picked during the Create your Hero flow. I added a few glowing indicators as to which option was chosen at that time. In addition, I revised some more language and corrected more spelling errors.

Final Prototype

Splash.png
Sign Up.png
Adventures + New.png
Activity Log.png
Profile Filled in.png
Customize Filled In.png
Welcome Page Filled out.png

Like every great adventure, we have reached our goal and put all this thought, time, and energy into the final prototype. Feel free to explore:

Prototype

Conclusion

This project was a challenging exercise with a sprint design using everything I have learned at Chegg’s Thinkful UX UI Design Bootcamp. It was a marathon of researching, developing, prototyping and multiple tests with as many users as possible. I really enjoyed this project and I made something I am pretty proud of; I think it fills the niche, solves its problem, and showcases what I can do as a UX UI Designer.

Successes

  • Utilized Research to create a project catered to user’s needs and expectations.

  • Branding and theme really captured the tabletop inn aesthetic.

  • Users seemed really excited to create an avatar to adventure with; enjoyed the concept. Utilize interests and hobbies to motivate physical activity.

Lessons Learned

  • Letting go of a fun idea.

  • Maintaining scope, no matter how excited you get!

  • Spent a lot of time looking up Figma tutorials and putting what I learned into practice.

Next Steps

  • Create an exp bar and currency counter to the header of the app so a user can track that information at all times.

  • Find better solution for profile page’s Edit button.

  • Add more stats to profile page; like if one could connect their app to a fitbit or and apple watch, it could record steps and heart rates during activities.

  • On the profile page, add a way to tab between the user’s progress and the avatar’s leveling progress as an itemized list. Said list will tell how much experience and currency the user’s activities would give them.

  • Develop store page and timeline of new content.

  • Add indicator when you are selecting a class for your avatar; an outfit or an animation, etc.

  • Alter the Adventure listings to have a description before a user has to tap into them to see what is involved; what is the goal of the Adventure and what does it target.

  • Add a system to pin and or favor adventures.

  • Consider development down the line for a mirror exercise machine product. Never know!

  • Potentially flip header and footer in order to make this project differ from my first.

work page.jpg
bottom of page