MC2 - Prototyping Phase Plan

Challenge Overview
What is the challenge Purpose?
To let learners get the emotion for this challenge: “I amazingly survived! 😅 I love 🥰 my
teams (Drama included) but I love my iPhone even more”.

What is the Challenge goal?

Learner explore and understand the feature of iPhone, by optimise iPhone's features and
functions into their app project's implementation.

What is prototyping phase focus?

Hi-fid prototype

What is the objective of prototyping phase in MC2?

Let learners explore and learn more into the technical side: framework and HIG & Xcode
combined-implementation. Recalling some lessons from previous challenges will be into
some Design & Tech LOs such as Design Guideline, Gestures, Bars and many more.

By doing this, we expect that learners who already experienced some basic LOs before can
recall and add more advance LOs in this challenge based on their group's challenge.

Artefacts
What artefacts that learner create?
- Lo-fid design prototype (Crazy 8)
- User flow
- Hi-fid design prototype (Sketch)
- Design guideline (style guide in LO term)
- Group research lesson material (HIG & Xcode implementation)
- Xcode project (minimum one screen)

What artefacts that constantly evolve?

- Challenge organizer file (continue from 1st week)
- Sketch prototype >> continuously progressing until Development week
- Xcode project >> continuously progressing until Development week

Who will check group learner's artefacts and progress?

Group mentors.

Where we can put group mentor check-in?

Based on expected milestones
4, 6, 11 May 2020 >> see MC2 - Mentor Guidelines

Page 1 of 16

 Milestone tracker
How can we check their artefacts?
This is the tool to observe and check on learners development stage. This can help mentors
to have a glance of learner development stages and phases. When learners achieve at
certain milestone, they will update the “Milestone Tracker”

Each group will put all the shared documentation link inside their challenge organiser and
Group Dropbox. We also can check it in the Airtable-Prototyping Milestone Tracker.

GQ: what is the checklist condition?

see MC2 - Mentor Guidelines

TOOLS
What tools needed to create all listed artefacts?
- Sketch software + Cloud
- Xcode
- Numbers + iCloud
- Paper and pen (lo-fid prototype)
- Ryver >> forum discussion, group mentor + group challenge learners
- Zoom / facetime / WA / Smart fren VoLTE >> discussion, check in, review
- Airtable >> LCD, Reflection, LJM, guiding resources
- Dropbox >> lesson material
- Milestone tracker

Schedules, Milestones, and LOs

In asynchronous learning mode, this schedule only acts as milestone guidelines. Learners
will do the challenge with their own pace.

GQs:
- How can they aware of their own milestone track? Using the milestone tracker as NC1
will do.
- How can they aware of their schedules? Make them regularly check LCD, instruction
document, ryver and manage their time well.
- How can we help them to do a good time management? Create another GQs and GRs for
them as an initial findings.

Learning Objectives:
CBL Learning Objectives:
1. CBL | Learning Backlog √ in Academy plan airtable

Page 2 of 16

 Design Learning Objectives:

New touch:
1. Visual design | typography √ in Academy plan airtable
2. Design | typeface classification √ in Academy plan airtable
3. Design | font weight √ in Academy plan airtable
4. Design | typographic alignments √ in Academy plan airtable
5. Visual design | typographical hierarchy √ in Academy plan airtable
6. Visual design | visual balance √ in Academy plan airtable
7. Visual design | color and contrast √ in Academy plan airtable
8. Visual design | terminology √ in Academy plan airtable
9. Branding | style guide √ in Academy plan airtable
10. Visual design | launch screen √ in Academy plan airtable
11. Prototype | user flow √ in Academy plan airtable
12. Controls | design text field √ in Academy plan airtable
13. Controls | design slider √ in Academy plan airtable
14. Controls | design segmented control √ in Academy plan airtable
15. Controls | design picker √ in Academy plan airtable
16. Views | design text view √ in Academy plan airtable
17. Views | design table view √ in Academy plan airtable
18. Views | design image view √ in Academy plan airtable
19. Views | design collection √ in Academy plan airtable
20. Views | design alert : also see App Architecture | modality√ in Academy plan airtable
21. App Architecture | alerts √ in Academy plan airtable
22. Views | design activity view √ in Academy plan airtable
23. Views | design action sheet √ in Academy plan airtable
24. Views | keyboard data entry: Custom keyboards √ in Academy plan airtable
25. User Interaction | gestures √ in Academy plan airtable
26. User Interaction | haptic feedback √ in Academy plan airtable
27. User Interaction | data entry √ in Academy plan airtable

