Log inStart Free for up to 5 Users
Complete skill matrix

UX/UI Designer Skill Matrix

A combined UX/UI design role spanning user research, UX strategy, UX design, UI craft, and the collaboration skills to work across a product team.

Use this matrix for freeExplore the full matrix

Free for teams of up to 5 people. No credit card required.

Career progression

One growth tree. Three clear positions.

This matrix connects 41 knowledge areas to clear expectations for Junior, Middle and Senior positions. 387 practical exercises show how that growth can be demonstrated.

A practical framework from expectations to evidence

The knowledge areas define the skills required for this role. Position requirements show the proficiency expected at each career step, and the exercises provide concrete ways to practise and demonstrate those skills.

41
Knowledge areas
387
Practical exercises
2
Skill groups
  1. 01

    Junior

    Expected proficiency mapped across 28 of 41 knowledge areas.

  2. 02

    Middle

    Expected proficiency mapped across 41 of 41 knowledge areas.

  3. 03

    Senior

    Expected proficiency mapped across 41 of 41 knowledge areas.

The complete framework

Explore every knowledge area

Technical Skills

01

Task analysis

Observing users in action to understand in detail how they perform their tasks and achieve their goals.

TargetNovice
Novice2 exercises
  • Read what to watch for and build a single-task observation guide

    Read NN/G's 'Task Analysis: Support Users in Achieving Their Goals,' www.nngroup.com/articles/task-analysis/, which covers observing a user at work in their own context and the two stages of task analysis: gathering information, then analyzing it. Pick one defined task you will later observe someone complete (e.g. 'renew a library book online' or 'reset a forgotten password on an app you use'), and write a short observation guide listing 3-5 specific things you'll watch for (each step taken, any pause or hesitation, anything said out loud) and exactly how you'll record each one (timestamped log, direct quote, screenshot). Evidence: the observation guide naming the task and your watch-for / record-it list.

  • Observe one user completing a defined task, checked by a reviewer

    Using the observation guide you wrote, have a teammate or mentor glance at it first and confirm it's specific enough to actually act on, adjusting it if they flag something vague. Then observe one real or test user (a friend, colleague, or yourself narrating as a first-time user) complete that single defined task on a product of your choice. Evidence: the guide with the reviewer's go-ahead noted, your raw observation notes, and a numbered list of the steps you saw the user take.

02

Data analysis

Systematically applying statistical and logical techniques to describe, condense, and evaluate data to inform design decisions.

TargetNovice
Novice2 exercises
  • Understand why skewed UX data needs the median, not the mean

    Read NN/G's 'Quantitative UX: Glossary,' www.nngroup.com/articles/quant-ux-glossary/, focusing on the entries for mean, median, and skewed distributions. Then write 2-3 sentences explaining, in your own words, why a researcher would report the median instead of the arithmetic mean for a skewed metric like task-completion time, and name one other UX metric you'd expect to be skewed the same way. Evidence: your 2-3 sentence explanation naming the second skewed metric.

  • Summarize a given dataset by following a supplied technique guide

    You're given this guide: 'If the data has no big outliers, report the mean. If one or two values are far larger than the rest, report the median instead, and call out the outlier separately.' Apply it to this dataset of 10 users' task-completion times in seconds: 22, 24, 21, 25, 23, 26, 24, 22, 90, 23. Follow the guide to decide whether the mean or the median is the right summary here, calculate that value plus the mode, and write one sentence naming the outlier you set aside from the headline number. Evidence: your calculations and the one-sentence outlier note, showing you followed the guide's rule rather than your own judgment call.

03

Competitive analysis

Assessing competitor products to see how they solve for similar user needs, whether direct competitors or products that share features.

TargetNovice
Novice2 exercises
  • Learn to sort competitors before comparing them

    Read Mayur Kshirsagar's 'A Brief Guide About Competitive Analysis' on Smashing Magazine, www.smashingmagazine.com/2018/08/guide-competitive-analysis/, which explains the difference between direct and indirect competitors and lays out a five-step analysis framework. Then pick a product category you use regularly (e.g. grocery-delivery apps, note-taking apps, budgeting apps) and list 2 direct competitors and 2 indirect competitors within it, writing one sentence per competitor explaining which bucket it belongs in and why. Evidence: your list of 4 competitors split into direct/indirect, each with its one-sentence justification.

  • Catalog a feature across competitors using a template

    Using this feature-comparison template (one row per competitor, with columns for competitor name, how the feature is implemented, one strength, and one weakness), catalog how 2–3 competitor products (real ones you can access, or ones you know well enough to describe from memory) handle a single named feature of your choosing, such as onboarding, search filters, or push-notification settings. Fill in every column for every competitor. Evidence: the completed template plus a one-sentence note naming the most notable difference you found between the products.

04

User Interviews

A one-on-one conversation, typically 30–60 minutes, used to probe a user's attitudes, beliefs, desires, and experiences in depth.

