TYA Wire Frames v3

Hi TYA team, good job with the built so far!
Herere the Dierences between Sta, Supervisor, Club Leader.

Sta
Supervisor
Club Leader
Able to access all clubs
Able to access multiple clubs
Able to access one club
Able to view all fields on the

Client Details page
Able to view only some fields

on the Client Details Page
Able to view only some fields

on the Client Details Page
Able to input and edit all fields

on the Client Details page
Able to edit only some fields on

the Client Details Page
Able to edit only some fields on

the Client Details Page
Able to add and manage users

(add new users, assign roles,
assign clubs, change password)
Cannot add or manage users
Cannot add or manage users
Accessed frequently from

desktop
Accessed frequently from mobile
Accessed frequently from mobile
(hence give access to switch between clubs)
(hence mobile view for Sta should be

scaled down from the Sta - Desktop
screens)
(hence give access to switch between clubs)
(refer to the excel sheet that Wen Jia will

provide, as to which fields are viewable and
editable for Sta, Supervisor, Club Leader.)
(hence desktop view for Supervisor should

be scaled up from the Club Leader - Mobile
screens)
(refer to the excel sheet that Wen Jia will

provide, as to which fields are viewable and
editable for Sta, Supervisor, Club Leader.)
(hence desktop view for Supervisor should

be scaled up from the Club Leader - Mobile
screens)
TechLadies - UX Design Notes

logo
Welcome!
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
User ID
SCREEN
1-Log In pg
Password
Log In
If Admin logs in, he/she will be able to have access to all clubs.
If Club leader logs in, he/she will be able to view only the club
he/she is in charge of.
2 forgot your password?
Footer
LOG IN
User enters ID and PW to access the desktop site.
FORGOT YOUR PW?

System to ask user for email address, so to send them link to
reset ID / PW.
Manage Users
My Account
Log out
Clients
Events
logo
Pasir Ris Club
Clients of Pasir Ris Club (33)
2 Export Client Data
3 Export Attendance
10
Date of
Last Attendance
DATE:
19/10/2016
AUTHOR:
Gia Phua
SCREEN
Family Status
Level
Gender
Name
Low Income
P1
30/07/2016
1 Jan 2001
Single Parent
P2
30/07/2016
1 Jan 2001
Name
Single Parent
P4
30/07/2016
1 Jan 2001
Name
Low Income
P4
30/07/2016
1 Jan 2001
Name
Single Parent
P5
30/07/2016
1 Jan 2001
Name
Single Parent
P5
30/07/2016
1 Jan 2001
TYA_Wire frames_v3
+ Add Client
Name
Name
PROJECT:
Date of Birth
Name
Low Income
P6
30/07/2016
1 Jan 2001
Name
Single Parent
P6
30/07/2016
1 Jan 2001
Name
Single Parent
P6
30/07/2016
1 Jan 2001
Name
Single Parent
P6
30/07/2016
1 Jan 2001
2.1-Client List pg
PAGE TITLE
System to show the number of clients in the club, next to the
page title.
BUTTON: EXPORT CLIENT LIST

User should be able to export all the clients data (found within
in the client details page) into a csv file. This is to facilitate
TYA's reporting purposes.
BUTTON: EXPORT ATTENDANCE

User should be able to export all the attendance of all the
clients, into a csv file.
BUTTON: ADD STUDENT

This will load a new page (Client Details page). User will be able
to create new student profile, which will show up in this table,
after the profile details have been inputted and saved.
SORTING THE TABLE BASED ON LEVEL

To arrange table based on level of clients (clients from P1 on
top, P6 at the bottom). Within the group of same level clients,
arrange by alphabetical order of clients name.
COLUMN: DATE OF LAST ATTENDANCEE

The reason for having this is so that Admin/Club Leaders are
able to gauge quickly when was the last time the client has
attended TYA events, and therefore follow up with them if they
had been missing events for a while.
COLUMN: DATE OF BIRTH

The reason we have date of birth in the format of 'dd mmm
yyyy', dierent from 'dd/mm/yyyy', is because we want to allow
the user to quickly find Birthday month babies. User is able to
use 'Ctrl F', example type in JAN to find clients with birthdays in
January.
FAMILY STATUS: SINGLE PARENT

If it is inputted in the 'Client Details page' that the client is under
both 'Low Income' and 'Single Parent' category, the option
'Single Parent' will overrride and it will show up as 'Single
Parent' in this table.
CLIENT LIST PG AS LANDING PAGE AFTER USER LOGS IN

After Sta or Supervisor logs into the system, he/she will land
on this Landing page. It will open up the first club they have
access to, from the dropdown list (probably alphabetical order).
[page will do lazy loading of all clients data as user scrolls down the page.]
Footer
If user wants to change club, he/she will have to use the 'Select
Club' dropdown in the header to do so.
10
BUTTON: NAME LABEL

.Upon mouseover of the names, the text of the names should
turn another colour, such as blue. This serves as a visual
indication for user that there is an action for clicking on the
names.
If user clicks on the name of the client, user will be led to the
'Client Details' pg to see more info about this client
Manage Users
My Account
Log out
Clients
Events
logo
1
Pasir Ris Club
Central
East
Central
Clients
of Pasir Ris Club
(33)
[Club name]
[Club name]
[Club name]
Export Client Data
[Club name]
[Club name]
[Club name]
[Club name]
Name
[Club name]
[Club name]
Family Status
[Club name]
[Club name]
Level
[Club name]
[ClubName
name]
[Club
Low name]
Income
[Club name]
Name
[Club name]
[ClubName
name]
Export Attendance
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
SCREEN
Gender
Date of Birth
[Club name]
P1
30/07/2016
1 Jan 2001
[Club name]
Single Parent
[Club name]
[Club name]
P2
[Club name]
30/07/2016
1 Jan 2001
[Club
name]
Single
Parent
[Club name]
P4
30/07/2016
1 Jan 2001
Name
Low Income
P4
30/07/2016
1 Jan 2001
Name
Single Parent
P5
30/07/2016
1 Jan 2001
Name
Single Parent
P5
30/07/2016
1 Jan 2001
Name
Low Income
P6
30/07/2016
1 Jan 2001
Name
Single Parent
P6
30/07/2016
1 Jan 2001
Name
Single Parent
P6
30/07/2016
1 Jan 2001
Name
Single Parent
P6
30/07/2016
1 Jan 2001
Footer
PROJECT:
+ Add Client
Date of
Last Attendance
[page will do lazy loading of all clients data as user scrolls down the page.]
2.2-Client List pg (Interactive state: w menu)
MENU
User should be able to assess the dierent clubs from this
menu. Clubs are categorised by location in Singapore.
Manage Users
My Account
Log out
Clients
Events
logo
Pasir Ris Club
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
First name
+Add
clients picture
SCREEN
Last name
3.1-Client Details pg
Club name
Personal Prole
Female
Gender
Low income
Family status
Male
CLIENT PICTURE
After clicking on this, it will open up a image uploader. User can
upload 1 picture of the client.
FIELD DROPDOWN: CLUB NAME