Iterate:
1. Accessibility | color blindness √ in Academy plan airtable
2. iOS Design | Themes:
• iOS design | clarity √ in Academy plan airtable
• iOS design | aesthetics √ in Academy plan airtable
• iOS design | consistency √ in Academy plan airtable

3. User Design | usability √ in Academy plan airtable

4. Design | color schemes √ in Academy plan airtable
5. Bars | Tab Bars
6. Bars | Navigation Bars

Covered in development week:

1. Design | raster/vector √ in Academy plan airtable
2. Design | Image formats √ in Academy plan airtable

Page 3 of 16

 3. Visual design | image size >> in HIG: Icons and Images | Icon size and Resolution √ in
Academy plan airtable
4. Views | design scroll view >> see also User Interaction | gestures √ in Academy plan
airtable

Elective:
1. System capabilities | AR experiences
2. Controls | Progress Indicators

Tech Learning Objectives:

New touch:
1. UITextField √ in Academy plan airtable
2. UISegmentedControl √ in Academy plan airtable
3. UIPickerView √ in Academy plan airtable
4. UISlider √ in Academy plan airtable
5. UIActivityIndicator √ in Academy plan airtable
6. UIActivityViewController √ in Academy plan airtable
7. UITabBarController
8. UINavigationController √ in Academy plan airtable
9. UISegue √ in Academy plan airtable
10. UIKit | Keyboard types

Iterate:
1. IBOutlet
2. IBAction
3. UIButton
4. UIColor
5. UILabel
6. Running Xcode project on iPhone
7. Gesture
8. UIKit | UIAlertControllerStyleActionSheet
9. UIKit | UIAlertController
10. UIKit | UIKit framework
11. UIKit | Storyboard

Covered in development week:

1. Scrollable:
• UIScrollView √ in Academy plan airtable
• UITableView √ in Academy plan airtable
• UITableViewCell √ in Academy plan airtable
• UICollectionView √ in Academy plan airtable
• UITableViewController? √ in Academy plan airtable
• UICollectionViewController? √ in Academy plan airtable
2. Xcode | info.plist? √ in Academy plan airtable
3. UIKit | App life cycle? √ in Academy plan airtable

Page 4 of 16

 How to decide the deliverable method for the learning activity?

We've tried to use 4 quadrants by combining the difficulty level and importance level of the
LO.
Link to Numbers file:
https://www.icloud.com/numbers/0CwCi25mPNgQcCpeQsDgv4NwA#LO_-
_importance_vs_difficulty_level_metrix

Learning Activity Sequence

Prerequisite (from investigation week):

At least know their target user & their problem on domain investigation.

Prototyping week sequence:

I. Design days (3 days)

What specific guiding questions are these activities answering?

>> It is in the day by day activity below.

• Screen list & feature list

• User Flow >> Create the step by step flow for 1 user's goal. The sequence will be like a
skeleton for a story the step of user tap on the icon app until user finish the goal. E.g.
Succeed to order a healthy food.

• Crazy 8 >> After each group already provide the screen + feature list and the user flow,
they can do this ideation of lo-fid design prototype. How do we facilitate a discussion for
curating all kinds of different crazy 8 within one group?
>> it will be handled by mentor group

• Sketch prototype & design guideline >> Hi-fid design prototype. Learner will get GR link
of how to use shortcut in Sketch to ease their design work and optimize their time usage.

• Typography >> Each learner will create at least 1 screen of design mockup from their
group project. Then the group will decide which one that will be used for their Xcode
project.

II. Learning by Sharing (2 days)

• Group research (1 day)
• Share to peer (1 day)

Objective for learner: Other learners can understand each group's coverage.
What specific guiding questions are these activities answering?
>> It is in the day by day activity below.

Page 5 of 16

 Deliverable: Lesson material for peer > It's up to them to deliver the video or and written
lesson material. Mandatory: GRs link.

Tools:
- Form Airtable: Each group will drop their group name, lesson they cover, group's dropbox
link, GRs link. <<Airtable link>>
- Preview all lessons in Airtable (view only) <<Airtable link>>
- Dropbox group (for lesson material)
- Ryver >> Forum discussion with link to the airtable preview about the lessons.

Ryver Forum Discussion Checklist

Covered lessons for each group. E.g. Alert & text field.
• Release Date: 5 May 2020
• Content:
A. Group name & number
B. Covered LOs
C. Airtable preview link
• Topic description:
Discussion about <<Topic Name>> implementation in Xcode based on HIG
recommendation.

