UX/UI Open Short Course

<div class='pixel-art-container-title'><div class='title-of-game'></div></div> <h3 id='subtitle'>a UXUI short course game by UX/UI Open</h3> You are a Junior UXUI Designer at Sleepify.com You are in a meeting. Your boss tells you, "We need to develop an app to help our users fall asleep faster." What do you do? Click Below 👇 You [[brief the developers|Devs]] or you [[start the user research|User Research]]

<h4 class='design-thinking'>EMPATHIZE - DEFINE - <span class='ideate'>[IDEATE]</span> - PROTOTYPE - TEST</h4> You sit down with the developers. You explain your idea. They spend months building the app. After 12 months of heavy coding, the app is finally [[ready to launch|App is a failure]]!

<h4 class='design-thinking'><span class='empathize'>[EMPATHIZE]</span> - DEFINE - IDEATE - PROTOTYPE - TEST</h4> The Project Manager warns you, "We are short on time and budget for user research." You decide to send a survey [[to potential users|Survey]] as it does not cost much money anyway. You decide to save time and [[ask your colleagues what they think|Ask your colleagues what they think]]. After all, they are also going to sleep every night!

<div class='pixel-art-container'><div class='skull'></div></div> <div class='pixel-art-container-3'><div class='game-over'></div></div><div class='app-fail'>The app has failed</div> A week after it was released, only ten people downloaded the app. Failing to reach the target of 100 000 monthly active users, the project gets canceled after six months. Sleepify has lost 2 million dollars in the process. <div class='info'>FEEDBACK: You did not consult your users and developed an app that does not answer the users' true problems. Next time, try to have a more user-centered approach.</div> [[Start again|Start]]

<h4 class='design-thinking'>EMPATHIZE - <span class='define'>[DEFINE]</span> - IDEATE - PROTOTYPE - TEST</h4> You talk to Joe from Marketing, Sandra from Accounting, and Maurice from HR. They provide [[actionable insights|Actionable Insights]] regarding their sleeping habits.

<h4 class='design-thinking'>EMPATHIZE - DEFINE - <span class='ideate'>[IDEATE]</span> - PROTOTYPE - TEST</h4> You imagine a solution based on your colleagues' insights. The Project Manager loves your solution and wants to launch it now. You [[brief the developers|Devs after colleagues]] right away. You test the solution with [[your colleagues|Test after colleagues]] or with [[potential users|Test after users]] first.

<h4 class='design-thinking'>EMPATHIZE - DEFINE - <span class='ideate'>[IDEATE]</span> - PROTOTYPE - TEST</h4> You sit down with the developers. You explain what you learned during research. You describe how the solution should work. They spend months building the app. After six months of development, the app is finally [[ready to launch|App is a small failure]]

<div class='pixel-art-container'><div class='skull'></div></div> <div class='pixel-art-container-3'><div class='game-over'></div></div><div class='app-fail'>The app has failed</div> A week after it was released, only 100 people downloaded the app. Failing to reach the target of 100 000 monthly active users, the project gets canceled after six months. Sleepify has lost 2 million dollars in the process. <div class='info'>FEEDBACK: Your colleagues aren't the right type of user to interview. Coworkers are often biased toward a company project. Next time, find users similar to your target audience.</div> [[Start again|Start]]

<h4 class='design-thinking'>EMPATHIZE - DEFINE - IDEATE - PROTOTYPE - <span class='test'>[TEST]</span></h4> To save more time you decide to [[test with your friends and family|Test with your friends and family]] or you decide to [[test with real users->Testers]]

<h4 class='design-thinking'><span class='empathize'>[EMPATHIZE]</span> - DEFINE - IDEATE - PROTOTYPE - TEST</h4> <div class='survey'>SURVEY RESULTS: - **85% of the respondents** have trouble falling asleep every night - **70% of the respondents** always bring their smartphone to the bedroom at night - **90% of respondents** are counting sheep to fall asleep</div> You convince the Project Manager to [[develop an app|Create a counting sheep app]] to help users count sheep. You convince the Project Manager that you need to [[do more user research|User Interviews]] to better understand the problem.

