top of page

SFU Health & Counselling


UX Research

Usability Testing

For a class UI design and research, working with another fellow SIAT student, we were tasked with creating a smart device application that targets the new balance between in-person and on-line activities for users in a professional context in a COVID-19 era. Establishing the receptionists at SFU Health and Counselling as our users, we created an CRM interface that was able to streamline the appointment booking process. 

Roles & Responsibilities 

Project Context

  • In Person UX Research

  • User Interview

  • Empathy & Affinity Mapping

  • Crazy 8 Ideation

  • User Personas

  • Jan 2022

  • Class Project

  • User Personas

  • Wire-framing

  • Prototyping

  • Usability Testing

Tools Used

  • Miro

  • Procreate

  • Figma

  • ProtoPie


SFU H&C is seeing an influx in students seeking for help following the return to campus transition. The current booking system simply cannot keep up with the sudden increase in demand and receptionists are having difficulties keeping track of which appointments are in-person and which appointments are online. 



Dashboard .

The Dashboard provides an overview of today's appointments and highlights the appointments that require immediate attention. 

From the sidebar, the receptionists are notified of any changes and given the opportunity to edit them quickly straight from the Dashboard.

Manage Bookings .

Manage Bookings displays a more detailed view of the appointment that require changes.

The receptionist is able to handle both the student and the counsellor side of the change and send out notification emails to both sides after making changes to the appointment. 

New Macbook Pro Mockup Front View.png


Our CRM provides the opportunity for users to personalize, customize and control how the interface behaves to fit their preferences. 

This is especially important considering this interface would be used on a daily basis by the SFU H&C receptionists. 



Helpful . 

Depending on the type of conflict, our prototype will automatically suggest possible solutions, reducing user's mental load. 

todayAppointment_Confirmed 1.png

Efficient . 

After a solution is selected, autofilled email templates will be automatically generated ready for the receptionists to edit and send.


Error Prevention .

Our system checks for conflicts, if there is enough time in between sessions, or if there is an overlap in appointment times.


Me and my partner pinpointed our stakeholders as the students seeking help, the counsellors, and most importantly the receptionists at SFU H&C.

We were able to secure user interviews with a student that had prior experience trying to seek help and a current receptionist at SFU H&C. The two interviews revealed a number of recurring themes we could address in this project.

Issues with capacity and efficiency

“The return to campus transition has been tough for a lot of students. We are getting overwhelmed with emails and calls. ”

Current SFU H&C Receptionist

“For the last year or so, I've had no luck, it's just been going straight to voicemail because their phone line is just so busy.”

SFU student on r/SimonFraser

Issues with the return to in-person services

“It was sometimes diffucult keeping track of which appointments are online and which are in-person and then relaying it to the counsellor”

Current SFU H&C Receptionist

“It was my first time seeking for help. I was hoping for in-person but I didn't know that was an option, so I settled for a Zoom call instead.”

SFU student seeking help


The current booking process cannot handle the sudden influx in appointments and the management of 2 different modes of counselling, resulting in long wait-times for students, confusion for counsellors, and receptionists at H&C overwhelmed with inquiry calls. 



We performed the Crazy 8 exercise and independently came up with distinct ideas in which we can draw inspiration from.


After collecting feedback from our TA, we further refined our idea and compiled our favourite parts from each sketch into a single set of wireframes. 

MacBook Pro 16_ - 2 1.png
MacBook Pro 16_ - 3 1.png


To develop a variety of options, me and my partner again independently created possible mockups with distinct style guides.


Combining the best parts from our mockups, we used Protopie to create a prototype that was fully functional  with animations and micro-interactions.


User studies were conducted in order to get an early assessment of the overall usability of our appointment management interface. We were unfortunately not able to get a SFU Health and Counselling Receptionists to participate in our study so we had to make compromises by asking our friends and famililies. We eventually narrowed it down to 2 individuals who's day to day had some relations to our CRM. 

Target Metric

" We believe that given users have an elementary set of background knowledge in using computers and basic information management interfaces, at least 80% of participants should be able to complete all tasks in under 2 minutes. "

