Activity Mobile App
UX/UI Design
Interaction
Branding

INTRODUCTION

Activity mobile app began as an idea at a campus sponsored hackathon. Students aimed to find hiking trails that best suited their needs. As the user experience and interface designer I manufactured the applications layout, appearance, and primary functions.


PROBLEM

Recreational park sites are often outdated, difficult to use, and lack helpful reviews. Weeding through these sites can be time consuming and frustrating. Hikers fail to receive notifications regarding trail availability in real time.


APPROACH

Eliminate the need to visit multiple sites and reduce search time by developing a one stop application that offers more than basic trail info.

Figure 1. Home Screen

PREMISE

Whether you are unfamiliar with the area or just looking for a new adventure, Activity takes you to the nearest hiking trails within a radius of your choosing.


Objectives.
OBJECTIVE 1
Provide user with information that is often difficult to find, and instructions on how to access said information in the real world.
OBJECTIVE 2
Incorporate local opinions and encourage safety by offering trail reviews and difficulty ratings.
OBJECTIVE 3
Increase activity among users and promote a heathy lifestyle.

Persona & User Stories.
Hailey Briarson
College Student, 19

PROFILE

Hailey is a transfer student. She would love to continue her active lifestyle and knows that San Luis Obispo has an abundance of outdoor hiking trails. Hailey doesn't feel safe hiking alone. She is always on the go and trusts her phone for her class schedule. Hailey uses her campus map to find new buildings and the library. She needs a new way to explore unfamiliar areas without feeling unprepared or lost.

Priority: Safety and Reliability

Steven Reynolds
Marketing Rep, 27

PROFILE

Steven just got a promotion and has very little free time. He has a passion for landscape photography and hiking. Steven is interested in exploring the outskirts of his town. He has stopped going to the gym in the mornings, and he is starting to feel the effects of limited exercise. Steven needs a new way to stay active, and he must know the exact amount of time it will take him to complete a workout.

Priority: Time


User Needs.
DATA
Trail availability, distance, difficulty ratings, reviews, photos, and trail navigation all within a radius of their choosing.
TIME & CONVENIENCE
The average time it takes to hike a certain trail, and the amount of time it will take to reach the trail entrance.
SAFETY
Hazard warnings such as mountain lions, rattlesnakes, flooding, etc. (suggestions on what to pack, if anything).

INFO ARCH

Using an information architecture I was able to visualize the app structure. Based on the problems and user needs, this app requires three main functions: trail browsing, trail navigation, and trail specs. Emergency services are an additional priority.

Figure 2. Info Arch Sketch

USER FLOW MAPS

I completed user flow charts to imagine how a user might navigate through the application in order to achieve their goals.

Figure 3. Emergency Services Task Flow
Figure 4. Notifications Task Flow

WIREFRAMES

Wireframes allowed me to conceptualize appearance. I attempted to design an intuitive layout using icons and simple text formatting. My goal was to keep users focused on the world around them rather than the application itself.

Figure 5. Wireframe Sketches

LOGO DEVELOPMENT

For the logo I deconstructed the letter "A" to form new shapes that closely resemble a mountain range. The rising sun helped form the crossbar in the final design. I drew inspiration from the following:

  • Compass
  • Streams and rivers
  • Sunrise and sunset
  • Trails and pathways
Figure 6. Logo Sketches
Figure 7. Final Logo

Early Concepts.
Figure 8. Medium Fidelity Mocks
Figure 9. Layout Concept
Figure 10. Iphone Concept Art
Figure 11. Home Screen Navigation

Final Mocks.
MAPPING
After choosing a trail within their preset radius users will be directed to the entrance. Similar to most navigation tools, traffic updates will help provide an ETA.
LIST VIEW
A list view provides the opportunity to scroll through nearby trails rather than move around the map.
NOTIFICATIONS
Notifications will appear on whatever screen the user is currently viewing, and the notifications tab will host a list of previous warnings.
TRAIL DESCRIPTION
The description tab will host basic info, ratings, and photos. It will also be home to recent reviews posted by other users.
PROFILE
The profile tab will keep a log of previous hikes and accomplishments. The bucket list feature will track "dream hikes" all over the world with additional in depth reviews.
SETTINGS
The settings tab allows users to update their hiking preferences and specify what they are looking for.

Additional Features.

QUICK VIEW

View just the basics and instantly know whether or not a specific trail is meant for you. Customize the quick view tab in the settings menu in order to see relevant information.

Figure 12. Quick View Feature

ACHIEVEMENTS

"Activity Achieve" will motivate users to reach distance goals and explore new trails. Standard badges can be earned at any time by burning a certain number of calories and so on.

Figure 13. Activity Achieve

Why Purple?

COLOR SELECTION

When assembling a color palette for Activity I tried to use colors that are not usually found in nature. My goal was to build an application that helps the user experience the real world without pretending to be a part of it.

Harmony is essential in design; however, for this project I attempted to highlight the importance of contrast.

Figure 14. Micro-interactions

Conclusion.

REFLECTION

This project allowed me to design a tool that I would personally love to use. In the future I hope to work on projects with the same level of intensity and with a similar goal of improving active lifestyles.

Activity was later recognized as a finalist at the hackathon.