UX/UI Cases
UX/UI & Graphic Designer
Animal Farm - E-Commerce
Animal Farm:
Learning English
by hybrid way
The aim of the project is to help a language school to improve its online presence in order to be more competitive in the market. The key to the project was to understand the stakeholders, both the language school and the users, and to address their main issues.
Animal Farm - E-Commerce
Animal Farm:
Learning English by hybrid way
The aim of the project is to help a language school to improve its online presence in order to be more competitive in the market. The key to the project was to understand the stakeholders, both the language school and the users, and to address their main issues.
Animal Farm - E-Commerce
Animal Farm:
Learning English by hybrid way
The aim of the project is to help a language school to improve its online presence in order to be more competitive in the market. The key to the project was to understand the stakeholders, both the language school and the users, and to address their main issues.
Animal Farm - E-Commerce
Animal Farm:
Learning English
by hybrid way
The aim of the project is to help a language school to improve its online presence in order to be more competitive in the market. The key to the project was to understand the stakeholders, both the language school and the users, and to address their main issues.
Animal Farm - E-Commerce
Animal Farm:
Learning English by hybrid way
The aim of the project is to help a language school to improve its online presence in order to be more competitive in the market. The key to the project was to understand the stakeholders, both the language school and the users, and to address their main issues.
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
Graphic Construction - Animal Farm
UX/UI & Graphic Designer
UX Research - Animal Farm
UX/UI & Graphic Designer
UX Research
We addressed user empathy through a total of 7 interviews and 214 surveys and were able to collect valuable information from users. We were able to delve deeper into user responses and gain a more detailed understanding of their needs, wants and opinions, as well as collect quantitative data.
UX Research
We addressed user empathy through a total of 7 interviews and 214 surveys and were able to collect valuable information from users. We were able to delve deeper into user responses and gain a more detailed understanding of their needs, wants and opinions, as well as collect quantitative data.
UX Research
We addressed user empathy through a total of 7 interviews and 214 surveys and were able to collect valuable information from users. We were able to delve deeper into user responses and gain a more detailed understanding of their needs, wants and opinions, as well as collect quantitative data.
UX Research
We addressed user empathy through a total of 7 interviews and 214 surveys and were able to collect valuable information from users. We were able to delve deeper into user responses and gain a more detailed understanding of their needs, wants and opinions, as well as collect quantitative data.
UX Research
We addressed user empathy through a total of 7 interviews and 214 surveys and were able to collect valuable information from users. We were able to delve deeper into user responses and gain a more detailed understanding of their needs, wants and opinions, as well as collect quantitative data.
Affinity Diagram - Animal Farm
UX/UI & Graphic Designer
Affinity Diagram
The next step after extracting the research data is to make an affinity diagram to help us organise and classify the ideas and related information in order to be able to make decisions and plan the next steps in the design process.
Affinity Diagram
The next step after extracting the research data is to make an affinity diagram to help us organise and classify the ideas and related information in order to be able to make decisions and plan the next steps in the design process.
Affinity Diagram
The next step after extracting the research data is to make an affinity diagram to help us organise and classify the ideas and related information in order to be able to make decisions and plan the next steps in the design process.
Affinity Diagram
The next step after extracting the research data is to make an affinity diagram to help us organise and classify the ideas and related information in order to be able to make decisions and plan the next steps in the design process.
Affinity Diagram
The next step after extracting the research data is to make an affinity diagram to help us organise and classify the ideas and related information in order to be able to make decisions and plan the next steps in the design process.
User Persona - Animal Farm
UX/UI & Graphic Designer
User Persona
As a next step, we created a User Persona, Sofia. This helped us to understand her interests, motivations, needs and behaviours. This way we were able to better understand the target audience of "Animal Farm" and meet their expectations.
User Persona
As a next step, we created a User Persona, Sofia. This helped us to understand her interests, motivations, needs and behaviours. This way we were able to better understand the target audience of "Animal Farm" and meet their expectations.
User Persona
As a next step, we created a User Persona, Sofia. This helped us to understand her interests, motivations, needs and behaviours. This way we were able to better understand the target audience of "Animal Farm" and meet their expectations.
User Persona
As a next step, we created a User Persona, Sofia. This helped us to understand her interests, motivations, needs and behaviours. This way we were able to better understand the target audience of "Animal Farm" and meet their expectations.
User Persona
As a next step, we created a User Persona, Sofia. This helped us to understand her interests, motivations, needs and behaviours. This way we were able to better understand the target audience of "Animal Farm" and meet their expectations.
Empathy Map - Animal Farm
UX/UI & Graphic Designer
Empathy Map
Knowing the users in general, and Sofia in particular, all the qualitative data related to their behaviours, goals, thoughts and feelings were captured in an Empathy Map.
Empathy Map
Knowing the users in general, and Sofia in particular, all the qualitative data related to their behaviours, goals, thoughts and feelings were captured in an Empathy Map.
Empathy Map
Knowing the users in general, and Sofia in particular, all the qualitative data related to their behaviours, goals, thoughts and feelings were captured in an Empathy Map.
Empathy Map
Knowing the users in general, and Sofia in particular, all the qualitative data related to their behaviours, goals, thoughts and feelings were captured in an Empathy Map.
Empathy Map
Knowing the users in general, and Sofia in particular, all the qualitative data related to their behaviours, goals, thoughts and feelings were captured in an Empathy Map.
User Journey - Animal Farm
UX/UI & Graphic Designer
User Journey
By analysing Sofia's process of buying and choosing an English course, we configured her User Journey and located the friction points and understood where design opportunities and functionalities could be applied to each of these pain points.
User Journey
By analysing Sofia's process of buying and choosing an English course, we configured her User Journey and located the friction points and understood where design opportunities and functionalities could be applied to each of these pain points.
User Journey
By analysing Sofia's process of buying and choosing an English course, we configured her User Journey and located the friction points and understood where design opportunities and functionalities could be applied to each of these pain points.
User Journey
By analysing Sofia's process of buying and choosing an English course, we configured her User Journey and located the friction points and understood where design opportunities and functionalities could be applied to each of these pain points.
User Journey
By analysing Sofia's process of buying and choosing an English course, we configured her User Journey and located the friction points and understood where design opportunities and functionalities could be applied to each of these pain points.
Problem and Hypothesis Statement - Animal Farm
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 a focus on Sofia's real needs and ensured that the product meets those needs. With these problems identified, a hypothesis was formulated to test and evaluate possible solutions to determine whether they effectively solve the identified problem.
Establishing a clear problem allowed a focus on Sofia's real needs and ensured that the product meets those needs. With these problems identified, a hypothesis was formulated to test and evaluate possible solutions to determine whether they effectively solve the identified problem.
Establishing a clear problem allowed a focus on Sofia's real needs and ensured that the product meets those needs. With these problems identified, a hypothesis was formulated to test and evaluate possible solutions to determine whether they effectively solve the identified problem.
Establishing a clear problem allowed a focus on Sofia's real needs and ensured that the product meets those needs. With these problems identified, a hypothesis was formulated to test and evaluate possible solutions 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? - Animal Farm
UX/UI & Graphic Designer
How Might We?
How Might We?
How Might We?
How Might We?
This technique has helped to formulate open and inspiring questions that guide the generation of ideas and solutions. In this way we were able to focus the problem, come up with ideas to solve it and the opportunity to explore different perspectives to come up with possible solutions.
This technique has helped to formulate open and inspiring questions that guide the generation of ideas and solutions. In this way we were able to focus the problem, come up with ideas to solve it and the opportunity to explore different perspectives to come up with possible solutions.
This technique has helped to formulate open and inspiring questions that guide the generation of ideas and solutions. In this way we were able to focus the problem, come up with ideas to solve it and the opportunity to explore different perspectives to come up with possible solutions.
This technique has helped to formulate open and inspiring questions that guide the generation of ideas and solutions. In this way we were able to focus the problem, come up with ideas to solve it and the opportunity to explore different perspectives to come up with possible 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 - Animal Farm
UX/UI & Graphic Designer
MoSCoW Prioritisation
MoSCoW Prioritisation
MoSCoW Prioritisation
MoSCoW Prioritisation
The MoSCoW matrix helped to relativise and prioritise the functionalities derived from user demand, assessing their viability and thus helping to choose and focus on the most important ones.
The MoSCoW matrix helped to relativise and prioritise the functionalities derived from user demand, assessing their viability and thus helping to choose and focus on the most important ones.
Competitive Analisys - Animal Farm
UX/UI & Graphic Designer
Competitive Analisys
Competitive Analisys
Competitive Analisys
Competitive Analisys
At this point in the process we conducted a Competitive analysis to assess the strengths and weaknesses of current and potential competitors. This analysis provided both an offensive and defensive strategic context to identify opportunities and threats.
We compared both direct and indirect competitors with a similar product, to solve the same or similar needs in the same or similar context and to assimilate the way the benchmark academies work.
User Flow - Animal Farm
UX/UI & Graphic Designer
User Flow
A user flow would help us to prioritise functionalities and relativise between the aspects we wanted to include on the website, establishing a user flow that would allow Sofia to purchase a course adapted to her needs.
User Flow
A user flow would help us to prioritise functionalities and relativise between the aspects we wanted to include on the website, establishing a user flow that would allow Sofia to purchase a course adapted to her needs.
User Flow
A user flow would help us to prioritise functionalities and relativise between the aspects we wanted to include on the website, establishing a user flow that would allow Sofia to purchase a course adapted to her needs.
User Flow
A user flow would help us to prioritise functionalities and relativise between the aspects we wanted to include on the website, establishing a user flow that would allow Sofia to purchase a course adapted to her needs.
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.
Moodboard - Animal Farm
UX/UI & Graphic Designer
Moodboard
Moodboard
Moodboard
Moodboard
A moodboard has been used to represent Animal Farm's visual identity and communicate its values and objectives. To create this moodboard, we selected colors, images, typography, and an overall style to reflect the personality of the academy and fit its image.
A moodboard has been used to represent Animal Farm's visual identity and communicate its values and objectives. To create this moodboard, we selected colors, images, typography, and an overall style to reflect the personality of the academy and fit its image.
A moodboard has been used to represent Animal Farm's visual identity and communicate its values and objectives. To create this moodboard, we selected colors, images, typography, and an overall style to reflect the personality of the academy and fit its image.
A moodboard has been used to represent Animal Farm's visual identity and communicate its values and objectives. To create this moodboard, we selected colors, images, typography, and an overall style to reflect the personality of the academy and fit its image.
Sitemap - Animal Farm
UX/UI & Graphic Designer
Sitemap
Sitemap
Sitemap
Sitemap
The sitemap allowed us a clear and structured visualization of the information, which made it easier to navigate and search for content on the site.
The sitemap allowed us a clear and structured visualization of the information, which made it easier to navigate and search for content on the site.
The sitemap allowed us a clear and structured visualization of the information, which made it easier to navigate and search for content on the site.
The sitemap allowed us a clear and structured visualization of the information, which made it easier to navigate and search for content on the site.
By creating the sitemap, it was possible to identify navigation and organization problems on the site, and thanks to a Card Sorting process, it allowed them to be corrected before they affected the user experience. In this way we organized the content in a logical and coherent way, which improved the user experience and made it easier to navigate the site.
Foundations - Animal Farm
UX/UI & Graphic Designer
Foundations
01
Typography
With Lexend Deca, a source has been sought to improve reading competence. It is a geometric typeface that gives a modern character, as well as clean and aseptic design.
02
Colors
The color palette has been selected based on the colors related to the language academies. The blue and red colors try to convey seriousness, harmony, growth and initiative.
Foundations
01
Typography
With Lexend Deca, a source has been sought to improve reading competence. It is a geometric typeface that gives a modern character, as well as clean and aseptic design.
02
Colors
The color palette has been selected based on the colors related to the language academies. The blue and red colors try to convey seriousness, harmony, growth and initiative.
Foundations
01
Typography
With Lexend Deca, a source has been sought to improve reading competence. It is a geometric typeface that gives a modern character, as well as clean and aseptic design.
02
Colors
The color palette has been selected based on the colors related to the language academies. The blue and red colors try to convey seriousness, harmony, growth and initiative.
Foundations
01
Typography
With Lexend Deca, a source has been sought to improve reading competence. It is a geometric typeface that gives a modern character, as well as clean and aseptic design.
02
Colors
The color palette has been selected based on the colors related to the language academies. The blue and red colors try to convey seriousness, harmony, growth and initiative.
Foundations
01
Typography
With Lexend Deca, a source has been sought to improve reading competence. It is a geometric typeface that gives a modern character, as well as clean and aseptic design.
02
Colors
The color palette has been selected based on the colors related to the language academies. The blue and red colors try to convey seriousness, harmony, growth and initiative.
Design System - Animal Farm
UX/UI & Graphic Designer
Wireframes
Subsequently, Mid-fi wireframes were created in order to represent the basic functionalities of the user interface, without including design details. The goal was to save time and resources, focus on functionality, facilitate communication, and identify problems early in the process.
Wireframes
Subsequently, Mid-fi wireframes were created in order to represent the basic functionalities of the user interface, without including design details. The goal was to save time and resources, focus on functionality, facilitate communication, and identify problems early in the process.
Wireframes
Subsequently, Mid-fi wireframes were created in order to represent the basic functionalities of the user interface, without including design details. The goal was to save time and resources, focus on functionality, facilitate communication, and identify problems early in the process.
Wireframes
Subsequently, Mid-fi wireframes were created in order to represent the basic functionalities of the user interface, without including design details. The goal was to save time and resources, focus on functionality, facilitate communication, and identify problems early in the process.
Wireframes
Subsequently, Mid-fi wireframes were created in order to represent the basic functionalities of the user interface, without including design details. The goal was to save time and resources, focus on functionality, facilitate communication, and identify problems early in the process.
Next Steps - Animal Farm
UX/UI & Graphic Designer
Next Steps
01
Choose teachers
Add the option of being able to choose the teachers who are going to give you lessons.
02
Offer services
Enable local teachers to offer themselves in a network that connects them with students.
03
Student profile
Develop the student profile to allow the user to consult and manage their classes and resources.
Next Steps
01
Choose teachers
Add the option of being able to choose the teachers who are going to give you lessons.
02
Offer services
Enable local teachers to offer themselves in a network that connects them with students.
03
Student profile
Develop the student profile to allow the user to consult and manage their classes and resources.
Next Steps
01
Choose teachers
Add the option of being able to choose the teachers who are going to give you lessons.
02
Offer services
Enable local teachers to offer themselves in a network that connects them with students.
03
Student profile
Develop the student profile to allow the user to consult and manage their classes and resources.
Next Steps
01
Choose teachers
Add the option of being able to choose the teachers who are going to give you lessons.
02
Offer services
Enable local teachers to offer themselves in a network that connects them with students.
03
Student profile
Develop the student profile to allow the user to consult and manage their classes and resources.
Next Steps
01
Choose teachers
Add the option of being able to choose the teachers who are going to give you lessons.
02
Offer services
Enable local teachers to offer themselves in a network that connects them with students.
03
Student profile
Develop the student profile to allow the user to consult and manage their classes and resources.
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