Responsible Group: <<Group Name>>

Learning Objectives: <<Topic’s LOs>>

For responsible group, don’t forget to put your Guiding Resources and Lesson Material
Dropbox link here.

Notes: Everyone can ask & answer any questions (not only the responsible group)

e.g.,
Discussion about Gestures implementation in Xcode based on HIG
recommendation.

Responsible Group: PhD

Learning Objectives:
• User Interaction | gestures
• UIKit | UIGestureRecognizer

Notes: Everyone can answer the question (not only the responsible group)
• Channel: Coding Morning & Afternoon
• Title:
MC2 - <<Topic Name>>

e.g.,
MC2 - Gestures
• Number of Topics: 9 x 2

Page 6 of 16

 Language: English

How to divide group research topic?

Focus on Low difficulty and High importance LO (combine between Tech and Design).
Learner can choose topic they want to explore from Group Topic List but one topic can be
covered only by 1 group.

How we make sure each group cover the LOs

Learners should generate their own GQ in a learning backlog before “Giving them the
GQ”.
>> yes, we always remind them to always put the GQs by themselves first in their Challenge
Organizer file.

Giving them GQs:

1. Mandatory
• What?
• When to use it / use case? (HIG)
• How to use it? (Xcode)
2. Optional
• Best practice

Notes: at this stage we expect learner can find their own Guiding Resources

Why should the learner care?

• Learn about common Native component that they don’t need to create from zero. The native
component lets apps achieve a consistent appearance across the system, while at the same
time o ering a high level of customization (source: Interface Essentials)

• The importance of learning by sharing

• They can understand both design and code in the same time on one component

• Divide and conquer in the larger scale (class), they can be a guiding resources

• Explore about iOS frameworks to optimise their iPhone

• They will know how to implement the lessons into their project (notes: we will give them GQs)

III. Back to their project (Refine) (2 days)

• Xcode implementation and refine their project
• Suggested to do framework exploration >> if they need it
• Prepare for MTR

Expected Phase with Milestones:

1st day:

Page 7 of 16

ff

?


 Applied Research: app deconstruction (screen list & feature list), crazy 8 (lo-fid
prototyping), user flow.
💎 Output: App deconstruction, Lo-fid prototype, User flow.

GQ:
• How to do crazy 8 for lo-fid ideation in distance learning? Individually -> combine the
result -> put the result on Challenge organizer
• How to create a good user flow?

2nd day:
Applied Research: Visual balance, digitalize the lo-fid prototype into the hi-fid prototype
design (sketch), Typography.
💎 Output: Hi-fid prototype (Sketch file)

GQ: Please pair them in the appropriate guiding activities

>> The GA is divide and conquer of how they will ideate the UI screens, as the suggested
idea yesterday.
• How to visually balance the UI design so it is friendly for your user?
• Why visual balance is important?
• How to easily use shortcut in sketch?
• How to do a good design collaboration with the team?
• Which typeface classification and typeface family suits your project?
• What kind of wording that represents your project personality and address it to your user?
• How to adjust and choose which alignment that suits with your text content on screen?
• How to use font weight wisely so you can emphasize the important contents first, build a
good hierarchy and navigate your user as you want?
• How to help your user that has difficulty in accessibility such as read a small text or
color blind?

3rd day:
Applied Research: color schemes & color blindness friendly, create design guidelines, check
the HIG and usability.
💎 Output: Design guidelines Isn’t there already a design guideline for accessibility and
HIG? How is this different from the ones that already exist?
>> The colors usage will be for their product's brand or identity.

GQ:
• How to create a good design guidelines?
• What is the requirement of good guidelines?
• How to check if the colors already good for color blindness friendly?
• What HIG says about the color schemes and accessibility in color?

4th-5th day:
Applied Research: Group research, share to peer

Page 8 of 16

 💎 Output: Group research lesson material

GQ:
1. What are the parameters for research lesson material?
• What?
• When to use it / use case?
• How to use it? (Xcode)
• What is the Best practice?
2. What is the possible lesson material format?
• Keynote
• Video
• Medium article
• conclusion: They can use any format
3. where learner can post the research lesson material?

6th - 7th day:

- Applied Research: refine the prototype
💎 Output: Xcode project (minimum Main screen only)

GQ:
• Which thing learner want to refine?
• Who will develop the Xcode and who will refine the sketch file?
• Which screen that learner want to develop first?

Lesson Learned From Previous Challenge

