Xponetiq

A mobile app that teaches you brain-healthy habits so you can experience more clarity, balance, and presence in your day.

OBJECTIVE

Create an intuitive User Interface (UI) for a mobile app that reduces stress and cognitive load.

MY ROLE

UI Design

Prototyping

Motion Design

Illustration

TOOLS

Figma

Illustrator

After Effects

TEAM

Isabell Fink

Maren Wolf

DURATION

October 2024 - Present

Challenges

Inheriting a Pre-Designed Solution

With the app already in beta, a few pages were already crafted. This was both a hurdle and an opportunity. We needed to refine the design, spot areas from improvement while respecting existing development constraints.

Fragmented Interaction Flows

Multiple buttons and disjointed actions forced users to navigate across several screens to configure preferences.

Solution

Our solution centred on transforming the fragmented interface into a cohesive, intuitive experience. We carefully reimagined the user flow by reorganizing the information architecture and refining key interactions. By integrating clear visual cues and structured layouts, we provided a design that not only looks fresh, but also guides the user seamlessly through the app.

Key Features

Centralized Daily Dashboard

The Today Screen serves as the app’s home base, where users access their daily health quests, organized into categories such as productivity, sleep, mindfulness, and mini quests, while also tracking key progress indicators like upcoming badges and current user level.

EXISTING DESIGN

During our review of the initial homepage design, we discovered that the homepage lacked clear task categorization.

Also, each task card was cluttered with multiple disjointed actions. This forced users to navigate across several screens to configure their task preferences, leading to a fragmented experience.

OUR SOLUTION

We divided the daily tasks into distinct morning, afternoon, and evening slots, effectively creating a timeline with clear status completion indicators. This structure helps users immediately grasp their daily agenda, promoting a "less thinking, more doing" approach.

Additionally, we consolidated multiple action buttons into a single, detailed configuration screen, streamlining task setup and enhancing usability.

Progress Dashboard

The Journey Screen offers users a comprehensive, visually engaging view of their achievements and progress. Here, users can track key metrics — such as cumulative badges, EXP points, and streaks — while also allowing users to dive into detailed statistics for each category.

THE IDEA BEHIND THE BADGES

We wanted to create a visually engaging reward system. I personally illustrated all the badges, and I wanted them to show clear progression. Each category has its own badges and they start off simple and gradually become more detailed as users hit bigger milestones.

This not only makes the rewards more meaningful, but it also gives users a tangible sense of achievement as they stick to their habits.

Breathing Exercise Animation

The box breathing exercise was designed to help users manage stress, improve focus, and regulate their nervous system. This simple yet powerful technique guides users through controlled breathing cycles, promoting relaxation and reducing anxiety.

THE IDEA BEHIND THE ANIMATION

The central element is a purple box, chosen intentionally as purple is often associated with calmness, mindfulness, and mental balance.

The box expands and contracts, mimicking the natural movement of the chest during deep breathing, guiding users through the exercise.

breathing.mov

QUICK ACCESS TO CALM

For easy access, we designed an iOS widget for the box breathing exercise. With just a tap on their home screen, users can start a guided breathing session without needing to open the app.

This seamless integration encourages users to incorporate mindful breathing into their daily routine.

Guided Program - Digital Detox

This guided program is designed to help users build healthier relationships with technology. It provides structured lessons focused on reducing screen time, improving focus, and fostering mindful habits.

EXISTING DESIGN

On the wireframe we were given, all lessons were presented in a single, continuous list, making it overwhelming and difficult to track progress.

Additionally, the audio played within the same interface, leading to potential distractions.

OUR SOLUTION

We restructured the program into three distinct sections, allowing users to focus on one stage at a time without cognitive overload. This new layout makes learning more approachable and easier to follow.

Additionally, we redesigned the audio experience by moving playback to a dedicated screen, eliminating unnecessary distractions

Opportunity Areas

Personalized Feedback

Keep track of users’ progress and provide personalized suggestions for guided programs that best suit their needs.

Social Sharing

Integrate social sharing options that allow users to celebrate achievements with friends and family.

Habit Reminders

Incorporate smart reminders and notifications to help users establish and maintain consistent brain-healthy habits.

Community

Invite friends and family to join. Challenge them or team up to complete quests together.

The Future

With positive initial feedback, we plan to further refine the app. We see promising opportunities to expand personalization features and continue improving the way users interact with their wellness journey.

Page updated

Google Sites

Report abuse