Highlights

Scaleable Alert Design

Light & Dark Mode

Various Presentations

For a full experience, I extended the Live Activity to the Home Screen presentations and took into account the latest iOS 17 StandBy feature.

At One Glance

Key stats such as time, distance and elevation are quickly scannable on the Lock Screen while users are on the move.

On-Track Confidence

Users explore freely with the direction indicator, yet stay safe while exploring the outdoors with off-track alerts.

Motivation Boost

The progress bar shows how much users have accomplished, motivating them to stay engaged with the Live Activity.

Case Study

Brief

Alltrails asked me to design a Live Activity for the iOS native app that meets users' needs as a part of my assessment task. Consider how animation might help the user engage with the Live Activity.

Goal

Find out AllTrails' target audience and identify the problems that can be addressed through a Live Activity implementation. Also, consider ways to visually connect the Live Activity with the original app and ensure compatibility with the iOS system design.

Discover

AllTrails is an outdoor and fitness app that enables users to search for trails, navigate through them, and get useful information during activities like hiking or cycling. First, I familiarized myself with the AllTrails app's features, flows, and visual design. Two things caught my attention: the route and lifeline features.

Route

After choosing a trail, users can start an activity and view their current location on a map. The route is highlighted and their position is shown as a direction indicator. The app does not provide turn-by-turn navigation, likely because its target audience enjoys exploring the outdoors freely. This is something I needed to consider within my design.

The Live Activity could show a warning if the user goes off track, or send a warning to the secondary persona if the primary persona doesn't move from one spot for too long.

Lifeline

The Lifeline feature caught my attention as an ideal use case for a Live Activity to keep friends and family informed about a user's progress while they are on the trail. This made me realize that there might be two personas to consider:

Primary: Someone who is doing the activity

Secondary: Friend or family that needs to keep an eye on the primary persona in case something goes wrong. This is of course subject to permission granted by the primary persona.

Target Audience

I looked at AllTrails landing page, their community, and their social media channels to find out who’s their target audience.

Based on their content, they target millennials or Generation Z who enjoy being in nature, whether it's hiking alone, in groups, or going for a bike ride. The main focus is on the enjoyment of the outdoors and the beautiful sceneries.

Market Research

Since Live Activity is a fairly new feature, not many apps support it. I wanted to get an overview what is available, get inspiration for usage of space or animations and find opportunities to stand out.

I noticed that few apps take advantage of the transparent material background, and I want to see if it would be a good way to integrate AllTrails’ brand. My main worry is accessibility, especially since the user is outdoors and light conditions can reduce readability.

Define

Persona

Olivia, 35

Olivia is a Software Engineer from Munich and loves escaping the city on weekends to explore the beautiful surroundings by hiking or biking. She enjoys the break from her desk and the digital world for a few hours. She uses AllTrails to discover new places and stay on the right path. However, she often finds herself checking her app for important information and directions, which disrupts her outdoor activities. Olivia is often accompanied by her friends who share her love of exploring outdoors, since she doesn't feel very confident going alone.

Problem Statement

"Olivia needs an efficient way to access important information during her activities without spending too much time on her phone, so that she feels secure while fully enjoying her outdoor experience."

HMW

"How might we balance Olivia's need for information with her desire to fully appreciate the outdoor experience without disruptions?"

Ideate

Design References

I drew inspiration from iPhone widgets, in addition to conducting original app and competitive research. This helped me understand how to effectively incorporate a large amount of information within a limited space. My main takeaway is that information needs to be glanceable. This can be achieved through visual hierarchy, utilizing varying font sizes and shades of colors. Important features can be highlighted with an accent color, but it should be used sparingly.

Sketching

Based on a user flow I previously created, I used sketching after creating the user flow, and continued to do so throughout the design phase, to quickly and effortlessly visualize my ideas.

Mid-Fi & High-Fi Explorations

After considering some general ideas and layout options, I explored them further in Figma as mid-fi versions. This allowed me to apply font sizes and get a better understanding of scale, as well as how much information and visuals I could include without overwhelming the user.

Even after moving on to high-fidelity, I continued to explore other approaches, as I wasn't completely convinced by the design and wanted to find the most elegant and simple solution.

Design Direction

Since I was adding to an existing app, the challenge was to make sure the Live Activity reflected the visual identity of the brand while fitting into the iOS Lock Screen and maintaining consistency. Frequent side-by-side comparisons with the original app helped me to stay aligned.

Before adding more UI elements, I did a teardown of the original app to check colors. Additionally, I referred back to the HIG and took inspiration from iOS widgets such as Weather, Stocks, and Clock, as seen previously under references. The final design combines AllTrails' visual identity with iOS System Design, with support for Light and Dark Mode. Small details like a tinted background, subtle logo, and icons are contributing to brand recognition.

Deliver

High-Fidelity Prototype

The Live Activity allows users to enjoy an uninterrupted outdoor experience while staying informed about their trail. Once they begin recording an activity in the app, the Live Activity automatically starts. It keeps users up-to-date with important information and animations encourages the users to engage with the Live Activity instead of opening the app. The AllTrails logo, a subtle background tint, and the icons visually connect it to the app.