Project

XRSIZE

The purpose of the project was to create a digital tool that supports users in improving their health and well-being through personalized exercise and nutrition planning. The project aimed to design a desktop application that adapts to individual goals, preferences, and lifestyles, making it easier for users to develop sustainable habits.

The application was required to allow users to input personal characteristics and preferences, receive tailored exercise and meal suggestions, and customize their plans. It also needed to visualize data such as calorie balance, time requirements, and environmental impact. The project focused on achieving a coherent and intuitive user experience, demonstrating the ability to design a relatively complex graphical interface supported by a clear design rationale.

The project resulted in XRSIZE, a desktop application for nutrition and exercise designed for anyone looking to adopt a healthier lifestyle. It offers both pre-made workout and meal programs, as well as the flexibility to create customized plans based on individual goals and conditions.

Team

Moa Berntsson

Time

3 weeks in December 2023

Tools

Figma

KEY WORDS

UI

Design Process

01 Secondary Research

The project was initiated with a benchmarking of fitness and health apps, as well as recipes and food platforms. Other  applications and websites were explored to find inspiration on style and structure.

02 Ideation

03 User flow

To establish a clear structure and improve the user experience of XRSIZE, an user flow diagram was created. Given the complexity of the app, with multiple features such as workout tracking, meal logging, progress visualization, and personalized plans, it was essential to visualize how users would navigate through the various screens and interactions. 

04 Wireframes and Prototyping

The user flow served as a foundation for wireframes. Wireframes were created for each screen to define structure, hierarchy, and functionality of each interface.

An interactive prototype of the app was created in Figma to demonstrate the app’s core funtionality, user flow and screen transitions. 

Result

Select program

The user can choose and purchase predefined programs in Nutrition, Workout, and Nutrition and Workout. Each section offers programs that focuses on specific areas like losing weight, improving cardio, or building muscles.

Customize program

If the pre-made programs do not suit the user, they can tailor their own program based on their goals and possibilities. When customizing a program, the user needs to provide information about themselves and answer questions about goals, previously used methods, preferences, assets, activities, time and diets. Based on the user’s answers, a tailored program is created.

Home

In Home, the users will find easily accessible information about the days schedule including both meals and workouts, and progress indicator. By clicking on the different cards, the user will be directed to the selected page.

Schedule

In Schedule, users will find day-to-day planning with information about meals and workouts leading up to the selected end date.

Statistics

In Statistics the users will find their progress, goals, achievements and activity. The user can synchronize their smart watch and mobile with the application to keep track of their movement.

Exercise

In Exercise the user will find their favorite exercises and exercises to target specific muscle groups sorted into arms, legs, butt, shoulders, back, and core. If the user are looking for something special they can search for exercises, mucles they want to target, or equipment. For users who want to explore and discover exercises for specific areas, they can click on the illustrated body and get suggested exercises for the selected muscle group.

By clicking on an exercise card, users will find information about the primary and secondary muscles targeted, instructions, equipment, sets and repetitions, estimated time, and difficulty level. Users will also find a video showing how to perform the exercise.

Nutrition

In Nutrition the users will find their favorite meals and suggestions for breakfast, lunch, dinner, and snacks. By clicking on a food card, the user will find information about type of protein, calories, climate footprint measured in CO2 equivalents, ingredients, cooking time, level of difficulty, and process is easily accessible. By clicking on the + and icons, the number of portions can be adjusted. This feature is beneficial for those who want to cook for lunchboxes or the household.

By clicking on the Shopping Cart button, the user can add all or some of the ingredients in the shopping list, and share with their household.

Shopping List

In Shopping list the user will find current shopping lists, and add new lists. When entering a list, the user can add more times to the list. The users can share their shopping lists with their household or friends.