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

Here’re the Differences between Staff, Supervisor, Club Leader.
Staff

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 Staff should be
scaled down from the Staff - 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 Staff, 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 Staff, Supervisor, Club Leader.)

(hence desktop view for Supervisor should
be scaled up from the Club Leader - Mobile
screens)

TechLadies - UX Design Notes
logo

Welcome!

1

PROJECT:

TYA_Wire frames_v3

DATE:

19/10/2016

AUTHOR:

Gia Phua

User ID
SCREEN

1-Log In pg

Password

Log In

1

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?

2

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

TechLadies - UX Design Notes

logo

9

Pasir Ris Club

1

Clients of Pasir Ris Club (33)

2 Export Client Data

3 Export Attendance

5

10

6

Date of
Last Attendance

7

DATE:

19/10/2016

AUTHOR:

Gia Phua

SCREEN

Family Status

Level

Gender

Name

Low Income

P1

F

30/07/2016

1 Jan 2001

Single Parent

P2

M

30/07/2016

1 Jan 2001

Name

Single Parent

P4

M

30/07/2016

1 Jan 2001

Name

Low Income

P4

M

30/07/2016

1 Jan 2001

Name

Single Parent

P5

M

30/07/2016

1 Jan 2001

Name

Single Parent

P5

M

30/07/2016

1 Jan 2001

8

TYA_Wire frames_v3

+ Add Client

4

Name

Name

PROJECT:

Date of Birth

Name

Low Income

P6

M

30/07/2016

1 Jan 2001

Name

Single Parent

P6

M

30/07/2016

1 Jan 2001

Name

Single Parent

P6

M

30/07/2016

1 Jan 2001

Name

Single Parent

P6

M

30/07/2016

1 Jan 2001

2.1-Client List pg

1

PAGE TITLE
System to show the number of clients in the club, next to the
page title.

2

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.

3

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

4

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.

5

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 client’s name.

6

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.

7

COLUMN: DATE OF BIRTH
The reason we have date of birth in the format of 'dd mmm
yyyy', different 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.

8

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.

9

CLIENT LIST PG AS LANDING PAGE AFTER USER LOGS IN
After Staff 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

F

30/07/2016

1 Jan 2001

[Club name]
Single Parent
[Club name]

[Club name]
P2
[Club name]

M

30/07/2016

1 Jan 2001

[Club
name]
Single
Parent

[Club name]
P4

M

30/07/2016

1 Jan 2001

Name

Low Income

P4

M

30/07/2016

1 Jan 2001

Name

Single Parent

P5

M

30/07/2016

1 Jan 2001

Name

Single Parent

P5

M

30/07/2016

1 Jan 2001

Name

Low Income

P6

M

30/07/2016

1 Jan 2001

Name

Single Parent

P6

M

30/07/2016

1 Jan 2001

Name

Single Parent

P6

M

30/07/2016

1 Jan 2001

Name

Single Parent

P6

M

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.]

TechLadies - UX Design Notes

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

1

MENU
User should be able to assess the different clubs from this
menu. Clubs are categorised by location in Singapore.

Manage Users

My Account

Log out

Clients

Events

logo

Pasir Ris Club

1

TechLadies - UX Design Notes

PROJECT:

TYA_Wire frames_v3

DATE:

19/10/2016

AUTHOR:

Gia Phua

First name
+Add
client’s picture

SCREEN

Last name

3.1-Client Details pg
Club name

2

Personal Profile
Female

Gender

Low income

Family status

Male

1

CLIENT PICTURE
After clicking on this, it will open up a image uploader. User can
upload 1 picture of the client.

2

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.

3

Medical condition

Race
Date of birth

5

* 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

3

FIELD DROPDOWN: RACE
Options:
- Chinese
- Malay
- Indian
- Eurasian
- Others

4

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.

5

FIELD DROPDOWN: IDENTITY TYPE
Options:
- Singaporean citizen
- Singapore PR
- Foreign passport

6

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.

7

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.

8

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.

9

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 Profile (this includes those staying in the same household)
— No family member/guardian currently --

6

+ Add a family member / guardian

Family Finances
Household type

Purchased

Rental

Notes on family
resources

No. of household
members

7

