YU-Access

In my User Interfaces class, I was given a task to develop an interactive mobile platform that aimed to address challenges that international and first-year students experienced when they were returning to campus after the COVID-19 pandemic. My goal was to create a platform that would familiarize them with the campus environment and enhance their student life experience. By implementing the design process I learned, I crafted an app that effectively addressed these challenges.

Role

Product Designer

Tool

Figma

Timeline

September - November 2023

‍

COVID-19 Pandemic

The COVID-19 outbreak has greatly affected university students, making it harder for them to learn and enjoy their education. With the closure of many campuses, universities transitioned to online classes. This shift presented challenges such as adapting to virtual platforms, reduced face-to-face interactions, and, in some cases, time zone differences for international students. Additionally social distancing measures significantly limited face-to-face interactions, affecting the overall student experience and their mental health. Many usual ways of learning have changed, and it's important to understand and help students with the challenges they now face in this new setting.

The challenge lies in developing a mobile application for all students that seamlessly supports the transition from online to offline learning.

My Design Process

Considering that this was my first UI/UX project, I used the Double Diamond design process taught in class to avoid the project straying too far from its scope.

‍

Talking to Students

During the user research study, I conducted interviews with a diverse group of 15 students. This group consisted of 4 second-year international students who had recently arrived in Canada in January 2021, and 11 upper-year students who had prior experience with offline learning before the pandemic. To gain insights into their experiences, I specifically focused on their concerns regarding the campus response to COVID-19 and its impact on their campus life. Through this informal interview, I realized there were similarity among the answers and I was able to identify 4 major insights.
‍

Competitive Analysis

In addition to user research, I conducted a competitive analysis of three other campus' online services. This helped me understand how these platforms enhance the student's university experience. From this analysis, I pinpointed features that could be refined and incorporated into the YU-Access application.

‍

All-in-one!

To address the students' concerns, I developed a centralized platform to access vital campus resources and facilities, fostering connections among students amidst the challenges posed by the pandemic. Here are a couple built-in points/features that I considered to implement:

‍

Booking System

Due to COVID-19 guidelines, reservations are now mandatory for public spaces like libraries. Recognizing the challenges in the existing reservation process, I integrated a user-friendly booking system into the application to simplify the procedure.

Interactive Campus Map

Considering that most first-year students didn't get to experience campus orientation due to the pandemic, those who were not familiar with the campus area were struggling to figure where some of the buildings or classes are. So to solve this issue, I integrated the interactive map system that the campus have into the mobile application.

Student Hub with Chatting Features

The student hub is designed to cultivate connections among students, especially in the face of pandemic-induced challenges. It fosters a sense of community, allowing students to engage with peers who share similar interests or academic paths.

Saved Favorite Places

Keeping track of classes, buildings, and other public spaces can be challenging. To assist students in marking their frequent spots, I introduced a "favorite places" feature that allows student to book or set a direction in one click.

User Experience Flows

To create a better understanding of the overall structure of the application, I decided to categorize the user flow into three overarching phases: Signing in, Connecting, and Accessing.

Signing In

To use the application, users must authenticate by entering their Passport York credentials (username and password). The reason why I wanted to integrate Passport York is to reduce the process of signing up considering that the system has been used in every campus' online services.

‍

Connecting

The connecting process in the application facilitates interactions among students, enabling them to connect with peers who share the same interests or are pursuing the same major, fostering a sense of community and collaboration.

‍

Accessing

Another MVP that will be implemented in the product is the "access" features. These features let users easily book spaces on campus, navigate to any building or infrastructure, and bookmark their frequently visited spots.

‍

User Journey

Last step before going into wireframing, I conceptualize the user experience for the signing and connecting flow. Unfortunately I wasn't able to finish the accessing flow due to its complex structure and time frame.

‍

Wireframes

Usability Testing

To assess the usability and the effectiveness of the design, I conducted usability testing with 9 participants using the wireframes that I have created before. Each participant was assigned three test cases to complete, focusing on specific flow within the interface. The test cases included:

