Back
2025
EyeRunner
A running tracker for iOS and watchOS that shows real-time metrics and heart-rate zones, designed to help joggers understand their performance and improve with ease.
UI/UX Design
Front-end
User Research
CBL Framework
EyeRunner builds on the foundation of my original EyeRun app, taking the concept further with improved visual hierarchy, clearer key metrics, heart-rate zone data, HealthKit integration, and a dedicated watchOS experience. This enhanced version makes it easier for runners to monitor their performance in real time and stay motivated on their daily progress.
The Challenge
Through earlier user feedback, I learned that the previous version of the app still felt confusing to use. The visual hierarchy wasn’t clear, where several key metrics shared the same level of importance but were placed inconsistently, making it harder for users to scan information quickly. Some cards also looked tappable even though they weren’t, which created unnecessary friction during use. During this time, I also discovered that heart rate zones play a crucial role in safe and effective running, yet many users weren’t aware of them or didn’t monitor them closely, even though the risks can be significant if ignored.
Our Solution
To address these issues, I redesigned EyeRun with a much clearer visual hierarchy, grouping key metrics consistently and using color in a way that’s easy to read while helping users distinguish each data type at a glance. I refined the card components so they only appear tappable when they truly are, reducing user confusion. I also introduced heart-rate zone information tailored to each user’s age, helping runners stay within safe and effective ranges. To enhance the overall experience, I added a watchOS companion app so users can quickly view key metrics during their runs. These improvements make the app not only easier to use, but also more meaningful for supporting users’ performance and well-being.
What I’ve done
I analyzed the feedback from the earlier version, continued with additional user and desk research, redesigned the full interface for better clarity, coded the updated app with HealthKit integration and heart-rate zone logic, and built the watchOS companion to complete the experience.
How we get here
The project was an individual assignment where I was tasked with improving my previous EyeRun app. I began by reviewing all the feedback from the earlier version and continued with additional user research and desk research, focusing heavily on Apple’s Human Interface Guidelines and Gestalt principles to create a design that feels native, structured, and easy to understand.
Using these insights, I redesigned the entire interface with a stronger visual hierarchy, clearer grouping, and more intuitive information flow to help users scan their data effortlessly. After finalizing the new design, I moved on to development based on SwiftUI, integrating HealthKit to fetch key running metrics, building a heart-rate zone logic based on user age, and ensuring data accuracy throughout the experience. I also expanded the app by developing a watchOS companion app, allowing runners to access essential metrics directly from their wrist for a more seamless running experience.
Outcome
The redesign resulted in a much cleaner and more intuitive visual hierarchy, making key metrics easier to scan and understand at a glance. Consistent grouping and clearer structure helped runners monitor their performance more confidently, while the improved card components reduced confusion and created a smoother interaction flow. With the addition of heart-rate zone insights and a watchOS companion app, EyeRun now provides a more complete and seamless running experience, giving users quick access to essential data whether they’re holding their phone or on the move.
Home Page Redesign
The redesigned home page now presents a much clearer and more intuitive visual hierarchy. The three most important metrics based on user feedback are grouped at the top, making them easier to monitor at a glance.
The heart-rate card is intentionally made larger to highlight its importance, especially since many users tend to overlook it despite its impact on safe and effective running.
Accent colors are still used, but more subtly serving as visual highlights rather than dominating the interface or appearing button-like. These improvements create a cleaner, more focused experience that helps runners check key information quickly and confidently.
Before
After
Heart Rate Zone Info
Introduced a new heart-rate zone feature that automatically calculates personalized zones based on the user’s age, helping runners understand their maximum heart rate and train more safely and effectively.
watchOS Companion App
As a new addition to the updated EyeRunner experience, I developed a watchOS companion app to give runners immediate access to their key metrics directly from their wrist. This allows users to monitor pace, distance, active minutes, and heart rate zones in real time without needing to check their phone mid-run. By extending the experience to Apple Watch, EyeRunner becomes more practical, safer, and more seamless for runners during their sessions.
Key Takeaways
Throughout this project, I strengthened both my design and development skills. I learned to apply Apple’s Human Interface Guidelines more effectively, especially around visual hierarchy and accessibility. I also deepened my understanding of Gestalt principles and how they help create clearer, more intuitive layouts.
On the technical side, I gained hands-on experience with SwiftUI, HealthKit integration, and building a watchOS companion app, allowing me to create a more complete and connected experience across devices.