User Tester 1 

SFU SIAT Student and Part Time TD Bank Teller. Past work experience working at SFU Fraser Library and thus have experience using SFU Internal Interfaces.

image 3.png
image 14.png

I am assuming 9:00 was the original time...not sure though

Simply assumes that the original 9:15 is the original time although it can be clearer.


Hmm I wish there is a note function...

Nice to make internal notes about the students or the appointment for themselves or other receptionists to see

User Tester 2

COVID + Biochemistry Lab Technician. Often works with internal laboratory applications and information systems. Day to day tasks includes logging the result of a specimen ID with client info and thus often works with interface that has built - in messaging.

image 4.png

I didn’t know I can drag this

Some interactions are unclear in terms on what is interactable and what type of interaction does it uses

image 5.png

It is too similar in colour

Zoom and in-person are too similar in colour


Clearer distinction between Online and InPerson colours.







ReStyled cards to show the original time. 


image 3.png



Clearer signifiers that the card can be elongated or shortened to manipulate the duration of the appointment. 


Screen Shot 2022-11-18 at 11.21.21 AM.png


image 4.png

Presentation Pitch of our Final Prototype


Final Logic Flow


If: click on "notify the session will be cut short"


then: autofill the message to the counsellor and to the student that the session will be cut short

If: click on "confirm changes button"


then: show confirmation screen 

If: click on "complete"

If: click on "delay the other sessions"


then: automatically move the corresponding counsellor's session and send message update

An automatic message will be sent to the counsellor, and all students that are affected

If: click on "confirm changes' button"

If: click on "modify time" button


then: show confirmation screen 


then: the system checks for any time conflict and the message box will update

If: click on "complete"

If: there is not enough time inbetween each appointment, there will be a conflict


Then Finally

A Summary page of all the changes are shown as well as a draft of all the emails that would be sent to all the affected parties. 

Then Finally

A Summary page of all the changes are shown as well as a draft of all the emails that would be sent to all the affected parties. 

Then Finally :


Suggestion appears asking receptionist to consider adding at least 15 minutes between each appointment.

"Curtis Jones" appointment is moved from 10:45AM to 11AM. Messages are automatically updated again.


Manage Appointments : Calendar Layout


Manage Appointments : List Layout

If: click on student with an existing alert


then: view appointment overview and details. 

If: click cancel appointment

If: click manage appointment


Finally : confirm cancellation

then : Can modify the appointment by typing, using the dropdown, or dragging the student container on the left similar to the sidebar on the Dashboard.

If: there is no time conflict with another appointment

If: there is a time conflict with another appointment, an error message will appear. 


then finally : time will be successfully changed

then finally : time suggestions will also be shown included in the error message. 



Overall, I was very satisfied with how the redesign turned out, as well as the process and steps I took to get there. I beleive the redesign was a success as reflected from the 45.9% increase in CSAT score. It was particularly rewarding finding a solution for a problem that I had first hand experience with as a Cineplex Mobile App user myself. 

What I've learned ... 

There's always more testing ... 

There is rarely a perfect interface solution, designs can always be improved, styling can be fine tuned, new features can be added. 

After the testing process, me and my partner received feedback and areas of improvement from our users for our next iteration. We quickly re-evaluated our design and found fixes for our users concerns. Although that was the end of the class project, when presenting our case study to our peers, our peers noticed some styling inconsistencies and logic flows that we can perhaps think about for future iterations.   

Introducing new UX techniques into my workflow

Many UX techniques allowed me and my partner to quickly and efficiently express and record our thoughts and ideas methodically narrow them down into a direction.  

When me and my partner was brainstorming for ideas, or refining ideas into low fidelity mockups, our TA regularly encouraged us to employ UX techniques such as Crazy 8's and A/B Testing.  

Previous Project

EdgePi@OSENSA Innovations

Back to Top


Next Project

Cineplex Redesign

Let's Talk ! 

Shoot me a message to know more about me and my projects !

bottom of page