Work
1. Milestone trackers

• Know the current progress

• Get quantitative data

2. Exhibition

• Other learner can give feedback anytime

• Reviewer can check the challenge before, during, or after the review

Need to improve
1. Reason why they do the activity (connection between activity and they project)

• Explain the reason why

• Give GQs that related to the activity and their project

Page 9 of 16

Page 10 of 16
Some Questions to consider when designing a Guiding
Activity
• What are we trying to learn1? (why should the learner care? What are the speci c objectives?
Are they core or elective?)

• Why are we learning this now? (what guiding questions is it answering? Are they immediate?)

• Is there any pre-requisite knowledge/skills needed?

• How does this connect with prior Guiding Activities?

• How can we not make this a “unitasker2” by connecting objectives across curriculum strands
(eg coding and design and process)? There is not enough time to teach everything in isolation.

• Can the learners immediately apply what they learn? (Does it answer a pressing guiding
question? Will it help them solve a current problem? Make progress on their solution?)

• Can this be learned independently? (Am I just presenting content that is readily available?)

• Can the learners help others to learn? (Do I need to do all of the work? can i empower the
learners to support each other?)

• Large group? Small groups? Individual work? A combination? (why have I structured the
activity a certain way? Is that the most e ective way?)

• How do i know the learners are understanding? (How will i get feedback and check for
understanding?)

• What options are there if students do not understand? (Are there multiple strategies for
illustrating the idea, visuals, experiences? Resources/strategies ready for those who struggle?)

• Can I clearly and con dently describe and organize the activity?

• Do the learners understand the learning objectives/guiding questions are being addressed?

• Can I clearly describe what success looks like for the activity? Do the learners understand
what this is?

• How can I vary the pace of the activity to keep the learners active and involved?

• Do I give enough time for the learners to use, process and re ect on what was learned?

