Pixel Perfect
An online project managing platform for freelance designers
project type
duration
role in team
tools
the story
BACKGROUND
In recent years, the University of Toronto made the headlines of many news articles for its inadequate resources to effectively deal with the volume of students seeking mental health help. In a report published by the university’s Innovation Hub, it outlined the factors that contribute to UofT students’ high level of academic stress: a campus culture of promoting individual excellence, the lack of belongingness due to a large commuter population, and the difficulty in navigating appropriate resources.
Why did it pique my interest?
At the beginning of my journey at UofT, my roommate was a second-year engineering student. From her daily schedule of studying 10+ hours and dramatic mood swings based on grades, I sensed a concerning academic stress level. Other UofT alumni I talked to further confirmed my assumption, when asked about their undergraduate experiences, dreadful memories of “not making the cut-off” for certain majors and the fears of being put on “academic probation” was mentioned by many.
My own experience of overcoming struggles to maintain a healthy mental state in highly competitive environments made me compelled to tackle this subject. The project is carried out with the hope of changing students’ perspectives on academic stress and improving their access to appropriate support.
THE CHALLENGE
How can we help students better deal with academic stress in a highly competitive institution like the University of Toronto?
DESIGN GOALS
- Help students understand academic stress is a part of the learning process
- Make better use of the existing stress relief services on campus
- Build a community for students to share experience and foster belongingness
discover
Identifying the problem
To understand better about the student’s perception of academic stress, how they deal with it, and their awareness of the support system offered on campus, we looked into existing reports on the topic , also conducted 9 semi-structured interviews and 20 online surveys.
Here are some thought-provoking quotes we gathered during the process:
Based on our primary and secondary research, we summarized three themes our design will address moving forward.
The academic pressure of a prestigious institution
Large population and high ratio of commuters create isolation
Difficulty in accessing help resources
U of T has a history of promoting individual excellence, students often fail to recognize challenge as a part of the process but rather question themselves about belonging to the distinguished community.
Lacking opportunities for close interaction, collegial relationships that don’t extend beyond school, large commuter population with limited time spent on campus, all contribute to the profound lonely experiences at U of T.
The tendency to internalize stress and feeling daunted by the process of accessing the mental health resources available on campus make students reluctant in reaching out for appropriate help.
Building Persona
As empathy is the key to creating a user-centric design, we built a proto-persona which will help us in making design decisions throughout the process.
Susan Persa is a 19 year old Engineering student at UofT. She studies very hard and is under pressure to meet her parents high expectations as well as her own. As a commuter student from Mississauga, she often feels disconnected from the university community. She barely talks to people from her class and finds it difficult in accessing the resources on campus.
ideate
big ideas
After listing out the pain points and needs of our persona in a detailed user journey, we started brainstorming for possible solutions. We then combined the big ideas into 5 main groups.
Prioritization & Features
After an internal voting process based on the ideas’ impact and feasibility, we decided to prioritize the following three features in our app.
VIRTUAL LISTENER
INSIGHTS & SOLUTIONS
BUILD A COMMUNITY
A chatbot which allows students to vent about academic stress without explaining background information.
Offers students customized de-stressing advice or directions on seeking appropriate professional help.
Connects students who struggle with academic stress to a welcoming community where they can share experience.
prototype
User Flow
Based on the prioritized featured, we established the user flow and sketched out initial screens to test internally.
clickable Prototype
After we reached agreement on the low-fidelity wireframes, I then created a clickable prototype using Figma.
getting feedback
After generating the clickable prototype in Figma, usability tests were conducted with 5 representative users. Each participant was given 5 tasks to complete and followed up with a casual interview collecting their overall thoughts of the application.
high-Fi Prototype
A few internal guerrilla tests were performed as I created the high-fidelity prototype to ensure the issues found in prior usability tests were fixed. The below image demonstrates the process of consolidating issues in the clickable prototype and how the high-fi screens were evolved from the previous stage.
Scenario 1: Get-on-board
It’s the midterm season at UofT again, Susan walks into a huge class with a heavy heart. She thinks to herself: “How is it possible that it’s halfway through the semester and I still don’t know anyone in this class?”
During the break, she overhears students talking about a new app called UofT Destress. Out of curiosity, she decides to give it a try.
Scenario 2: Check out events
After Susan sets up her profile in the app, she started browsing the homepage. “I didn’t even know UofT offered all these events to help students with academic stress!” She then decides to register for an upcoming mediation event.
Scenario 3: A study break
As Susan plans out her revision schedule in the library, she’s overwhelmed by the amount of material she has to cover within the limited time. She feels like she couldn’t breathe.
Her phone vibrates gently. It’s the app asking her if she needed a break. She takes the advice and finds a quiet spot nearby to meditate. After a few minutes, Susan is no longer overwhelmed by the stress and is able to refocus on her study.
Scenario 4: Venting about stress
After a long day of studying, Susan jumps on a bus to commute back home. She feels compelled to be verbal about her feelings. She wants to call her mother but she didn’t want her to be more concerned. She thought about her best friend, but she fears that he wouldn’t relate as they are in completely different majors now.
Susan then opens the chatbot app and started ranting about her day. By the time she got off the bus, she felt that some weight has lifted off her chest.
Scenario 5: Seeking help
Sometime after the midterm exams, Susan receives a notification that her grades are up from her midterm. It’s only a B-. She felt frustrated as this failed her expectations. She turns to UofT Destress for advice. After asking for more details about her problems, the app selects a professional counsellor for her. After scheduling an appointment, Susan also receives tips on relieving stress in the meantime.
evaluate
In order to further validate the design, obtain wider audience feedback and determine if the app adds value to existing UofT mental health services, I conducted another round of usability testing on 5 representative students. This summative evaluation consisted of three parts: an online usability test to validate the improved user flow and spot any remaining problems in interface design, an System Usability Scale (SUS) questionnaire to quantify usability level, and a follow-up interview to gather qualitative, in-depth insights from users.
The same tasks were given to users as in the previous section for easy comparison of results. The table below is a summarizes the improvement in success rates.
usability test
System usability scale
The System Usability Scale (SUS) provides a quick and reliable way of measuring usability. It consists of 10 Likert scale questions to obtain users overall impression on the usability of the system. SUS has proven to be a dependable method of evaluating usability and comparison to industry standards. The original SUS questionnaire for this study can be accessed here.
The SUS score of 73.2 was an evident indicator of potential users' approval of the app. At the same time, the score also suggested there is still much room for improvement.
qualitative feedback
In the last section of the evaluation process, a semi-structured interview was used as a way for me to acquire information that could not be reflected in the previous two sections. Below are some thought-provoking quotes:
I could see myself using this app. It’s really important to have something that’s available 24-hours. I never seem to have a breakdown during the mental health services’ drop-in hours, but it’s studying alone late at night when things get really bad.
I love the idea of the chatbot. I’m an international student and my English isn’t that good. I’m much more capable of conveying my thoughts when typing.
This is awesome for someone like me who gets anxious talking on the phone, especially about my mental health conditions.
I don’t like using the campus mental health service because the last time I called to book an appointment I was put on hold for more than 30 minutes. I think your app would really help with this!
The participants also provided useful suggestions for the app to move forward:
I wish there was also an incognito mode so we can seek help anonymously.
I think the app should focus on the “listening” part, that’s what sets it apart from other services right now.
Think of ways to validate the student’s experience while venting.
Consider adding some lecture videos so people can educate themselves about academic stress.
I think in order for users to trust the app, it needs to do more diagnoses before providing solutions.
I wish the interaction with chatbot was more natural. Maybe work on simulating human conversations.
reflect
test often
Rather than conducting complex usability testings at the end, it is more effective to validate assumptions at each design stage, and improve on the design repeatedly using the test results as guidance
an iterative process
Through this project I have learned the importance of constantly seeking for user input and iterating multiple rounds over initial design. Comparing the initial sketches with the end result, it's evident how much progress this project has made over multiple rounds of revision.
Know your users
To really get to know the target audience of this project, I actively engaged in experiencing the life of an undergrad student at UofT including taking the same courses and following the same daily schedule.
the story
Identifying the problem
Freelance designers struggle to keep track of their projects and getting paid on time.
the solution
- Creating a fully customizable managing tool
- Offering contract, invoice drafting assistance tools
- Introducing third-platform payment
strategize
Design strategy
Full Flexibility
Communication Toolkit
Communication Toolkit
Allows freelancers to fully customize to their own needs.
Offer templates for emails, proposals, invoices to standardize communication and show professionalism.
Introducing 3rd party payment to resolve payment delay and trust issues
information architecture
design
home page
dashboard
Your daily briefing of the work ahead.
project list
Help you stay on top of all your projects.
single project overview
Dive into the details for a particular project.
Fully customizable
Tools for Effortless communication
A new Way of Payment
Reflect
User Experience Design is always an iterative process
Throught this project I have learned the importance of actively seeking for user input and iterating multiple rounds over initial design. Below are images of the first low-fi sketches, they document how much progress this project has made over multiple rounds of revision.
RESEARCH
Identifying the problem
One of the most important goals for Special Olympics Ontario is providing people who want to participate in the organization with guidelines advice, and help. Athletes, volunteers, staff, coaches, educators, community members, all depend on the SOO website as a reliable source for providing information and resources. Therefore, it is critical for the SOO website to communicate information to different user groups in a timely, efficient and concise manner.
Stakeholder Interview Findings
The program director of SOO James Norhona, helped us understand some of the organizational needs for redesign.
- Staff members often receive phone calls from users who have trouble finding information
- The old information portal is structured similar to a physical binder system and thus do not have a streamline hierarchy
- Files within the old site do not contain searchable text
Content & Context Analysis Findings
- organization: inconsistency items in two sets of secondary navigation system
- navigability: irreversible contextual links and the absence of breadcrumb trials
- search system: misleading search bar, extensive non-searchable files
- labelling: mismatch between labels and content, counter-intuitive label names content: broken links and outdated information
- general content: various broken links and outdated information
Usability Tests & Interviews
We performed user interviews and usability tests on 6 candidates who embodied the representative users of the website. The semi-structured research method allowed us to go beyond the technical difficulties and understand the users’ emotions such as their frustration with the current website navigation.
Usability Tasks
The tasks were designed with specific scenarios for the candidates’ better understanding of the context.
You’re a volunteer for floor hockey, and you want to know floor hockey rules better. Where would you find information on floor hockey? Furthermore, you want to know about the time in between each game period (intermission period).
You’re a new staff working for the SOO. On your first day, you receive a call from someone who’s looking for partnership opportunities. You are directing him/ her to find the contact person info to discuss about possible partnerships on the website.
You’re a new staff working for the SOO. On your first day, you receive a call from someone who’s looking for partnership opportunities. You are directing him/her to find the contact person ino to discuss about possible partnerships on the website.
You are a parent looking for guidance with regards to locating a volleyball registration form for your child. You are unable to find this document and you are looking to submit an online form to contact a staff member to help you.
Findings
The tasks were designed with specific scenarios for the candidates’ better understanding of the context.
- Overview: only 1 out of 6 participants successfully completed all tasks.
- navigability: irreversible contextual links and the absence of breadcrumb trials
- search system: misleading search bar, extensive non-searchable files
- labelling: mismatch between labels and content, counter-intuitive label names content: broken links and outdated information
- general content: various broken links and outdated information
design
Design Strategy
Based on our findings from the research stage, we decided on the following strategies to guide the design process:
DECLUTTER
restructure
RELABELING
Discard broken links, overlap information, outdated content, minimize user cognitive load.
Re-organize information architecture based on user analysis.
Re-name labels so they are intuitive, consistent and targeted at the intended audience.
Card Sort
Before beginning our card sorting study, we created a hierarchy of the current information architecture to better understand the organization structure as it stands. As several of the existing categories were well received in our previous user testing, and for ease of result interpretation, we decided to conduct a hybrid card sorting study.
Prior to the actual card sorting activity, we decided to use one of the participant recruitments provided by the SOO to conduct a preliminary pilot testing session for our card sort. To elaborate, we performed a remote testing session to identify major pain points so to adjust our card sorting template accordingly.
We then conducted 6 in-person card sort tests through the online platform optimum sort. Below shows the popularity matrix for this study. It provides strong rationale for our information architecture re-organization.
information architecture
After analyzing the card sort results, we came up with a information architecture scheme of the website's which embodies user preferences and aligns with our design goals.
DELIVER
Design Suggestions Overview
1. Resources main page
2. sports & games page
4. support page
5. contact us page
Graphic Guidelines
The Special Olympics Ontario belongs to a much larger organization of the Special Olympics which already has established visual identity guidelines. This project followed the visual guidelines for better future integration into actual website.
Reflect
- Strong sense of accomplishment when the proposal is greatly appreciated by the partner.
- Users expressed by participating in the studies it evoked their interests in using the website.
- Getting to know a special group of people who we wouldn’t have known otherwise. People of different roles all share the same goal of helping people with intellectual disabilities strive for better lives.