TargetNovice
Novice3 exercises
  • Learn what makes a question leading, then rewrite your own

    Read NN/g's 'Leading Questions,' www.nngroup.com/articles/leading-questions/, by Amy Schade, which covers the traps that turn a neutral interview question into one that feeds the participant the answer (rephrasing their words back at them, naming interface terms they haven't used, assuming a feeling). Then draft 6 questions for a one-on-one interview about a habit or routine you could ask someone about (how they manage groceries, plan a trip, or a similar everyday routine), review your own draft against the traps the article names, and rewrite any question that falls into one. Evidence: your original 6 questions, the rewritten versions, and one sentence per rewrite naming which trap the original fell into.

  • Learn what informed consent requires, then draft one for your script

    Read NN/g's 'Obtaining Consent for User Research,' www.nngroup.com/articles/informed-consent/, which explains that informed consent means the participant understands what the study involves and voluntarily agrees, and that a written statement covering purpose, activities, voluntary participation, and data handling protects both sides. Then write a short consent statement for a one-on-one interview on a topic of your choice, covering what the session is for, what will happen (recording, note-taking), that participation is voluntary and can stop at any time, and how you'll handle the recording and notes afterward. Evidence: your consent statement covering all four elements.

  • Run a scripted interview, obtaining consent, with a moderator observing

    Using the leading-question-checked script and the consent statement from the two exercises above, conduct the one-on-one interview with a real or stand-in participant (a colleague or friend can play the role) while a moderator or peer observes. Read the consent statement to the participant and get their explicit agreement before you start anything else, then run the script and take usable notes during the session without recording, or transcribe from a recording afterward if you'd rather keep eye contact with the participant. Evidence: the script and consent statement you used, your session notes, and a short note from the observing moderator on whether you obtained consent properly before starting and where you deviated from the script and why.

05

Usability testing

Observing representative users attempt real tasks on a product to identify usability problems and gather qualitative and quantitative feedback.

TargetNovice
Novice3 exercises
  • Learn the anatomy of a usability test session and word tasks to avoid bias

    Read NN/G's 'Usability Testing 101,' www.nngroup.com/articles/usability-testing-101/, which covers the three core elements of a session (facilitator, task, participant) and warns that small errors in task wording can influence how a participant performs. Sketch a 3-task outline for a usability test session on an app you use daily (e.g. ordering food, checking a bank balance): name each task, write one sentence defining what 'task success' looks like for it, and one sentence on how you worded the task so it doesn't nudge the participant toward a specific button or path. Evidence: the 3-task outline with a success criterion and a bias-avoidance sentence for each task.

  • Learn think-aloud prompting and write neutral re-engagement lines

    Read NN/G's 'Thinking Aloud: The #1 Usability Tool,' www.nngroup.com/articles/thinking-aloud-the-1-usability-tool/, which covers why moderators ask participants to think aloud and warns that an untrained facilitator's prompts can easily bias what the participant does next. Write 3 neutral prompts you'd use to re-engage a participant who has gone quiet mid-task, then write one sentence per prompt naming what would have made it leading (naming a UI element, hinting at a direction) and how your wording avoids that. Evidence: the 3 prompts, each with its avoid-leading sentence.

  • Run a scripted usability test session with a senior researcher observing

    Using the 3-task outline you wrote above, run the session with one real or test participant (a friend, colleague, or family member) while a senior researcher or mentor observes. Follow the script exactly, without deviating or offering unscripted help, and when the participant struggles use only the neutral re-engagement prompts you wrote rather than rescuing them or hinting at the answer. Note where they struggled: hesitation, wrong clicks, backtracking, or verbal frustration. Evidence: the script and notes, with at least 2 flagged struggle points, plus the observer's written confirmation that you stuck to the script and didn't lead the participant.

06

Empathy mapping

A collaborative exercise that synthesizes what a user segment says, thinks, does, and feels into a shared visual reference.

TargetNovice
Novice2 exercises
  • Learn to tell what a user says from what they actually think

    Read NN/G's 'Empathy Mapping: The First Step in Design Thinking,' www.nngroup.com/articles/empathy-mapping/, focusing on how it distinguishes the Says quadrant (verbatim quotes) from the Thinks quadrant (unspoken beliefs a user hesitates to say out loud). Then take this line from a user interview: 'I guess I just clicked around until something looked right,' and write 2-3 sentences on why it belongs in Thinks rather than Says even though it's a direct quote, and name the unspoken belief or feeling it's really pointing to. Evidence: your 2-3 sentence explanation naming the underlying unspoken belief.

  • Fill in a single-segment empathy map using a supplied says/thinks guide

    You're given this guide: 'If it's something the user stated in their own words, it's Says. If it's an inference about what they're thinking or feeling that they didn't say directly, it's Thinks or Feels.' Apply it to these six notes from a food-delivery app's support tickets and usage logs for one user segment: (1) 'This app never has my address saved right,' (2) the user abandoned checkout twice within two minutes each time, (3) 'Why do I have to re-enter my card every single time?,' (4) the user contacted support three times in one week about the same issue, (5) 'I don't think I'm doing this right,' (6) the user switched to a competitor app after the third failed attempt. Sort all six into the four quadrants (Says, Thinks, Does, Feels) using the guide, then for the two you found hardest to place, write one sentence each naming the second quadrant you nearly used instead. Evidence: the completed four-quadrant map and your two hard-call notes with reasoning.

07

Persona generation

Creating a research-based fictional representative of a user segment (their goals, behaviors, and context) to steer design decisions.

