❇ SFU HUB (ACADEMIC)
fostering connections between post-secondary students
This human-computer interaction project aimed to create a mobile application that will help familiarize students within their community at post secondary institutions. Over the course of the semester, our team embarked on a comprehensive process that involved creating user flows, wireframes, user research, and backing up our designs with HCI concepts and user research. As part of this project, we focused on creating a prototype for HUB, a mobile application that acts as a gateway, enabling and fostering social interactions between students to help establish a stronger sense of campus culture.
Platforms
Figma
Tasks
User Research
HCI Research
UI Design
Deliverables
User Flow
Wireframes
App Prototype
Final Report
Team
Sabrina Chang
Kaia Crozier
Angela Lu
Context
HUB’s stakeholders are educational institutions such as colleges or universities, as this application eases their onboarding process for incoming students. Prime examples are institutions based in British Columbia, such as Simon Fraser University, University of British Columbia, University of Victoria, etc.
Purpose and Scope
HUB’s stakeholders are educational institutions such as colleges or universities, as this application eases their onboarding process for incoming students. Prime examples are institutions based in British Columbia, such as Simon Fraser University, University of British Columbia, University of Victoria, and etc.
Target Audience
HUB’s main audience is incoming university students who are anxious about transitioning to new social and physical setting. Students are required to access, complete and submit assignments digitally, therefore typically they have high technology literacy. Incoming students are also usually influenced to download applications that are popular, recommended or created by their institutions, in hopes of finding more information.
Design Problem
Being new to a space/unfamiliar settings can lead to feelings of isolation, or experiences of anxiety and fear related to social interactions, making it challenging to initiate conversations or participate in social events.
HOW MIGHT WE
simplify the process for students to meet and build connections, while cultivating a more interconnected community within post secondary institutions?
wave 1
design for human perceptual, cognitive & motor performance
Each interface element was designed to align with user perception and mental models, enhancing cognitive performance and reducing errors. Utilizing visual cues, Gestalt principles, and thoughtful indicator placement, we aimed for a user-friendly, intuitive experience. Recognizable signifiers and familiar affordances were used to ease navigation, memory, and motor skills.
Clark's Theory of Common Ground
Understanding Clark’s Theory we focused our designs on creating effective communication and interactions through establishing and maintaining a common ground. This understanding allowed for anticipation of predictable actions and interpretation of information for smooth cognitive performance, easing stress and frustrations of the users to their intended goals and needs.
mental models
Leveraging mental models, we aimed to create an experience that is easily identifiable, intuitive, and usable.
gestalt
Gestalt principles were used to optimize the communication between humans and the system and stimulate enjoyable interactions.
the user
Crafting the design to accommodate the diverse spectrum of users, considering the various needs and preferences
accessibility
To establish visual contrast and hierarchy, we consulted Colin Ware’s concept of opponent colors and information psychophysics. Mindful of diverse color perceptions, HUB’s interface and features maintains clarity even in greyscale, making sure no features become obscure to specific group of users.
light mode
dark mode
greyscale
resolving control action error
We acknowledge the potential challenges users face in translating visual stimuli to precise actions (ie. misclick, mistyped) and provided responsive feedback to assist the users
wave 2
a sociotechnical system and social cognition
HUB is a social application that enables interaction between users. In designing human-human technology facilitated interactions we implemented ethnographic considerations and social signifiers to replicate interactions important to users.
Ethnography
Due to the social nature of our application, we found it essential to engage in ethnography to understand the culture of social relationships and avoid the implementation of our own biases.
reflecting relationships
Within HUB there are differing levels of information sharing that can be requested or accepted between users. These levels (messaging, schedules sharing and location access) were intentionally chosen to reflect the differing levels of social closeness between users.
Norman's
Social Signifiers
When designing, we looked for ways to implement social signifiers within our application. As HUB’s purpose is to encourage student interaction & connection building, we considered how users might be influenced by knowing about other users actions and how they interact with their environment.
map - finding friends
Unintentional social signifier: enables users to see which areas of campus people are located. Allowing for users to interpret their own useful information, such as which areas of campus are most frequented and what time campus is busiest.
wave 3
culture, emotion, and user experience
HUB offers a social feature with the goal of elevating the student culture within post-secondary institutions. This feature empowers students to engage in collaborative efforts and cultivate strong connections, particularly students within the same program.
Caroll's Design Rationale
Referring to Clark’s Design Rationale, we approached designing HUB considering the context, applicability and scope of the application. In doing so, we were able to identify the potential consequences of the use of the finding friends feature.
our solution
We understood that there are potential risks and privacy concerns when it comes to sharing one’s location. HUB enables students who are already connected as friends the ability to initiate location requests giving users full control whether they want their location shared, which can be enabled/disabled in the settings.
User Friendly Interface
Based on our initial research on SFU Snap, we noticed that the app tried to tackle many features at once which resulted in an overwhelmed user. The UI for HUB is simple allowing for users to complete their goals more efficiently.
"
The app is trying to tackle too many features at once which makes me feel overwhelmed.
-when asked about SFU Snap
SFU Snap
SFU HUB
Next Steps
Our strategy for HUB involves collaborating with a professor from SFU through a directed studies course to conduct extensive user research and testing, aiming to refine the prototype. Our goal is to propose and integrate this app into the school. If successful, we aspire to extend its implementation to multiple post-secondary institutions.
Other Projects
❇ TERAS BEAN CAFÉ (ACADEMIC)