UK4522
**Design and User Experience**
**Applied Class 6**
**Peer Review for Assignment 1 is Now Available**
This week, you have the opportunity to provide the teaching team with evaluations and feedback about your group work experience for Assignment Submission 1.
● Ratings for collaboration and conduct
● Constructive comments
The peer review results will not lead to any automatic changes in marks.
Teaching staff will examine the ratings and comments from each group. If any issues arise, we will contact students directly to gather further information.
Access the Peer Review in Moodle's Week 6 Own-Time section.
Peer review closes on Friday, 30 August, at 11:55 pm.
**Learning Objectives**
In today’s tutorial, you will continue developing the smart gardening app that was started in Session 2.
● Establishing acceptance criteria
● Organizing tasks on a Kanban board
● Practicing low-fidelity wireframing
**The Task**
Here’s a reminder of the task:
“You are being tasked with designing a smart gardening app that assists users of all levels (from beginners to experts) in deciding what they can plant in their living space (backyard, balcony, etc.) and how and when to care for their plants.”
You can refer to the user stories you created in Session 2, or alternatively, use a set of sample user stories that we have prepared.
**Set up a Kanban Board for Each Story (20 mins)**
**Individual Activity**
Create a design plan for 1 user story (each person in the group should choose a different user story) using the Kanban format provided below (make a copy of the Kanban slide for each story), and add the user story in the "story" section.
**Story** | **To Do** | **In Progress** | **Completed**
As Tony, I want reminders for when my plants need watering, so I don’t have to memorize their watering schedule.
**Defining Acceptance Criteria**
In the "To Do" column, list the tasks or features necessary to fulfill the user story in your app. These will serve as the story’s acceptance criteria. Manage the project by moving tasks into the next column as they are developed.
**Story** | **To Do** | **In Progress** | **Completed**
As Tony, I want reminders for
when my plants need watering, so I don’t have to memorize their watering schedule.
- Option to register/add a user’s plants in the app
- Provide 3 different alternatives for users to receive notifications (e.g., email, SMS, WhatsApp, etc.)
- Notification icon on the home screen of the app
**Acceptance Criteria for User Stories**
For your chosen user story, generate at least 5 acceptance criteria to be placed in the "To Do" column.
✅ Acceptance criteria should outline the features needed to make the user story achievable or functional.
✅ Criteria should not be platform-specific (i.e., not exclusive to iOS, Android, etc.).
⛔ Criteria should not describe a list of steps users must follow (e.g., first click this button, then proceed to the next screen, etc.).
As you develop the prototype sketches later in this session, move these acceptance criteria across the columns to track your progress.
[Duplicate this slide for each group member]
**User Story** | **To Do** | **In Progress** | **Completed**
"As [persona], I want to [goal], so that I [benefit]."
List the features needed to address the user story.
Copy the sticky note below for each feature and place it in the "To Do" column.
When you begin designing the feature, move the sticky note to the "In Progress" column.
Once the feature is complete, move the note to the "Completed" column.
**Why Hand-Drawn Sketches Are Preferred for Idea Generation**
You need to be comfortable sharing ideas through quick, simple sketches.
Pen and paper offer benefits over digital tools for early-stage work:
● High usability with minimal learning curve
○ No time spent learning software tools.
○ No concerns about compatibility or technical issues.
● Less attachment to early concepts
○ If an idea doesn’t work, discard it and start fresh.
○ Less time spent on fine details.
○ More focus on generating unique ideas.
**Prototyping (60 mins)**
**Individual Activity**
Design a low-fidelity prototype for the features you proposed on your Kanban board. Your prototype should show the core function, workflow, and appearance of your app. It may take several attempts or iterations to arrive at a satisfactory design.
**Note:** The purpose of prototyping is to test new ideas.
**DO NOT** copy an existing design. Doing so defeats the purpose of prototyping, as existing designs may have their own usability issues.
**Low-Fidelity Sketching Guidelines**
The device frame should be represented by a clearly drawn, straight-edged rectangle.
Try to draw interface elements to scale.
Draw larger to make it easier to include small UI components.
Depict each element distinctly (examples shown on the right).
Avoid showing specific UI design styles or overly detailed informational content.
Do not use colors in your sketch.
Don’t spend too much time refining small details.
**Start Sketching Your Prototype**
Assume the prototype is for a mobile device.
1. Each group member will design a low-fidelity prototype based on their user story.
2. Choose your prototyping tool:
○ Sketch using pen and paper, or draw on a whiteboard (recommended).
○ Use basic shapes and drawings in Google Slides or Google Drawing.
■ Group members can copy the Google Drawing template.
■ Alternatively, draw on the next slide (duplicate the slide for each group member).
Paste your group's prototype images into this slide deck.
**Don’t Forget to Update Your Kanban Board**
1. Check your Kanban board's "To Do" column for acceptance criteria and consider different ways the feature could be implemented.
2. When working on a feature, update your Kanban by moving the acceptance criteria to the "In Progress" column.
3. Once a feature is fully developed, move the acceptance criteria to the "Completed" column (i.e., tasks that are finished).
**Prototype Presentations**
**Group Activity**
Present your low-fidelity prototypes to the group.
Annotate and identify good usability elements in the prototype screens of the person next to you.
● Highlight and label where a Norman Principle is applied in the design.
● Highlight and label an accessibility feature and identify the issue it addresses.
**Norman Principle: Discoverability**
- Will be the first element the user notices when scanning the layout.
- Placement is consistent with most apps, appearing in a familiar location.
**WCAG Principle: Operability**
- The entire card can be tapped to reveal more details instead of tapping a smaller button within the card.
- Guidelines: 2.5.5 Target Size (Enhanced).
---
**Assignment**
**Submission 2 Instructions**
That’s it for today!
In the next applied class, we will cover guidelines for menu and navigation design.
**Important reminders for this week:**
● Peer Review for Assignment Submission 1 is now available
○ Accessible on Moodle in the Week 6 Own-Time section.
○ Due by the end of this week (Friday, 11:55 pm).
● The brief for Submission 2 is now available on Moodle
○ Individual submission.
○ Due at the end of Week 8 (Friday, 11:55 pm).
See you in the next session!