{"id":"l-fig-4-4","courseId":"figma-ui-design","lang":"en","kind":"lesson","summary":"Run and take part in a design critique that improves work against its goals, then turn Steady into a portfolio case study that shows your decisions, reasons and trade-offs.","html":"<p>Steady is designed, systematised, prototyped, checked and handed off. Two skills turn that work into better work and into a job: running a critique where people can improve the design, and telling the story of the design in a case study. Both come down to the habit this course has pushed since Lesson 1.1, giving the <em>because</em>.</p>\n<h2 id=\"sec-1\" tabindex=\"-1\">What a critique is for</h2>\n<p>A design critique is a structured conversation about whether a design achieves its goals. It is not a vote on whether people like it, and it is not approval. Sofia runs every critique the same way, in about thirty minutes:</p>\n<ol>\n<li><strong>Context (3 minutes).</strong> The presenter states the goal (“someone checks off a habit in a few seconds”), the stage (“structure is settled; styling is early”) and the feedback they want (“Is the progress block worth its space?”).</li>\n<li><strong>Silent review (5 minutes).</strong> Everyone looks at the design or clicks through the prototype and writes notes. Silence stops the loudest person from setting the agenda.</li>\n<li><strong>Feedback round (15 minutes).</strong> Each person shares their most important points, tied to the goal. A facilitator keeps time and steers away from solving everything live.</li>\n<li><strong>Wrap-up (5 minutes).</strong> The presenter summarises what they heard and what they will look into. Decisions happen after, not in the room.</li>\n</ol>\n<h2 id=\"sec-2\" tabindex=\"-1\">Giving feedback that helps</h2>\n<p>Useful feedback has three parts: an <strong>observation</strong>, its likely <strong>effect</strong> on the user or goal, and a <strong>question or suggestion</strong>. Compare:</p>\n<div class=\"table-wrap\" role=\"region\" aria-label=\"Scrollable table\" tabindex=\"0\"><table><thead>\n<tr>\n<th>Not useful</th>\n<th>Useful</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>“I don’t like the teal.”</td>\n<td>“The teal is on the check buttons and the header icon, so I tried to tap the icon. Could the accent be reserved for actions?”</td>\n</tr>\n<tr>\n<td>“It feels cluttered.”</td>\n<td>“I count five left edges on Habit detail, so my eye jumps around. Could the stats align with the calendar?”</td>\n</tr>\n<tr>\n<td>“Use a bottom tab bar like Instagram.”</td>\n<td>“I couldn’t find Stats from Habit detail. Would a persistent tab bar help, or is Back enough?”</td>\n</tr>\n</tbody>\n</table></div><p>The useful versions are about the user, not about the critic’s taste, and they leave room for the designer to find the best fix. Phrasing as a question also admits that you might be missing context.</p>\n<h2 id=\"sec-3\" tabindex=\"-1\">Receiving feedback</h2>\n<p>When it is your work on the screen, your job is to understand, not to win. Ask clarifying questions (“What did you expect to happen when you tapped Custom?”), write everything down, and say thank you. Do not explain why every point is wrong; if your reasoning is good, it will survive the notes you review afterwards. After the session, sort the notes into act on, investigate and decline, and decline with a reason you could say out loud.</p>\n<aside class=\"callout callout-mistake\" role=\"note\"><p class=\"callout-title\"><svg class=\"icon \" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\"/><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/></svg><span><span class=\"callout-kind\">Common mistake</span><span class=\"callout-sep\" aria-hidden=\"true\"> · </span>Critique as approval</span></p>\n<p>When a critique turns into stakeholders approving or rejecting a design, people stop raising half-formed concerns and start lobbying for preferences. Keep critique and sign-off separate. A critique’s output is a list of questions for the designer, not a decision.</p>\n</aside>\n<h2 id=\"sec-4\" tabindex=\"-1\">The case study</h2>\n<p>A portfolio case study is how a hiring manager decides whether you think like a designer. They will spend a few minutes on it, so the structure has to carry them quickly to the thinking.</p>\n<figure class=\"diagram\"><svg class=\"diagram-svg\" focusable=\"false\" viewBox=\"0 0 680 280\" role=\"img\" aria-labelledby=\"l-fig-4-4-t1\"><defs><marker id=\"arrow-l-fig-4-4-1\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"7\" markerHeight=\"7\" orient=\"auto-start-reverse\"><path d=\"M0 0 L10 5 L0 10 z\" class=\"d-arrowhead\"/></marker></defs>\n  <title id=\"l-fig-4-4-t1\">Six stacked blocks from top to bottom: one-minute summary, problem and constraints, key decisions with before and after, the system, testing and what changed, and reflection. The decisions block is the largest.</title>\n  <rect class=\"d-box-primary\" x=\"140\" y=\"10\" width=\"400\" height=\"34\" rx=\"8\"/>\n  <text class=\"d-label-strong\" x=\"340\" y=\"32\" text-anchor=\"middle\">One-minute summary</text>\n  <rect class=\"d-box\" x=\"140\" y=\"52\" width=\"400\" height=\"34\" rx=\"8\"/>\n  <text class=\"d-label\" x=\"340\" y=\"74\" text-anchor=\"middle\">Problem, role and constraints</text>\n  <rect class=\"d-box-accent\" x=\"140\" y=\"94\" width=\"400\" height=\"80\" rx=\"8\"/>\n  <text class=\"d-label-strong\" x=\"340\" y=\"128\" text-anchor=\"middle\">Key decisions: before, after, because</text>\n  <text class=\"d-label-muted\" x=\"340\" y=\"152\" text-anchor=\"middle\">hierarchy, spacing system, dark mode, check button</text>\n  <rect class=\"d-box\" x=\"140\" y=\"182\" width=\"400\" height=\"34\" rx=\"8\"/>\n  <text class=\"d-label\" x=\"340\" y=\"204\" text-anchor=\"middle\">The system: kit, variables, modes</text>\n  <rect class=\"d-box\" x=\"140\" y=\"224\" width=\"195\" height=\"44\" rx=\"8\"/>\n  <text class=\"d-label\" x=\"237\" y=\"251\" text-anchor=\"middle\">Testing</text>\n  <rect class=\"d-box-success\" x=\"345\" y=\"224\" width=\"195\" height=\"44\" rx=\"8\"/>\n  <text class=\"d-label\" x=\"442\" y=\"251\" text-anchor=\"middle\">Reflection</text>\n</svg><figcaption>A case study structure that puts decisions first</figcaption></figure>\n<p>For Steady, that means:</p>\n<ul>\n<li><strong>Summary</strong>: one paragraph and one hero image. “A habit tracker designed so checking off a habit takes under three seconds; includes a themed component kit and a tested check-in flow.”</li>\n<li><strong>Problem and constraints</strong>: who it is for, what the Today screen must do, and your role (“solo practice project, designed in Figma over six weeks”).</li>\n<li><strong>Key decisions</strong>: three or four, each with before and after images and the reason. Draft one versus draft two of the Today screen from Lesson 1.2 is perfect material, and so is the dark-mode accent that had to change because teal/700 failed on the dark surface.</li>\n<li><strong>The system</strong>: the kit page, the semantic variables in both modes, and one component’s properties, showing you can design for reuse.</li>\n<li><strong>Testing</strong>: what you tested, with whom, and what changed as a result. Five friends using the prototype counts if you say so plainly.</li>\n<li><strong>Reflection</strong>: what you would do differently and what you would test next.</li>\n</ul>\n<aside class=\"callout callout-tip\" role=\"note\"><p class=\"callout-title\"><svg class=\"icon \" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5\"/><path d=\"M9 18h6\"/><path d=\"M10 22h4\"/></svg><span><span class=\"callout-kind\">Tip</span><span class=\"callout-sep\" aria-hidden=\"true\"> · </span>Honesty is a feature</span></p>\n<p>Label practice work as practice work. “I tested with five people; three missed the add button, so I moved it” is more convincing than an unverifiable “conversion up 40%”. Interviewers ask follow-up questions, and real reasoning holds up.</p>\n</aside>\n<p>You started this course by asking what someone opening Steady needs in the next five seconds. Keep asking that question, keep giving the <em>because</em>, and every screen you design will be easier to critique, build and explain.</p>\n","toc":[{"id":"sec-1","text":"What a critique is for","level":2},{"id":"sec-2","text":"Giving feedback that helps","level":2},{"id":"sec-3","text":"Receiving feedback","level":2},{"id":"sec-4","text":"The case study","level":2}],"takeaways":["A critique judges work against its goals, not against personal taste, and the presenter sets the goal, the stage and the kind of feedback wanted.","Useful feedback names an observation, its likely effect on the user, and a question or suggestion.","When receiving feedback, ask questions and take notes instead of defending; you decide afterwards what to act on.","A case study tells the story of decisions (problem, constraints, options, choice and reason), not a gallery of finished screens.","Be honest about scope and evidence; a practice project with clear reasoning beats invented metrics."],"further":[{"title":"Design Critiques (Nielsen Norman Group)","url":"https://www.nngroup.com/articles/design-critiques/"}],"quiz":[{"q":"<p>Which critique comment on Steady’s Today screen is most useful?</p>","options":[{"text":"I don’t love the teal; can we try purple?","why":"This is a preference with no link to the goal. It invites a taste debate instead of an improvement."},{"text":"It looks great, ship it.","why":"Encouraging, but it gives the designer nothing to act on and skips the point of a critique."},{"text":"The streak numbers are the same weight as the habit names, so I read streaks first; could they drop to Caption?","why":"Correct. It names an observation, its effect on reading, and a concrete question tied to the hierarchy goal."},{"text":"Other habit apps use a calendar view on this screen.","why":"Competitor patterns can inform, but without saying what problem the calendar would solve, it is not actionable."}],"answer":2},{"q":"<p>You present the New habit sheet and a colleague says the frequency chips are confusing. What is the best response in the moment?</p>","options":[{"text":"Explain the research behind the chips until they agree.","why":"Defending shuts down the feedback. You lose the chance to learn what confused them."},{"text":"Ask what they expected to happen when they read “Custom”, and note the answer.","why":"Correct. A clarifying question turns a vague reaction into something specific you can evaluate later."},{"text":"Change the chips to a dropdown on the spot.","why":"Redesigning live skips thinking. Collect feedback first and decide afterwards."},{"text":"Thank them and move on without writing anything down.","why":"Politeness is good, but unrecorded feedback is usually forgotten by the next day."}],"answer":1},{"q":"<p>Your Steady case study has twelve polished screenshots and a paragraph of introduction. What would most improve it for a hiring manager?</p>","options":[{"text":"Adding before and after versions of key decisions, each with the reason for the change.","why":"Correct. Hiring managers look for how you think. Visible decisions and reasons show that better than polish."},{"text":"Adding more screenshots so the project looks bigger.","why":"Volume hides the thinking. Most reviewers skim, so fewer, explained images work better."},{"text":"Adding user metrics such as “engagement up 40%”.","why":"Steady is a practice project with no real users. Invented metrics damage trust the moment someone asks about them."},{"text":"Removing all text so the visuals speak for themselves.","why":"Visuals show what you made, not why. The reasoning is what distinguishes a designer."}],"answer":0}],"exercise":{"kind":"choice","multiple":true,"options":["color-only-calendar","edges-stats","edit-weight","like-purple","competitor","looks-good"],"correct":["color-only-calendar","edges-stats","edit-weight"],"title":"Pick the feedback worth giving","prompt":"<p>In Steady’s design critique, the presenter shares Habit detail and says: “Goal: someone sees at a glance how consistent they have been. I want feedback on the calendar and the overall hierarchy.”</p>\n<p>:::figure Habit detail, version 2\n<svg viewBox=\"0 0 360 420\" role=\"img\" aria-labelledby=\"ex1\"></p>\n  <title id=\"ex1\">A Habit detail screen: a back arrow and the title Read 20 pages, a large 12-day streak number, a calendar grid of past check-ins with done days filled and missed days the same shape in a different tint, two stat cards, and an Edit habit button at the bottom.</title>\n  <rect class=\"d-box\" x=\"40\" y=\"10\" width=\"280\" height=\"400\" rx=\"24\"/>\n  <text class=\"d-label\" x=\"60\" y=\"48\">‹</text>\n  <text class=\"d-label-strong\" x=\"80\" y=\"48\">Read 20 pages</text>\n  <text class=\"d-label-strong\" x=\"180\" y=\"100\" text-anchor=\"middle\" style=\"font-size:34px\">12</text>\n  <text class=\"d-label-muted\" x=\"180\" y=\"122\" text-anchor=\"middle\">day streak</text>\n  <rect class=\"d-box-primary\" x=\"64\" y=\"140\" width=\"28\" height=\"28\" rx=\"6\"/>\n  <rect class=\"d-box-primary\" x=\"100\" y=\"140\" width=\"28\" height=\"28\" rx=\"6\"/>\n  <rect class=\"d-box-warn\" x=\"136\" y=\"140\" width=\"28\" height=\"28\" rx=\"6\"/>\n  <rect class=\"d-box-primary\" x=\"172\" y=\"140\" width=\"28\" height=\"28\" rx=\"6\"/>\n  <rect class=\"d-box-primary\" x=\"208\" y=\"140\" width=\"28\" height=\"28\" rx=\"6\"/>\n  <rect class=\"d-box-warn\" x=\"244\" y=\"140\" width=\"28\" height=\"28\" rx=\"6\"/>\n  <rect class=\"d-box-primary\" x=\"64\" y=\"176\" width=\"28\" height=\"28\" rx=\"6\"/>\n  <rect class=\"d-box-primary\" x=\"100\" y=\"176\" width=\"28\" height=\"28\" rx=\"6\"/>\n  <rect class=\"d-box-primary\" x=\"136\" y=\"176\" width=\"28\" height=\"28\" rx=\"6\"/>\n  <rect class=\"d-box\" x=\"172\" y=\"176\" width=\"28\" height=\"28\" rx=\"6\"/>\n  <rect class=\"d-box-accent\" x=\"64\" y=\"226\" width=\"100\" height=\"70\" rx=\"10\"/>\n  <text class=\"d-label\" x=\"114\" y=\"266\" text-anchor=\"middle\">Best: 30</text>\n  <rect class=\"d-box-accent\" x=\"176\" y=\"226\" width=\"120\" height=\"70\" rx=\"10\"/>\n  <text class=\"d-label\" x=\"236\" y=\"266\" text-anchor=\"middle\">Rate: 86%</text>\n  <rect class=\"d-box-primary\" x=\"64\" y=\"340\" width=\"232\" height=\"44\" rx=\"12\"/>\n  <text class=\"d-label-strong\" x=\"180\" y=\"367\" text-anchor=\"middle\">Edit habit</text>\n</svg>\n:::\n<p>Select <strong>every</strong> comment that is useful critique for this goal.</p>\n","hints":["Useful critique has an observation, an effect on the user or goal, and a question or suggestion.","Check each comment against the presenter’s stated goal and requested feedback.","Three comments tie a specific observation to the goal. Three are taste, a pattern without a reason, or praise without content."],"explanation":"<p>The useful comments each pair an <strong>observation</strong> with an <strong>effect</strong> and a <strong>question</strong>. Missed days differ from done days only by tint, which fails people with color vision deficiencies and undermines the “at a glance” goal (Lesson 4.2). The two stat cards have different widths and do not line up with the calendar, adding edges the eye has to process (Lesson 1.2). The full-width primary Edit habit button carries the screen’s strongest accent, competing with the streak and calendar for a rare action. “I prefer purple” is taste, “another app has a chart” names a pattern without a problem, and “looks good” gives the designer nothing to act on.</p>\n","checkLabels":{},"optionText":{"color-only-calendar":{"text":"Missed days differ from done days only by tint, so I could not tell them apart at a glance. Could missed days get an x or an outline?","why":"Correct. A concrete observation, a clear effect on the stated goal, and a suggestion that also fixes a color-only problem."},"edges-stats":{"text":"The two stat cards are different widths and do not line up with the calendar edges, so my eye jumps. Could they span two columns each?","why":"Correct. It ties alignment to how the screen reads and proposes a fix the designer can evaluate."},"edit-weight":{"text":"The Edit habit button is the strongest thing on screen, but editing is rare here. Would a secondary or ghost button let the streak lead?","why":"Correct. It questions the hierarchy against the goal of seeing consistency first."},"like-purple":{"text":"I would personally prefer purple for the calendar squares.","why":"A preference without a link to the goal. It starts a taste debate rather than improving the design."},"competitor":{"text":"Another habit app shows a line chart here instead.","why":"It names a pattern but not the problem it would solve for this goal, so the designer cannot judge it."},"looks-good":{"text":"This looks really clean. Nice work.","why":"Kind, but a critique is for improving the work. Praise is more useful when it says what works and why."}}},"words":767,"readMinutes":4}