top of page
sfuhealthandcounselling-scaled.webp

SFU Health & Counselling

UI + UX

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

THE PROBLEM

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. 

THE SOLUTION

laptopDashboard.png

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
manageAppointment_listView.png

Flexibility.

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. 
 

MICRO-INTERACTIONS

todayAppointment_notifyTheSessionWillBeCutShort.png

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.

todayAppointment_errorPrevention.png

Error Prevention .

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

USER INTERVIEWS

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 MAIN INSIGHT

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. 

THE PROCESS

Sketches

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

Wireframes

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
rob.png
patt.png

Mockups

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

Prototype

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

USABILITY TESTING

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

errorrrrr.png

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
errorrrrr.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
errorrrrr.png

It is too similar in colour

Zoom and in-person are too similar in colour

IMPROVEMENTS

Clearer distinction between Online and InPerson colours.

Default

inperson_default.png
zoom_default.png

Hover

inperson_focus.png
zoom_focus.png

Focus

inperson_hover.png
zoom_hover.png

ReStyled cards to show the original time. 

Before

image 3.png

After

zoom_default.png

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

Before

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

After

image 4.png

Presentation Pitch of our Final Prototype

ok1.png
ok1.png
iii.png

Final Logic Flow

samSmith)_deafult.png

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

todayAppointment_notifyTheSessionWillBeCutShort.png

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

If: click on "confirm changes button"

confirm_cutshort.png

then: show confirmation screen 

If: click on "complete"

If: click on "delay the other sessions"

todayAppointment_shift.png

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

todayAppointment_confirm.png

then: show confirmation screen 

todayAppointment_drag.png

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

confirm_cutshort_confirmed.png
todayAppointment_Confirmed.png
curtis_drag.png
todayAppointment_errorFix.png
todayAppointment_errorPrevention.png

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.

ok1.png
ok1.png
xdddddddd.png

Manage Appointments : Calendar Layout

manageAppointment_listView.png

Manage Appointments : List Layout

If: click on student with an existing alert

manageAppointmentsGid000_edited.jpg

then: view appointment overview and details. 

If: click cancel appointment

If: click manage appointment

cancle_ash.png
manageAppointment_editing.png

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. 

ashley_11.png
conflist_ashley.png

then finally : time will be successfully changed

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

TAKEAWAYS

CONCLUSION

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

SFU H&C

Next Project

Cineplex Redesign

Let's Talk ! 

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

rocket_1f680.png
bottom of page