TargetNovice
Novice3 exercises
  • Ground a persona's goals and behaviors in someone else's research

    Read Taylor Dykes' 'Personas Make Users Memorable' on NN/G, www.nngroup.com/articles/persona/, on why every detail in a persona has to trace back to real user research rather than assumption. Then take a set of research findings you didn't personally gather (a teammate's interview notes, a project brief, or a research summary from a real or test project) and, for every goal or behavior you'd put into a persona, write down the exact research statement that justifies it. Evidence: your goal/behavior-to-research mapping table, with one specific research statement backing each claim.

  • Spot a stereotype hiding in a persona

    Read Page Laubheimer's 'Personas vs. Archetypes' on NN/G, www.nngroup.com/articles/personas-archetypes/, on how persona demographics and photos can implicitly exclude users and reinforce bias rather than reflect real behavior. Then find an existing persona (one from a public UX case study, a portfolio, or one your team already uses) and identify two details in it that read as a demographic assumption rather than a behavior-grounded fact (e.g. 'since she's a busy parent, she probably...'). Evidence: the two original lines plus a one-sentence note on why each risks stereotyping.

  • Draft a persona section from someone else's research, stereotype-checked

    Get a research summary you didn't personally collect: a teammate's interview notes, a published usability report, or a case-study write-up from a real or test project. Draft the goals, behaviors, and context section of one persona from it (skip the photo and any invented demographics), tagging every line to the specific part of the source research it came from. Before you finish, run each line through this check: does it describe something the research actually showed the person doing or wanting, or does it assume a trait because of their age, role, or background? Rewrite or drop any line that fails the check. Evidence: the draft persona section, your source tag on every line, and a note on any line you rewrote or dropped because it turned out to be an assumption rather than a research-backed fact.

08

User Journey Mapping

A graphical representation of every touchpoint a customer has with a product, capturing what they think, do, and feel over time.

TargetNovice
Novice2 exercises
  • Learn journey map's 5 named elements and where mindsets should come from

    Read NN/G's 'Journey Mapping 101,' www.nngroup.com/articles/journey-mapping-101/, and note the article's 5 named elements of a journey map (actor, scenario + expectations, journey phases, actions/mindsets/emotions, opportunities) and how it says the emotional curve is plotted as a single line across the phases. Then take this single-path flow (a customer returns a package through a shipping app's self-service flow: opens the app and taps 'Start a return', selects the order and reason, chooses drop-off or pickup, gets a QR return label, drops the package at a locker, and later gets a 'refund processed' notification) and label each of the six touchpoints with which of the article's 5 elements you'd be capturing there. Then write one sentence naming which element the article says should ideally come from research verbatims rather than guesswork. Evidence: your 6 labeled touchpoints plus the one-sentence answer about which element should come from verbatims.

  • Populate a journey map template for the return flow, given the touchpoints

    Using these six touchpoints for a customer returning a package through a shipping app (opens the app and taps 'Start a return', selects the order and reason, chooses drop-off or pickup, gets a QR return label, drops the package at a locker, and later gets a 'refund processed' notification), fill in a journey map template (spreadsheet, slide, or drawing tool) with one row per touchpoint covering what the customer does, thinks, and feels. Then sketch a simple emotional curve (low/medium/high) across the six touchpoints and write one sentence naming which touchpoint you rated lowest and why. Evidence: the filled template plus the emotional curve and your one-sentence justification for the lowest point.

09

Information Architecture

Organizing and structuring the content of a site, app, or product so users can find and understand what they need.

TargetNovice
Novice3 exercises
  • Diagnose flat vs. deep using NN/g's own criteria

    Read NN/g's 'Flat vs. Deep Website Hierarchies,' www.nngroup.com/articles/flat-vs-deep-hierarchy/, by Kathryn Whitenton. Here is a content inventory for a small recipe-blog app: 18 items split into Breakfast (4 recipes), Lunch (5 recipes), Dinner (6 recipes), and Desserts (3 recipes), with no sub-grouping inside each meal category yet. Using the article's own criteria rather than your gut, decide whether this content should stay as a flat single-level list of all 18 recipes or move to the deeper meal-category structure above, and name the specific symptom the article warns about for whichever shape you're rejecting. Evidence: your flat-vs-deep decision plus the specific symptom from the article you used to reject the other shape.

  • Extract two chunking rules and use them to group a settings menu

    Read NN/g's 'How Chunking Helps Content Processing,' www.nngroup.com/articles/chunking/, by Kate Moran. Pull out two concrete rules of thumb the article gives for chunking content (for example its guidance on line length, or how it reframes 'the magical number seven' for grouping items), then apply both rules to sketch how you'd group a 20-item settings menu (notifications, privacy, account, payments, and 16 more realistic settings you name or invent) into meaningful chunks. Evidence: the two rules you extracted, named, plus your grouped chunk list for the 20 settings.

  • Organize a single-section content inventory into a sensible structure

    Take a content inventory of 15-20 items from a small, single-section site or app you use regularly (a recipe blog's posts, a settings menu, a portfolio's projects), group the items into clearly labeled categories, and decide how many levels deep the structure needs to be, keeping it shallow since this is a single section. Have a peer or mentor read only your group labels, without your explanation, and guess which 3 items would sit under one label of your choosing; record what they guessed and whether they were right. Evidence: the content inventory, your grouped structure with labels, and the reviewer's guess plus whether it matched.

10

Creating User Flows

Mapping the path a user takes through a product, from entry point to a successful outcome such as completing a task.

TargetNovice
Novice2 exercises
  • Classify a scenario as a flow, not a journey, using NN/g's own scope line

    Read NN/g's 'User Journeys vs. User Flows,' www.nngroup.com/articles/user-journeys-vs-user-flows/, by Kate Kaplan, which draws the line between the two by scope: journeys cover a holistic, multi-channel experience over weeks or months, while flows cover a set of specific, discrete interactions inside one product, completed in minutes to hours. Here is a scenario: 'a user wants to update their profile picture in a mobile app.' Using the article's own scope criteria, explain in 2-3 sentences why this is a user-flow scenario and not a user-journey scenario, naming the specific words the article uses to draw that line. Evidence: your 2-3 sentence explanation naming the article's scope criteria.

  • Diagram a single linear task flow from a given starting point

    Given this starting point: 'a user lands on the app's home screen wanting to change their password,' diagram the linear user flow to complete that one task: each screen or step in order, with a clearly marked start point and end point. Keep it to the single ideal path only, no branches or error states yet. Evidence: the flow diagram, start to end, with each step labeled.

11

Wireframing

A low-fidelity visual representation of a UI, stripped of branding, used to define hierarchy and communicate what's on a screen.

TargetNovice
Novice2 exercises
  • Read NN/g's low-fi vs. hi-fi comparison and apply it to a screen

    Read NN/g's 'UX Prototyping: Low-Fidelity vs. High-Fidelity,' www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/, and find the specific things it says low-fidelity work deliberately leaves out compared to high-fidelity work. Then pick a screen from an app you use daily (e.g. a settings or profile screen) and write 3-4 sentences naming at least three of those things you'd strip out to wireframe it, and why leaving each one out helps you focus on hierarchy first rather than polish. Evidence: your write-up naming the screen and the three-plus specifics you'd omit, tied to what the article says low-fi strips away.

  • Wireframe a familiar settings screen with labeled hierarchy

    Pick a settings screen from an app you use often and reproduce it as a low-fidelity wireframe (boxes and labels only, no color, imagery, or branding), labeling what's primary, secondary, and tertiary on the screen. Evidence: the wireframe file (sketch, Figma, or a photo of paper) plus a one-paragraph note explaining your hierarchy choices.

12

Prototyping

Building a quasi-realistic, interactive representation of a product (by hand or with AI-assisted tools such as Figma Make) to test and validate a design with users before it's built.

TargetNovice
Novice2 exercises
  • Read NN/g's fidelity guidance and apply it to two designs

    Read NN/g's 'UX Prototypes: Low Fidelity vs. High Fidelity,' www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/, and find the criteria it gives for deciding when a prototype should stay low-fidelity/static versus go high-fidelity/interactive. Then, for two different existing designs of your choosing (e.g. a screen you've made plus a screen from an app you use often), state in 3-4 sentences each whether it calls for a low- or high-fidelity prototype, naming the specific criterion from the article driving your call rather than just your own instinct. Evidence: your write-up covering both designs, your fidelity call for each, and the article criterion behind it.

  • Build a guided clickable prototype of a single flow, AI-assisted or by hand

    Take an existing static design for a single flow (a design you already made, a hand-sketched wireframe, or a low-fi recreation of a screen from an app you use) and turn it into a clickable prototype of that one flow (3-5 screens). Either build it with Figma's native prototyping tools, or, if you'd rather try it, generate a first pass with an AI-assisted tool such as Figma Make from a written description of the flow and connect any screens it leaves unlinked yourself. Ask a mentor or peer for guidance on at least one decision you're unsure about while building it: a transition choice, or how to handle a screen the tool got wrong. Evidence: the prototype's shareable link, a note on the guidance you got and how you used it, and, if you used an AI tool, what it got right or wrong before your fix.