There are about 23 clubs. * To get the club names options from
TYA.
Family background
Single parent
Mobile no.
Home no.
Medical condition
Race
Date of birth
* IMPO * If user selects club that is not in line with the club site
the user is currently viewing, there should be a pop up box that
informs user that they are adding a client that belongs to
another club hence the client will be reflected only if user
switches to view that club under the Select club dropdown in
the navigation menu.
dd mmm yyyy
FIELD DROPDOWN: RACE

Options:
- Chinese
- Malay
- Indian
- Eurasian
- Others
AGE
System should auto-calculate the age based on the date of
birth. Hence we should give this field a grey background to
indicate to user that this field is not editable.
FIELD DROPDOWN: IDENTITY TYPE

Options:
- Singaporean citizen
- Singapore PR
- Foreign passport
BUTTON: +ADD A FAMILY MEMBER OR GUARDIAN

User is able to add and input more family members/guardians
profiles. Section will appear one after another.
FIELD: FAMILY TOTAL MONTHLY INCOME & INCOME PER

CAPITA
Auto populated, based on the monthly incomes inputted from
family members in 'Family Profile' section. Family total monthly
income is computed by addition of each family member's
monthly income (X). Income per capita is computed by taking
(X)/no. of household members.
FIELD: SCHOOL
To auto-populate from the field 'School' inputted in the above
section. We're repeating this field here, so that admin/club
leader can more easily evaluate the client's grades after
knowing the standards of the school.
BUTTON: ADD GRADE

Opens up a ligthbox where user can input the grade details.
(see in next page)
10
BUTTON: ADD NOTE

Opens up a ligthbox where user can input the general notes
about the client. Cannot add specific event behaviour notes
here on this page. That can only be done on Events pg.
(see next page)
11
BUTTON: DELETE
This will delete all details about the new/existing client from the
system. It will remove an existing client from the table on the
Client List page.
Hobbies
Age
Level
Current school
Address
Nationality
4
Identity type
Identity no.
Date joined TYA
dd/mm/yyyy
Save
Family Prole (this includes those staying in the same household)

No family member/guardian currently --
+ Add a family member / guardian
Family Finances
Household type
Purchased
Rental
Notes on family
resources
No. of household
members
Family total
monthly income
S$
Income per capita
S$
Save
School Grades
8
School
[Autopopulated from above]
+Add grade
No school grade currently --
Attendance
No attendance currently --
Behaviour Notes
No behaviour notes currently --
10
11
Delete
Footer
+Add note
Manage Users
My Account
Log out
Clients
Events
logo
Pasir Ris Club
+Add
clients picture
First name
Homer
Last name
Simpsons
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
1
SCREEN
3.2-Client Details pg (Interactive state - Edit mode)

Club name
Pasir Ris Club
Personal Prole
Female
Gender
Low income
Family status
Mobile no.
91253306
Home no.
67564938
Race
Chinese
Date of birth
02/01/2002
Age
11
Level
Primary 5
Current school
Anglo Chinese Barker School
Nationality
Singapore
Identity type
NRIC
Identity no.
S9002007D
Date joined TYA
08/07/2015
Male
Family background
Parents are divorced. Currently stays with

mother in one-room at. Dad is involved in
illegal gambling and has been in and out of
prison.
Single parent
Medical condition
Asthma
Hobbies
SAVED FIELDS
After user clicks on 'Save' button, the content are presented
like this, and no longer in editable mode.
BUTTON: EDIT
Upon clicking on 'Edit' button, user will see the editable form
fields again on this page, and will be able to edit the fields
directly on this page.
LIGHTBOX: FAMILY PROFILE

This appears when user clicks on button 'Add a family member/
guardian'.
PRIMARY VS SECONDARY BUTTON

Take note: There should be a dierence in the colour of primary
and secondary button. The primary button should be
emphasized, by a stronger colour. Secondary button should not
be emphasized, and we can used a lighter shade to illustrate it.
LIGHTBOX: SCHOOL GRADES

This appears when user clicks on button 'Add grade'.
Dropdown options for:
Level - P1, P2, P3, P4, P5, P6
Subject - English, Math, Science
Band - Standard, Foundation
Semester - CA1, CA2, SA1, SA2
BUTTON: VIEW MORE

Clicking on 'View more' button again will reveal another 10 rows
of details, and the function repeats.
LIGHTBOX: BEHAVIOUR NOTE

User is able to input general behaviour note about client. For
specific event behaviour note, user is only able to edit or input
via the Event page, not on this Client Details page.
BUTTON: EDIT
Upon clicking on 'Edit' button, user will see the editable form
fields again on this page, and will be able to edit the fields
directly on this page.
FIELD: AGE
Age should be autocalculated based on date of birth, hence
user should not be able to input age.
badminton, guitar, singing. hes a closet

songbird!
Address
Blk 106 Yishun Ring Road #04-67

S760106
Edit

3
Relationship
Name
Identity type
Contact no.
Identity no.
Marital status
Date of birth
Nationality
Age
Race
Occupation
Religion
Remarks
dd mmm yyyy
9
Language spoken
Monthly income
S$
Cancel
Save
Family Finances
Purchased
Household type
No. of household
members
Rental
Notes on family
resources
Family total
monthly income
S$ 3500
Income per capita
S$ 700
Single income. Mom is breadwinner. Parents

are divorced. Childrens school fees are
under Lee Kong Chian Foundation subsidy.
Edit
School Grades
5
School
+Add grade
Level
Semester
Subject
Grade
Band
Cancel
Save
Attendance
Date
Event Title
[Latest] 01/01/2016
Tuition class
01/01/2016
Tuition class
01/01/2016
Tuition class
01/01/2016
Pasir Ris Carnival
[Earlier] 01/01/2016
Tuition class
Attendance
Behaviour Notes
7
Notes
Cancel
Save
Delete
Footer
View more
Manage Users
My Account
Log out
Clients
Events
logo
Pasir Ris Club
+Add
clients picture
First name
Homer
Last name
Simpsons
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
SCREEN
3.3-Client Details pg (Interactive state - Saved mode)

Club name
Pasir Ris Club
Personal Prole
Female
Gender
Male
Low income
Family status
Mobile no.
91253306
Home no.
67564938
Family background
Single parent
Medical condition
Race
Chinese
Date of birth
02/01/2002
Age
11
Level
Primary 5
Current school
Nationality
Singapore
Identity type
NRIC
Identity no.
S9002007D
Date joined TYA
08/07/2015