‍

Case 1: Access the photography group channel
Case 2: Book a seat in the Scott Library
Case 3: Find "Saved Places" section

I also encouraged participants to explore the design beyond the three assigned flows to pinpoint any areas for improvement. After analyzing their feedback, I identified several aspects that need to be redesigned

‍

Design Iterations

News Page

Based on insights gathered from usability testing, several test users highlighted concerns regarding the repetitive nature of the student hub interface. To address this feedback, I made the decision to revamp the student hub's home page into a news page, considering that features such as direct messaging, my community, and channel discovery were already accessible through the navigation bar at the bottom. Additionally, I refined the naming from "Chat - Book" to "Connect and Access" to better convey the purpose and functionality of the application's features.
‍

Adding & Simplifying the Navigation Bar

In the original design, both friends' messages and group chats were accessed through the main Student Hub interface. However, I found this setup wasn't user-friendly because it's not commonly used in most mobile application, so I introduced a bottom navigation bar. After the first round of usability testing some people felt that the second version of the bottom nav bar appeared slightly cluttered with texts. To enhance the clarity and usability, I made the decision to remove the text and provide more accessible points for key features within the “student hub” system.
‍

By changing the overall layout of the student hub interface and adding the navigation bar, I had to make some adjustments to the user flow and created another wireframes. I realized how inefficient it can be when usability testing is done on the higher-fidelity level.
‍

Preventing Information Overload

In the initial iteration, all the group channels were consolidated into a single lengthy list, which resulted in information overload. To address this issue, I implemented a dropdown button that enables organization of the channels into five distinct categories: my interests, student clubs, faculty, and colleges. I also replaced the channel descriptions with member counts and upcoming event dates to streamline the interface and reduce textual clutter. Additionally, the use of red color for the cards are too powerful and hard to see as they are in the same color with the bottom navigation bar.
‍

Larger Text for Better Readability

During the usability testing phase, I discovered that certain texts in the previous design version were set at a font size of less than 12px. However, this proved to be problematic as the texts were difficult to read and comprehend. To solve this issue, I decided to bump up the font size.
‍‍

More Organized List

To prevent information overload, I incorporated a dropdown button that allows users to categorize their saved places into four distinct categories: library, study space, dining space, and parking.
‍‍

Confusion Between Primary and Secondary Button

When I stacked the "direction" and "book" buttons, some people struggled to differentiate between the primary and secondary actions, even though both functions carry equal importance. Many also suggested including the distance to the destination, so I've now incorporated that information next to the availability.
‍‍

Design Solution

Secured Login

By integrating with York University's online authentication system, Passport York, the platform eliminates unauthorized access by non-student members.

Connecting Students

Discover communities that align with your interests and stay up-to-date with the latest information about the campus and upcoming events in your vicinity.

Direct Messages

Connect with fellow students who share your interests, while benefiting from the convenience of a built-in chatting system that reduces the need for third-party applications.

Discover. Reserve. Navigate.

Seamlessly navigate your campus and effortlessly reserve spaces for your academic and social needs.

Keep Track

Effortlessly save and access your favorite places on campus. Keep track of your reserved spaces with ease.

Presenting to the School

After the project was finished, it was nominated to be showcased in the York Capstone Day competition. I presented my ideas during the event virtual meeting and the project received great responses from community members. I also received some suggestions regarding accessibility, especially for students who might experience language barriers.

‍

Lessons Learned

Creating user-centred design

To ensure the product meets user needs and expectations, I realized that each design decision needs to be backed by research data and validated through user testing.

Adaptability in design

Designing a product involves flexibility, openness to feedback, and a willingness to adjust design solutions as needed.

Good design skills is a must!

Good design skills are essential for UI/UX designers because they directly impact user satisfaction, and product success. They are a critical element in creating interfaces that are not only functional but also delightful and effective in meeting user needs.

Other Work

FME Form Annotation Improvement