13

Native app patterns

Designing with the platform-specific conventions and structural differences between iOS and Android to deliver a native-feeling experience.

TargetNovice
Novice3 exercises
  • Find NN/g's tab-bar capacity rule and platform-placement convention, then spot violations

    Read NN/g's 'Basic Patterns for Mobile Navigation: A Primer,' www.nngroup.com/articles/mobile-navigation-patterns/, and find the specific number of options it says a tab bar starts struggling to fit at a good touch-target size, plus which platform it says conventionally places tab bars at the bottom versus which places them at the top. Then review this given screen: 'An iOS app places an 8-item tab bar pinned to the top of every screen.' List each specific way this deviates from what the article says is native, and what the corrected count and placement should be. Evidence: your written list of deviations, each paired with the specific native convention from the article it violates.

  • Find Android's predictive-back commit threshold and spot where a screen ignores it

    Read Android's official 'Predictive back design' documentation, developer.android.com/design/ui/mobile/guides/patterns/predictive-back, and find the specific progress percentage at which a full-screen back gesture commits, plus what should happen to the screen's contents if the user releases before that point. Then review this given screen: 'The app's image viewer ignores the back gesture entirely mid-swipe: nothing scales or previews, and releasing early still exits the viewer instead of canceling.' List each specific way this deviates from the documented behavior, and what should happen instead at each stage of the gesture. Evidence: your written list of deviations, each paired with the specific native behavior from the documentation it violates.

  • Redraw one deviating screen using native convention

    Pick one of the two screens from the previous exercises (the 8-item top-pinned iOS tab bar, or the Android image viewer that ignores the back gesture) and redraw or redescribe it corrected to follow that platform's native convention. Evidence: the corrected screen description or sketch, plus a short note on exactly what you changed.

