Modbox
UX/UI Design · Fitness App · University · 2019/20
Overview
Modbox (Modified Boxing) is a university project from my third semester, created to motivate teens to stay active through a cooperative, non-contact boxing experience.
Modbox was a collaborative effort with Queensland University of Technology (QUT), where QUT students focused on developing the physical product (sensor-equipped foam batons). Meanwhile, my teammate and I designed a mobile app to control the product and further enhance engagement and motivation.
Design Process
- Ideation
- Rapid Prototyping (+Testing)
- Low-Fidelity Prototype (+Testing)
- Personas
- Moodboards
- High-Fidelity Prototype
- Demo Video
Goal
The project was part of the Design of Human-Computer Interaction course at the University of Applied Sciences Ingolstadt. While the main focus was on practicing UI design, user research played a supporting role in shaping the final product.
Role
UX/UI Designer
Tools
Adobe XD, Pen & Paper
Team
Two Students
(Anica Hummel & me)
Timeline
Oct. 2019–Feb. 2020
Ideation
“The blank canvas stared back at us—full of potential, but daunting. How do you turn foam batons and sensor modules into an experience that hooks a teenager? We needed ideas—fast, wild, and unfiltered.” → Brainstorming
Key decisions
- Mobile App: Most accessible for the use case and target group (compared to tablet or smartwatch interface)
- Modern Look: Design to appeal to a young audience
- Gamification Focus: Incorporate a point system, progress tracking, and ranking to enhance motivation.
Rapid Prototyping
Paper Prototyping
"Let’s sketch every crazy idea—even the bad ones." That was our mantra as we spread paper across the table, pencils flying. No pixels, no polish—just raw layouts for the Modbox app. Some designs were chaotic, others less so, but all were quick to create and even quicker to discard.
Quick & Dirty Usability Testing
The real test? Watching our friends and family struggle with elements we thought were obvious. But the outcome was great—we quickly identified usability issues early in the design process and built a solid foundation for more refined prototypes.
Low-Fidelity Prototype
"Wait—can you actually read that?" Using Adobe XD, we translated our scribbled screens into a grayscale, interactive model—retaining just enough realism to test usability further, but none of the design polish that could distract from structural flaws.
Goal: Real-Device Testing
Viewing the prototype on actual smartphones to test readability, button sizes and swipe gestures, without getting into details around aesthetics
The Right Style
Following our low-fidelity prototype iterations, we successfully refined the concept and confirmed that users could navigate Modbox without significant usability challenges. The next step: shaping the app’s visual identity—making it not just functional, but also engaging and enjoyable to use.
Personas
To achieve this, we first needed to clearly define Modbox’s user group. That’s why we created three distinct personas to represent our target audience.
Moodboards
With our users in mind, we created moodboards to capture the distinct style we envisioned for Modbox.
Brand Image
We defined a distinct aesthetic and articulated it through key brand attributes.
High-Fidelity Prototype
Now all there was left is to make it pretty ...
The Video
Ultimately, our goal was to clearly and quickly convey the concept behind Modbox. To do that, we produced a short demo video to bring the idea to life — and yes, that’s me at 20. ;)
Content from YouTube can't be displayed due to your current cookie settings. To show this content, please click "Consent & Show" to confirm that necessary data will be transferred to YouTube to enable this service. Further information can be found in our Privacy Policy. Changed your mind? You can revoke your consent at any time via your cookie settings.