- User Interface Design is a hybrid role and can bring together concepts from interaction design, visual design, information architecture and even Front End Development.
- User Interface Design is a hybrid role and can bring together concepts from interaction design, visual design, information architecture and even Front End Development.
- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
## UI Challenge - Watches
### UI Challenge - Watches
### Instructions
### Instructions
@ -332,7 +332,7 @@ Don't forget to:
- You can use existing Libraries by browsing the Figma community resources.
- You can use existing Libraries by browsing the Figma community resources.
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
## UI Challenge - Flight
### UI Challenge - Flight
### Instructions
### Instructions
@ -362,7 +362,7 @@ Don't forget to:
- [Figma article about Symbols and Variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants).
- [Figma article about Symbols and Variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants).
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
## UI Challenge - Spotify
### UI Challenge - Spotify
### Instructions
### Instructions
@ -394,7 +394,7 @@ Don't forget to:
- [Figma article about Symbols and Variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants).
- [Figma article about Symbols and Variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants).
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
- [Example here with Nintendo.com](https://www.figma.com/file/ahSnWRZeKBO62oJDiXltxY/UI-III---Ex-2) (The screenshots date back to nov 2021. They may differ from the current version of [Nintendo.com](http://Nintendo.com) but the rules are the same).
- [Example here with Nintendo.com](https://www.figma.com/file/ahSnWRZeKBO62oJDiXltxY/UI-III---Ex-2) (The screenshots date back to nov 2021. They may differ from the current version of [Nintendo.com](http://Nintendo.com) but the rules are the same).
## Accessibility (website)
### Accessibility (website)
### Instructions
### Instructions
@ -106,7 +106,7 @@ Don't forget to:
- Error states.
- Error states.
- etc.
- etc.
## Accessibility (app)
### Accessibility (app)
### Instructions
### Instructions
@ -144,7 +144,7 @@ Don't forget to:
- Error states
- Error states
- etc.
- etc.
## Breadcrumbs
### Breadcrumbs
### Instructions
### Instructions
@ -167,7 +167,7 @@ Don't forget to:
- [What are breadcrumbs?](https://www.seoptimer.com/blog/breadcrumbs-website/)
- [What are breadcrumbs?](https://www.seoptimer.com/blog/breadcrumbs-website/)
- [What is a radio button?](https://www.justinmind.com/blog/radio-button-design-examples/)
- [What is a radio button?](https://www.justinmind.com/blog/radio-button-design-examples/)
## Calendars
### Calendars
### Instructions
### Instructions
@ -232,7 +232,7 @@ Don't forget to:
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
## Time pickers
### Time pickers
### Instructions
### Instructions
@ -251,7 +251,7 @@ Don't forget to:
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
## Micro-interactions
### Micro-interactions
### Instructions
### Instructions
@ -282,7 +282,7 @@ Don't forget to:
- [Why use micro-interactions in your design](https://hike.one/update/why-use-micro-animations-in-your-design)
- [Why use micro-interactions in your design](https://hike.one/update/why-use-micro-animations-in-your-design)
- [Micro-interactions: why, when, and how to use them to boost the UX](https://uxdesign.cc/micro-interactions-why-when-and-how-to-use-them-to-boost-the-ux-17094b3baaa0)
- [Micro-interactions: why, when, and how to use them to boost the UX](https://uxdesign.cc/micro-interactions-why-when-and-how-to-use-them-to-boost-the-ux-17094b3baaa0)
“To ask open-ended questions is the best approach, but it’s easy to get into the weeds in data analysis when every answer is a paragraph or two of prose. Users quickly tire of answering many open-ended questions, which usually require a lot of typing and explanation.” Norman Nielsen Group
“To ask open-ended questions is the best approach, but it’s easy to get into the weeds in data analysis when every answer is a paragraph or two of prose. Users quickly tire of answering many open-ended questions, which usually require a lot of typing and explanation.” Norman Nielsen Group
## Run interviews
### Run interviews
### Instructions
### Instructions
@ -68,7 +68,7 @@ Then, write down the script on a written document, and give elements of context
- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
## Affinity diagram & Empathy map
### Affinity diagram & Empathy map
### Instructions
### Instructions
@ -108,7 +108,7 @@ Don't forget to:
Remember, you are not the user, so your opinions are not absolute truth.
Remember, you are not the user, so your opinions are not absolute truth.
## Problem statement
### Problem statement
### Instructions
### Instructions
@ -137,7 +137,7 @@ You may use the "How Might We" exercise in pairs.
"Out of clutter, find simplicity. From discord, find harmony. In the middle of difficulty, lies opportunity.’ Albert Einstein
"Out of clutter, find simplicity. From discord, find harmony. In the middle of difficulty, lies opportunity.’ Albert Einstein
## Ideation
### Ideation
### Instructions
### Instructions
@ -180,7 +180,7 @@ Quote:
- "Brainstorming means using the brain to storm a creative problem. Do so in commando fashion, with each stormer attacking the same objective.’ Alex Faickney Osborn
- "Brainstorming means using the brain to storm a creative problem. Do so in commando fashion, with each stormer attacking the same objective.’ Alex Faickney Osborn
## User flow
### User flow
### Instructions
### Instructions
@ -210,7 +210,7 @@ Don't forget to:
"Each use case is represented as a sequence of simple steps, beginning with a user’s goal and ending when that goal is fulfilled.’ Usability.gov
"Each use case is represented as a sequence of simple steps, beginning with a user’s goal and ending when that goal is fulfilled.’ Usability.gov
@ -41,7 +41,7 @@ Conduct a heuristic analysis on **one** of these websites:
'If you think design is expensive, you should look at the cost of bad design’ Ralf Speth | Former CEO Jaguar Land Rover
'If you think design is expensive, you should look at the cost of bad design’ Ralf Speth | Former CEO Jaguar Land Rover
## Site map
### Site map
### Instructions
### Instructions
@ -81,7 +81,7 @@ Stick to the website you have chosen in the previous exercise "heuristics" and d
"The organization, search, and navigation systems that help people to complete tasks, find what they need, and understand what they’ve found’ Peter Morville | Information Architecture for the WWW.
"The organization, search, and navigation systems that help people to complete tasks, find what they need, and understand what they’ve found’ Peter Morville | Information Architecture for the WWW.
## JTBD
### JTBD
### Instructions
### Instructions
@ -121,7 +121,7 @@ And remember: You are not your user!
- "Documenting the what and why of each element promotes organization and makes the handoff to the development team much smoother." UX Booth
- "Documenting the what and why of each element promotes organization and makes the handoff to the development team much smoother." UX Booth
- "When we buy a product, we essentially "hire" something to get a job done. If it does the job well, when we are confronted with the same job, we hire that same product again. And if the product does a crummy job, we "fire" it and look around for something else we might hire to solve the problem." Clayton M Christensen
- "When we buy a product, we essentially "hire" something to get a job done. If it does the job well, when we are confronted with the same job, we hire that same product again. And if the product does a crummy job, we "fire" it and look around for something else we might hire to solve the problem." Clayton M Christensen
## Card sorting
### Card sorting
### Instructions
### Instructions
@ -168,7 +168,7 @@ Don't forget to:
- [10 things to know about card sorting](http://www.measuringu.com/blog/card-sorting.php)
- [10 things to know about card sorting](http://www.measuringu.com/blog/card-sorting.php)
- [Card sorting: a definitive guide](http://boxesandarrows.com/card-sorting-a-definitive-guide/)
- [Card sorting: a definitive guide](http://boxesandarrows.com/card-sorting-a-definitive-guide/)
## Music label wireframes
### Music label wireframes
### Instructions
### Instructions
@ -218,7 +218,7 @@ Vocabulary:
- Figma.
- Figma.
## Test protocol
### Test protocol
### Instructions
### Instructions
@ -257,7 +257,7 @@ Don't forget to:
- You need to detect: How many errors do users make? How severe are these errors? How easily can they recover from the errors?
- You need to detect: How many errors do users make? How severe are these errors? How easily can they recover from the errors?
- Design needs to fail.Failure is even a necessary step, but ideally it should happen before a product is launched, during the prototype and test phases
- Design needs to fail.Failure is even a necessary step, but ideally it should happen before a product is launched, during the prototype and test phases
- “UX Strategy lies at the intersection of UX and business. It provides a much better chance of creating successful products. It enables teams to see the “Big Picture” to achieve the business goals under uncertain conditions” Jamie Levy | UX Strategy: How to Devise Innovative Digital Products That People Want
- “UX Strategy lies at the intersection of UX and business. It provides a much better chance of creating successful products. It enables teams to see the “Big Picture” to achieve the business goals under uncertain conditions” Jamie Levy | UX Strategy: How to Devise Innovative Digital Products That People Want
- UX Strategy is the method by which you validate that your solution solves a problem for real customers in a dynamic marketplace because the market is constantly changing.
- UX Strategy is the method by which you validate that your solution solves a problem for real customers in a dynamic marketplace because the market i#s constantly changing.
## Empathy
## Empathy
@ -111,7 +111,7 @@ Don't forget to:
- With 5 to 10 criteria
- With 5 to 10 criteria
- 10 organizations appear on the table
- 10 organizations appear on the table
## Define
### Define
### Instructions
### Instructions
@ -158,7 +158,7 @@ Don't forget to:
- The "I want to" part involves a practical action.
- The "I want to" part involves a practical action.
- The "So I can" part involves a psychological or emotional purpose.
- The "So I can" part involves a psychological or emotional purpose.
## Problem statement
### Problem statement
### Instructions
### Instructions
@ -199,7 +199,7 @@ Design is about solving problems. Fall in Love with the Problem, Not the Solutio
- How might make sure Pierre doesn’t get drunk the night before the race?
- How might make sure Pierre doesn’t get drunk the night before the race?
- Out of scope —> This is not about dehydration, nor about running.
- Out of scope —> This is not about dehydration, nor about running.
## Ideation
### Ideation
### Instructions
### Instructions
@ -221,7 +221,7 @@ Don't forget to:
- Use as many tools as needed, and make sure you do all the process in 4 working days!
- Use as many tools as needed, and make sure you do all the process in 4 working days!
- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
## Prototype
### Prototype
### Instructions
### Instructions
@ -265,7 +265,7 @@ Don't forget to:
- High-Fidelity: Wireframes with color, styles, graphical details, and micro-interactions - [Example here](https://miro.medium.com/max/1400/1*Xn0HSKAvhr4TZzC9lN5udw.gif)
- High-Fidelity: Wireframes with color, styles, graphical details, and micro-interactions - [Example here](https://miro.medium.com/max/1400/1*Xn0HSKAvhr4TZzC9lN5udw.gif)
- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
- "77% of users return to content and information sites because of ease-of-use. Only 22% return because the site belongs to a favorite brand." Forrester
- "77% of users return to content and information sites because of ease-of-use. Only 22% return because the site belongs to a favorite brand." Forrester
## Wireframes animation
### Wireframes animation
### Instructions
### Instructions
@ -106,7 +106,7 @@ Don't forget to:
- [Efficiently Manage Your Designs - How Mockplus State Page Helps To View & Manage Multiple State](https://help.mockplus.com/p/372)
- [Efficiently Manage Your Designs - How Mockplus State Page Helps To View & Manage Multiple State](https://help.mockplus.com/p/372)
## Test on features
### Test on features
### Instructions
### Instructions
@ -140,7 +140,7 @@ Don't forget to:
- [The art of guerrilla usability testing](http://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/)
- [The art of guerrilla usability testing](http://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/)
- [How to write a user testing report that people will actually read](https://uxdesign.cc/how-to-write-a-user-testing-report-that-people-will-actually-read-652d15d2f92e)
- [How to write a user testing report that people will actually read](https://uxdesign.cc/how-to-write-a-user-testing-report-that-people-will-actually-read-652d15d2f92e)
- 'Always design a thing in its larger context: a chair in a room, a room in a house, a house in an environment, an environment in a city plan’ Eero Sarrinen | Knoll
- 'Always design a thing in its larger context: a chair in a room, a room in a house, a house in an environment, an environment in a city plan’ Eero Sarrinen | Knoll
- Creating a great design isn’t just about understanding what the user wants. It’s also about understanding and delivering on what the business needs.
- Creating a great design isn’t just about understanding what the user wants. It’s also about understanding and delivering on what the business needs.#
## Surveys
## Surveys
@ -99,7 +99,7 @@ Here are the recommended steps:
- “Surveys measure and categorize attitudes or collect self-reported data that can help track or discover important issues to address.” Norman Nielsen Group
- “Surveys measure and categorize attitudes or collect self-reported data that can help track or discover important issues to address.” Norman Nielsen Group
- Surveys are not accurate in providing behavioral data because USERS OMIT STEPS IN THE MIDDLE AND MEMORIES ARE FAULTY.
- Surveys are not accurate in providing behavioral data because USERS OMIT STEPS IN THE MIDDLE AND MEMORIES ARE FAULTY.
## Broadcast strategy
### Broadcast strategy
### Instructions
### Instructions
@ -141,7 +141,7 @@ Once your strategy is prepared, run it!
- [How to get more survey responses](https://rafflepress.com/how-to-get-more-survey-responses/)
- [How to get more survey responses](https://rafflepress.com/how-to-get-more-survey-responses/)
## Interviews
### Interviews
### Instructions
### Instructions
@ -183,7 +183,7 @@ Here are the recommended steps :
- [How to design better products through user interviews](https://uxdesign.cc/how-to-design-better-products-through-user-interviews-4c5142bb1fc4)
- [How to design better products through user interviews](https://uxdesign.cc/how-to-design-better-products-through-user-interviews-4c5142bb1fc4)
- [Asking the right questions](https://uxdesign.cc/asking-the-right-questions-on-user-research-interviews-and-testing-427261742a67)
- [Asking the right questions](https://uxdesign.cc/asking-the-right-questions-on-user-research-interviews-and-testing-427261742a67)
## Personas
### Personas
### Instructions
### Instructions
@ -215,7 +215,7 @@ Your persona card should include common trends amongst the people you got data f
- "If you design for everyone, you delight no one."
- "If you design for everyone, you delight no one."
- "A good user persona is the one based on user research, without regard to how many attributes we can describe."
- "A good user persona is the one based on user research, without regard to how many attributes we can describe."
## User journey
### User journey
### Instructions
### Instructions
@ -254,7 +254,7 @@ Most articles you'll find will be about user journeys or customer journeys. Keep
- “More options = More problems.” Scott Belsky | VP of Product & Community Adobe
- “More options = More problems.” Scott Belsky | VP of Product & Community Adobe
- "A customer journey map is a visualization of the process that a person goes through in order to accomplish a goal. It’s used for understanding and addressing customer needs and pain points’ Norman Nielsen Group
- "A customer journey map is a visualization of the process that a person goes through in order to accomplish a goal. It’s used for understanding and addressing customer needs and pain points’ Norman Nielsen Group
- [The myth of brainstorming](https://uxdesign.cc/the-myth-of-brainstorming-8517e02facc0?sk=995d601cbf988d574e86dd71364cb92f)
- [The myth of brainstorming](https://uxdesign.cc/the-myth-of-brainstorming-8517e02facc0?sk=995d601cbf988d574e86dd71364cb92f)
- [Ideation method: Worst possible idea](https://www.interaction-design.org/literature/article/learn-how-to-use-the-best-ideation-methods-worst-possible-idea)
- [Ideation method: Worst possible idea](https://www.interaction-design.org/literature/article/learn-how-to#-use-the-best-ideation-methods-worst-possible-idea)
## Ideation B
## Ideation B
@ -102,7 +102,7 @@ Pay attention not to use the same ideation technique as in Ex 1!
- [The myth of brainstorming](https://uxdesign.cc/the-myth-of-brainstorming-8517e02facc0?sk=995d601cbf988d574e86dd71364cb92f)
- [The myth of brainstorming](https://uxdesign.cc/the-myth-of-brainstorming-8517e02facc0?sk=995d601cbf988d574e86dd71364cb92f)
- [Ideation method: Worst possible idea](https://www.interaction-design.org/literature/article/learn-how-to-use-the-best-ideation-methods-worst-possible-idea)
- [Ideation method: Worst possible idea](https://www.interaction-design.org/literature/article/learn-how-to-use-the-best-ideation-methods-worst-possible-idea)
## Ideation C
### Ideation C
### Instructions
### Instructions
@ -151,7 +151,7 @@ Pay attention not to use the same ideation technique as in Ex 2!
- [The myth of brainstorming](https://uxdesign.cc/the-myth-of-brainstorming-8517e02facc0?sk=995d601cbf988d574e86dd71364cb92f)
- [The myth of brainstorming](https://uxdesign.cc/the-myth-of-brainstorming-8517e02facc0?sk=995d601cbf988d574e86dd71364cb92f)
- [Ideation method: Worst possible idea](https://www.interaction-design.org/literature/article/learn-how-to-use-the-best-ideation-methods-worst-possible-idea)
- [Ideation method: Worst possible idea](https://www.interaction-design.org/literature/article/learn-how-to-use-the-best-ideation-methods-worst-possible-idea)
## User flow
### User flow
### Instructions
### Instructions
@ -178,7 +178,7 @@ Don't forget to:
- [Site flows vs User Flows](https://uxmovement.com/wireframes/site-flows-vs-user-flows-when-to-use-which/)
- [Site flows vs User Flows](https://uxmovement.com/wireframes/site-flows-vs-user-flows-when-to-use-which/)
- [How to make a User Flow diagram](https://www.lucidchart.com/blog/how-to-make-a-user-flow-diagram)
- [How to make a User Flow diagram](https://www.lucidchart.com/blog/how-to-make-a-user-flow-diagram)
## Prototyping
### Prototyping
### Instructions
### Instructions
@ -219,7 +219,7 @@ Don't forget to:
- "To prototype your solution, you’ll need a temporary change of philosophy: from perfect to just enough, from long-term quality to temporary simulation."
- "To prototype your solution, you’ll need a temporary change of philosophy: from perfect to just enough, from long-term quality to temporary simulation."
- "The prototype is meant to answer questions, so keep it focused. You just need a real-looking facade to which customers can react."
- "The prototype is meant to answer questions, so keep it focused. You just need a real-looking facade to which customers can react."
## Animation
### Animation
### Instructions
### Instructions
@ -244,7 +244,7 @@ This exercise is to be made individually.
- [Efficiently Manage Your Designs - How Mockplus State Page Helps To View & Manage Multiple State](https://help.mockplus.com/p/372)
- [Efficiently Manage Your Designs - How Mockplus State Page Helps To View & Manage Multiple State](https://help.mockplus.com/p/372)
@ -4,7 +4,7 @@ Creation of an ecommerce platform for second-hand clothes on desktop and mobile
Bruno loves fashion. He loves buying clothes! As he is cautious with the environment, he prefers buying second-hand clothing. However, the existing platforms are not very user-friendly.
Bruno loves fashion. He loves buying clothes! As he is cautious with the environment, he prefers buying second-hand clothing. However, the existing platforms are not very user-friendly.
"I need to know more about the environmental impact of the pieces I buy. I’d like to know how old they are, where they are coming from, to measure their life and the amount of kilometres they have traveled. When a new pair of jeans arrive at the ready-to-wear store in Europe, they consumed approximately 11,000 litres of water and travelled 65,000 kilometres. I’d like to monitor that kind of data.’
"I need to know more about the environmental impact of the pieces I buy. I’d like to know how old they are, where they are coming from, to measure their life and the amount of kilometers they have traveled. When a new pair of jeans arrive at the ready-to-wear store in Europe, they consumed approximately 11,000 litres of water and traveled 65,000 kilometers. I’d like to monitor that kind of data.’
You gather a team of 3 to think and design a website and an app for second-hand products.
You gather a team of 3 to think and design a website and an app for second-hand products.