All 60 tasks, level by level

The real graded UI/UX Design tasks the portal assigns, grouped into three levels.

The portal assigns these UI/UX Design tasks. Finish Level 1 before Level 2 and Level 2 before Level 3. Your mentor may mark some tasks as required for the certificate.

Level 1: Foundations (22 tasks)

TaskWhat to do
Set up Figma and learn the basicsCreate frames, shapes, text, auto layout and components. Share a link to a file with one practice screen.
Redesign a login screenPick a real app's login screen, list 5 usability problems and design an improved version in Figma.
Typography scaleCreate a type scale (H1-H6, body, caption) for a mobile app with sizes, line heights and weights, and use it on one screen.
Colour palette and contrastBuild a palette (primary, secondary, neutrals, success, error) and check every text colour pair passes WCAG AA contrast.
Heuristic evaluationEvaluate a college website against Nielsen's 10 heuristics with screenshots and a severity rating for each issue.
User personaInterview 3 students and create 2 personas with goals, frustrations and a typical day.
User journey mapMap the journey of a student applying for an internship online: stages, actions, feelings and pain points.
Wireframe a food-ordering appLow-fidelity wireframes for 6 screens: home, menu, item, cart, checkout and order status.
Icon setDesign 12 consistent icons on a 24 px grid for a learning app and export them as SVG.
Spacing and grid systemDefine an 8-point spacing system and a 4/8/12 column grid, then apply it to a landing page.
Copy for buttons and errorsRewrite 15 unclear buttons and error messages from real apps so they say what happens next.
Study a design systemAnalyse Material Design or Apple HIG: list 10 components and the rules for using them, with screenshots.
Competitor UX analysisCompare 3 apps in the same category on onboarding, navigation and checkout with annotated screenshots.
Sketch 8 ideas in 8 minutesDo a Crazy 8s exercise for one screen and pick the best idea with reasons.
Empty, loading and error statesDesign all three states for 3 screens of an app.
Microcopy style guideWrite a voice-and-tone guide with do/don't examples for buttons, errors and empty states.
Mobile gestures and patternsDocument 10 common mobile patterns (pull to refresh, swipe actions, tabs) and when to use each.
Gestalt principlesShow proximity, similarity, closure and continuity with examples from real apps.
Colour theory for UIBuild primary, secondary and semantic colours with tints and shades, and test them in dark mode.
Illustration and imageryChoose an illustration style for an app and create 3 consistent empty-state illustrations.
UX writing exerciseRewrite an onboarding flow's text to be shorter and clearer, and test understanding with 3 people.
Inspiration boardCollect 20 UI examples by pattern (cards, forms, nav) with notes on what works.

Level 2: Building real features (20 tasks)

TaskWhat to do
Design system in FigmaBuild components with variants (buttons, inputs, cards, nav, modal) and styles for colour, text and effects.
High-fidelity mobile appDesign 10 screens for an internship-tracker app using your design system, in light and dark mode.
Interactive prototypeLink your screens into a clickable prototype with transitions and one micro-interaction.
Usability testTest your prototype with 5 users on 3 tasks. Record success rate, time and quotes, then list fixes.
Responsive website designDesign one landing page for desktop, tablet and mobile breakpoints, showing how layout and type change.
Accessibility reviewCheck your design for focus order, touch target size, contrast, alt text and screen-reader labels. Fix and document.
Dashboard designDesign an admin dashboard with charts, filters, a table and empty/loading/error states.
Form designDesign a multi-step application form with validation, progress and error states, following form best practices.
Information architectureCard-sort a college website's content with 5 people and propose a new navigation with a sitemap.
Hand-off to developersPrepare dev-ready specs: spacing, tokens, assets and component notes, using Figma Dev Mode or a written spec.
Onboarding flowDesign a 3-step onboarding with permission requests explained before the system prompt.
Search and filtersDesign search with suggestions, filters, sort and no-results state for a job portal.
Checkout redesignRedesign a checkout to reduce steps and errors, and test it with 3 users.
Data table designDesign a responsive data table with sorting, filters, bulk actions and mobile layout.
Notification designDesign in-app, push and email notifications for one event, consistent in tone and timing.
Variables and modes in FigmaUse Figma variables for colours and spacing with light/dark modes switching automatically.
Advanced prototypingUse conditional logic and variables in a prototype (cart count, form errors).
Landing page conversionDesign a landing page with clear value proposition and CTA, and list what you would A/B test.
Wearable or TV interfaceDesign 3 screens for a smartwatch or TV app and explain the constraints.
Interview users remotelyRun 3 remote interviews with a script, record insights and build an affinity map.

Level 3: Professional work and capstone (18 tasks)

TaskWhat to do
End-to-end case studyA full UX case study for one product: research, problem, ideas, wireframes, final UI, testing and results.
Redesign a real productPick a public app, research its users, redesign a key flow and measure improvement with a usability test.
Build your design in codeTurn 3 of your screens into HTML/CSS or React that matches the design closely, and deploy it.
Design tokensExport colours, spacing and type as design tokens (JSON) and use them in a small coded component library.
A/B test planDesign two versions of a sign-up screen and write a test plan: hypothesis, metric, sample size and how to decide.
Motion designCreate 5 purposeful animations (loading, success, page transition, hover, pull-to-refresh) in a prototype or Lottie.
Portfolio websitePublish a portfolio with 3 case studies, an about page and contact link. Submit the live URL.
Present your workRecord a 5-minute walkthrough presenting your best case study as you would in a design interview.
Design sprintRun a 5-day mini design sprint (understand, sketch, decide, prototype, test) and document each day.
Accessibility audit of a live siteAudit a real website with WCAG 2.2 checks, prioritise issues and propose fixes with mock-ups.
UX metrics planDefine success metrics (task success, time, SUS score) for your product and how you would measure them.
Design system documentationDocument your components with usage rules, do/don't examples and accessibility notes.
Mentor review and iterationGet feedback from a mentor or senior designer on your case study and publish the improved version.
Service blueprintMap front-stage and back-stage steps for an internship application service.
Design critique sessionRun a critique of a peer's design with structured feedback and document the changes made.
Redesign for accessibilityRedesign a screen for low vision and motor impairments, then test with assistive tools.
Design opsSet up file structure, naming, version history and hand-off rules for a team of designers.
Freelance-ready projectComplete a real or simulated client brief from brief to delivery with invoice and feedback.
โ† Tools and first-week setupSubmitting tasks and earning your certificate โ†’