prison.
Hobbies

songbird!
Address

S760106

+ Add a family member / guardian
Relationship
Mother
Name
Sarah Chu Ai Ling
Contact no.
91568264
Marital status
Divorced
Nationality
Divorced
Race
Chinese
Religion
Identity type
NRIC
Identity no.
S82364184J
Date of birth
07/15/1982
Age
34
Buddhist
Occupation
Secretary
Language spoken
Chinese, English
Remarks
Monthly income
S$ 3500
Mother struggles with 3 kids at home.

Sole breadwinner. Tends to scold children
and beat them when she is stressed out
from work.
Edit
Family Finances
Purchased
Household type
No. of household
members
Rental
Notes on family
resources

Family total
monthly income
S$ 3500
Income per capita
S$ 700
Edit
School Grades
School
+Add grade
Action
Level
Subject
Band
Semester
Grade
P6
Math
Standard
CA1
A2 (88/100)
P6
English
Standard
CA1
B4 (70/100)
P5
Science
Foundation
SA2
A2 (88/100)
P5
Math
Standard
SA1
B4 (70/100)
P5
English
Foundation
SA1
B3 (76/100)
(mouseover the row)
View more
Attendance
Date
Event Title
[Latest] 01/01/2016
Tuition class
01/01/2016
Tuition class
01/01/2016
Tuition class
01/01/2016
Pasir Ris Carnival
[Earlier] 01/01/2016
Tuition class
Attendance
View more
Behaviour Notes
+Add note
Event Title & Date

Tuition class, [Latest] 01/01/2016
Notes
Action
(mouseover the row)
Behaviour improved this week after our pep talk.
Tuition class, 01/01/2016
Misbehaved by talking back at club leader, even after

repeated warnings.
General, 01/01/2016
--
Pasir Ris Carnival, 01/01/2016
--
--
View more
Delete
Footer
BUTTON: EDIT
If user clicks on this, it will open up a lightbox (as shown in the
page '3.2 Client Details page')
SORT TABLE BY LATEST TO OLDEST ENTRY

Sort the table by having the latest entry on top, and oldest entry
at the bottom
BUTTON: VIEW MORE

System to reveal 10 more rows each time user clicks on 'View
more' button.
EDIT & REMOVE ICON

The concept of Progressive disclosure: Icons will only appear if
user mouseover or click on the row. It is not necessary to show
the icons for every row because it is redundant to, and will look
overwhelming.
Asthma
Edit
Manage Users
My Account
Log out
Clients
Events
logo
Pasir Ris Club
+Add
clients picture
First name
Homer
Last name
Simpsons
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
SCREEN
3.4-Client Details pg (Interactive state - 'View More' mode)

Club name
Pasir Ris Club
Personal Prole
Gender
Female
Male
Family status
Low income
Single parent
Mobile no.
91253306
Home no.
67564938
Race
Chinese
Date of birth
02/01/2002
Age
11
Level
Primary 5
Current school
Nationality
Singapore
Identity type
NRIC
Identity no.
S9002007D
Date joined TYA
08/07/2015
Family background

prison.
Medical condition
Asthma
Hobbies

songbird!
Address

S760106
Edit

Relationship
Mother
Name
Sarah Chu Ai Ling
Contact no.
91568264
Marital status
Divorced
Nationality
Divorced
Race
Chinese
Religion
Identity type
NRIC
Identity no.
S82364184J
Date of birth
07/15/1982
Age
34
Buddhist
Occupation
Secretary
Language spoken
Chinese, English
Remarks
Monthly income
S$ 3500
Mother struggles with 3 kids at home.

Sole breadwinner. Tends to scold children
and beat them when she is stressed out
from work.
Edit
Family Finances
Purchased
Household type
No. of household
members
Rental
Notes on family
resources

Family total
monthly income
S$ 3500
Income per capita
S$ 700
Edit
School Grades
School
+Add grade
Action
Level
Subject
Band
Semester
Grade
P6
Math
Standard
CA1
A2 (88/100)
P6
English
Standard
CA1
B4 (70/100)
P5
Science
Foundation
SA2
A2 (88/100)
P5
Math
Standard
SA1
B4 (70/100)
P5
English
Foundation
SA1
B3 (76/100)
P5
English
Standard
CA2
B4 (70/100)
P5
Science
Foundation
CA2
A2 (88/100)
P5
Math
Standard
CA1
B4 (70/100)
P4
English
Foundation
SA2
B3 (76/100)
P4
English
Foundation
SA1
B3 (76/100)
P4
English
Standard
SA1
B4 (70/100)
P4
Science
Foundation
CA2
A2 (88/100)
P4
Math
Standard
CA2
B4 (70/100)
P4
English
Foundation
CA1
B3 (76/100)
P4
English
Foundation
CA1
1B3 (76/100)
(mouseover the row)
View less
View more
Attendance
Date
Event Title
[Latest] 01/01/2016
Tuition class
01/01/2016
Tuition class
01/01/2016
Tuition class
01/01/2016
Pasir Ris Carnival
01/01/2016
Tuition class
01/01/2016
Tuition class
01/01/2016
Tuition class
01/01/2016
Tuition class
01/01/2016
Pasir Ris Carnival
01/01/2016
Tuition class
01/01/2016
Tuition class
01/01/2016
Tuition class
01/01/2016
Tuition class
01/01/2016
Tuition class
[Earlier] 01/01/2016
Attendance
Pasir Ris Carnival
View less
Behaviour Notes
+Add note
Event Title & Date

Tuition class, [Latest] 01/01/2016
View more
Action
Notes
(mouseover the row)
Behaviour improved this week after our pep talk.

repeated warnings.
General, 01/01/2016
--
--
--

repeated warnings.
General, 01/01/2016
--
--
--

repeated warnings.
General, 01/01/2016
--
--
--
--
--
View less
Delete
View more
BUTTON: VIEW LESS

The table will expand to show 10 more rows after user clicks on
'View more' button. If user clicks on 'View less' button, the
whole table will collapse back to default mode of showing just 5
rows.
BUTTON: VIEW MORE

Clicking on 'View more' button again will reveal another 10 rows
of details, and the function repeats.
Manage Users
My Account
Log out
Clients
Events
logo
Pasir Ris Club
Events at Pasir Ris Club

2
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
+ Add Event
SCREEN
Date
Event Title
Attendance for event
[Latest] 01/01/2016
Tuition class
9/12
01/01/2016
Tuition class
7/12
01/01/2016
Tuition class
11/12
01/01/2016
Pasir Ris Carnival
6/12
01/01/2016
Tuition class
8/12
01/01/2016
Tuition class
9/12
01/01/2016
Tuition class
7/12
01/01/2016
Tuition class
11/12
01/01/2016
Tuition class
6/12
[Earlier] 01/01/2016
Tuition class
8/12
[Page will load all data in the table upon page load.]
Footer
4-Event List pg
BUTTON: ADD EVENT