<div class='pixel-art-container'><div class='sheep pixel-animation'></div></div> <div class='pixel-art-container-3'><div class='game-over'></div></div><div class='app-fail'>The app has failed</div> At first, the app was a relative success. A week after it was released, 10 000 people downloaded the app on their phones. But users quickly lose interest. They say the idea is funny, but it has no effect on their sleep quality. The number of monthly active users quickly drops to zero. The project gets canceled. Sleepify has lost 1.5 million dollars in the process. <div class='info'>FEEDBACK: You based the app's concept on user research. This explains the app's initial popularity. However, you did not delve deeply enough into the users' true problem and jumped too quickly to a solution. You should conduct additional research into the problem by conducting user interviews.</div> [[Start again|Start]]

<h4 class='design-thinking'><span class='empathize'>[EMPATHIZE]</span> - DEFINE - IDEATE - PROTOTYPE - TEST</h4> You believe that speaking with users will help you understand why they have trouble falling asleep at night. You decide to interview: [[10 users|User Interview process]] [[100 users]]

<div class='pixel-art-container'><div class='skull'></div></div> <div class='pixel-art-container-3'><div class='game-over'></div></div><div class='app-fail'>The app has failed</div> You spend 6 months interviewing everybody. You're more confused than ever and you feel exhausted. You spent the entire project budget on your research. The project is canceled. <div class='info'>FEEDBACK: You don't have to talk to a lot of users during user interviews to figure out what the origin of the problem is. Go back to the previous step and talk to fewer users this time to see what happens.</div> Go back to the [[previous step ->User Interviews]] Or [[Start again|Start]] from the start

<h4 class='design-thinking'>EMPATHIZE - DEFINE - IDEATE - PROTOTYPE - <span class='test'>[TEST]</span></h4> You test your prototype on Mary your best friend from high-school, Eric your brother and Granny Ethel, your grandmother. They provide [[actionable feedback|Actionable feedback with friends]]

<h4 class='design-thinking'>EMPATHIZE - DEFINE - IDEATE - PROTOTYPE - <span class='test'>[TEST]</span></h4> You decide to talk to: [[5 users]] [[50 users]]

<h4 class='design-thinking'>EMPATHIZE - <span class='define'>[DEFINE]</span> - IDEATE - PROTOTYPE - TEST</h4> You present the result of your research to your team. <div class='survey'>PROBLEM TO FIX How might we improve the sleep quality of our users so that they feel fully rested and ready to face the day?</div> At the end of the presentation, the Project Manager tells you: 'Okay, that makes perfect sense. We must prioritize sleep quality over sleep quantity. Now I better understand what our users are going through.' You start working on [[the design of the user interface of the app]] <script> clearInterval(intervalId); intervalId = null; </script>

<h4 class='design-thinking'>EMPATHIZE - DEFINE - IDEATE - PROTOTYPE - <span class='test'>[TEST]</span></h4> You make changes to your design based on the feedback collected during testing. Then you share the prototype with the developers. They spend a few months coding the app. After 3 months, the app is finally [[ready to be launched|App is okay with friends]]!

<div class='pixel-art-container'><div class='skull'></div></div> <div class='pixel-art-container-3'><div class='game-over'></div></div><div class='app-fail'>The app has failed</div> At first, the app was a relative success. A week after it was released, 10 000 people downloaded the app on their phones. But users quickly complain that the app is too difficult to use. The number of monthly active users quickly drops to zero. The project gets canceled. Sleepify has lost 1.5 million dollars in the process. <div class='info'>FEEDBACK: Your family and friends aren't the right people to test with. People you know often favor your work. They want to please you and won't be negative during usability testing. Next time, find users similar to your target audience.</div> Go back to the [[previous step |Testing]] Or [[start again|Start]]

