From 7f620de0e0d01d7f463941ed3cd157041014d77a Mon Sep 17 00:00:00 2001 From: Daniel Wagner-Hall Date: Thu, 5 Feb 2026 19:46:08 +0000 Subject: [PATCH] Add Usability workshop This was prepared by Jo Chang, I'm just markdownifying it. Co-authored-by: Jo Chang --- .../ux/usability-workshop-prep/index.md | 18 +++ .../en/module/ux/usability-workshop/index.md | 151 ++++++++++++++++++ .../data-flows/sprints/1/day-plan/index.md | 5 +- .../data-flows/sprints/1/prep/index.md | 4 +- 4 files changed, 175 insertions(+), 3 deletions(-) create mode 100644 common-content/en/module/ux/usability-workshop-prep/index.md create mode 100644 common-content/en/module/ux/usability-workshop/index.md diff --git a/common-content/en/module/ux/usability-workshop-prep/index.md b/common-content/en/module/ux/usability-workshop-prep/index.md new file mode 100644 index 000000000..e653c234c --- /dev/null +++ b/common-content/en/module/ux/usability-workshop-prep/index.md @@ -0,0 +1,18 @@ ++++ +title = "Usability Workshop Pre-reading" +time = 90 +objectives = [ + "Define the term usability.", + "Explain each of the 12 usability principles.", + "Identify how each usability principle applies to an example website.", +] + +[build] + list = "local" + publishResources = false + render = "never" ++++ + +Read through [this slide deck about usability](https://docs.google.com/presentation/d/1jJlzFt2l48cDHdwF7wo__m6mfCx0N1IFT0T0BZhpuLw/edit). Make sure you have achieved all of the listed learning objectives. + +You will use this knowledge in a workshop in class. diff --git a/common-content/en/module/ux/usability-workshop/index.md b/common-content/en/module/ux/usability-workshop/index.md new file mode 100644 index 000000000..d6a8cc4a3 --- /dev/null +++ b/common-content/en/module/ux/usability-workshop/index.md @@ -0,0 +1,151 @@ ++++ +title = "Usability Workshop" +time = 90 +objectives = [ + "Explain how product thinking leads to useful products.", + "Apply usability principles in practice by analysing an online product.", + "Select and use appropriate UI toolkits for future design work", +] + +[build] + list = "local" + publishResources = false + render = "never" ++++ + +The goal of this workshop is to help trainees understand the usability principles that enable them to create functional and user-friendly digital products. + +This workshop is expected to accompany [the associated slides in Figma](https://www.figma.com/slides/UaetXlZZwG3VGYpdxd84Zm/CYF-Usability?node-id=1-177&t=jWgI37RMiLG5Z1pj-1) (passcode: `cyf2025`) - make sure to present them and work through them. + +## Introduction (5 mins) + +* Go through the agenda + * The goal - what we will achieve today + * What is product thinking - think product, not just feature + * Let’s talk about usability - make things easy: usability in practice + * Useful tools - tools that help you design better +* Explain the goal of the session + * This session explores the importance of usability and user experience (UX) in product development. + * It is related to the TV Project assignment, where students are expected to plan, design and code. + * Understanding UX helps create products that meet users’ needs and deliver real value. +* Explain what they will achieve + * Explain the fundamentals of product thinking as a key mindset in product development + * Apply core usability principles to design effective and user-friendly experiences + * Use UI toolkits to enhance the visual quality of projects + * Apply these concepts directly to the upcoming assignment + +## Understanding Product Thinking (15 mins) + +Discuss in small groups for 5 minutes: + +Given an example of building a food delivery app, what happens when it's built without and with product thinking? + +
+ +Background for volunteers + +* Without product thinking, the focus might be on adding more features such as a detailed map or numerous filters, simply because other apps include them or they look appealing. +* With product thinking, the focus shifts to user needs. For example, recognising that users often want speed and convenience might lead to adding a “*Reorder Favourites*” button on the home screen. This approach prioritises solving real user problems and delivering meaningful value. + +
+ +Explain what product thinking is + +
+ +Hints for volunteers +* Product thinking focuses on solving the right problems for the right users. Without it, products may look impressive but fail to deliver real value. +* Effective product development requires aligning features with user goals and needs prioritising meaningful, useful solutions over simply adding more features. + +
+ +{{}} +Open the [YouTube Movies](https://www.youtube.com/feed/storefront) website and spend a few minutes exploring it. Think about two key questions: + +1. Who are the customers/users? +2. Why are they building this website — what problem are they trying to solve + +Volunteers: Run the Kahoot quiz linked below. + +Trainees: Join [this Kahoot! quiz](https://create.kahoot.it/share/cyf-usability-workshop/f5d496ab-e902-4403-87cf-e18918a88066) on your phone. + +
+ +Hint for volunteers + +* Make sure everyone joins via the provided link. +* The Kahoot! quiz has two multiple-choice questions set up, just follow the order shown there. + +
+ +{{}} + +## Understanding Usability re-cap (5 mins) + +Trainees should have completed the [pre-reading](https://docs.google.com/presentation/d/1jJlzFt2l48cDHdwF7wo__m6mfCx0N1IFT0T0BZhpuLw/edit?usp=sharing). + +As a class, recap the 12 usability principles. + +Get ready to wear a UXer's hat and review a digital product! + +You're welcome to open the pre-read while doing the following tasks. + +## Review a Digital Product and Analyse Its Usability (45 mins) + +Get into pairs and review the [YouTube Movies](https://www.youtube.com/feed/storefront). + +### First task: + +* Pick at least one feature or design element that follows one of the usability principles. +* Discuss with your partner why this is beneficial to users. +* Add your findings in [this FigJam board](https://www.figma.com/board/wfhPOxPJ5Y6fQEIdzOTE2e/CYF-Usability?node-id=2-2&t=7OHsKSCykkjGZfiu-4). + +### Second task: + +* Find a feature or design element that does not follow a usability principle. +* Discuss with your partner how this might affect the user. +* Add your findings in [this FigJam board](https://www.figma.com/board/wfhPOxPJ5Y6fQEIdzOTE2e/CYF-Usability?node-id=2-300&t=7OHsKSCykkjGZfiu-4). + +### Third task: + +* Pick one of the problems you found. +* Brainstorm and propose a solution. +* Present your solution using a simple sketch or wireframe, with a short note explaining the problem, the solution, and which principle(s) it follows. + +## Share your findings (10 mins) + +Two groups should share their solution with the class. + +## Share the tools that help design better (5 mins) + +The last part is to share tools that can help you design better and make the process easier: + +Inspiration + +* [Mobbin](https://mobbin.com/) + +Colour palette + +* [Coolors](https://coolors.co/) + +Icons + +* [Thiings](https://www.thiings.co/things) + +Designing with AI + +* [Stitich](https://stitch.withgoogle.com/) +* [UX Pilot](https://uxpilot.ai/) + +Prototyping with AI + +* [V0](https://v0.app/) +* [Bolt](https://bolt.new/) + +Design support + +* Design feedback session with UI/UX volunteers to help trainees and graduates, offer feedback on their work or portfolios, or provide design tips. [Book a feedback session here](https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ3a4jMv-IpHAxgNoyFNy1BeBBmfBgWV4y2SMew9Hrhcc4WPsRANdeKM_3fKlDpcgOH-A_CV_THX). + +## Q&A (5 mins) + +Ask/discuss any questions. diff --git a/org-cyf-itp/content/data-flows/sprints/1/day-plan/index.md b/org-cyf-itp/content/data-flows/sprints/1/day-plan/index.md index 42b7b8138..d8435c244 100644 --- a/org-cyf-itp/content/data-flows/sprints/1/day-plan/index.md +++ b/org-cyf-itp/content/data-flows/sprints/1/day-plan/index.md @@ -13,7 +13,10 @@ time=15 [[blocks]] name="Teamwork Project Sprint 1" src="https://cyf-pd.netlify.app/blocks/teamwork-project-s1/readme/" -time=140 +time=50 +[[blocks]] +name="Usability Workshop" +src="module/ux/usability-workshop" [[blocks]] name="Lunch" src="blocks/lunch" diff --git a/org-cyf-itp/content/data-flows/sprints/1/prep/index.md b/org-cyf-itp/content/data-flows/sprints/1/prep/index.md index 5841a59b9..ab6035adc 100644 --- a/org-cyf-itp/content/data-flows/sprints/1/prep/index.md +++ b/org-cyf-itp/content/data-flows/sprints/1/prep/index.md @@ -7,8 +7,8 @@ weight = 1 name="How the internet works" src="module/js3/internet" [[blocks]] -name="Technical Writing 101" -src="https://github.com/CodeYourFuture/Module-Data-Groups/issues/1" +name="Usability Workshop Prep" +src="module/ux/usability-workshop-prep" [[blocks]] name="Rendering Data as UI" src="module/js3/data-ui"