UX/UI Cases
UX/UI & Graphic Designer
Game Over - Marketplace
Fit with us:
Improving the gym experience
FitWithUs is a gym app that helps you plan your workouts, visualise real-time crowds, explain each exercise in detail, help you follow a proper diet and track your progress. With this app, you can focus on reaching your training goals without worrying about planning and crowds at the gym.
Game Over - Marketplace
Fit with us:
Improving the gym
experience
FitWithUs is a gym app that helps you plan your workouts, visualise real-time crowds, explain each exercise in detail, help you follow a proper diet and track your progress. With this app, you can focus on reaching your training goals without worrying about planning and crowds at the gym.
Game Over - Marketplace
Fit with us:
Improving the gym experience
FitWithUs is a gym app that helps you plan your workouts, visualise real-time crowds, explain each exercise in detail, help you follow a proper diet and track your progress. With this app, you can focus on reaching your training goals without worrying about planning and crowds at the gym.
Game Over - Marketplace
Fit with us:
Improving the gym experience
FitWithUs is a gym app that helps you plan your workouts, visualise real-time crowds, explain each exercise in detail, help you follow a proper diet and track your progress. With this app, you can focus on reaching your training goals without worrying about planning and crowds at the gym.
Game Over - Marketplace
Fit with us:
Improving the gym experience
FitWithUs is a gym app that helps you plan your workouts, visualise real-time crowds, explain each exercise in detail, help you follow a proper diet and track your progress. With this app, you can focus on reaching your training goals without worrying about planning and crowds at the gym.
Design Thinking
process
01
Empathize
Desktop Research | Interviews | Survey Canvas | Surveys
Competitive Analisys | Visual Competitive | Moodboard
02
Define
Affinity Diagram | User Persona | Empathy Map
User Journey | Problem Statement | Style Tile
03
Ideate
Hypothesis Statement | How Might We? | Moscow
04
Prototype
Site Map | Card Sorting | User Flow | Low Fi | Concept Testing | Mid Fi | Usability Testing | Hi Fi | Design System Interactions
Design Thinking
process
01
Empathize
Desktop Research | Interviews | Survey Canvas | Surveys
Competitive Analisys | Visual Competitive | Moodboard
02
Define
Affinity Diagram | User Persona | Empathy Map
User Journey | Problem Statement | Style Tile
03
Ideate
Hypothesis Statement | How Might We? | Moscow
04
Prototype
Site Map | Card Sorting | User Flow | Low Fi | Concept Testing | Mid Fi | Usability Testing | Hi Fi | Design System Interactions
Design Thinking
process
01
Empathize
Desktop Research | Interviews | Survey Canvas | Surveys
Competitive Analisys | Visual Competitive | Moodboard
02
Define
Affinity Diagram | User Persona | Empathy Map
User Journey | Problem Statement | Style Tile
03
Ideate
Hypothesis Statement | How Might We? | Moscow
04
Prototype
Site Map | Card Sorting | User Flow | Low Fi | Concept Testing | Mid Fi | Usability Testing | Hi Fi | Design System Interactions
Design Thinking
process
01
Empathize
Desktop Research | Interviews | Survey Canvas | Surveys
Competitive Analisys | Visual Competitive | Moodboard
02
Define
Affinity Diagram | User Persona | Empathy Map
User Journey | Problem Statement | Style Tile
03
Ideate
Hypothesis Statement | How Might We? | Moscow
04
Prototype
Site Map | Card Sorting | User Flow | Low Fi | Concept Testing | Mid Fi | Usability Testing | Hi Fi | Design System Interactions
Design Thinking
process
01
Empathize
Desktop Research | Interviews | Survey Canvas | Surveys | Competitive Analisys | Visual Competitive | Moodboard
02
Define
Affinity Diagram | User Persona | Empathy Map
User Journey | Problem Statement | Style Tile
03
Ideate
Hypothesis Statement | How Might We? | Moscow
04
Prototype
Site Map | Card Sorting | User Flow | Low Fi | Concept Testing | Mid Fi | Usability Testing | Hi Fi | Design System Interactions
Prototype - Fit with us
UX/UI & Graphic Designer
Prototype
01
Purchase Flow
In this prototype we show you two of the main flows that you can find in the app. In the first one, we can see the purchase flow, in which we can see the complete filtering process to perform an advanced search and make a successful purchase.
02
Scanning Flow
In the second one, we can see the scanning flow, which allows the possibility of scanning any title with the mobile camera to check the market value of the video game.
Prototype
01
Purchase Flow
In this prototype we show you two of the main flows that you can find in the app. In the first one, we can see the purchase flow, in which we can see the complete filtering process to perform an advanced search and make a successful purchase.
02
Scanning Flow
In the second one, we can see the scanning flow, which allows the possibility of scanning any title with the mobile camera to check the market value of the video game.
Prototype
01
Purchase Flow
In this prototype we show you two of the main flows that you can find in the app. In the first one, we can see the purchase flow, in which we can see the complete filtering process to perform an advanced search and make a successful purchase.
02
Scanning Flow
In the second one, we can see the scanning flow, which allows the possibility of scanning any title with the mobile camera to check the market value of the video game.
Prototype
01
Purchase Flow
In this prototype we show you two of the main flows that you can find in the app. In the first one, we can see the purchase flow, in which we can see the complete filtering process to perform an advanced search and make a successful purchase.
02
Scanning Flow
In the second one, we can see the scanning flow, which allows the possibility of scanning any title with the mobile camera to check the market value of the video game.
Prototype
01
Purchase Flow
In this prototype we show you two of the main flows that you can find in the app. In the first one, we can see the purchase flow, in which we can see the complete filtering process to perform an advanced search and make a successful purchase.
02
Scanning Flow
In the second one, we can see the scanning flow, which allows the possibility of scanning any title with the mobile camera to check the market value of the video game.
Graphic Construction - Fit with us
UX/UI & Graphic Designer
UX Research - Fit with us
UX/UI & Graphic Designer
Pain points
Pain points
Pain points
Pain points
For the development of the project we needed to be clear about who our users were, how they behaved and what pain points they encountered when they went to the gym.
For the development of the project we needed to be clear about who our users were, how they behaved and what pain points they encountered when they went to the gym.
For the development of the project we needed to be clear about who our users were, how they behaved and what pain points they encountered when they went to the gym.
For the development of the project we needed to be clear about who our users were, how they behaved and what pain points they encountered when they went to the gym.
Research shows that the main pain points are gym capacity, waiting to use the machines and lack of information about exercise and proper nutrition.
User needs
User needs
User needs
User needs
Thanks to the information extracted from the interviews and surveys, we also had the opportunity to learn about the needs most demanded by the users. In this way, this information gives us the possibility to optimise their time and effort in the gym, achieve their fitness goals and keep them motivated.
Thanks to the information extracted from the interviews and surveys, we also had the opportunity to learn about the needs most demanded by the users. In this way, this information gives us the possibility to optimise their time and effort in the gym, achieve their fitness goals and keep them motivated.
Gym users have specific needs, such as planning their workouts, receiving dietary advice, checking gym capacity in real time and getting detailed exercise information.
Affinity Diagram - Fit with us
UX/UI & Graphic Designer
Affinity Diagram
We use an Affinity Diagram to organize ideas and group and organize large amounts of information received from gym users. With this tool we collect and organize ideas related to different aspects of the gym, such as training programs, dietary advice, gym capacity, etc.
Affinity Diagram
We use an Affinity Diagram to organize ideas and group and organize large amounts of information received from gym users. With this tool we collect and organize ideas related to different aspects of the gym, such as training programs, dietary advice, gym capacity, etc.
Affinity Diagram
We use an Affinity Diagram to organize ideas and group and organize large amounts of information received from gym users. With this tool we collect and organize ideas related to different aspects of the gym, such as training programs, dietary advice, gym capacity, etc.
Affinity Diagram
We use an Affinity Diagram to organize ideas and group and organize large amounts of information received from gym users. With this tool we collect and organize ideas related to different aspects of the gym, such as training programs, dietary advice, gym capacity, etc.
Affinity Diagram
We use an Affinity Diagram to organize ideas and group and organize large amounts of information received from gym users. With this tool we collect and organize ideas related to different aspects of the gym, such as training programs, dietary advice, gym capacity, etc.
User Persona - Fit with us
UX/UI & Graphic Designer
User Persona
User Persona
User Persona
User Persona
A User Persona was then created to help us define and understand our users, focusing on their needs, wants and behaviours.
A User Persona was then created to help us define and understand our users, focusing on their needs, wants and behaviours.
A User Persona was then created to help us define and understand our users, focusing on their needs, wants and behaviours.
A User Persona was then created to help us define and understand our users, focusing on their needs, wants and behaviours.
Our User Person, Estefanía Martínez tells us that the worst thing about going to the gym is the lack of information about the exercises, and the number of people who go at certain times.
Empathy Map - Fit with us
UX/UI & Graphic Designer
Empathy map
In order to organise and categorise the opinions and user comments that were extracted from the interviews and surveys, an Affinity Diagram was made. Several patterns and trends in the comments were identified and this helped to better understand the needs and wants of the users.
Empathy map
In order to organise and categorise the opinions and user comments that were extracted from the interviews and surveys, an Affinity Diagram was made. Several patterns and trends in the comments were identified and this helped to better understand the needs and wants of the users.
Empathy map
In order to organise and categorise the opinions and user comments that were extracted from the interviews and surveys, an Affinity Diagram was made. Several patterns and trends in the comments were identified and this helped to better understand the needs and wants of the users.
Empathy map
In order to organise and categorise the opinions and user comments that were extracted from the interviews and surveys, an Affinity Diagram was made. Several patterns and trends in the comments were identified and this helped to better understand the needs and wants of the users.
Empathy map
In order to organise and categorise the opinions and user comments that were extracted from the interviews and surveys, an Affinity Diagram was made. Several patterns and trends in the comments were identified and this helped to better understand the needs and wants of the users.
User Journey - Fit with us
UX/UI & Graphic Designer
User Journey
We developed the User Journey to understand the experience that Estefanía has in the gym. We focused on her perspective, which helped us identify opportunities to improve her experience, fix issues, and optimize service design.
User Journey
We developed the User Journey to understand the experience that Estefanía has in the gym. We focused on her perspective, which helped us identify opportunities to improve her experience, fix issues, and optimize service design.
User Journey
We developed the User Journey to understand the experience that Estefanía has in the gym. We focused on her perspective, which helped us identify opportunities to improve her experience, fix issues, and optimize service design.
User Journey
We developed the User Journey to understand the experience that Estefanía has in the gym. We focused on her perspective, which helped us identify opportunities to improve her experience, fix issues, and optimize service design.
User Journey
We developed the User Journey to understand the experience that Estefanía has in the gym. We focused on her perspective, which helped us identify opportunities to improve her experience, fix issues, and optimize service design.
Problem and Hypothesis Statement - Fit with us
Problem and Hypothesis Statement
UX/UI & Graphic Designer
Problem and Hypothesis Statement
Problem and Hypothesis Statement
Problem and Hypothesis Statement
Problem and Hypothesis Statement
Establishing a clear problem allowed the focus to be on the real needs of the users and ensures that the product meets these needs. With these problems identified, a hypothesis was formulated, allowing potential solutions to be tested and evaluated to determine whether they effectively solve the identified problem.
Establishing a clear problem allowed the focus to be on the real needs of the users and ensures that the product meets these needs. With these problems identified, a hypothesis was formulated, allowing potential solutions to be tested and evaluated to determine whether they effectively solve the identified problem.
Establishing a clear problem allowed the focus to be on the real needs of the users and ensures that the product meets these needs. With these problems identified, a hypothesis was formulated, allowing potential solutions to be tested and evaluated to determine whether they effectively solve the identified problem.
Establishing a clear problem allowed the focus to be on the real needs of the users and ensures that the product meets these needs. With these problems identified, a hypothesis was formulated, allowing potential solutions to be tested and evaluated to determine whether they effectively solve the identified problem.
Both the problem and the hypothesis are based on previous research and data provided by users, as this helps to ensure that a real and relevant problem is being addressed.
How Might We? - Fit with us
UX/UI & Graphic Designer
How Might We?
How Might We?
How Might We?
How Might We?
This technique has helped to formulate open-ended and inspiring questions that guide the generation of ideas and solutions. The formulation of questions helped to focus the problem, to solve and to explore different perspectives and potential solutions.
This technique has helped to formulate open-ended and inspiring questions that guide the generation of ideas and solutions. The formulation of questions helped to focus the problem, to solve and to explore different perspectives and potential solutions.
This technique has helped to formulate open-ended and inspiring questions that guide the generation of ideas and solutions. The formulation of questions helped to focus the problem, to solve and to explore different perspectives and potential solutions.
This technique has helped to formulate open-ended and inspiring questions that guide the generation of ideas and solutions. The formulation of questions helped to focus the problem, to solve and to explore different perspectives and potential solutions.
Thanks to this process, it has been possible to define and propose a series of solutions to the main problems that users have been commenting on. These solutions have to be prioritised in terms of importance and development cost.
MoSCoW Prioritisation - Fit with us
UX/UI & Graphic Designer
MoSCoW prioritisation
MoSCoW prioritisation
MoSCoW prioritisation
MoSCoW prioritisation
We needed to prioritize features and used the MoSCoW prioritization method, whereby we categorized tasks and features into four to four levels to help prioritize and focus on the most important ones.
We needed to prioritize features and used the MoSCoW prioritization method, whereby we categorized tasks and features into four to four levels to help prioritize and focus on the most important ones.
We needed to prioritize features and used the MoSCoW prioritization method, whereby we categorized tasks and features into four to four levels to help prioritize and focus on the most important ones.
We needed to prioritize features and used the MoSCoW prioritization method, whereby we categorized tasks and features into four to four levels to help prioritize and focus on the most important ones.
In this way we were able to prioritize what should integrate FitWithUs, make decisions about the implementation of its functionalities and focus on the most important ones.
As we can see, in this way we were able to maximise the impact of the product and make decisions on the implementation of its functionalities and focus on the most important ones.
Sitemap - Fit with us
UX/UI & Graphic Designer
Sitemap
Sitemap
Sitemap
Sitemap
Next we build a sitemap helping us also with a card sorting, to organize the content in a logical and structured way, which makes it easier for users to find the information they need.
Next we build a sitemap helping us also with a card sorting, to organize the content in a logical and structured way, which makes it easier for users to find the information they need.
Next we build a sitemap helping us also with a card sorting, to organize the content in a logical and structured way, which makes it easier for users to find the information they need.
Next we build a sitemap helping us also with a card sorting, to organize the content in a logical and structured way, which makes it easier for users to find the information they need.
In this way, by having a well-organized sitemap, users can easily find the content they are looking for and navigate the site more intuitively. In addition, thanks to the analysis of the sitemap, we can identify possible problems in navigation and the structure of the product.
User Flow - Fit with us
UX/UI & Graphic Designer
User Flow
Next, we carry out the main user flows to visualize the steps that the user follows to achieve each objective within our product.
This helped us better understand the user experience, identify critical points in the process, optimize product flow, and count the screens to be designed.
User Flow
Next, we carry out the main user flows to visualize the steps that the user follows to achieve each objective within our product.
This helped us better understand the user experience, identify critical points in the process, optimize product flow, and count the screens to be designed.
User Flow
Next, we carry out the main user flows to visualize the steps that the user follows to achieve each objective within our product.
This helped us better understand the user experience, identify critical points in the process, optimize product flow, and count the screens to be designed.
User Flow
Not just timeless and memorable, but usable in todays digital world.
By using my expertise as a digital designer, I make sure that a visual identity can be used throughout all digital touchpoints in an accessible and user-friendly way.
User Flow
Next, we carry out the main user flows to visualize the steps that the user follows to achieve each objective within our product.
This helped us better understand the user experience, identify critical points in the process, optimize product flow, and count the screens to be designed.
Moodboard - Fit with us
UX/UI & Graphic Designer
Moodboard
Moodboard
Moodboard
Moodboard
A moodboard has been used to represent FitWithUs visual identity and communicate its values and objectives. To create this moodboard, we selected colors, images, typography, visual design of other similar applications and an overall style to reflect the personality of the academy and fit its image.
A moodboard has been used to represent FitWithUs visual identity and communicate its values and objectives. To create this moodboard, we selected colors, images, typography, visual design of other similar applications and an overall style to reflect the personality of the academy and fit its image.
A moodboard has been used to represent FitWithUs visual identity and communicate its values and objectives. To create this moodboard, we selected colors, images, typography, visual design of other similar applications and an overall style to reflect the personality of the academy and fit its image.
Foundations - Fit with us
UX/UI & Graphic Designer
Foundations
01
Typography
The choice of this typeface is the result of the search for a typeface with strength and consistency that would represent the essence of sport. He opted for this Sans Serif, with geometric shapes and a robust image, as well as having the ability to be legible both in long texts and in titles, where it becomes more powerful.
02
Colors
The choice of the colors green and blue as primary colors is due to their association with well-being and health. Secondary colors are a decreasing palette that has been selected for caption text, inactive elements, card backgrounds, and other elements. The dominant colors are black and white, defined for backgrounds and texts.
Foundations
01
Typography
The choice of this typeface is the result of the search for a typeface with strength and consistency that would represent the essence of sport. He opted for this Sans Serif, with geometric shapes and a robust image, as well as having the ability to be legible both in long texts and in titles, where it becomes more powerful.
02
Colors
The choice of the colors green and blue as primary colors is due to their association with well-being and health. Secondary colors are a decreasing palette that has been selected for caption text, inactive elements, card backgrounds, and other elements. The dominant colors are black and white, defined for backgrounds and texts.
Foundations
01
Typography
The choice of this typeface is the result of the search for a typeface with strength and consistency that would represent the essence of sport. He opted for this Sans Serif, with geometric shapes and a robust image, as well as having the ability to be legible both in long texts and in titles, where it becomes more powerful.
02
Colors
The choice of the colors green and blue as primary colors is due to their association with well-being and health. Secondary colors are a decreasing palette that has been selected for caption text, inactive elements, card backgrounds, and other elements. The dominant colors are black and white, defined for backgrounds and texts.
Foundations
01
Typography
The choice of this typeface is the result of the search for a typeface with strength and consistency that would represent the essence of sport. He opted for this Sans Serif, with geometric shapes and a robust image, as well as having the ability to be legible both in long texts and in titles, where it becomes more powerful.
02
Colors
The choice of the colors green and blue as primary colors is due to their association with well-being and health. Secondary colors are a decreasing palette that has been selected for caption text, inactive elements, card backgrounds, and other elements. The dominant colors are black and white, defined for backgrounds and texts.
Foundations
01
Typography
The choice of this typeface is the result of the search for a typeface with strength and consistency that would represent the essence of sport. He opted for this Sans Serif, with geometric shapes and a robust image, as well as having the ability to be legible both in long texts and in titles, where it becomes more powerful.
02
Colors
The choice of the colors green and blue as primary colors is due to their association with well-being and health. Secondary colors are a decreasing palette that has been selected for caption text, inactive elements, card backgrounds, and other elements. The dominant colors are black and white, defined for backgrounds and texts.
Design System - Fit with us
UX/UI & Graphic Designer
Design System
The goal of creating the Design System is to generate visual and user experience consistency in this product, improve design and development efficiency, reduce design errors, and improve product quality.
Design System
The goal of creating the Design System is to generate visual and user experience consistency in this product, improve design and development efficiency, reduce design errors, and improve product quality.
Design System
The goal of creating the Design System is to generate visual and user experience consistency in this product, improve design and development efficiency, reduce design errors, and improve product quality.
Design System
The goal of creating the Design System is to generate visual and user experience consistency in this product, improve design and development efficiency, reduce design errors, and improve product quality.
Design System
The goal of creating the Design System is to generate visual and user experience consistency in this product, improve design and development efficiency, reduce design errors, and improve product quality.
Next Steps - Fit with us
UX/UI & Graphic Designer
Next Steps
The next step to be developed is the integration of a functionality in which users can meet and contact other users of the gym and thus create a community, with the aim that people do not leave their routine aside.
Next Steps
The next step to be developed is the integration of a functionality in which users can meet and contact other users of the gym and thus create a community, with the aim that people do not leave their routine aside.
Next Steps
The next step to be developed is the integration of a functionality in which users can meet and contact other users of the gym and thus create a community, with the aim that people do not leave their routine aside.
Next Steps
The next step to be developed is the integration of a functionality in which users can meet and contact other users of the gym and thus create a community, with the aim that people do not leave their routine aside.
Next Steps
The next step to be developed is the integration of a functionality in which users can meet and contact other users of the gym and thus create a community, with the aim that people do not leave their routine aside.
UX/UI Cases
UX/UI & Graphic Designer
Pick another case
Pick another case
Pick another case
Pick another case
Pick another case
Contact me
UX/UI & Graphic Designer
Jacobo García Peñalver
UX/UI & Graphic Designer
