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)
| Task | What to do |
|---|---|
| Set up Figma and learn the basics | Create frames, shapes, text, auto layout and components. Share a link to a file with one practice screen. |
| Redesign a login screen | Pick a real app's login screen, list 5 usability problems and design an improved version in Figma. |
| Typography scale | Create 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 contrast | Build a palette (primary, secondary, neutrals, success, error) and check every text colour pair passes WCAG AA contrast. |
| Heuristic evaluation | Evaluate a college website against Nielsen's 10 heuristics with screenshots and a severity rating for each issue. |
| User persona | Interview 3 students and create 2 personas with goals, frustrations and a typical day. |
| User journey map | Map the journey of a student applying for an internship online: stages, actions, feelings and pain points. |
| Wireframe a food-ordering app | Low-fidelity wireframes for 6 screens: home, menu, item, cart, checkout and order status. |
| Icon set | Design 12 consistent icons on a 24 px grid for a learning app and export them as SVG. |
| Spacing and grid system | Define an 8-point spacing system and a 4/8/12 column grid, then apply it to a landing page. |
| Copy for buttons and errors | Rewrite 15 unclear buttons and error messages from real apps so they say what happens next. |
| Study a design system | Analyse Material Design or Apple HIG: list 10 components and the rules for using them, with screenshots. |
| Competitor UX analysis | Compare 3 apps in the same category on onboarding, navigation and checkout with annotated screenshots. |
| Sketch 8 ideas in 8 minutes | Do a Crazy 8s exercise for one screen and pick the best idea with reasons. |
| Empty, loading and error states | Design all three states for 3 screens of an app. |
| Microcopy style guide | Write a voice-and-tone guide with do/don't examples for buttons, errors and empty states. |
| Mobile gestures and patterns | Document 10 common mobile patterns (pull to refresh, swipe actions, tabs) and when to use each. |
| Gestalt principles | Show proximity, similarity, closure and continuity with examples from real apps. |
| Colour theory for UI | Build primary, secondary and semantic colours with tints and shades, and test them in dark mode. |
| Illustration and imagery | Choose an illustration style for an app and create 3 consistent empty-state illustrations. |
| UX writing exercise | Rewrite an onboarding flow's text to be shorter and clearer, and test understanding with 3 people. |
| Inspiration board | Collect 20 UI examples by pattern (cards, forms, nav) with notes on what works. |
Level 2: Building real features (20 tasks)
| Task | What to do |
|---|---|
| Design system in Figma | Build components with variants (buttons, inputs, cards, nav, modal) and styles for colour, text and effects. |
| High-fidelity mobile app | Design 10 screens for an internship-tracker app using your design system, in light and dark mode. |
| Interactive prototype | Link your screens into a clickable prototype with transitions and one micro-interaction. |
| Usability test | Test your prototype with 5 users on 3 tasks. Record success rate, time and quotes, then list fixes. |
| Responsive website design | Design one landing page for desktop, tablet and mobile breakpoints, showing how layout and type change. |
| Accessibility review | Check your design for focus order, touch target size, contrast, alt text and screen-reader labels. Fix and document. |
| Dashboard design | Design an admin dashboard with charts, filters, a table and empty/loading/error states. |
| Form design | Design a multi-step application form with validation, progress and error states, following form best practices. |
| Information architecture | Card-sort a college website's content with 5 people and propose a new navigation with a sitemap. |
| Hand-off to developers | Prepare dev-ready specs: spacing, tokens, assets and component notes, using Figma Dev Mode or a written spec. |
| Onboarding flow | Design a 3-step onboarding with permission requests explained before the system prompt. |
| Search and filters | Design search with suggestions, filters, sort and no-results state for a job portal. |
| Checkout redesign | Redesign a checkout to reduce steps and errors, and test it with 3 users. |
| Data table design | Design a responsive data table with sorting, filters, bulk actions and mobile layout. |
| Notification design | Design in-app, push and email notifications for one event, consistent in tone and timing. |
| Variables and modes in Figma | Use Figma variables for colours and spacing with light/dark modes switching automatically. |
| Advanced prototyping | Use conditional logic and variables in a prototype (cart count, form errors). |
| Landing page conversion | Design a landing page with clear value proposition and CTA, and list what you would A/B test. |
| Wearable or TV interface | Design 3 screens for a smartwatch or TV app and explain the constraints. |
| Interview users remotely | Run 3 remote interviews with a script, record insights and build an affinity map. |
Level 3: Professional work and capstone (18 tasks)
| Task | What to do |
|---|---|
| End-to-end case study | A full UX case study for one product: research, problem, ideas, wireframes, final UI, testing and results. |
| Redesign a real product | Pick a public app, research its users, redesign a key flow and measure improvement with a usability test. |
| Build your design in code | Turn 3 of your screens into HTML/CSS or React that matches the design closely, and deploy it. |
| Design tokens | Export colours, spacing and type as design tokens (JSON) and use them in a small coded component library. |
A/B test plan | Design two versions of a sign-up screen and write a test plan: hypothesis, metric, sample size and how to decide. |
| Motion design | Create 5 purposeful animations (loading, success, page transition, hover, pull-to-refresh) in a prototype or Lottie. |
| Portfolio website | Publish a portfolio with 3 case studies, an about page and contact link. Submit the live URL. |
| Present your work | Record a 5-minute walkthrough presenting your best case study as you would in a design interview. |
| Design sprint | Run a 5-day mini design sprint (understand, sketch, decide, prototype, test) and document each day. |
| Accessibility audit of a live site | Audit a real website with WCAG 2.2 checks, prioritise issues and propose fixes with mock-ups. |
| UX metrics plan | Define success metrics (task success, time, SUS score) for your product and how you would measure them. |
| Design system documentation | Document your components with usage rules, do/don't examples and accessibility notes. |
| Mentor review and iteration | Get feedback from a mentor or senior designer on your case study and publish the improved version. |
| Service blueprint | Map front-stage and back-stage steps for an internship application service. |
| Design critique session | Run a critique of a peer's design with structured feedback and document the changes made. |
| Redesign for accessibility | Redesign a screen for low vision and motor impairments, then test with assistive tools. |
| Design ops | Set up file structure, naming, version history and hand-off rules for a team of designers. |
| Freelance-ready project | Complete a real or simulated client brief from brief to delivery with invoice and feedback. |