If user clicks on this, it will lead them to lightbox (refer to next
page).
SORT TABLE BY LATEST DATE OF EVENT

Sort table by showing latest event on top, oldest event at the
bottom.
Manage Users
My Account
Log out
Clients
Events
logo
Pasir Ris Club
Event title
Date
3
5
dd/mm/yyyy
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
Save
SCREEN
5.1-Event Details pg (Blank State)
General notes about the event / anything important to highlight / feedback
Name
Gender
Level
Cindy Ong Siao Qi
P2
Siti Nurhalizah Bte Hamima
P3
Kumar Nathan s.o Srinariyana Thiru

Kesavanayar
P3
John Tan Ming Rui
P4
Phua Soon Li
P4
Wong Min Qi
P5
Theophilus Chua Dan Ming
P6
Christina Ong Siao Qin
P6
Tan Wei Jie
P6
Cindy Ong Siao Qi
P6
Delete
Footer
Attendance
BUTTON: DELETE
This will delete all details about the new/existing event. It will
remove an existing event from the table on the Event List
page.
ATTENDANCE TAKING
The attendance will be empty on default.
GENERAL NOTES ABOUT THE EVENT

User can type in comments about the particular event, such as
how the event went, or students misconduct etc. This
information will only be stored and reflected on this 'Event
Details page', not on the 'Client Details page', as the info is only
pertaining to the once-o event.
SORT TABLE BASED ON LEVEL OF CLIENT

To arrange table based on level of clients (clients from P1 on
top, P6 at the bottom). Within the group of same level clients,
arrange by alphabetical order of clients name.
BUTTON: SAVE
This will save the details about this event. If user does not fill in
the mandatory fields such as Event title and Date, there
should be a error message lightbox to ask user to fill up those 2
fields.
** Error message may look like: Please fill up the mandatory
fields in order to save this event.
CTA options:
- OK
- Discard this event
If user clicks on OK button, user will be led to the page to fill in
the mandatory fields.
If user clicks on Discard this event button, the system will not
save this page. User will be led back to the previous page of
Client List pg.
If the 2 mandatory fields are filled up, but attendance is not
marked, the user can still save this page, but on the Event List
page, the attendance column will look like 0/12.
Manage Users
My Account
Log out
Clients
Events
logo
Pasir Ris Club
Pasir Ris Club Carnival 2016
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
Save
02/03/2016
SCREEN
Name
Gender
5.2-Event Details pg
(Interactive State: Add notes to specific client)
Level
Cindy Ong Siao Qi
P2
P3
P3
John Tan Ming Rui
P4
Phua Soon Li
P4
Wong Min Qi
P5
P6
P6
Tan Wei Jie
P6
Cindy Ong Siao Qi
P6

PerformanceKesavanayar
or behaviour of client during this event
Delete
Footer
EVENT TITLE IS TURNED INTO PAGE TITLE

After user enters the event title and clicks on the Save button,
the event title keyed in 'Add Event page' will appear as the
page title for 'Event Details page. Hence, please ensure the
font size of the event title follows the font size of page titles in
all pages (size 20). Whereas the date can remain as size 14.
HOTSPOT AREA : NAME + CHEVRON

This is a hotspot area where after the user clicks on it, it'll
trigger a text box input.
Attendance
There are 3 actions that will be activated at the same time:

1) The name will be underlined.
2) Chevron icon will rotate 90 degrees, to be pointed
downwards. This is to indicate to user that the hotspot is being
activated at the moment.
3) Textbox will be triggered. User can type in notes about the
client.
Manage Users
My Account
Log out
Clients
Events
logo
Pasir Ris Club
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
Save
02/03/2016
SCREEN
(Interactive State: After notes to specific clients were
added)
1
UNDERLINE NAMES AFTER SPECIFIC CLIENT NOTES HAVE

BEEN ADDED
To indicate the client has a note, the names of the clients
should be underlined, after note has been added.
Name
Gender
Level
Cindy Ong Siao Qi
P2
P3