Family total
monthly income

S$

Income per capita

S$

Save

School Grades
8

School

[Autopopulated from above]

9

+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
client’s picture

First name

Homer

Last name

Simpsons

TechLadies - UX Design Notes

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 Profile
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 flat. Dad is involved in
illegal gambling and has been in and out of
prison.

Single parent

Medical condition

Asthma

Hobbies

1

SAVED FIELDS
After user clicks on 'Save' button, the content are presented
like this, and no longer in editable mode.

2

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.

3

LIGHTBOX: FAMILY PROFILE
This appears when user clicks on button 'Add a family member/
guardian'.

4

PRIMARY VS SECONDARY BUTTON
Take note: There should be a difference 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.

5

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

6

BUTTON: VIEW MORE
Clicking on 'View more' button again will reveal another 10 rows
of details, and the function repeats.

7

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.

8

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.

9

FIELD: AGE
Age should be autocalculated based on date of birth, hence
user should not be able to input age.

badminton, guitar, singing. he’s a closet
songbird!

Address

Blk 106 Yishun Ring Road #04-67
S760106

Edit

2

Family Profile (this includes those staying in the same household)
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$

4

Cancel

Save

Family Finances
Purchased

Household type
No. of household
members

Rental

Notes on family
resources

5

Family total
monthly income

S$ 3500

Income per capita

S$ 700

Single income. Mom is breadwinner. Parents
are divorced. Children’s school fees are
under Lee Kong Chian Foundation subsidy.

Edit

8

School Grades
[Autopopulated from above]

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

6

Behaviour Notes
7
Notes

Cancel

Save

Delete

Footer

View more

Manage Users

My Account

Log out

Clients

Events

logo

Pasir Ris Club

+Add
client’s 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 Profile
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

Anglo Chinese Barker School

Nationality

Singapore

Identity type

NRIC

Identity no.

S9002007D

Date joined TYA

08/07/2015

Parents are divorced. Currently stays with
mother in one-room flat. Dad is involved in
illegal gambling and has been in and out of
prison.

Hobbies

badminton, guitar, singing. he’s a closet
songbird!

Address

Blk 106 Yishun Ring Road #04-67
S760106

Family Profile (this includes those staying in the same household)
+ 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.

1

Edit

Family Finances
Purchased

Household type
No. of household
members

Rental

Notes on family
resources

Single income. Mom is breadwinner. Parents
are divorced. Children’s school fees are
under Lee Kong Chian Foundation subsidy.

5

Family total
monthly income

S$ 3500

Income per capita

S$ 700

Edit

4

School Grades
[Autopopulated from above]

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)

3

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

--

Tuition class, 01/01/2016

--

View more

Delete

Footer

1

BUTTON: EDIT
If user clicks on this, it will open up a lightbox (as shown in the
page '3.2 Client Details page')

2

SORT TABLE BY LATEST TO OLDEST ENTRY
Sort the table by having the latest entry on top, and oldest entry
at the bottom

3

BUTTON: VIEW MORE
System to reveal 10 more rows each time user clicks on 'View
more' button.

4

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

2

TechLadies - UX Design Notes

Manage Users

My Account

Log out

Clients

Events

logo

Pasir Ris Club

+Add
client’s picture

First name

Homer

Last name

Simpsons

TechLadies - UX Design Notes

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 Profile
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

Anglo Chinese Barker School

Nationality

Singapore

Identity type

NRIC

Identity no.

S9002007D

Date joined TYA

08/07/2015

Family background

Parents are divorced. Currently stays with
mother in one-room flat. Dad is involved in
illegal gambling and has been in and out of
prison.

Medical condition

Asthma

Hobbies

badminton, guitar, singing. he’s a closet
songbird!

Address

Blk 106 Yishun Ring Road #04-67
S760106

Edit

Family Profile (this includes those staying in the same household)
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

Single income. Mom is breadwinner. Parents
are divorced. Children’s school fees are
under Lee Kong Chian Foundation subsidy.

5

Family total
monthly income

S$ 3500

Income per capita

S$ 700

Edit

School Grades
[Autopopulated from above]

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)

2

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.

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

--

Tuition class, 01/01/2016

--

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

--