• Does the activity allow the learner control over their learning? (Can they move at their own
pace or is it dependent on me?

• Am I spending more time on slides than planning activities and interaction (Hint:not good)

• If I need to lecture is it longer than 10 minutes (what is the 10 minute rule?3)

• What guiding resources are available for those that can move ahead and those who have
trouble?

1Think learning rst and teaching second. There can be learning without teaching and there can de nitely be teaching
without learning.

2 A unitasker is a tool in the kitchen that can only be used for one thing resulting in cluttered drawers.

3https://www.inc.com/carmine-gallo/apple-follows-this-10-minute-rule-to-keep-you-glued-to-product-
presentations.html
Page 11 of 16
fi
fi
ff
fl
fi
fi
 • What guiding resources are available after the activity for clari cation and refreshing
knowledge?

Guiding Activity Detail

Learning by Sharing
What is the activity about?
Each group will explore di erent topic (design & code). At the end of the activity, they need to
share to their peer about what they learn.

This activity will produce 9 di erent topics to learn. They can apply immediately the topics that
they learn (not all, only topic that they think t to their solution).

What are we trying to learn?

Main objectives
• UITextField & Controls | design text field
• UISegmentedControl & Controls | design segmented control
• UIPickerView & Controls | design picker
• UISlider & Controls | design slider
• UIActivityIndicator & Controls | Progress Indicators
• UIActivityViewController & Views | Activity Views
• UITabbarController & Bars | Tab Bars
• UINavigationController & Bars | Navigation Bars
• UIKit | UIAlertControllerStyleActionSheet, UIKit | UIAlertController & Views | design action
sheet
• UIAlertController & Views | design alert

Side objectives

• Collaboration

• Communication

• Responsibility

why should the learner care?

• Learn about common Native component that they don’t need to create from zero, just use it

• The importance of learning by sharing

• They can understand both design and code in the same time on one component

• Divide and conquer in the larger scale (class)

• Explore about iOS frameworks to optimise their iPhone

Page 12 of 16

ff
ff

fi

fi

 How they learn?

We will provide guiding resources from o cial documentation (HIG & Apple Documentation). They
will learn with they group. Create lesson material and share the result so other group can see it.
We will give them some time so they can learn other group lesson material. If there is something
unclear, we open topic in Ryver Forum Discussion where they can help each other. Every group
will responsible for topic that they explore.

Why are we learning this now? (what guiding questions is it answering? Are they
immediate?)
For the sca olding of Learning Activity based on the prior delivered Learning Objectives. we
switch the focus on each challenge based on what we already covered before, when we iterate it,
when we levelling up their knowledge. MC1 > Investigation introduction and basic knowledge of
project sequence, NC1 > Empathy to user and other roles, MC2 > Technically focused on iOS
both in design and tech.

How does this connect with prior Guiding Activities?

Large group? Small groups? Individual work? A combination? (why have I structured the
activity a certain way? Is that the most e ective way?)
Combination. That will be an individual exercise in typography lesson. Other thing to do is a group
research and share to peer based on Mini challenge group (5-6 people) for 1-2 covered topics.

How do i know the learners are understanding? (How will i get feedback and check for
understanding?)
Milestones tracker, group check-in, exercise (on development week) - GH: please make sure
that exercise is relevant and in the context of the moving forward the challenge—not an
exercise for you to grade, but an exercise for the learner to directly gain skills that they can
tackle their challenges.
>> the exercise in development week was removed, in here we didn't updated it yet.

What options are there if students do not understand? (Are there multiple strategies for
illustrating the idea, visuals, experiences? Resources/strategies ready for those who
struggle?)
Ryver topic

Can I clearly and con dently describe and organize the activity?
Yes.

Do the learners understand the learning objectives/guiding questions are being addressed?
Page 13 of 16
ff
fi
ffi
ff
If the question is more like how to measure their understanding level, then we can see that in their
artefacts, forum discussion, Mid Term Review and Final Challenge Review.

Can I clearly describe what success looks like for the activity? Do the learners understand
what this is?
Success looks like for the activity is when learners understand and can implement the delivered
LO in whatever their pace and stage they hit on. Even though their implementation is still far from
great. Learners usually understand after they repeat the process or iterate the challenge, why they
need to understand the LOs, why sequence is important, etc.

How can I vary the pace of the activity to keep the learners active and involved?
This asynchronous learning is help us to cover all paces. By put some check-ins with mentors
several times in a week, they will be more aware of some critical points (artefacts) to hit and also
do a good time management.

Do I give enough time for the learners to use, process and re ect on what was learned?
Yes.

Does the activity allow the learner control over their learning? (Can they move at their own
pace or is it dependent on me?
Yes, learners can control over their learning, moreover the pace and exploration.

Am I spending more time on slides than planning activities and interaction (Hint:not good)
nope.

If I need to lecture is it longer than 10 minutes (what is the 10 minute rule?4)

What guiding resources are available for those that can move ahead and those who have
trouble?

What guiding resources are available after the activity for clari cation and refreshing
knowledge?

4https://www.inc.com/carmine-gallo/apple-follows-this-10-minute-rule-to-keep-you-glued-to-product-
presentations.html
Page 14 of 16
fl
fi
 Back up Plan
Learning By Sharing
Previous plan:
1. Group 1
• UIKit | UITextField & Controls | design text field
• UIKit | UIAlertController & Views | design alert
• UIKit | Keyboard types
• App Architecture | Modality
2. Group 2
• UIKit | UISegmentedControl & Controls | design segmented control
• UIKit | UIActivityIndicator & Controls | Progress Indicators
3. Group 3
• UIKit | UIPickerView & Controls | design picker
• User Interaction | haptic feedback
4. Group 4*
• UIKit | UISlider
• Controls | design slider
• User Interaction | haptic feedback
5. Group 5
• User Interaction | gestures
• UIKit | UIGestureRecognizer
6. Group 6*
• UIKit | UIActivityViewController
• Views | Activity Views
7. Group 7
• UIKit | UIAlertControllerStyleActionSheet
• UIKit |UIAlertController
• Views | design action sheet
8. Group 8
• UIKit | UITabBarController
• Bars | Tab Bars
9. Group 9
• UIKit | UINavigationController
• Bars | Navigation Bars
• UIKit | Segue
Group Topic Guiding Questions

Group 1 Alert, Text Field, & When to use it?

keyboard types How to implement it on Xcode?

Group 2 Segmented Control & When to use it?

Activity Indicators How to implement it on Xcode?

Group 3 Pickers & Haptic When to use it?

Feedback How to implement it on Xcode?

Group 4 Sliders & Haptic When to use it?

feedback How to implement it on Xcode?

Page 15 of 16

Group Topic Guiding Questions

Group 5 Gestures When to use it?

How to implement it on Xcode?

Group 6 Activity Views When to use it?

How to implement it on Xcode?

Group 7 Action Sheets When to use it?

How to implement it on Xcode?

Group 8 Tabbar Controller When to use it?

How to implement it on Xcode?

Group 9 Navigation Controller & When to use it?

Segue How to implement it on Xcode?

Page 16 of 16