Kesavanayar
P3
John Tan Ming Rui
P4
Phua Soon Li
P4
Wong Min Qi
P5
P6
P6
Tan Wei Jie
P6
Cindy Ong Siao Qi
P6
Delete
Footer
Attendance
Manage Users
My Account
Log out
Clients
Events
logo
Pasir Ris Club
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
Save
02/03/2016
SCREEN
(Interactive State: See client's notes)
Name
Gender
Level
Cindy Ong Siao Qi
P2
P3

M
P3
Siti appearedKesavanayar
to be very down after receiving her CA1 results. I have worked out with her on an improvement plan.
Shes also not on talking terms with Wei Jie as they got into a brief squabble over colour pencils during the session.
John Tan Ming Rui
P4
Phua Soon Li
P4
Wong Min Qi
P5
P6
P6
Tan Wei Jie
P6
Cindy Ong Siao Qi
P6
Delete
Footer
Attendance
SEE SPECIFIC CLIENT NOTES

To see specific client notes, just click on the client name, a text
box will appear under the row of the name.
Manage Users
My Account
Log out
Clients
Events
logo
Pasir Ris Club
Event title
1
Date
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
Save
dd/mm/yyyy
SCREEN
Please confirm you wish to delete all information about this client.
This action
is irreversible
and information
General notes about the event / anything
important
to highlight
/ feedbackcannot be restored after deleting.
3 Conrm, I want to delete
5.5-Event Details pg (Interactive State - Delete page)
2 I dont wish to delete
Name
Gender
Level
Cindy Ong Siao Qi
P2
P3

Kesavanayar
P3
John Tan Ming Rui
P4
Phua Soon Li
P4
Wong Min Qi
P5
P6
P6
Tan Wei Jie
P6
Cindy Ong Siao Qi
P6
Delete
Footer
LIGHTBOX
There is a confirmation message before user confirms to
deleting the Client Details permanently.
BUTTON: I DON'T WISH TO DELETE

This will lead user back to the 'Event Details' pg.
BUTTON: CONFIRM, I WANT TO DELETE

This will delete the event details permanently from the system.
Attendance
Manage Users
My Account
Log out
Clients
Events
logo
Pasir Ris Club
Please ll in all the mandatory elds marked with *, in order to save this page.
Event title *
Date *
Save
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
SCREEN
5.6-Event Details pg (Interactive State - Error Message)
dd/mm/yyyy

1
ERROR MESSAGE
If user tries to save the page, without filling in some mandatory
fields, there will be an error message appearing at the top of the
page. The mandatory fields label and text input boxes will
change colour to red, to show users which are the fields yet to
be filled up.
This will be the treatment for all Error Messages for other pages
such as Event Details pg, Client Details pg, User Details pg.
Name
Gender
Level
Cindy Ong Siao Qi
P2
P3

Kesavanayar
P3
John Tan Ming Rui
P4
Phua Soon Li
P4
Wong Min Qi
P5
P6
P6
Tan Wei Jie
P6
Cindy Ong Siao Qi
P6
Delete
Footer
Attendance
Manage Users
My Account
Log out
Clients
Events
logo
Pasir Ris Club
Manage Users
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
+ Add User
SCREEN
Name
Role
Name
Admin
Name
Admin
Name
Admin
Name
Admin
Name
Supervisor
Name
Supervisor
Name
Supervisor
Name
Supervisor
Name
Club Leader
Name
Club Leader
[page will do lazy loading of all users data as user scrolls down the page.]
Footer
6-User List pg
SORT TABLE BY: ROLE, THEN ALPHABET

Sort table by role (Admin, Supervisor, Club leader)
Within the same roles, sort by alphabet (A-Z).
Manage Users
My Account
Log out
Clients
Events
logo
Pasir Ris Club
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
Save
Name
+Add
clients picture
SCREEN
Role
7.1-User Details pg (Blank State)
Club
PASSWORD
For the first time password, Admin will assign the password for
the User. After user has changed password of his/her own,
Admin will no longer see it here in this field. It will appear as an
empty field. If the Admin wants to reset password on behalf of
user, Admin can key in new password in this field again. That'll
reset the password.
BUTTON: DELETE
This will delete all details about the new/existing user. It will
remove an existing user from the table on the User List page.
Password
Mobile no.
Email
Gender
Female
Male
Race
Date of birth
dd mmm yyyy
Age
Identity type
Identity no.
Date joined TYA
dd/mm/yyyy
Address
Delete
Footer
Manage Users
My Account
Log out
Clients
Events
logo
Pasir Ris Club
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
SCREEN
Role
1
Club
PROJECT:
Save
Name
+Add
clients picture
7.2-User Details pg
(Interactive State: Dropdown - Role)
Sta
Supervisor
Club leader
1
Mobile no.
Email
Gender
Female
Male
Race
Date of birth
If user selects Supervisor, on the Club dropdown, user

should be able to choose multiple clubs.
dd mmm yyyy
If user selects Club Leader, on the Club dropdown, user is

only entitled to choose one club. If user attempts to choose
more than one club, an error message will appear.
Age
** Error message: Each Club Leader is only allowed access to

one club each. Please select only one club, or change the role.
Identity type
Identity no.
Date joined TYA
SINGLE SELECT DROPDOWN

If user selects Sta, on the Club dropdown, user should not
be able to select any club. This is because sta should have
access to all clubs. We are not going to programme it to tick all
clubs on default for Sta role, because in the case where a
new club is added, the system will not automatically know it
needs to update to tick all clubs for all Sta. So lets just
remove the option to tick ot untick clubs for Sta, and disable
club selection for Sta role, they have access to all clubs at all
times.
dd/mm/yyyy
Address
Delete
Footer
Manage Users
My Account
Log out
Clients
Events
logo
Pasir Ris Club
Mobile no.
[Club name]
[Club name]
Male
[Club name]
** Error message: Each Club Leader is only allowed access to

one club each. Please select only one club, or change the role.
[Club name]
Race
East
[Club name]
[Club name]
[Club name]
[Club name]
[Club name]
[Club name]
Identity no.
[Club name]
Date joined TYA
Address
dd/mm/yyyy
MULTI SELECT DROPDOWN

Dropdown allows user to select multiple clubs.
If user selects Club Leader, on the Club dropdown, user is

only entitled to choose one club. If user attempts to choose
more than one club, an error message will appear.
[Club name]
Email
Identity type
Gia Phua
If user selects Supervisor, on the Club dropdown, user

should be able to choose multiple clubs.
[Club name]
Age
AUTHOR:
[Club name]
dd mmm yyyy
19/10/2016
[Club name]
Password
Date of birth
DATE:
7.3-User Details pg
(Interactive State: Dropdown - Club)
Central
Female
TYA_Wire frames_v3
SCREEN
Role
Club
Gender
PROJECT:
Save
Name
+Add
clients picture
[Club name]
West
[Club name]
[Club name]
[Club name]
[Club name]
[Club name]
[Club name]
[Club name]
[Club name]
Delete
Footer
Manage Users
My Account
Log out
Clients
Events
logo
Pasir Ris Club
+Add
clients picture
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
Save
Name
1
SCREEN
Role
Please confirm you wish to delete all information about this user.
This action is irreversible and information cannot be restored after deleting.
7.4-User Details pg (Interactive State: Delete page)
Club
3
Conrm, I want to delete
I dont wish to delete

1
LIGHTBOX
There is a confirmation message before user confirms to
deleting the Client Details permanently.
BUTTON: I DON'T WISH TO DELETE

This will lead user back to the 'Event Details' pg.
BUTTON: CONFIRM, I WANT TO DELETE

This will delete the event details permanently from the system.
Password
Mobile no.
Email
Gender
Female
Male
Race
Date of birth
dd mmm yyyy
Age
Identity type
Identity no.
Date joined TYA
dd/mm/yyyy
Address
Delete
Footer
Manage Users
My Account
Log out
Clients
Events
logo
Pasir Ris Club
Please ll in all the mandatory elds marked with *, in order to save this page.
Save
Name *
+Add
clients picture
DATE:
19/10/2016
AUTHOR:
Gia Phua
SCREEN
ERROR MESSAGE
If user tries to save the page, without filling in some mandatory
fields, there will be an error message appearing at the top of the
page. The mandatory fields label and text input boxes will
change colour to red, to show users which are the fields yet to
be filled up.
This will be the treatment for all Error Messages for other pages
such as Event Details pg, Client Details pg, User Details pg.
Mobile no.
Email
Female
Male
Race
dd mmm yyyy
Age
Identity type
Identity no.
Date joined TYA
TYA_Wire frames_v3
Role *
Password
Date of birth
PROJECT:
7.5-User Details pg (Interactive State: Error Message)
Club *
Gender
dd/mm/yyyy
Address
Delete
Footer
logo

Welcome!
1
User name
Password
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
SCREEN
1 - Log In pg
Log In
If Admin logs in, he/she will be able to have access to all clubs.
If Club leader logs in, he/she will be able to view only the club
they are in charge of.
forgot your password?

2
footer
LOG IN
User enters ID and PW to access the mobile site.
FORGET PW?
System to ask user for email address, so to send them link to
reset ID / PW.
TYA Pasir Ris Club
+ Add new event
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
View events data

SCREEN
View clients data
2.1.1-Landing pg
footer
LANDING PG
This is the landing page of Club Leader mobile site view. These
are the basic functions the club leader will need quick access
to.
TYA Pasir Ris Club

1
Central
[Club name]
PROJECT:
[Club name] + Add new event
TYA_Wire frames_v3
DATE:
19/10/2016
[Club name]
AUTHOR:
Gia Phua
[Club name]
[Club name]
View events data

SCREEN
[Club name]
[Club name]
View clients data
[Club name]
East
2.1.2-Home pg (Dropdown: List of clubs)

(Sta / Supervisor view)
[Club name]
[Club name]
[Club name]
DROPDOWN CHEVRON
Admin will be able to access any clubs from this dropdown list.
Once user is in the other pages within the club, he/she will need
to return to the home page to get access other clubs.
Note to programmers: Please utilise the UI design of the iOS /
Material Design for the dropdown layout.
[Club name]
[Club name]
[Club name]
[Club name]
[Club name]
Central
[Club name]
[Club name]
[Club name]
[Club name]
[Club name]
[Club name]
[Club name]
[Club name]
footer
TYA Pasir Menu

Ris Club
Home
Add new event
View events +data
Add new event
View clients data
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
My account
View events data

SCREEN
View clients data
2.2.1-Menu view (Club Leader view)
footer
MENU
Menu should be accessible to user from any page.
TYA Pasir Menu

Ris Club
Home
Add new event

View events +data
Add new event
View clients data
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
Manage users
My account
View events data

SCREEN
Log out
View clients data
footer
2.2.2-Menu view (Sta view)
MENU
Menu should be accessible to user from any page.
TAP TARGET: 44PX IN HEIGHT

Please ensure the gap between each menu item is at least 44px
in height, as that is the tap target for fingers on mobile screens.
TYA Pasir Ris Club
Name

1
2
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
Level
Gender
Cindy Ong Siao Qi
P1
SCREEN
Siti Nurhalizah
Bte Hamima
P2
3.1-Client list pg
Kumar Nathan s.o

Srinariyana Thiru
Kesavanayar
P3
John Tan Ming Rui
P4
Phua Soon Li
P4
Wong Min Qi
P5
The 1st column will be frozen at the left side of the table.
Theophilus Chua
Dan Ming
P5
The dots indicate which rows of the table are being shown.
User can see the rest of the columns by tapping on the left and
right buttons.
Christina Ong Siao

Qin
P6
Cindy Ong Siao Qi
P6
Siti Nurhalizah
Bte Hamima
P6
MOBILE TABLE
Present the table in this format for mobile view.
Pls view reference link: http://sitesforprofit.com/responsivetable-plugins-and-patterns
Refer to 5. Filament Group Tablesaw. There is demo and
tutorial there on how to implement this mobile table layout.
MOBILE TABLE BUTTON: LEFT & RIGHT ARROW

According to iOS UI design, the tap target on mobile screen is
44px by 44px. Pls ensure the size of this left right arrow buttons
are at least this size.
HIDE THE COLUMN 'FAMILY STATUS' FOR CLUB LEADERS'

VIEWING ACCESS
For Club Leaders: There is no need to show the column 'Family
status'. They should not be allowed access to view this info.
footer
TYA Pasir Ris Club

PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
Name
Date of Last
Attendance
Date of
birth
Cindy Ong Siao Qi
30/07/2016
1 Jan 2001
Siti Nurhalizah
Bte Hamima
30/07/2016
1 Jan 2001
Kumar Nathan s.o

Srinariyana Thiru
Kesavanayar
30/07/2016
1 Jan 2001
John Tan Ming Rui
30/07/2016
1 Jan 2001
Phua Soon Li
30/07/2016
1 Jan 2001
Wong Min Qi
30/07/2016
1 Jan 2001
Theophilus Chua
Dan Ming
30/07/2016
1 Jan 2001
Christina Ong Siao

Qin
30/07/2016
1 Jan 2001
Cindy Ong Siao Qi
30/07/2016
1 Jan 2001
Siti Nurhalizah
Bte Hamima
30/07/2016
1 Jan 2001
footer
SCREEN
3.2-Client list pg
(Interactive state: See right side of table)
MOBILE TABLE - VIEW COLUMNS

This is the next view after user clicks on the right arrow from the
previous page. The dots indicate which rows of the table are
being shown.
TYA Pasir Ris Club
clients
picture
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
John Tan Ming Rui

Club name
SCREEN
Pasir Ris Club
4.1-Client details pg
Personal Prole
Gender
Male
1
Mobile no.
XXXXXXXX
Home no.
XXXXXXXX
Race
Chinese
Date of birth
01/01/2000
CLIENT DETAILS PG
For Supervisors and Club Leaders, they will have limited access
to what fields they can view and edit about the Client Details.
As such, the club leader will see this page, with the details
being pulled from the database, and mostly only being readonly. The only fields the club leader can edit is Hobbies,
School grades and Behaviour notes.
Since the club leaders are the ones closest to checking in with
the clients school progress, likes & dislikes.
Age
16
Also, for Supervisors and Club Leaders, they should not have
access to delte the Client Details, refer to point 6 in this page.
Level
S4
BUTTON: ADD GRADE

This will open up a lightbox where user is able to input details
of a grade.
EDIT / REMOVE ICON

These icons will appear when user taps on anywhere within the
box section. User is able to edit or remove grade details.
MOBILE TABLE
Present the table in this format for mobile view.
Current school Catholic High School

Nationality
Singapore
Date joined
TYA
01/03/2014
Family
background
[Lorem ipsum dolor sit amet,

consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut
nostrud exercitation ullamco
laboris nisi ut.]
Medical
condition

enim ad minim veniam, quis
laboris nisi ut.]
Hobbies
badminton, guitar, singing. hes a

