Dynamic Island Design Case
Project Summary
This project is a personal design project I undertook to explore new ways of enhancing two apps I frequently use: Flitsmeister and NS. I created this project to experiment with the possibilities of Apple's Dynamic Island, aiming to improve the user experience for navigation and travel updates in a seamless and intuitive way. I dove deep into Apple's presentation modes and design guidelines for the Dynamic Island, and imagined how these everyday travel apps could leverage the dynamic island for a more proactive and real-time travel experience.
the guidelines provided by Apple
Keywords:
UI/UX Design
Visual Design
Explorative Design
High-fidelity prototyping
Figma
Side project
Project brief
This project explores the potential of Apple's Dynamic Island through two different travel apps: Flitsmeister and NS. Both apps have user-friendly designs and helpful features that make them great for many travelers on a daily basis. Flitsmeister supports drivers with navigation and traffic alerts, while NS provides key information for train travel. Despite their well-rounded functionalities, neither app currently fully leverages the possibilities offered by Dynamic Island.
Given their focus on travel, these apps provide an ideal context for Dynamic Island’s capabilities as they both involve ongoing activities that could be displayed in Apple's Live Activities. Live Activities showcase relevant and up-to-date information provided by an app regarding an ongoing activity. These Live Activities display this information in glanceable locations such as the Dynamic Island. By exploring how Dynamic Island could showcase Live Activities provided by the selected travel apps, I envisioned ways to optimize the user’s experience of these apps by providing real-time travel updates in these glanceable locations, keeping users informed without the need to switch apps constantly.
Guideline research
To ground this project in best practices, I reviewed Apple's design guidelines on Dynamic Island and Live Activities, examining how to maximize their functionality for an enhanced user experience. Apple’s guidelines describe three presentation modes for the Dynamic Island: concise, minimal, and expanded. Each mode offers a different level of interaction and information, allowing apps to scale the amount of detail displayed based on the user’s immediate needs.
It’s crucial that the Dynamic Island maintains its compact form, keeping content closely aligned with the area around the device’s sensors. Consistent margins should surround the content, with a concentric placement that centers elements. This approach prevents any elements from reaching the outer edges, ensuring a clean, organized appearance that feels visually balanced and easy to read at a glance and across the different presentations.
NS - Dynamic Island Concept
The first travel app, NS, includes a function to follow real-time updates for a trip, but this currently only works within the app itself or through standard notifications.
This functionality could be improved by utilizing Apple’s Live Activity feature, which would bring real-time updates directly to the Dynamic Island. By integrating Live Activities, users would be able to glance at their ongoing trip and receive essential updates right from within the Dynamic Island, making it easier to stay informed about their trip.
Interactive demonstration
The concept I created for the NS app builds upon the existing travel-tracking feature by updating users about upcoming changes and travel duration directly within the Dynamic Island, utilizing both compact and expanded presentation styles. At any moment, the user can tap the Dynamic Island to expand it and access detailed information about their trip, ensuring that essential updates are always within reach, even while using other apps.
As the demonstration video showcases, the compact style of the Dynamic Island highlights the duration until the next arrival or platform change. In contrast, the expanded style provides more relevant information regarding the trip, including a progress bar, details about the duration, specifics about upcoming platform changes, and the estimated time of arrival. This dual presentation approach enhances user engagement and ensures timely access to important travel updates.
Flitsmeister - Dynamic Island Concept
The second travel app, Flitsmeister, provides real-time travel information specifically for car journeys. Flitsmeister delivers critical updates that help drivers navigate the roads more safely, alerting users to various road conditions, including road works, time delays, objects on the road, and average speed checks.
Currently, Flitsmeister only uses the minimal presentation with a blue arrow indicating that the app is running. The concept I created builds further upon this functionality and showcases how the Dynamic Island could be utilized when considering a car ride as a Live Activity. By leveraging the Dynamic Island, Flitsmeister could provide drivers with essential updates in a glanceable format, further enhancing the overall user experience and driver safety by ensuring that critical information is readily accessible while on the road, even when using other apps like Google Maps for navigation.
Several designs
For the Flitsmeister case, I created an even more extensive set of Dynamic Island designs to accommodate common Flitsmeister alerts. I designed an expanded presentation providing the driver with an overview of what to expect on the road ahead. This view opens at the start of the journey and can also be accessed by pressing the Dynamic Island. Additionally, I designed presentations for upcoming speed cameras and ongoing average speed check trajectories to help the user align their speed with the speed limit on that road.
In addition to on-the-road features, Flitsmeister also offers the option to pay for parking spots during a trip. In this design concept, I illustrated how the Dynamic Island could facilitate this functionality, allowing users to start a parking session directly from within the Dynamic Island. This integration ensures that drivers can easily manage their paid parking sessions while having the necessary information available at a glance.
Interactive demonstration
To showcase how the Dynamic Island would operate when the user navigates with a third-party app, I created a demonstration video that highlights its seamless integration into the driving experience.
This video illustrates the various alerts a user would receive during their drive, such as speed camera alerts and average speed check alerts. Additionally, it showcases how drivers can efficiently manage a parking session directly from the Dynamic Island, allowing for quick access to essential information along their complete journey.
Contact
Do you have a questions regarding any of my projects? Or would you like to share a cup of coffee together and discuss one of them? Don't hesitate to contact me!
Get in contact