Liquid Glass Gym App

‍

Summary

This redesign project started as a personal initiative after daily use of a local gym app called Esporte Mais. The original experience felt outdated, disconnected from actual workout behaviors, and visually hard to navigate. It lacked clarity, momentum, and emotional relevance.

I used this opportunity to rethink the experience from the ground up. The approach combined empathy mapping, interface behavior analysis, and modern UI design. The visual and interaction language was rebuilt using Apple’s iOS 26 Beta design system, with a focus on Liquid Glass visual treatments. The goal was to make the app feel fluid, context-aware, and emotionally engaging for people in motion.

Problems

By analyzing my own real-world usage of Esporte Mais, I identified key UX issues from the original version.

Shows session navigation and exercise details with problems: (a) unclear session structure, (b) disconnected overlays, and (c) inconsistent visual content.

Empathy Mapping

To guide the redesign, I created an empathy map based on user's behavior. This artifact helped externalize specific pain points and cognitive friction in the original app. It framed the redesign not as a visual refresh, but as a structural solution to motivational and usability gaps.

USER

Says

“I just want to open it and start my workout.”

“This app feels old and hard to use.”

“It takes too many taps to do things.”

Thinks

“I hope I don’t forget my routine.”

“There should be a simpler way to track this.”

“How to use this gym equipment?”

Does

Skips parts of the app by switching to others

Search photos and videos of routines

Get distracted by social media notifications

Feels

Frustrated when tasks are buried or unclear

Disconnected from visual style and flow

Distracted by non-contextual information

‍

Solutions

The new version of the app was designed to address each issue through structured layout, interactive clarity, and a more human visual system. Apple’s Liquid Glass elements as depth layering, translucency, glow, and motion were used as emotional enhancers to support both clarity and rhythm.

In this image we see (1) the user info with membership and gym name, setting a clear context. (2) shows available trainers using portraits to build trust and provide quick access to support. (3) presents personal streaks, using small blocks and numbers to trigger commitment and goal tracking. (4) outlines the current program with clear dates, reinforcing time framing. (5) shows a progress bar with a call to continue, keeping the user anchored. (6) promotes an upcoming group class with a waiting list tag, using scarcity to motivate action. (7) offers reading content to build knowledge. (8) displays a suggested product for sale at the gym, allowing space for brand partnerships. (9) shows the compressed nav bar on scroll, keeping key tools reachable. Dark colors help stabilize contrast, improving visibility under Liquid Glass in iOS 26.

In this image we see (10) a large carousel that introduces content like articles or classes, drawing attention with expressive colors. (11) shows a class with a time and CTA or message, helping users take action or stay informed. (12) presents workouts based on user history, reinforcing relevance. (13) displays a group class that is full but allows waitlist entry. (14) repeats the suggested workout logic with strong visuals. (15) lists available equipment so users can adapt sessions to what they find in the gym. Hierarchy is clear. No distractions. Visual cues guide without blocking. The dark background supports Liquid Glass behavior and ensures legibility at all times.

In this image we see (16) the name and progress bar at the top, always reinforcing completion status. (17) also shows the active exercise with all sets listed. (18) lists the next movement. (19) includes a thumb zone toolbar for navigation. In the expanded view, (20) shows the visual demonstration, reducing uncertainty. (21) is a completed set. (22) is the set in progress. (23) is the one still pending. (24) is the button to add extra sets for advanced users. (25) is the final confirmation button to close the set. The layout helps users stay focused, reduces distractions, and uses behavioral cues to support clarity during effort. Dark tones ensure visual priority and contrast within the new beta system.

‍

Outcome

The final result is a modern fitness app interface that is grounded in empathy and shaped by platform-native design principles. The redesign resolves core usability failures and introduces an emotionally responsive visual system that supports real-world gym behavior. It shifts the experience from task-driven to momentum-driven.

This project serves as a prototype of how Apple’s upcoming UI guidelines can be used to create more fluid, responsive digital tools in high-motion environments like fitness.

‍