closet songbird!
Address

S760870
Edit
Family Prole
Relationship
Mother
Name
Lum Wai Soong
Contact no.
97514373
School Grades
School

2
Level
P6
Subject
Math
Band
Foundation
Semester
CA1
Grade
A2 (88/100)
+Add grade
Level
P6
Subject
Math
Band
Foundation
Semester
CA1
Grade
A2 (88/100)
Level
P6
Subject
Math
Band
Foundation
Semester
CA1
Grade
A2 (88/100)
Level
P6
Subject
Math
Band
Foundation
Semester
CA1
Grade
A2 (88/100)
Level
P6
Subject
Math
Band
Foundation
Semester
CA1
Grade
A2 (88/100)
View more
Attendance
School
[Autopopulated from above eld]
Date
01/01/2016
Event Title
Tuition class
Attendance
Date
01/01/2016
Event Title
Tuition class
Attendance
Date
01/01/2016
Event Title
Tuition class
Attendance
Date
01/01/2016
Event Title
Tuition class
Attendance
Date
01/01/2016
Event Title
Tuition class
Attendance
View more
Behaviour Notes
+Add note
Date
01/01/2016
Event Title
Tuition class
Notes
Behaviour improved this week after

our pep talk.
Date
01/01/2016
Event Title
Tuition class
Notes
Misbehaved by talking back at club

