Summary
UI / UX DESIGN
MOBILE APP
INTERACTION SPEC
FITNESS
TBD · YEAR
Muscle Mate
A friendly fitness app where AI plans your workouts and your team beats monsters together.
ROLE
UX Designer
TIMELINE
3 WEEKS
PLATFORM
iOS mobile app
DELIVERABLE
Hi-fi screens + annotated interaction spec, 6 flows
TBD · e.g. Getting started with exercise is hard, and sticking with it alone is harder. How can an app make planning, tracking and eating well feel friendly instead of demanding?
TBD · e.g. Information architecture · UI design · Interaction specification
A complete high-fidelity design across six flows — onboarding, activity, exercise, recording, nutrition and team — documented screen by screen with interaction and content notes.
View prototype
See the flows
Key flows
Six flows, from the first launch to training with friends.
00
Register & create profile
A nine-step setup asks one question per screen, with a counter (2/9) and a progress ring around the Continue button. Follow-up questions adapt to your goal, values are picked by swiping, and a custom avatar ends the flow. Guest login and Skip let you start right away.
01
Activity
Daily goals for calories, steps and water, a week of workout check-ins, and a choice between an AI-generated plan or your own. Scrolling up tucks your profile into the corner so the plan gets the space.
02
Exercise
Choose by environment (outdoor, gym, indoor) or by body area, search with instant suggestions, and watch a short video for each move. Or let AI build today’s plan in four quick steps: goal, focus area, time, done.
03
Record
Start a workout with a three-second countdown and see calories burn in real time; hold Finish for two seconds so you never end by accident. Log exercise manually, or scan your meal and let AI estimate the calories.
04
Nutrition
Add dietary preferences and allergies, see each day’s calories in colour (pink below target, green on target, blue for exercise), and get meal suggestions that switch between breakfast, lunch and dinner by time of day.
05
Team
Set team and individual goals with friends. The team’s progress is a monster’s health bar: every finished task brings it down. Send encouragement to teammates still in progress, or a like to those who are done.
Interaction details
Every screen in the spec comes with interaction and content notes. A few patterns that shape the feel of the app:
Height and weight use a two-level picker: swipe a range first (170–180 cm), then the exact value. The selected value grows and turns black.
A step counter and a ring around the Continue button show how far into setup you are.
Ending a workout needs a two-second hold with a progress indicator, so a stray tap never loses a session.
Sign up, login and Continue stay greyed out until the input is valid, and explain why.
Leaving a meal scan asks for confirmation, because progress would be lost.
Encouragement and likes can be sent once per teammate per day; the button greys out after sending.
Visual language
Soft blob characters with simple faces carry the brand, from the launch screen to the workout timer, where their eyes follow the movement. Warm yellow guides setup, light blue marks the AI planning flow, and colour-coded calories make nutrition readable at a glance.
Launch & onboarding
Workout timer
Nutrition
Team monster
Reflection
TBD · One sentence on what this project taught you.
TBD · Write a short reflection here: what worked in the design, what you would test with real users, and what you would change next.
NEXT STEPS
TBD · Usability testing with real users
TBD · Refine the AI plan and meal-scan flows
TBD · Accessibility and dark mode