Download Project Doc πŸ”— (PDF | 16 MB)

‍

An innovative mobile application crafted to elevate safety and tranquility for outdoor enthusiasts participating in diverse activities.

Acknowledging the scarcity of options in the current market, Trakz endeavors to bridge this gap by presenting a holistic solution customized precisely to address the unique challenges and uncertainties inherent in nature.

Prompt

Create a product to aid city visitors and residents with specific tasks or activities.

Software

Figma, Adobe Illustrator

Timeline

6 weeks

No items found.

‍

‍

‍

‍

Concept Exploration

Before diving into this project, I spruced up the Old Forge Adirondacks website in NY. Then, I thought, why not take it up a notch and create an app that users in Old Forge, whether they're locals or visiting, could benefit from? Here are some of the initial ideas that I explored.

‍

‍

‍

‍

‍

Problem

Current mobile trackers like Apple’s β€˜Find My’ lack full security and comprehensive features, leading to a disconnect during emergencies. They also fail to cater to outdoor trips and areas with poor service.

‍

‍

‍

‍

Project Goal

Enable users to enjoy outdoor adventures with added security, providing peace of mind through real-time tracking and instant emergency assistance.

‍

‍

‍

‍

Main Competitor

Cairn - Outdoor Safety App

Although the concept is lovely, the design presents a few notable shortcomings: the branding lacks clarity, evidenced by an ambiguous logo; text frequently overflows its containers, impeding readability; margins feel cramped and awkward. Overall, the design lacks both visual appeal and functionality, falling short of its potential for sleeker aesthetics and smoother animations.

‍

‍

‍

‍

‍

Concept Inspiration

Here, I looked into two widely recognized existing applications that incorporate many of the same functions I intended to integrate into the Trakz application!

‍

‍

‍

‍

‍

User Personas

After examining three potential user personas and considering their potential interactions with the app, my focus shifted towards exploring opportunities specifically tailored to Christine's needs and preferences.

‍

‍

‍

‍

‍

Sketches

The initial exploration phase delved into envisioning the app's appearance and functionality. I started with quick, free-hand sketches, which were subsequently refined to enhance the overall clarity of the vision.

‍

‍

‍

‍

‍

First Round of High-Fidelity Wireframes

My initial exploration of the application's layout and functionality.

‍

‍

‍

‍

‍

Second Round of High-Fidelity Wireframes

Following feedback from peers, I refined the initial wireframes by streamlining similar layouts and simplifying visual complexity. This process resulted in a more minimalist and cohesive appearance.

‍

‍

‍

‍

‍

Visual Style Iterations

Before deciding on my final visual direction, I played with different approaches. I tried out a dark-mode version, as well as one that had more of a futuristic, gradient approach.

Ultimately, I decided that dark-mode was not the direction I wanted to apply to this app since I wanted to retain a light-hearted energy throughout the experience.

‍

‍

‍

‍

‍

Final Compositions - App Onboarding

The onboarding screens serve as users' first interaction upon launching the app as new users. They provide a brief introduction, offering insights into the app's key features and functionalities to help users familiarize themselves with its core offerings.

‍

‍

‍

‍

‍

Final Compositions - Trip Onboarding

For trip onboarding, these screens gather information about the trip users intend to track. The initial create profile screen is exclusively shown to new users but can also be accessed later in settings. The trip data screens are seen each time the user begins a new trip, collecting information about each trip.

‍

‍

‍

‍

‍

Final Compositions - Main Screens

Here are the primary screens within the application, conveniently accessible via the bottom navigation bar. Each section serves a distinct purpose, seamlessly integrating with one another and sharing information, except for the helping hand page, which stands as an outlier.

‍

‍

‍

‍

‍

Final Compositions - Emergency SOS

Finally, we arrive at the main screens of the SOS pages, designed for users to swiftly reach out for emergency assistance and dispatch help to their location.

‍

‍

‍

‍

‍

Prototype

Created in Figma!

‍

‍

‍

‍

‍

Thanks for checking it out!

If you'd like, you can view the Project Doc here πŸ”— (PDF | 16 MB)

‍

So, what's next?
REACT