leader, even after repeated
warnings.
Date
01/01/2016
Event Title
Tuition class
Notes
Date
01/01/2016
Event Title
Tuition class
Notes
Date
01/01/2016
Event Title
Tuition class
Notes
View more
footer
Pls view reference link: http://sitesforprofit.com/responsivetable-plugins-and-patterns

Refer to 10. Codepen (Geo Yuen). There is demo and tutorial
there on how to implement this mobile table layout.
BUTTON: EDIT
Supervisor and Club leader will only be able the 'Hobbies'
portion, and not the other details in this profile portion. Upo
clicking on edit button, it will activate the edit mode, shown on
nx page.
NO ACCESS TO DELETE BUTTON FOR SUPERVISOR / CLUB

LEADERS
Supervisors and Club Leader should not have access to delete
'Client Details' pg. Only Sta can do this. Hence hide the
'Delete' button for Supervisors and Club Leaders.
TYA Pasir Ris Club
clients
picture
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
John Tan Ming Rui

Club name
SCREEN
Pasir Ris Club
4.2-Client details pg (Interactive State)
Personal Prole
Gender
Male
Mobile no.
XXXXXXXX
Home no.
XXXXXXXX
Race
Chinese
Date of birth
01/01/2000
Age
16
Level
S4
LIGHTBOX - ADD GRADE

User can input grade in this lightbox.
LIGHTBOX - ADD NOTE

User can input note in this lightbox. By default, preset radio
button to 'General'.
PRIMARY VS SECONDARY BUTTON

Take note: There should be a dierence in the colour of primary
and secondary button. The primary button should be
emphasized, by a stronger colour. Secondary button should not
be emphasized, and we can used a lighter shade to illustrate it.
BUTTON: VIEW MORE

System should reveal another [X] rows of information. For
mobile due to lack of space, maybe reveal 5 more each time
user clicks on 'View more' button, instead of 10. After user
clicks on 'View more' button, the 'View less' button should
appear next to it. When user clicks on 'View less', it should
collapse all to just 5 rows, back to default.
Current school Catholic High School

Nationality
Singapore
Date joined
TYA
01/03/2014
Family
background

laboris nisi ut.]
Medical
condition

enim ad minim veniam, quis
laboris nisi ut.]
Hobbies
badminton, guitar, singing.

hes a closet songbird!
Address

S760870
Save
Family Prole
Relationship
Mother
Name
Lum Wai Soong
Contact no.
97514373
School Grades
School

1
Level
Level
P6
Subject
Math
Band
Subject
Foundation
Semester
CA1
Grade
Band
A2 (88/100)
+Add grade
Semester
Level
P6
Subject
Math
Grade
Band
Foundation
Semester
CA1
Grade
A2 (88/100)
3
Cancel
Level
P6
Subject
Math
Band
Foundation
Semester
CA1
Grade
A2 (88/100)
Level
P6
Subject
Math
Band
Foundation
Semester
CA1
Grade
A2 (88/100)
Level
P6
Subject
Math
Band
Foundation
Semester
CA1
Grade
A2 (88/100)
Save
4 View more
Attendance
School
[Autopopulated from above eld]
Date
01/01/2016
Event Title
Tuition class
Attendance
Date
01/01/2016
Event Title
Tuition class
Attendance
Date
01/01/2016
Event Title
Tuition class
Attendance
Date
01/01/2016
Event Title
Tuition class
Attendance
Date
01/01/2016
Event Title
Tuition class
Attendance
View more
Behaviour Notes
2 +Add note
Notes
Date
Event Title
01/01/2016
Event Title
Tuition class
Notes
Behaviour improved this week after

our pep talk.
Cancel
Save
Date
01/01/2016
Event Title
Tuition class
Notes
Misbehaved by talking back at club

leader, even after repeated
warnings.
Date
01/01/2016
Event Title
Tuition class
Notes
Date
01/01/2016
Event Title
Tuition class
Notes
Date
01/01/2016
Event Title
Tuition class
Notes
View more
footer
TYA Pasir Ris Club
Events at Pasir Ris Club

1 + Add event
Date
Event Title
Attendance
2
for event
[Latest] 01/01/2016
Tuition class
9/12
01/01/2016
Tuition class
7/12
01/01/2016
Tuition class
11/12
01/01/2016
Pasir Ris Carnival
6/12
01/01/2016
Tuition class
8/12
01/01/2016
Tuition class
9/12
01/01/2016
Tuition class
7/12
01/01/2016
Tuition class
11/12
01/01/2016
Tuition class
6/12
[Earlier] 01/01/2016
Tuition class
8/12
footer
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
SCREEN
5-Event list pg
BUTTON: ADD EVENT

Clicking on this will open up 'Add Event page', where user can
create a new event and mark attendance there.
After the event is saved, it will be added into this Events List.
ATTENDANCE FOR EVENT

Attendance is pulled from the database. This is to let the club
leaders have a quick glance on the attendance of the latest
events.
SORT TABLE BASED ON DATE OF EVENTS

Sort the table by latest events on top, oldest events at the
bottom.
TYA Pasir Ris Club
Event Title
Event date
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
dd mmm yyyy
SCREEN

important to highlight / feedback
Name
6.1-Event Details pg (Blank State)
Gender
Level
Attend
P2
1
Cindy Ong Siao Qi
Siti Nurhalizah
Bte Hamima
Kumar Nathan s.o

Srinariyana Thiru
Kesavanayar
HOTSPOT AREA: NAME + CHEVRON ICON

There is a hotspot (name + chevron). When user taps on the
hotspot area, user is able to write notes about the client, such
as their behaviour during the event.
BUTTON: SAVE
Since this is a primary CTA, I've designed it to be sticky to the
bottom of the mobile screen.
This will save the details about this event. If user does not fill in
the mandatory fields such as Event title and Date, there
should be a error message lightbox to ask user to fill up those 2
fields.
P3
P3
** Error message may look like: Please fill up the mandatory

fields in order to save this event.
CTA options:
- OK
- Discard this event
P4
If user clicks on OK button, user will be led to the page to fill in

the mandatory fields.
P5
If user clicks on Discard this event button, the system will not
save this page. User will be led back to the previous page of
Client List pg.
If the 2 mandatory fields are filled up, but attendance is not
marked, the user can still save this page, but on the Event List
page, the attendance column will look like 0/12.
Save
2
John Tan Ming Rui
Wong Min Qi
Theophilus Chua
Dan Ming
P6
Christina Ong Siao