14

Color theory

The rules and guidelines for using color in design, aiming at aesthetic appeal and effective visual and psychological communication.

TargetNovice
Novice2 exercises
  • Learn a role-based split for a palette and how to check it

    Read NN/G's 'Using Color to Enhance Your Design,' www.nngroup.com/articles/color-enhance-design/. Write down the percentage split it recommends for dividing a screen's colors across dominant, secondary, and accent roles, and the specific tool the article names for validating a text-on-background contrast pairing. Then, for a palette you didn't create (a public app's, a teammate's, or one a mentor hands you), assign each of its colors to a role using the split you found. Evidence: the role split and the tool name you pulled from the article, plus your role assignment for the given palette.

  • Apply a given palette to a screen and verify contrast holds

    Take a color palette you didn't create (a teammate's, a public design system's, or one your mentor hands you) and apply it to a single screen of your choice (any real app screen, recreated or redesigned), assigning colors to background, text, and one accent per the palette's evident intent. Then check your two most important text-on-background pairings with a contrast checker, such as WebAIM's Contrast Checker at webaim.org/resources/contrastchecker/, confirm both meet at least WCAG AA (4.5:1 for body text), and fix any pairing that fails before calling it done. Finally, circle the single most important element on the screen and name which palette color is doing the work of drawing attention to it over everything else. If nothing clearly stands out, adjust your color assignment until it does. Evidence: the finished screen with the most important element circled and its attention-drawing color named, your two contrast-checker readings with pass/fail against 4.5:1, and any fix you made to a failing pairing.

15

Typography

The art of arranging type: choosing typefaces, sizes, and spacing between letters, lines, and blocks of text.

TargetNovice
Novice2 exercises
  • Learn what creates hierarchy beyond just changing size

    Read Smashing Magazine's 'Typographic Hierarchies,' www.smashingmagazine.com/2022/10/typographic-hierarchies/. Name at least three visual techniques it identifies for establishing hierarchy beyond changing font size alone. Then compare two versions of the same settings screen's type: Version A sets its page title, one section heading, and a line of body copy at three different sizes but identical weight, color, and spacing throughout. Version B uses the same three size differences but also applies one of the techniques you just named to at least one element. Decide which version reads as more clearly hierarchical per the article's argument, and name the specific technique that makes the difference. Evidence: your list of at least three named techniques, plus your answer for the two versions and the technique you pointed to.

  • Apply a given type scale to a familiar screen and keep body copy readable

    You're given this type scale: H1 32/40, H2 24/32, H3 20/28, Body 16/24, Caption 12/16 (px, size/line-height). Apply it to a single screen from an app or site you use daily: reproduce its text elements (a title, one heading, a paragraph of body copy, and a caption or label) at the correct scale steps, and keep every line of body copy between roughly 45 and 90 characters wide so it stays comfortable to read. Produce the screen as a quick sketch, wireframe, or written mockup, labeling which scale step each element uses and noting your body copy's approximate character count per line. Evidence: the labeled screen sketch/wireframe/description, plus the character-count check for your body copy.

16

Layout and Gestalt Theory

Applying the psychology of visual perception (how people group elements into unified wholes) to organize a screen's layout.

TargetNovice
Novice2 exercises
  • Learn what actually makes elements read as a group

    Read NN/G's 'Gestalt Principles: Proximity,' www.nngroup.com/articles/gestalt-proximity/. In your own words, write what the article says determines whether two elements are perceived as belonging to the same group versus separate groups. Then look at a real contact form (name field, email field, message field, a submit button, and an unrelated 'back to home' link) and, using only the mechanism you just wrote down, decide which of those elements the article's logic says should sit close together and which should be visually separated. Evidence: your definition of the mechanism in your own words, plus your grouping decision for the five elements and which one you separated out.

  • Apply a given grouping to a screen, with a reviewer check

    You're given a single screen's worth of elements (a contact form with name, email, and message fields, a submit button, and an unrelated 'back to home' link) and told which groups they should form: the three form fields and the submit button belong together, the back-link is separate. Lay the screen out so both proximity (spacing) and alignment (a shared left edge or baseline) make that grouping read correctly, then have a peer or mentor look at the finished screen without your explanation and tell you what they see as grouped. Evidence: the laid-out screen, a one-line note on your spacing and alignment choices, and your reviewer's unprompted read of the groups (matching your intent or not).

17

Grid systems

Using a structural grid to organize page elements and produce layouts that adapt across different screen sizes.

TargetNovice
Novice2 exercises
  • Learn a grid's building blocks and the baseline-spacing rule

    Read Smashing Magazine's 'Building Better UI Designs With Layout Grids,' www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/. Name the specific term the article uses for the gap between columns (it isn't 'gutter'), and the baseline pixel value it recommends building all vertical spacing as a multiple of. Then, for a screen you're about to lay out, pick a baseline value using the article's logic and state three spacing values (e.g. for padding, gaps between elements, or line-height) that are each a clean multiple of it. Evidence: the term you found for the column gap, the baseline value, and your three spacing values with the multiple each represents.

  • Lay out a single screen within a given grid

    You're given a 12-column grid: 1280px total width, 24px gutters, 80px outer margins on each side. Lay out a single screen of your choosing (e.g. a landing page hero plus a 3-card feature section, or a settings screen) so every element's width and position align to full-column boundaries, with no element bleeding into a gutter or spanning a fractional column. Evidence: the laid-out screen, plus a list mapping each major element to the columns it spans.

