Design
UI/UX Professional Design Program
Research, flows, interface, and a case study you can present.
UI/UX Professional Design Program is the longer design path: a problem, the people it affects, the flow, the interface, and a case study. Figma is the tool. The lectures insist on the reason for each screen, not only the polish.
Course syllabus
01. Name the problem
- Framing the work
Who is stuck, what they are trying to finish, and what done would look like.
- The person and the situation
A role, a moment, and the task in front of them.
- The job they are trying to finish
The outcome, separate from the screens that exist today.
- A constraint you cannot design away
Time, a policy, a device, or content that must appear.
- What you will not take on
A neighbouring problem that would swallow the project.
- The surface you may change
The part of the product that is in bounds, named.
- Done, in a way you could watch
A person finishes the task without the workaround they use now.
- A sentence you can repeat
The frame, short enough to check a later screen against.
02. Scope you can finish
- One task, end to end
The project covers that task, not the whole product.
- Who can say a screen is out
Name the person who decides.
- The time you have
A date, and the fidelity you can reach by then.
- Phone or desk
You pick the primary size and design that first.
- Content that has to be on the screen
Words, data, or a legal line that is not optional.
- A rule from the current product
Something you keep so the new flow still belongs there.
- How you would know it worked
A behaviour you could watch, not a compliment.
- Open Figma after the frame is written
The file starts from the sentence.
03. Who you will talk to
- People who do this task
You talk to them, not only to someone with opinions about them.
- How many conversations
Enough to hear the task more than once, and few enough that you can finish.
- Questions about the last time
What they did, in order, on a real occasion.
- Questions you will not ask
Prompts that ask them to design your solution for you.
- Where the task actually happens
You look for people in that situation.
- Ask before you take notes
They know you are writing, and what the notes are for.
- A home for the notes
One document, with the date and who said it.
- What a conversation will not tell you
Volume and rare cases you would need records to see.
04. The interview
- Interviews and notes
You ask about a real attempt, and you keep the quote tied to that attempt.
- Walk the last time they did it
Step by step, including the tools they left and came back to.
- A quote plus the situation
The words, and what was happening when they said them.
- The workaround
The extra step they invented because the product did not do the job.
- Where they pause
Hesitation is a mark in the notes.
- Do not design in the room
You can ask what they tried, and you do not pitch screens.
- Write the note the same day
Later memory will smooth the parts you need.
- What you heard more than once
A repeated step is a candidate for the flow.
05. Notes become a point of view
- Cluster notes by the step
Group quotes under the part of the task they describe.
- A pattern needs more than one voice
One vivid story stays a story until a second person hits the same snag.
- A need you can design
The need is a job specific enough to draw.
- A need this project will not meet
You record it and leave it outside this flow.
- The path they use now
Including the awkward step and the tool outside your product.
- Two people who disagree
You keep both, and you note the situation each one was in.
- What would change the frame
A finding that would make you rewrite the sentence.
- The line the flow has to serve
One sentence from the research, used as a test for every step.
06. Steps through the product
- The path through the product
The steps in order, the dead ends, and which screen carries each step.
- How they arrive
The entry, and what they already know.
- The step that is the point
The action the whole path is for.
- A dead end
A branch that traps them, named so you can remove it or explain it.
- How they know they are finished
The last step shows a result they can recognise.
- A second visit
What is different when they have done the task before.
- Tell the path without pictures
If you need a screen to explain a step, the path is not clear yet.
- Cut a step the notes do not support
Every remaining step traces to a note or a constraint.
07. A frame per step
- One Figma frame for each step
The order on the canvas matches the path.
- The reason is written on the frame
A short note says why this screen exists.
- What the person does here
The action, in their words where you have them.
- What they need to see to do it
The content for that action, and no extra panel.
- A frame you can delete
If the path still works without it, it was not a step.
- Name the frame as the step
The layer name is the action, not a version label.
- Prototype the main path
The clicks use the frames you justified.
- A branch you left out
You can say which one, and why it waits.
08. Type, components, and spacing
- A system, not one screen
Type, colour, spacing, and components repeat, including empty and error.
- Text styles with jobs
A title, a label, and body copy, each with a size you reuse.
- Colour means something
One colour for the action, one for danger, and neutrals for the rest.
- A button is the same component
Primary and secondary are variants, not two separate drawings.
- Spacing you repeat
The same gaps between label, field, and action.
- Put the component in the Figma library
Frames use the instance, and the source stays in the library.
- Assemble the step from those pieces
The screen is components, not a fresh set of rectangles.
- Edit the source and check the frames
A change to the component should show up everywhere it is used.
09. Empty, error, and the rest
- The empty state
Nothing here yet, and a way to start, if starting is allowed.
- Waiting for a result
What the screen shows before the content arrives.
- Something failed
The message says what failed and what they can do next.
- More content than the tidy example
A long name, a long list, or a missing optional field.
- A control that is not available
It is disabled, with a reason they can see.
- The first time and the familiar time
Extra help leaves once they already know the task.
- States live on the component
Empty, error, and default are variants you can place.
- A state a presentation would skip
You still draw it, because the product will hit it.
10. Check the design against the notes
- Read each frame against the sentence
If it does not serve the frame, it is decoration.
- A screen with no note behind it
Remove it, or find the evidence.
- Labels from their language
Use words from the quotes where those words were clear.
- Type you can read
Size and contrast on the background you actually used.
- A target a thumb can hit
The control is large enough on the size you chose.
- Change one screen because of one note
The revision cites the quote.
- Something you refused to add
A request that did not fit the task, and the reason.
- Watch someone use the prototype
You record where they hesitate.
11. Write the case study
- A case study
Problem, what you learned, the flow, the system, and the screens, in that order.
- Open with the person and the task
The frame, before any visual.
- Who you spoke to
How many, and the situation, without a made-up persona essay.
- Show the path
The steps, including the one you removed.
- Show the system
The type, the button, and one state.
- Put the reason next to the screen
Each image has the sentence for why it is there.
- What you would do with more time
One next step, tied to a gap you already named.
- Read it without narrating
A stranger can follow the order with you silent.
Lecture videos stay with the course. Playback for enrolled students will open once payments are available. Video links are not published on this page.