Qin
P6
Tan Wei Jie
P6
Wong Min Qi
P5
Theophilus Chua
Dan Ming
P6
Christina Ong Siao

Qin
P6
Tan Wei Jie
P6
Cindy Ong Siao Qi
P6
Delete
footer
TAP TARGET FOR CHECKBOX

According to iOS UI design, the tap target on mobile screen is
44px by 44px. Pls ensure checkboxes are at least this size.
BUTTON: DELETE
This will delete all details about the new/existing event. If it is an
existing event, clicking on this will remove the existing event
from the table on the Event List page.
TYA Pasir Ris Club

02/03/2016
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
SCREEN
(Interactive state: Input notes on client)
Name
Gender
Level
Cindy Ong Siao Qi
P2
Siti Nurhalizah
Bte Hamima
P3
Attend
EVENT TITLE IS TURNED INTO PAGE TITLE

The event title keyed in 'Add Event page' will appear as the
page title for 'Event Details page', after user has saved the
event. Hence, please ensure the font size of the event title
follows the font size of page titles in all pages (size 20).
Whereas the date can remain as size 14.
HOTSPOT AREA : NAME + CHEVRON

This is a hotspot area where after the user clicks on it, it'll
trigger a text box input.
Kumar Nathan s.o

Srinariyana
Performance
Thiru
or behaviour M
of client P3
during
Kesavanayar
this event
John Tan Ming Rui
P4
Wong Min Qi
P5
Theophilus Chua
Dan Ming
P6
Christina Ong Siao

Qin
P6
Tan Wei Jie
P6
Wong Min Qi
P5
Theophilus Chua
Dan Ming
P6
Christina Ong Siao

Qin
P6
Tan Wei Jie
P6
Cindy Ong Siao Qi
P6
Save
Delete
footer
There are 3 actions that will be activated at the same time:

1) The name will be underlined.
2) Chevron icon will rotate 90 degrees, to be pointed
downwards. This is to indicate to user that the hotspot is being
activated at the moment.
3) Textbox will be triggered. User can type in notes about the
client.
Note to programmers: Please utilise the UI design of the iOS /
Material Design for the textbox layout.
TYA Pasir Ris Club

02/03/2016
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
SCREEN
(Interactive state: After Inputting notes on clients)
Name
Gender
Level
Cindy Ong Siao Qi
P2
Siti Nurhalizah
Bte Hamima
P3
Kumar Nathan s.o

Srinariyana Thiru
Kesavanayar
P3
John Tan Ming Rui
P4
Wong Min Qi
P5
Theophilus Chua
Dan Ming
P6
Christina Ong Siao

Qin
P6
Tan Wei Jie
P6
Wong Min Qi
P5
Theophilus Chua
Dan Ming
P6
Christina Ong Siao

Qin
P6
Tan Wei Jie
P6
Cindy Ong Siao Qi
P6
Save
Delete
footer
Attend
UNDERLINE THE NAMES WITH NOTES INPUTTED

System should underline the names with notes inputted on
them. This is to indicate to the user which students have notes
written, which have not.
TYA Pasir Ris Club

02/03/2016
PROJECT:
TYA_Wire frames_v3
DATE:
19/10/2016
AUTHOR:
Gia Phua
SCREEN
6.4 -Event Details pg

(Interactive State: See client's notes)
Name
Gender
Level
Cindy Ong Siao Qi
P2
Siti Nurhalizah
Bte Hamima
P3
Kumar Nathan s.o

Siti appeared
to be very down
Srinariyana
Thiru
M afterP3
receiving her CA1 results. I have worked
Kesavanayar
out with her on an improvement plan.
Shes also not on talking terms with Wei
John
Tan
Ming
M
P4
Jie as
they
gotRui
into a brief squabble
over
colour pencils during the session.
Wong Min Qi
P5
Theophilus Chua
Dan Ming
P6
Christina Ong Siao

Qin
P6
Tan Wei Jie
P6
Wong Min Qi
P5
Theophilus Chua
Dan Ming
P6
Christina Ong Siao

Qin
P6
Tan Wei Jie
P6
Cindy Ong Siao Qi
P6
Save
Delete
footer
Attend
SEE SPECIFIC CLIENTS NOTES

To see specific client notes, just click on the client name, a text
box will appear under the row of the name.

TYA Wire Frames v3

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

TYA Wire Frames v3

Загружено:

Авторское право:

Доступные форматы

Hi TYA team, good job with the built so far!

Herere the Dierences between Sta, Supervisor, Club Leader.

Able to access all clubs

Able to access multiple clubs

Able to access one club

Able to view all fields on the

Able to view only some fields

Able to view only some fields

Able to input and edit all fields

Able to edit only some fields on

Able to edit only some fields on

Able to add and manage users

Cannot add or manage users

Cannot add or manage users

Accessed frequently from

Accessed frequently from mobile

Accessed frequently from mobile

(hence give access to switch between clubs)

(hence mobile view for Sta should be

(hence give access to switch between clubs)

(refer to the excel sheet that Wen Jia will

(hence desktop view for Supervisor should

(refer to the excel sheet that Wen Jia will

(hence desktop view for Supervisor should

TechLadies - UX Design Notes

2 forgot your password?

FORGOT YOUR PW?

TechLadies - UX Design Notes

Pasir Ris Club

Clients of Pasir Ris Club (33)

2 Export Client Data

BUTTON: EXPORT CLIENT LIST

BUTTON: EXPORT ATTENDANCE

BUTTON: ADD STUDENT

SORTING THE TABLE BASED ON LEVEL

COLUMN: DATE OF LAST ATTENDANCEE

COLUMN: DATE OF BIRTH

FAMILY STATUS: SINGLE PARENT

CLIENT LIST PG AS LANDING PAGE AFTER USER LOGS IN

BUTTON: NAME LABEL

Pasir Ris Club

TechLadies - UX Design Notes

2.2-Client List pg (Interactive state: w menu)

Pasir Ris Club

TechLadies - UX Design Notes

FIELD DROPDOWN: CLUB NAME

FIELD DROPDOWN: RACE

FIELD DROPDOWN: IDENTITY TYPE

BUTTON: +ADD A FAMILY MEMBER OR GUARDIAN

FIELD: FAMILY TOTAL MONTHLY INCOME & INCOME PER

BUTTON: ADD GRADE

BUTTON: ADD NOTE

Family Prole (this includes those staying in the same household)

+ Add a family member / guardian

Income per capita

[Autopopulated from above]

No school grade currently --

Pasir Ris Club

TechLadies - UX Design Notes

3.2-Client Details pg (Interactive state - Edit mode)

Pasir Ris Club

Anglo Chinese Barker School

Date joined TYA

Parents are divorced. Currently stays with