18

Accessibility

Designing and validating so that people with a range of disabilities can independently perceive, understand, and use a product, including auditing against WCAG and testing with screen readers or other assistive technology.

TargetNovice
Novice3 exercises
  • Apply WCAG contrast thresholds to a given screen's color pairs

    Read WebAIM's 'Contrast and Color Accessibility,' webaim.org/articles/contrast/, which breaks WCAG AA's contrast requirement down differently depending on text size and whether you're looking at text versus a non-text UI element. Then, with your mentor's guidance, evaluate this given screen: a primary CTA button uses white text (#FFFFFF, 16px regular) on a mid-blue background (#5B8DEF); a section heading uses dark gray text (#4A4A4A, 28px) on white; an icon-only 'close' button uses a light gray icon (#B0B0B0) on a white background with no visible border. For each of the three elements, name which threshold category the article defines for it, state the exact ratio required for that category, and judge whether the element passes. Evidence: your three-part judgment (element, threshold category and required ratio, pass/fail) plus a corrected color value for any element that fails.

  • Diagnose a broken focus order against a given tab sequence

    Read the W3C WAI's 'Understanding Success Criterion 2.4.3: Focus Order,' www.w3.org/WAI/WCAG22/Understanding/focus-order.html. Then, with your mentor's guidance, review this given screen: visually it reads as a search bar at the top, three filter chips below it left-to-right (Price, Size, Color), and a results grid below that; the coded tab order is search bar, results grid item 1, Price chip, results grid item 2, Size chip, Color chip. Using the criterion's own test for whether a focus order is acceptable, decide whether this order passes SC 2.4.3, and if it fails, write the corrected sequence. Evidence: your pass/fail judgment stated in the criterion's own terms, plus your corrected tab sequence if it fails.

  • Run the checklist end-to-end on a real screen

    Pick one screen from an app or site you personally use. Using the same three checks from the two prior exercises (WCAG AA contrast thresholds for text and non-text elements, a focus order that preserves meaning and operability, and alt text for every image), walk the screen and log every element that's ambiguous or looks like it might fail. Have your mentor confirm your read on at least two of the items before you finalize the list. Evidence: the named screen, your per-element notes (element, check applied, your judgment), and which two items your mentor confirmed or corrected.

19

Data visualisation

Using statistical graphics, plots, and information graphics to represent data so it communicates clearly and efficiently.

TargetNovice
Novice2 exercises
  • Pick the right basic chart type and name the wrong one's specific flaw

    Read NN/G's 'How to Choose the Right Data Chart,' www.nngroup.com/articles/choosing-chart-types/, which explains why some intuitive-seeming chart choices are actually harder for people to read accurately than they first appear. Then take these three simple datasets: (a) monthly new signups for the last 12 months, (b) total revenue across 5 product categories last quarter, (c) the share of last month's support tickets that fell into each of 4 categories. Choose bar or line for each, and for dataset (c) specifically, name the chart type a beginner might reach for instead, and state the article's specific reason that type is harder to read accurately than a bar chart. Evidence: your three chart-type choices with one-sentence reasoning each, plus the tempting wrong choice for (c) and the article's specific reason it's harder to read.

  • Build a correctly-typed chart from your own simple dataset

    Take a simple dataset you have access to, such as a spreadsheet from work, a public dataset, or something you track yourself (weekly steps, monthly expenses, hours per project), that either compares distinct categories or shows change over time. With your mentor's guidance, choose bar or line based on which of those two your data actually is, build the chart in any tool (Figma, Excel, Sheets, a chart library), and write one sentence naming which of the two your data is and why that determined your choice. Evidence: the chart, your one-sentence justification, and your mentor's confirmation that the chart type fits the data's shape.

20

Design system

Building and maintaining a modular library of reusable components and specifications that keep a product's UI consistent, from handoff to development through checking what gets built.

TargetNovice
Novice3 exercises
  • Learn what a design system actually consists of, not just its components

    Read NN/G's 'Design Systems 101,' www.nngroup.com/articles/design-systems-101/. Then answer two questions in your own words, citing what the article actually says: what are the two essential parts the article says a design system is made of (not just a list of component types), and what's the specific difference the article draws between a design system and a plain style guide or component library on its own? Evidence: your two-part written answer.

  • Build a given screen using only existing components

    You're given this screen spec: a settings page with a page title, three toggle rows (each with a label and a description), and a save button pinned to the bottom. You're also given a small fixed component set to treat as the whole system for this exercise: button, toggle, input, card, page-title. With your mentor's guidance, build the screen using only those existing components, correctly applied, with no new components and no one-off styling overrides. Evidence: the built screen, a one-line note on which component you used for each part of the spec, and your mentor's confirmation that nothing was styled as a one-off outside the component set.

  • Hand off a screen to developers with annotations and every state

    Take a screen you built from existing components (the one from the exercise above, or another real or test screen) and prepare it for development. In the design file, annotate what a developer can't see by looking: spacing and sizes that aren't obvious from the components, what happens on click or tap, validation rules, and where each piece of text comes from. Show every state each interactive element and the screen can be in: default, hover, focus, disabled, loading, empty, error, and long or wrapping text. Walk a developer through it (on a test project, your mentor can play one), write down every question they ask, and add the answers to the file so the next person doesn't have to ask. Evidence: a link to the annotated design file with all states, the list of the developer's questions, and what you changed in the file because of them.

21

Moodboard creation

Working with a team to define a product's desired look and feel (color, iconography, and other visual direction) before detailed design.

TargetNovice
Novice2 exercises
  • Learn the moodboard-building process and apply its early steps

    Read NN/G's 'Mood Boards in UX: How and Why to Use Them,' www.nngroup.com/articles/mood-boards/. Then answer two questions in your own words: what does the article say you should check or review before you start collecting any images, and what specific number of mood words does it recommend settling on, and why that step exists before visual sourcing begins? For a hypothetical product of your choosing, write your own set of mood words at the count the article recommends, with one sentence on why each word fits. Evidence: your two answers plus your mood words with reasoning for each.

  • Assemble a moodboard from a given brief

    You've been given this direction brief: 'A wellness app for young professionals: calm, minimal, trustworthy, with a warm, organic touch (not clinical), evoking early morning light.' With your mentor's guidance, source 8-12 reference images matching this brief from any source you like (Pinterest, Dribbble, Unsplash, your own photos, magazines), organize them into a single moodboard covering color palette, imagery style, and typography direction, and write one caption per image explaining which specific word or phrase in the brief it supports. Evidence: the moodboard plus one caption per image, and your mentor's confirmation that at least two of your captions genuinely trace back to the brief rather than just 'it looked nice.'

Soft Skills

01

Communication

Clearly and effectively conveying information, setting expectations, and aligning with others in written and verbal form.

TargetNovice
Novice2 exercises
  • Spot a missing BLUF and rewrite it

    Read Wikipedia's article on the BLUF (bottom line up front) technique, en.wikipedia.org/wiki/BLUF_(communication), which explains the practice of opening a message with its key information, responding to the five Ws (who, what, where, when, why), before any narrative detail or supporting context. Take this draft status update: 'Hey team, just wanted to give an update on the onboarding redesign. We've been working on wireframes this week and met with two stakeholders. There were some questions about scope timing. Let me know if you have questions.' Identify what's missing per the BLUF technique, then rewrite its opening sentence as a proper BLUF. Evidence: your written note on what was missing plus the rewritten BLUF opening sentence.

  • Write a status update that needs zero follow-ups

    Using the BLUF technique from the previous exercise, write a full status update (what's done, what's next, what's blocked) for a real or test project you're working on. Show it to a real reader who doesn't already know the details and ask them to tell you what's happening without asking you a single follow-up question. Evidence: the status update plus a note on whether your reader needed a follow-up question, and what it was if so.

02

Collaboration

Working well with others: understanding different perspectives, managing shared priorities, and being a reliable team member.

TargetNovice
Novice2 exercises
  • Confirm what 'reliable help' means for this ask

    Read Google's re:Work guide on team effectiveness, rework.withgoogle.com/intl/en/guides/understand-team-effectiveness, which names dependability (reliably completing quality work on time) as one of the five dynamics that separate effective teams. Pick one specific task a teammate has asked you for help with recently, or one you expect to be asked for soon, and write down exactly what 'reliably complete quality work on time' means for that ask: the concrete deliverable, the deadline, and how you'll confirm to the teammate that it's done. Evidence: your write-up naming the task, the deliverable, the deadline, and your confirmation plan.

  • Help a teammate and name their part in it

    The next time a teammate asks you for help with a specific task (or, if none is pending, ask one to give you a real task to help with), do the work, then when it's shared with others (a demo, a doc, a status update, a message to the team), explicitly name your teammate's contribution alongside your own rather than presenting it as solo work. Evidence: the completed help plus a copy or screenshot of the moment you shared credit (the message, doc line, or demo note), showing both your names attached to the shared work.

03

Conflict management

Navigating and resolving workplace disagreement in a way that keeps the team functional and relationships intact.

TargetNovice
Novice2 exercises
  • Learn what intellectual humility looks like in a disagreement

    Read Greater Good Magazine's 'What Does Intellectual Humility Look Like?,' greatergood.berkeley.edu/article/item/what_does_intellectual_humility_look_like, which frames disagreement as healthy when handled with intellectual humility, being open to other people's views instead of contentious about them, and willing to reconsider your own position when shown new evidence. As you read, pull out one behavior the article names for sharing a differing opinion without it becoming contentious, and one behavior it names for updating your own view when shown new evidence. Evidence: the two behaviors you pulled out, each in your own words, with a one-line example of how you'd use it.

  • Document a real disagreement you handled

    Recall a real disagreement you had in a work discussion recently (a design decision, a process choice, a scope call; use the most recent real one you can, or a realistic one if nothing comes to mind) and, with a mentor or reviewer available to read it, write a short account of what your differing opinion was, how you shared it respectfully, and whether any new information came up that changed your mind and how you responded to it. Evidence: the written account plus your reviewer's confirmation that the disagreement, as described, was shared respectfully and that any view change was genuine rather than just conflict avoidance.

04

Planning / Time management

Managing your own time and, at higher levels, the team's: prioritizing work so it's delivered efficiently and predictably.

TargetNovice
Novice3 exercises
  • Learn why context-switching breaks your task list

    Read Psychology Today's 'The True Cost of Multi-Tasking,' www.psychologytoday.com/us/blog/brain-wise/201209/the-true-cost-of-multi-tasking, which argues that what feels like multitasking is actually rapid task-switching, and that switching quietly derails commitments you'd otherwise meet by costing up to 40% of your productive time. Then look at your own task list for the coming week and mark the one task you know you'd normally split across multiple sittings instead of finishing in one go, and write 2-3 sentences on the single block of time you'll protect for it instead. Evidence: your task list with the marked task, plus the 2-3 sentence plan for protecting a single block of time for it.

  • Apply the capture-and-clarify step of GTD to your own list

    Read the official overview of the Getting Things Done method, gettingthingsdone.com/what-is-gtd/, focusing on the 'capture' and 'clarify' steps for turning loose commitments into a trustworthy task list. Then take every commitment currently living in your head, chat threads, or email for your individually-scoped work and capture them into one list, clarifying each into a single concrete next action rather than a vague reminder. Evidence: your captured list with each item rewritten as a concrete next action.

  • Run your own task list for a real work week and report what nearly slipped

    For a real (or test) week of individually-scoped work, keep a single task list of your commitments, updating it daily as items get added or finished, and share the starting list with your mentor or reviewer so they know what you're committing to before the week begins. At the end of the week, identify the one commitment you nearly missed and write 2-3 sentences on what caused the near-miss and what you changed on your list to catch it in time. Evidence: your week's task list, the 2-3 sentence note on the near-missed commitment, and your mentor's confirmation they saw your starting list.

05

Public speaking

Presenting ideas to an audience clearly, confidently, and persuasively, adapting to the audience and setting.

TargetNovice
Novice2 exercises
  • Find your core idea and opening line for an informal walkthrough

    Read Duarte's 'How the Duarte Big Idea Formula Can Make Your Presentation the Best,' www.duarte.com/blog/how-to-develop-the-best-big-idea-for-your-presentation/, which argues a talk should center on one distilled sentence, your point of view plus what's at stake for the audience, rather than a list of points. Pick one piece of your own design work (real or test) that you'll walk a few peers through informally, and write down the single core idea you want them to leave with, plus the opening sentence you'd use to introduce it before showing anything on screen. Evidence: your one-sentence core idea and your opening line.

  • Walk a small group of peers through a piece of your work

    Using the core idea and opening line from the previous exercise, walk 3-4 peers through that piece of design work informally (a sketch, a wireframe, or a screen you made, real or test) in a small room or on a call. No slides required; talk through it conversationally and take questions as they come up. Evidence: a one-paragraph recap of what you presented plus one peer's written comment on whether your core idea came across.

06

Self-Direction

Motivating yourself to complete work effectively, on time, and without close supervision.

TargetNovice
Novice2 exercises
  • Read what makes check-ins land, then apply one habit

    Read Culture Amp's guide to managing up, www.cultureamp.com/blog/managing-up-importance, which explains that keeping your manager informed in the right way, adapted to their preferred communication style and with issues flagged early rather than saved for a review, is something you actively manage, not something that just happens on its own. Pick one small task you're currently working on with light check-ins from your manager or lead, then pick one habit from the article you don't yet do consistently, and write 2-3 sentences on exactly how you'll change your next check-in on that task because of it. Evidence: your 2-3 sentence write-up naming the task, the habit, and the specific change you're making to your next check-in.

  • Log your check-ins on one assigned task and review the pattern with your manager

    Pick one small task assigned to you and, for its full duration, keep a short log every time you check in with your manager or lead: the date, what you reported, and anything that came up. When the task is done, sit down with your manager and walk through the log together, asking them directly whether the check-in cadence and content felt right, or whether they ever had to chase you for an update instead of you offering one. Evidence: the check-in log covering the whole task, plus your manager's written or verbal reaction on whether the cadence worked and whether they ever had to ask rather than being told.

07

Critical Thinking / Questioning

Thinking logically about a problem to solve it effectively, rather than settling for the first workable answer.

TargetNovice
Novice2 exercises
  • Learn the satisficing tradeoff and spot it in one of your own choices

    Read NN/G's 'Satisficing: Quickly Meet Users' Main Needs,' www.nngroup.com/articles/satisficing/, which explains that people weigh the cost of continuing to search against the benefit of a better answer, and usually stop at 'good enough' rather than the best possible option. Then look back at one recent decision of yours that took longer than it needed to (a design detail you kept polishing, a pattern you kept comparing options for) and write 2-3 sentences on what the 'good enough' answer would have been and roughly how much extra time chasing the better one cost you. Evidence: the decision you picked, the 'good enough' answer you identify, and your 2-3 sentence estimate of the extra cost.

  • Have a senior help you apply a cost/value tradeoff to a decision

    Bring a real (or plausible invented) decision you're currently facing to a senior teammate or your mentor, e.g. whether to build a custom component or adapt an existing one, or how much detail to put into an early concept. Ask them to point out the cost/value tradeoff in it (what the more expensive option would buy you vs. what the cheaper one loses), and work through the tradeoff together to land on which one to actually do. Evidence: the decision, the tradeoff the senior pointed out, and the option you chose together with the reasoning.

Use this matrix with your team in Skiloope

Assign positions, track progress, attach evidence and validate skills in one shared workspace.

Get Started Free with Skiloope

Free up to 5 users · No credit card required