Tuition class, 01/01/2016

--

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

--

Tuition class, 01/01/2016

--

Pasir Ris Carnival, 01/01/2016

--

Tuition class, 01/01/2016

--

View less

Delete

View more

1

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.

2

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

1

TechLadies - UX Design Notes

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

1

BUTTON: ADD EVENT
If user clicks on this, it will lead them to lightbox (refer to next
page).

2

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

4

TechLadies - UX Design Notes

Name

Gender

Level

Cindy Ong Siao Qi

F

P2

Siti Nurhalizah Bte Hamima

F

P3

Kumar Nathan s.o Srinariyana Thiru
Kesavanayar

M

P3

John Tan Ming Rui

M

P4

Phua Soon Li

F

P4

Wong Min Qi

F

P5

Theophilus Chua Dan Ming

M

P6

Christina Ong Siao Qin

F

P6

Tan Wei Jie

M

P6

Cindy Ong Siao Qi

F

P6

[Page will load all data in the table upon page load.]

1

Delete

Footer

2

Attendance

1

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.

2

ATTENDANCE TAKING
The attendance will be empty on default.

3

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-off event.

4

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 client’s name.

5

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

1

Pasir Ris Club Carnival 2016

TechLadies - UX Design Notes

PROJECT:

TYA_Wire frames_v3

DATE:

19/10/2016

AUTHOR:

Gia Phua

Save

02/03/2016
SCREEN

General notes about the event / anything important to highlight / feedback

Name

2

Gender

5.2-Event Details pg
(Interactive State: Add notes to specific client)

Level

Cindy Ong Siao Qi

F

P2

Siti Nurhalizah Bte Hamima

F

P3

M

P3

John Tan Ming Rui

M

P4

Phua Soon Li

F

P4

Wong Min Qi

F

P5

Theophilus Chua Dan Ming

M

P6

Christina Ong Siao Qin

F

P6

Tan Wei Jie

M

P6

Cindy Ong Siao Qi

F

P6

Kumar Nathan s.o Srinariyana Thiru
PerformanceKesavanayar
or behaviour of client during this event

[Page will load all data in the table upon page load.]

Delete

Footer

1

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.

2

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

Pasir Ris Club Carnival 2016

TechLadies - UX Design Notes

PROJECT:

TYA_Wire frames_v3

DATE:

19/10/2016

AUTHOR:

Gia Phua

Save

02/03/2016
SCREEN

General notes about the event / anything important to highlight / feedback