<h4 class='design-thinking'>EMPATHIZE - DEFINE - IDEATE - <span class='prototype'>[PROTOTYPE]</span> - TEST</h4> You present the final wireframes to your team. The Project Manager loves your solution and wants to launch it now. You are excited to see your solution live, [[let's start the development phase!|Devs no testing]] You would rather [[test a prototype of the solution|Testing]] before starting development

<div class='pixel-art-container'><div class='skull'></div></div> <div class='pixel-art-container-3'><div class='game-over'></div></div><div class='app-fail'>The app has failed</div> At first, the app was a relative success. A week after it was released, 10 000 people downloaded the app on their phones. But users quickly complain that the app is too difficult to use. The number of monthly active users quickly drops to zero. The project gets canceled. Sleepify has lost 1.5 million dollars in the process. <div class='info'>FEEDBACK: You chose not to test the app's usability which had a bad impact on its ease of use. Usability testing is done by real users, who may find problems that you, the designer, can no longer see because you know the app too well.</div> Go back to the [[previous step|Prototype]] [[Start again|Start]]

<div class='pixel-art-container'> <div class='trophy'></div> </div> <div class='pixel-art-container-2'> <div class='you-win'></div> </div><div class='winner'>The app is a success!</div> On the day it was released, 10 000 people downloaded the app on their phones. After one week, there are now 100 000 people using the app. Users praise the design, the ease of use, and all of the great features. Millions of people use the app every night to improve their sleep. Sleepify makes millions while the rest of the world is asleep. You are promoted to the position of Senior UXUI Designer. [[Start again|Start]]

<h4 class='design-thinking'>EMPATHIZE - DEFINE - <span class='ideate'>[IDEATE]</span> - PROTOTYPE - TEST</h4> You work all night on the design of the log in screen. Next morning you review 2 options. Which one do you think is better? [[Left|Left 1]] or [[right|Right 1]] <div class='scorecontainer'><span class='score'>UI score: $uiScore / 6</span></div><img src="figma-1.jpg" style="width:100%;"> (set: $uiScore to 0)

<h4 class='design-thinking'>EMPATHIZE - DEFINE - <span class='ideate'>[IDEATE]</span> - PROTOTYPE - TEST</h4> <div class='error'>The right option is better. On the left design, the play button appears to be inactive.</div> [[Next|Figma 3]] <div class='scorecontainer'><span class='score'>UI score: $uiScore / 6</span> </div><img src="figma-2.jpg" style="width:100%;"> [[Next|Figma 3]]

<h4 class='design-thinking'>EMPATHIZE - DEFINE - <span class='ideate'>[IDEATE]</span> - PROTOTYPE - TEST</h4> <div class='success'>The left option is better. 'Log In' and 'Sign In' are two distinct operations that must be illustrated visually. 'Log In' is more important because users will only sign in once, but will log in every time they use our product.</div> [[Next|Figma 2]] (set: $uiScore to it + 1)<div class='scorecontainer'><span class='score'>UI score: $uiScore / 6</span></div><img src="figma-1.jpg" style="width:100%;"> [[Next|Figma 2]]

<h4 class='design-thinking'>EMPATHIZE - DEFINE - <span class='ideate'>[IDEATE]</span> - PROTOTYPE - TEST</h4> <div class='error'>The left option is better. 'Log In' and 'Sign In' are two distinct operations that must be illustrated visually. 'Log In' is more important because users will only sign in once, but will log in every time they use our product.</div> [[Next|Figma 2]] <div class='scorecontainer'><span class='score'>UI score: $uiScore / 6</span></div><img src="figma-1.jpg" style="width:100%;"> [[Next|Figma 2]]

<h4 class='design-thinking'>EMPATHIZE - DEFINE - <span class='ideate'>[IDEATE]</span> - PROTOTYPE - TEST</h4> <div class='success'>The left option is better. The alignment of the buttons on the right design is incorrect. The play button is not properly positioned with the next and previous buttons.</div> [[Next|Figma 4]] (set: $uiScore to it + 1)<div class='scorecontainer'><span class='score'>UI score: $uiScore / 6</span></div><img src="figma-3.jpg" style="width:100%;"> [[Next|Figma 4]]

<h4 class='design-thinking'>EMPATHIZE - DEFINE - <span class='ideate'>[IDEATE]</span> - PROTOTYPE - TEST</h4> <div class='error'>The left option is better. The alignment of the buttons on the right design is incorrect. The play button is not properly positioned with the next and previous buttons.</div> [[Next|Figma 4]] <div class='scorecontainer'><span class='score'>UI score: $uiScore / 6</span></div><img src="figma-3.jpg" style="width:100%;"> [[Next|Figma 4]]

<h4 class='design-thinking'>EMPATHIZE - DEFINE - <span class='ideate'>[IDEATE]</span> - PROTOTYPE - TEST</h4> <div class='success'>The right option is better. On the left design, the play button appears to be inactive.</div> [[Next|Figma 3]] (set: $uiScore to it + 1)<div class='scorecontainer'><span class='score'>UI score: $uiScore / 6</span></div><img src="figma-2.jpg" style="width:100%;"> [[Next|Figma 3]]

<h4 class='design-thinking'>EMPATHIZE - DEFINE - <span class='ideate'>[IDEATE]</span> - PROTOTYPE - TEST</h4> <div class='success'>The left option is better. Take a look at the text. Writing everything in uppercases is not a good idea because content in all capitals is more difficult for users to read.</div> [[Next|Figma 5]] (set: $uiScore to it + 1)<div class='scorecontainer'><span class='score'>UI score: $uiScore / 6</span></div><img src="figma-4.jpg" style="width:100%;"> [[Next|Figma 5]]

<h4 class='design-thinking'>EMPATHIZE - DEFINE - <span class='ideate'>[IDEATE]</span> - PROTOTYPE - TEST</h4> <div class='error'>The left option is better. Take a look at the text. Writing everything in uppercases is not a good idea because content in all capitals is more difficult for users to read.</div> [[Next|Figma 5]] <div class='scorecontainer'><span class='score'>UI score: $uiScore / 6</span></div><img src="figma-4.jpg" style="width:100%;"> [[Next|Figma 5]]

<h4 class='design-thinking'>EMPATHIZE - DEFINE - <span class='ideate'>[IDEATE]</span> - PROTOTYPE - TEST</h4> <div class='success'>The left option is better. On the right design, the tree, umbrella, and coffee icons are too large.</div> [[Next|Figma 6]] (set: $uiScore to it + 1)<div class='scorecontainer'><span class='score'>UI score: $uiScore / 6</span></div><img src="figma-5.jpg" style="width:100%;"> [[Next|Figma 6]]

<h4 class='design-thinking'>EMPATHIZE - DEFINE - <span class='ideate'>[IDEATE]</span> - PROTOTYPE - TEST</h4> <div class='error'>The left option is better. On the right design, the tree, umbrella, and coffee icons are too large.</div> [[Next|Figma 6]] <div class='scorecontainer'><span class='score'>UI score: $uiScore / 6</span></div><img src="figma-5.jpg" style="width:100%;"> [[Next|Figma 6]]

<h4 class='design-thinking'>EMPATHIZE - DEFINE - IDEATE - PROTOTYPE - <span class='test'>[TEST]</span></h4> Your colleagues provide you with valuable insights to improve the solution. Next, you sit down with the developers. You explain what you learned during research and testing. You describe how the solution should work. They spend months building the app. After six months of development, the app is finally [[ready to launch|App is a small failure after test]]

<div class='pixel-art-container'><div class='skull'></div></div> <div class='pixel-art-container-3'><div class='game-over'></div></div><div class='app-fail'>The app has failed</div> A week after it was released, only 1000 people have downloaded the app. Failing to reach the target of 100 000 monthly active users, the project gets canceled after six months. Sleepify has lost 2 million dollars in the process. <div class='info'>FEEDBACK: Your colleagues aren't the right people to interview and test with. Coworkers are often biased toward a company project. Next time, find users similar to your target audience.</div> [[Start again|Start]]

<h4 class='design-thinking'>EMPATHIZE - DEFINE - IDEATE - PROTOTYPE - <span class='test'>[TEST]</span></h4> The users provide you with valuable insights to improve the solution. Next, you sit down with the developers. You explain what you learned during research and testing. You describe how the solution should work. They spend months building the app. After six months of development, the app is finally [[ready to launch|App is a small failure after user test]]

<div class='pixel-art-container'><div class='skull'></div></div> <div class='pixel-art-container-3'><div class='game-over'></div></div><div class='app-fail'>The app has failed</div> At first, the app was a relative success. A week after it was released, 10 000 people downloaded the app on their phones. But users quickly lose interest. They say the app is easy to use, but it has no effect on their sleep quality. The number of monthly active users quickly drops to zero. The project gets canceled. Sleepify has lost 1.5 million dollars in the process. <div class='info'>FEEDBACK: Your colleagues aren't the right people to interview. Coworkers are often biased toward a company project. Next time, find users similar to your target audience. You tested the app's user experience with a small group of users to determine how user-friendly and enjoyable it is. This explains the initial interest in the app. Try to remember this for next time.</div> [[Start again|Start]]

<h4 class='design-thinking'>EMPATHIZE - DEFINE - IDEATE - PROTOTYPE - <span class='test'>[TEST]</span></h4> You test your prototype to 5 users. They provide [[actionable feedback|Actionable feedback with users]]

<div class='pixel-art-container'><div class='skull'></div></div> <div class='pixel-art-container-3'><div class='game-over'></div></div><div class='app-fail'>The app has failed</div> You spend six months testing the app with fifty different users. You are more confused than ever, you are exhausted, and you used all the money of the project. The App gets dropped. <div class='info'>FEEDBACK: When doing usability testing, you only need to test with a handful of user to be able to find around 80% of usability issues. Go back to the previous step and test with fewer users this time to see what happens.</div> Go back to the [[previous step |Testers]] Or [[start again|Start]]

<h4 class='design-thinking'>EMPATHIZE - DEFINE - <span class='ideate'>[IDEATE]</span> - PROTOTYPE - TEST</h4> The next day you design two different options for the sleepcast screen. Which one do you think is better? [[Left|Left 2]] or [[right|Right 2]] <div class='scorecontainer'><span class='score'>UI score: $uiScore / 6</span></div><img src="figma-2.jpg" style="width:100%;">

<h4 class='design-thinking'>EMPATHIZE - DEFINE - <span class='ideate'>[IDEATE]</span> - PROTOTYPE - TEST</h4> You are trying two different approaches for the audio player. Which one do you think will appeal better to users? [[Left|Left 3]] or [[right|Right 3]] <div class='scorecontainer'><span class='score'>UI score: $uiScore / 6</span></div><img src="figma-3.jpg" style="width:100%;">

<h4 class='design-thinking'>EMPATHIZE - DEFINE - <span class='ideate'>[IDEATE]</span> - PROTOTYPE - TEST</h4> You are trying two different approaches for the audio player. Which one do you think is better? [[Left|Left 4]] or [[right|Right 4]] <div class='scorecontainer'><span class='score'>UI score: $uiScore / 6</span></div><img src="figma-4.jpg" style="width:100%;">

<h4 class='design-thinking'>EMPATHIZE - DEFINE - <span class='ideate'>[IDEATE]</span> - PROTOTYPE - TEST</h4> You review 2 options you designed. Which one do you think is better? [[Left|Left 5]] or [[right|Right 5]] <div class='scorecontainer'><span class='score'>UI score: $uiScore / 6</span></div><img src="figma-5.jpg" style="width:100%;">

<h4 class='design-thinking'>EMPATHIZE - DEFINE - <span class='ideate'>[IDEATE]</span> - PROTOTYPE - TEST</h4> All your wireframes are ready. Your final score is: <div class='scorecontainer'> <span class='score'>UI score: $uiScore / 6</span> </div> You are ready to [[present your work|Prototype]] to your team.

{ (set: $right to true) }

<div class='transcript'>User interview transcript</div> <div id="chat-box"> { (for: each _response, ...$responses)[ (if: $right is true)[ <div class='right speech bubble-right'>_response</div> (set: $right to false) ] (else:) [ <div class='left speech bubble-left'>_response</div> (set: $right to true) ] ] } </div>

<h4 class='design-thinking'><span class='empathize'>[EMPATHIZE]</span> - DEFINE - IDEATE - PROTOTYPE - TEST</h4> {  (set: $responses to it + (a: (passage:)'s name) )  (set: $responses to it + (a: "It really depends. Certain nights I'm pretty successful at sleeping 8 hours. Other times, not so much.") )  (display: "Messenger") } <div class='error max-width-600'>FEEDBACK: Don't lead with your questions. You want honest answers from users. You don't want your questions to dictate their answers. Ask your questions in a way that does not favor a certain answer. For example, instead of asking, <i>'Did you sleep well last night?'</i> ask <i>'How did you sleep last night?'</i></div> =><= Let me ask you another question. [[How many hours of sleep did you get last night?]]

<h4 class='design-thinking'><span class='empathize'>[EMPATHIZE]</span> - DEFINE - IDEATE - PROTOTYPE - TEST</h4> {  (set: $responses to (a: (passage:)'s name) )  (set: $responses to it + (a: "No, I'm not sleeping well. I'm having trouble falling asleep at night.") )  (display: "Messenger") } <div class='error max-width-600'>FEEDBACK: This answer provides little information. Ask open-ended questions. People are more likely to answer open-ended questions with full, detailed sentences and stories. Closed-ended questions usually yield yes or no answers. For example, instead of: <i>'Do you use an alarm clock?'</i> ask: <i>'How do you wake up?'</i></div> =><= Let me rephrase my question. [[What is your bedtime routine?]]

<h4 class='design-thinking'><span class='empathize'>[EMPATHIZE]</span> - DEFINE - IDEATE - PROTOTYPE - TEST</h4> {  (set: $responses to it + (a: (passage:)'s name) )  (set: $responses to it + (a: "My work is definitely affected by my poor sleep quality. I'm often tired and groggy during the day, and it's hard to focus on tasks. And it can even create stressful situations at home. I miss the time when I could sleep like a baby.") )  (display: "Messenger") } =><= At the end of this interview, you have a [[better understanding of the problem]].

<h4 class='design-thinking'><span class='empathize'>[EMPATHIZE]</span> - DEFINE - IDEATE - PROTOTYPE - TEST</h4> {  (set: $responses to it + (a: (passage:)'s name) )  (set: $responses to it + (a: "I don't know...") )  (display: "Messenger") } <div class='error max-width-600'>FEEDBACK: More often than not, users don't know what they really need. Avoid asking your users to design their own solutions. There is a famous adage about innovation attributed to Henry Ford: “If I had asked people what they wanted, they would have said faster horses.”</div> =><= Let me rephrase my question. [[What impact does this have on your life?]]

<h4 class='design-thinking'><span class='empathize'>[EMPATHIZE]</span> - DEFINE - IDEATE - PROTOTYPE - TEST</h4> {  (set: $responses to (a: (passage:)'s name) )  (set: $responses to it + (a: "Every night I brush my teeth, wash my face, and put on my pajamas. I usually read for a little bit before I turn off the light. I go to bed at around 10 pm and try to sleep for 8 hours.") )  (display: "Messenger") } |= [[How many hours of sleep did you get last night?]] =| [[How successful are you in getting eight hours of sleep?]] |==|

<h4 class='design-thinking'><span class='empathize'>[EMPATHIZE]</span> - DEFINE - IDEATE - PROTOTYPE - TEST</h4> You are about to ask the first question during a user interview. Which of the two will it be? |= [[What is your bedtime routine?]] =| [[Are you sleeping well?]] |==| <script> currHeight = 0; intervalId = setInterval(()=> { const chatBox = document.querySelector("#chat-box"); if (!chatBox || chatBox.scrollHeight === currHeight) { return; } currHeight = chatBox.scrollHeight; chatBox.scroll(0, currHeight); }, 50) </script>

<h4 class='design-thinking'><span class='empathize'>[EMPATHIZE]</span> - DEFINE - IDEATE - PROTOTYPE - TEST</h4> {  (set: $responses to it + (a: (passage:)'s name) )  (set: $responses to it + (a: "Yes, I think this is a great idea! When will it launch?") )  (display: "Messenger") } <div class='error max-width-600'>FEEDBACK: This is not a good question to ask during user interviews. Humans usually want to make other people happy. Even if the users don't like your idea, they probably won't say anything to hurt your feelings.</div> =><= Let me rephase my question. [[Why do you say 'It doesn't matter how much sleep I get'?]]

<h4 class='design-thinking'><span class='empathize'>[EMPATHIZE]</span> - DEFINE - IDEATE - PROTOTYPE - TEST</h4> {  (set: $responses to it + (a: (passage:)'s name) )  (set: $responses to it + (a: "I got about four hours of sleep last night. Which isn't much. But oddly enough, it doesn't seem to matter how much sleep I get.") )  (display: "Messenger") } |= [[Why do you say 'It doesn't matter how much sleep I get'?]] |= [[We want to develop an app to help people fall asleep faster. Would you use it?]] |==|

<h4 class='design-thinking'>EMPATHIZE - DEFINE - <span class='ideate'>[IDEATE]</span> - PROTOTYPE - TEST</h4> You review 2 options you designed. Which one do you think is better? [[Left|Left 6]] or [[right|Right 6]] <div class='scorecontainer'><span class='score'>UI score: $uiScore / 6</span></div><img src="figma-6.jpg" style="width:100%;">

<h4 class='design-thinking'>EMPATHIZE - DEFINE - <span class='ideate'>[IDEATE]</span> - PROTOTYPE - TEST</h4> <div class='error'>The right option is better. On the left design, t he umbrella icon is outlined while all other icons on the screen are filled. You should never use different icon styles on the same screen.</div> [[Next|Figma final]] <div class='scorecontainer'><span class='score'>UI score: $uiScore / 6</span></div><img src="figma-6.jpg" style="width:100%;"> [[Next|Figma final]]

<h4 class='design-thinking'>EMPATHIZE - DEFINE - <span class='ideate'>[IDEATE]</span> - PROTOTYPE - TEST</h4> <div class='success'>The right option is better. On the left design, t he umbrella icon is outlined while all other icons on the screen are filled. You should never use different icon styles on the same screen.</div> [[Next|Figma final]] (set: $uiScore to it + 1)<div class='scorecontainer'><span class='score'>UI score: $uiScore / 6</span></div><img src="figma-6.jpg" style="width:100%;"> [[Next|Figma final]]