An app for tracking and visualizing student progress in Kid's Taekwondo class. Features links to a functional excel prototype, low-fidelity prototype, high-fidelity prototype. #googleuxdesign

1. Sabonotes’s App Design
Sloane Kuo

2. The product:
Sabonotes is an attendance and skills tracking tool for
taekwondo instructors to use across different devices.
Sabonotes helps instructors quickly create digital notes
and stay organized and consistent in their teaching. The
design visualizes a functional excel prototype.
View Sabonotes excel prototype.
Project overview
Project duration:
March 2021 to May 2021.

3. The problem:
Instructors find writing down class notes time-
consuming, inconvenient for sharing, and
tedious to look through when planning for the
next class or assessing a student's progress.
Project overview
The goal:
Sabonotes is a web-based platform that easily
allows instructors to save class attendance and
notes, view each student progress, and share
student's progress with their guardians.

4. My role:
Product developer, UX designer, and UX
researcher for Sabonotes from conception to
delivery.
Project overview
Responsibilities:
Developing prototype with excel, conducting
interviews, paper and digital wireframing, low
and high-fidelity prototyping, conducting
usability studies, accounting for accessibility,
and iterating on designs.

5. Understanding
the user
● User research
● Personas
● Problem statements
● User journey maps

6. User research: summary
I conducted interviews and created empathy maps to understand the users I’m designing for and
their needs. The research identified the primary user group as starting instructors who needed an
essential and affordable class tracking platform that multiple instructors can access.
This user group confirmed my initial assumptions about the convenience of digitally logging class
notes but, research also revealed that users often do not have enough time after each class and
leaves the updates at the end of each workday. A few challenges that make it difficult for users to
maintain class notes include not having the habit of notetaking, other obligations, and lack of
organization.

7. User research: pain points
1
Time
Tedious and stressful to
recall past classes or flip
through pages of class
notes to find specific
student or class details
2
Consistency
Unpractical and
unprofessional to pass
notes around and
writing styles create
readability challenges
3
Preparation
Lack of clarity on student
progress can lead to
repetitive classes and
unbalanced skill and
personal development
4
Communication
Guardians often ask
about their kids'
progress and status,
and it is difficult to
explain through chats.

8. Persona: Daniel
Problem statement:
Daniel is a starting taekwondo
instructor who recently opened
his academy and needs to have
an organized and digital way of
tracking student progress and
class topics because he wants all
his instructors to teach productive
classes to ensure students grow
skills and character consistently.

9. User journey map
Mapping Daniel’s user
journey revealed how a
form-like note saver
enhances efficiency and
developing routine.

10. ● Paper wireframes
● Digital wireframes
● Low-fidelity prototype
● Usability studies
Starting
the design

11. Paper wireframes
Taking the time to draft iterations
of each web page on paper
ensured that the elements that
made it to digital wireframes
would be well-suited to address
user pain points. The design uses a
form-like layout to prioritize easy-
to-use, saving time, and minimal
technical work for the user.

12. Digital wireframes
Throughout the initial
design phase, feedback and
insights from the user
research were important
references when iterating
to improve user experience.
Navigation
at the top of
page allows
quick and
easy access
to other
tasks.
Dropdown
and tickboxes
simplifies
effort on time
and mental
work.
This button at
the bottom of
the screen
clearly shows
how to save.

13. Digital wireframes
Simplifying class summaries
into a clean and easy to
understand list relieves the
pain point of flipping through
pages and pages of notes and
inconsistency in information
and communication.
A summary
allows users to
recall or grasp
class progress
with a quick
look.
Users can quickly
search updates
and plan classes
more efficiently

14. Low-fidelity prototype
The low-fidelity prototype takes the
primary user through logging into their
account, completing a class update, and
adding a new student. The prototype is
applicable for usability study with the
users.
View Sabonotes low-fidelity prototype.

15. Usability study: parameters
Study type:
Moderated usability study
Location:
Taipei, Taiwan
Participants:
5 participants
Length:
10 minutes

16. Usability study: findings
These were the main findings uncovered by the usability study:
1
People want minimal
effort and complete
class updates quickly
Efficiency
2
Simplicity Practice
3
People want more
concise and easy to
understand navigation
Some people rely on gut
feelings and find routine
updates tedious
Mobile-First
4
People want to try the
app on mobile and
emphasized readability

17. ● Mockups
● High-fidelity prototype
● Accessibility
Refining
the design

18. Mockups
There were a few actionable
insights that came out of the
usability studies. A frequent
suggestion from the participants
was using a dynamic calendar
to select the class date to see
the day of the selected day.
Before usability study After usability study

19. Mockups
In the early design, all class
and student tasks were only
accessible by clicking on the
main categories. After the
usability study, the
navigation expands into
more labels to provide a
more concise direction for
accessing other functions.
Before usability study After usability study

20. Mockups

21. High-fidelity prototype
For tablet
The hi-fi prototype for tablet includes the
same “complete class update and add a
new student” user flow, additional
functions like making changes to existing
classes and students and student progress
finder for external uses, and design
changes made after the usability study.
View Sabonotes high-fidelity prototype.

22. High-fidelity prototype
For mobile
The hi-fi prototype for mobile includes the
same “complete class update and add a new
student” user flow, additional functions like
making changes to existing classes and
students and student progress finder for
external uses, and design changes made
after the usability study.
View Sabonotes high-fidelity prototype.

23. Accessibility considerations
1
Use icons and
animations to make
interactions and
navigation easier.
2
Use student profile
images to improve
identification and
recognition for all
users.
3
Compatible with
browser’s zoom
function to improve
readability across
different devices.

24. ● Takeaways
● Next steps
Going forward

25. Takeaways
Impact:
The app helped users feel like tracking class
and student progress for taekwondo can be
simplified, practical, and convenient.
One quote from peer feedback:
"It’s much easier to sub for other teachers if I can
see all the classes."
What I learned:
When designing an app, I should start the design
from the smallest screen like smartphones to fully
understand the use of space and test its
portability. Usability studies and peer feedback are
essential to complete during each stage of the
design process since it improves each iteration of
the app's design.

26. Next steps
1
Research if the app can
be compatible with
one-click translations
to provide more
language options and
increase accessibility.
2
Conduct more user
research to determine
any new areas of
need.

27. Let’s connect!
Thank you for your time reviewing my work on Sabonotes! If you’d like to
see more or get in touch, my contact information is provided below.
Email: sloanekuo@email.com
LinkedIn: /in/sloanekuo/

28. Thank you!