Add Usability workshop #1739
+175
−3
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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? | ||
|
|
||
| <details> | ||
|
|
||
| <summary>Background for volunteers</summary> | ||
|
|
||
| * 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. | ||
|
|
||
| </details> | ||
|
|
||
| Explain what product thinking is | ||
|
|
||
| <details> | ||
|
|
||
| <summary>Hints for volunteers</summary> | ||
| * 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. | ||
|
|
||
| </details> | ||
|
|
||
| {{<note type="exercise" title="Exercise (10 mins)">}} | ||
| 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. | ||
|
|
||
| <details> | ||
|
|
||
| <summary>Hint for volunteers</summary> | ||
|
|
||
| * Make sure everyone joins via the provided link. | ||
| * The Kahoot! quiz has two multiple-choice questions set up, just follow the order shown there. | ||
|
|
||
| </details> | ||
|
|
||
| {{</note>}} | ||
|
|
||
| ## 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. | ||
|
Contributor
There was a problem hiding this comment. I wonder how many pairs we'll see repeating something from the prep work verbatim. The discussion will still be useful but we may want to add a requirement that the feature needs to be something not covered in the prep. Let's see how it goes this time round. |
||
| * 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. | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The list isn't formatting correctly, needs a blank line under the
summarytag.