5.3-Event Details pg
(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.

1

Name

Gender

Level

Cindy Ong Siao Qi

F

P2

Siti Nurhalizah Bte Hamima

F

P3

Kumar Nathan s.o Srinariyana Thiru
Kesavanayar

M

P3

John Tan Ming Rui

M

P4

Phua Soon Li

F

P4

Wong Min Qi

F

P5

Theophilus Chua Dan Ming

M

P6

Christina Ong Siao Qin

F

P6

Tan Wei Jie

M

P6

Cindy Ong Siao Qi

F

P6

[Page will load all data in the table upon page load.]

Delete

Footer

Attendance

Manage Users

My Account

Log out

Clients

Events

logo

Pasir Ris Club

Pasir Ris Club Carnival 2016

TechLadies - UX Design Notes

PROJECT:

TYA_Wire frames_v3

DATE:

19/10/2016

AUTHOR:

Gia Phua

Save

02/03/2016
SCREEN

General notes about the event / anything important to highlight / feedback

5.4-Event Details pg
(Interactive State: See client's notes)

1

1

Name

Gender

Level

Cindy Ong Siao Qi

F

P2

Siti Nurhalizah Bte Hamima

F

P3

Kumar Nathan s.o Srinariyana Thiru
M
P3
Siti appearedKesavanayar
to be very down after receiving her CA1 results. I have worked out with her on an improvement plan.
She’s 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

M

P4

Phua Soon Li

F

P4

Wong Min Qi

F

P5

Theophilus Chua Dan Ming

M

P6

Christina Ong Siao Qin

F

P6

Tan Wei Jie

M

P6

Cindy Ong Siao Qi

F

P6

[Page will load all data in the table upon page load.]

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

TechLadies - UX Design Notes

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 Confirm, I want to delete

5.5-Event Details pg (Interactive State - Delete page)

2 I don’t wish to delete

Name

Gender

Level

Cindy Ong Siao Qi

F

P2

Siti Nurhalizah Bte Hamima

F

P3

Kumar Nathan s.o Srinariyana Thiru
Kesavanayar

M

P3

John Tan Ming Rui

M

P4

Phua Soon Li

F

P4

Wong Min Qi

F

P5

Theophilus Chua Dan Ming

M

P6

Christina Ong Siao Qin

F

P6

Tan Wei Jie

M

P6

Cindy Ong Siao Qi

F

P6

[Page will load all data in the table upon page load.]

Delete

Footer

1

LIGHTBOX
There is a confirmation message before user confirms to
deleting the Client Details permanently.

2

BUTTON: I DON'T WISH TO DELETE
This will lead user back to the 'Event Details' pg.

3

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

1

Please fill in all the mandatory fields marked with *, in order to save this page.
Event title *
Date *

Save

TechLadies - UX Design Notes

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

General notes about the event / anything important to highlight / feedback
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

F

P2

Siti Nurhalizah Bte Hamima

F

P3

Kumar Nathan s.o Srinariyana Thiru
Kesavanayar

M

P3

John Tan Ming Rui

M

P4

Phua Soon Li

F

P4

Wong Min Qi

F

P5

Theophilus Chua Dan Ming

M

P6

Christina Ong Siao Qin

F

P6

Tan Wei Jie

M

P6

Cindy Ong Siao Qi

F

P6

[Page will load all data in the table upon page load.]

Delete

Footer

Attendance

Manage Users

My Account

Log out

Clients

Events

logo

Pasir Ris Club

Manage Users

TechLadies - UX Design Notes

PROJECT:

TYA_Wire frames_v3

DATE:

19/10/2016

AUTHOR:

Gia Phua

+ Add User
SCREEN

1

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

1

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
client’s picture

TechLadies - UX Design Notes

SCREEN

Role

7.1-User Details pg (Blank State)

Club

1

1

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.

2

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

2

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
client’s picture

TechLadies - UX Design Notes

7.2-User Details pg
(Interactive State: Dropdown - Role)

Staff
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 ‘Staff’, on the ‘Club’ dropdown, user should not
be able to select any club. This is because staff should have
access to all clubs. We are not going to programme it to tick all
clubs on default for ‘Staff’ 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 ‘Staff’. So let’s just
remove the option to tick ot untick clubs for ‘Staff’, and disable
club selection for ‘Staff’ 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:

1

[Club name]

dd mmm yyyy

19/10/2016

1

[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
client’s picture

TechLadies - UX Design Notes

[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
client’s picture

PROJECT:

TYA_Wire frames_v3

DATE:

19/10/2016

AUTHOR:

Gia Phua

Save

Name
1

TechLadies - UX Design Notes

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

Confirm, I want to delete

2

I don’t wish to delete
1

LIGHTBOX
There is a confirmation message before user confirms to
deleting the Client Details permanently.

2

BUTTON: I DON'T WISH TO DELETE
This will lead user back to the 'Event Details' pg.

3

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

1

Please fill in all the mandatory fields marked with *, in order to save this page.
Save

Name *
+Add
client’s picture

DATE:

19/10/2016

AUTHOR:

Gia Phua

SCREEN

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.

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

TechLadies - UX Design Notes

dd/mm/yyyy

Address

Delete

Footer

logo

TechLadies - UX Design Notes
Welcome!

1
User name

Password

PROJECT:

TYA_Wire frames_v3

DATE:

19/10/2016

AUTHOR:

Gia Phua

SCREEN

1 - Log In pg

Log In

2

1

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.

1

TYA Pasir Ris Club

+ Add new event

TechLadies - UX Design Notes

PROJECT:

TYA_Wire frames_v3

DATE:

19/10/2016

AUTHOR:

Gia Phua

View events’ data
SCREEN

View clients’ data

2.1.1-Landing pg

1

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

TechLadies - UX Design Notes

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)
(Staff / Supervisor view)

1

[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

1

TYA Pasir Menu
Ris Club

TechLadies - UX Design Notes

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)

1

footer

MENU
Menu should be accessible to user from any page.

1

TYA Pasir Menu
Ris Club
Home

TechLadies - UX Design Notes

2

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 (Staff view)

1

MENU
Menu should be accessible to user from any page.

2

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

Clients of Pasir Ris Club (33)

Name

3

TechLadies - UX Design Notes
1

2
PROJECT:

TYA_Wire frames_v3

DATE:

19/10/2016

AUTHOR:

Gia Phua

Level

Gender

Cindy Ong Siao Qi

P1

F

SCREEN

Siti Nurhalizah
Bte Hamima

P2

M

3.1-Client list pg

Kumar Nathan s.o
Srinariyana Thiru
Kesavanayar

P3

M

John Tan Ming Rui

P4

M

Phua Soon Li

P4

M

Wong Min Qi

P5

M

The 1st column will be frozen at the left side of the table.

Theophilus Chua
Dan Ming

P5

M

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

M

Cindy Ong Siao Qi

P6

M

Siti Nurhalizah
Bte Hamima

P6

M

1

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.

2

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.

3

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.

[Page will load all data in the table upon page load.]

footer

TYA Pasir Ris Club

TechLadies - UX Design Notes

Clients of Pasir Ris Club (33)
PROJECT:

TYA_Wire frames_v3

DATE:

19/10/2016

AUTHOR:

Gia Phua

1

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

[Page will load all data in the table upon page load.]

footer

SCREEN

3.2-Client list pg
(Interactive state: See right side of table)

1

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.

1

TYA Pasir Ris Club

client’s
picture

TechLadies - UX Design Notes

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 Profile
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 client’s 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

2

BUTTON: ADD GRADE
This will open up a lightbox where user is able to input details
of a grade.

3

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.

4

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

[Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut
enim ad minim veniam, quis
nostrud exercitation ullamco
laboris nisi ut.]

Hobbies

badminton, guitar, singing. he’s a
closet songbird!

Address

Blk 870 Yishun Ring Road #03-78
S760870
Edit

5

Family Profile
Relationship

Mother

Name

Lum Wai Soong

Contact no.

97514373

School Grades
School

[Autopopulated from above]
2

4

Level

P6

Subject

Math

Band

Foundation

Semester

CA1

Grade

A2 (88/100)

+Add grade

3

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 field]

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

6

footer

Pls view reference link: http://sitesforprofit.com/responsivetable-plugins-and-patterns
Refer to 10. Codepen (Geoff Yuen). There is demo and tutorial
there on how to implement this mobile table layout.

5

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.

6

NO ACCESS TO DELETE BUTTON FOR SUPERVISOR / CLUB
LEADERS
Supervisors and Club Leader should not have access to delete
'Client Details' pg. Only Staff can do this. Hence hide the
'Delete' button for Supervisors and Club Leaders.

TYA Pasir Ris Club

client’s
picture

TechLadies - UX Design Notes

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 Profile
Gender

Male

Mobile no.

XXXXXXXX

Home no.

XXXXXXXX

Race

Chinese

Date of birth

01/01/2000

Age

16

Level

S4

1

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

2

LIGHTBOX - ADD NOTE
User can input note in this lightbox. By default, preset radio
button to 'General'.

3

PRIMARY VS SECONDARY BUTTON
Take note: There should be a difference 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.

4

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

[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

[Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut
enim ad minim veniam, quis
nostrud exercitation ullamco
laboris nisi ut.]

Hobbies

badminton, guitar, singing.
he’s a closet songbird!

Address

Blk 870 Yishun Ring Road #03-78
S760870
Save

Family Profile
Relationship

Mother

Name

Lum Wai Soong

Contact no.

97514373

School Grades
School

[Autopopulated from above]
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 field]

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

TechLadies - UX Design Notes

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

3

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

PROJECT:

TYA_Wire frames_v3

DATE:

19/10/2016

AUTHOR:

Gia Phua

SCREEN

5-Event list pg

1

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.

2

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.

3

SORT TABLE BASED ON DATE OF EVENTS
Sort the table by latest events on top, oldest events at the
bottom.

TYA Pasir Ris Club

TechLadies - UX Design Notes

Event Title

Event date

PROJECT:

TYA_Wire frames_v3

DATE:

19/10/2016

AUTHOR:

Gia Phua

dd mmm yyyy
SCREEN

General notes about the event / anything
important to highlight / feedback

Name

6.1-Event Details pg (Blank State)

Gender

Level

Attend

F

P2

3

1
Cindy Ong Siao Qi
Siti Nurhalizah
Bte Hamima

F

Kumar Nathan s.o
Srinariyana Thiru
Kesavanayar

1

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.

2

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

M

P3

** Error message may look like: Please fill up the mandatory
fields in order to save this event.
CTA options:
- ‘OK’
- ‘Discard this event’

M

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

F

Theophilus Chua
Dan Ming

M

P6

Christina Ong Siao
Qin

F

P6

Tan Wei Jie

M

P6

Wong Min Qi

F

P5

Theophilus Chua
Dan Ming

M

P6

Christina Ong Siao
Qin

F

P6

Tan Wei Jie

M

P6

Cindy Ong Siao Qi

F

P6

4

Delete

footer

3

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.

4

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

TechLadies - UX Design Notes

1

Pasir Ris Club Carnival 2016
02/03/2016
General notes about the event / anything
important to highlight / feedback

PROJECT:

TYA_Wire frames_v3

DATE:

19/10/2016

AUTHOR:

Gia Phua

SCREEN

6.2-Event Details pg
(Interactive state: Input notes on client)
Name

Gender

Level

Cindy Ong Siao Qi

F

P2

Siti Nurhalizah
Bte Hamima

F

P3

Attend

1

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.

2

HOTSPOT AREA : NAME + CHEVRON
This is a hotspot area where after the user clicks on it, it'll
trigger a text box input.

2

Kumar Nathan s.o
Srinariyana
Performance
Thiru
or behaviour M
of client P3
during
Kesavanayar
this event
John Tan Ming Rui

M

P4

Wong Min Qi

F

P5

Theophilus Chua
Dan Ming

M

P6

Christina Ong Siao
Qin

F

P6

Tan Wei Jie

M

P6

Wong Min Qi

F

P5

Theophilus Chua
Dan Ming

M

P6

Christina Ong Siao
Qin

F

P6

Tan Wei Jie

M

P6

Cindy Ong Siao Qi

F

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

TechLadies - UX Design Notes

Pasir Ris Club Carnival 2016
02/03/2016
General notes about the event / anything
important to highlight / feedback

PROJECT:

TYA_Wire frames_v3

DATE:

19/10/2016

AUTHOR:

Gia Phua

SCREEN

6.3-Event Details pg
(Interactive state: After Inputting notes on clients)
Name

Gender

Level

Cindy Ong Siao Qi

F

P2

Siti Nurhalizah
Bte Hamima

1

F

P3

Kumar Nathan s.o
Srinariyana Thiru
Kesavanayar

M

P3

John Tan Ming Rui

M

P4

Wong Min Qi

F

P5

Theophilus Chua
Dan Ming

M

P6

Christina Ong Siao
Qin

F

P6

Tan Wei Jie

M

P6

Wong Min Qi

F

P5

Theophilus Chua
Dan Ming

M

P6

Christina Ong Siao
Qin

F

P6

Tan Wei Jie

M

P6

Cindy Ong Siao Qi

F

P6

Save

Delete

footer

Attend

1

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

TechLadies - UX Design Notes

Pasir Ris Club Carnival 2016
02/03/2016
General notes about the event / anything
important to highlight / feedback

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

F

P2

Siti Nurhalizah
Bte Hamima

F

P3

1

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.
She’s 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

F

P5

Theophilus Chua
Dan Ming

M

P6

Christina Ong Siao
Qin

F

P6

Tan Wei Jie

M

P6

Wong Min Qi

F

P5

Theophilus Chua
Dan Ming

M

P6

Christina Ong Siao
Qin

F

P6

Tan Wei Jie

M

P6

Cindy Ong Siao Qi

F

P6

Save

Delete

footer

Attend

1

SEE SPECIFIC CLIENT’S NOTES
To see specific client notes, just click on the client name, a text
box will appear under the row of the name.