CS449 DESIGN PORTFOLIO
Campus Companion.
Our team, Graphics Gang sought out to help first year students have an easier and more enjoyable time adapting to life on campus. From our research and design processes throughout our term in CS449, we ended up with our application Campus Companion.
"Empowering First-Year Success, One Step at a Time"
Value Proposition and Project Goal
The general market segment our group is targeting is university students, in particular those in first year attending the University of Waterloo. The leap from high school to university can be very difficult for most students, and our app aims to help ease these growing pains. We believe that it is important to help these students and improve their first year and university experience. The most evident areas of friction for this target group are difficulties with time management and socialization, as well as a lack of organized university resources. The original list of empty niches was identified through a combination of personal experience, the experiences of our peers around us, and online research. We then altered, eliminated, and added problem areas through a series of staggered interviews. Throughout the course of user interviews, we tailored our questions between each round to delve deeper into the root causes of common issues plaguing first year students at the University of Waterloo.
​
​
​
​
​
​
​
​
​
​
​
Our project addresses the above problems with four major features. The first of these addresses the issue of time management, which is covered by the AI calendar feature that reduces the time students need to spend on creating their own schedules. The AI also helps to optimize their schedule in order to give them more free time to spend on things they enjoy. An accompanying feature to this is an easy booking system integrated into the calendar to ease the booking process and reduce wasted time. This ease of use is continued in our third feature: a chatbot that contains a database full of all the different university resources, from the main uwaterloo.ca pages, to quest, to portal, and so on. Lastly, our project has a coffee chat feature, to address the difficulties students were facing with meeting new friends and study partners.
Product Anticipated Users
The main user group we identified for our product was first year students attending the University of Waterloo, in particular those struggling with their transition to university. Many of the personas we created shared similar traits. They were generally introverted and had difficulties meeting new people. Almost all of them were coming to the University of Waterloo from out of town, and were adapting to living in a new city away from home for the first time. As well, all our personas were very eager to learn and perform well academically. They were also overwhelmingly young adults, with less life experience in living alone and attending university level classes.
A persona we decided to focus on was Rebecca Thompson, as she represented many of the personality similarities shared by our main user group. Rebecca is an 18 year old full time student, who is introverted and struggling to make friends. Her grades are not as good as they were in high school and she is frustrated about this fact. Moving from Kamloops, she has little to no support system in Waterloo, and is finding it very difficult to adapt to her new life.
​
​
​
​
​
​
​
​
​
​
Many of the items on her empathy map also overlapped with those of other personas. In particular, her homesickness from being away from her family, solitude from a lack of friends, and stress from classes and grades. Her wants and needs also mostly match with the other personas, including ways in which to meet others like her, find a study group, and find ways in which to spend more time on studying.
User Interviews
When it came to user interviews, we in total interviewed 6 different students attending the University of Waterloo. All six students were involved in our initial interviews when we were beginning our design process, and three out of the six students were involved again when it came time for prototype interviews. We had both female and male users, and almost all of the interviewed students were in first year, with a couple being upper year undergraduate students. Since it is the summer term, any first years currently on campus have already been through final exams, living on campus for at least a term at this point, so their interviews ended up being similar to those in upper years, having to recall what the beginning of their first year was like in retrospect. In terms of faculties, we had students that were a part of the engineering, math, health, and arts faculties interview, allowing for a broader sense of how students found their first year depending on their workload and other factors involved with their program. Most of the students we interviewed are Canadian, however one or two were international students who had moved from abroad to study.
​
For our initial user interviews, we focused on interview questions that could probe the interviewees about their experiences. We began asking them high-level questions about themselves; their year, faculty, whether they lived in dorms, their nationality, as well as whether they had begun their first year with any pandemic restrictions in place or not. We found that asking these questions initially allowed us to see whether certain problem areas were specific to certain demographics, or whether they were broad and encapsulated the experience of most first years. This allowed us to make decisions that would benefit the majority, even if it wouldn’t benefit all students, rather than trying to benefit one demographic’s experience over the whole. Once we found that we had an overall grasp of who our interviewees were, we would ask questions related to issues they had with integrating into campus life specific to three different areas; social interaction, mental and physical wellbeing, as well as home life. These questions were open ended and asked for the user to relay their experience, rather than give any yes or no answers. This involved asking them to describe their days, how they spent their time, their biggest stressors, etc. We found that asking these types of questions gave us a lot of information about the users worries and issues with transitioning to university, and allowed us to probe deeper when the need arose. Further, it allowed us to see whether our assumptions throughout our process were right or not.
​
In terms of our prototype design interviews, we focused on giving our interviewees specific tasks to carry out to see where they got stuck and where they succeeded. Since these interviews were conducted as we were re-iterating our design, we found that if an interviewee got confused, it meant that we needed to change something. Although for some applications this might not be the case, our app is designed for first-year university students who are on average well acquainted with technology. As such, it didn’t bode well for our app if the student interviewees ran into problems. We also found that through this process, we could allow for the interviewees to explore areas of the app and note any design changes that they found confusing or off putting. Since we had designed the app ourselves, we found that all the icons were obvious, that the buttons and look was well-done and intuitive, however getting other eyes on our designs helped us realize where we’d missed the mark in terms of a minimal look and design that was easy to interpret and use.
​
When we initially began the design process, we focused our thoughts on the problems that first years face based on what we personally remember finding hard when we came to university. Further, we built our initial questions with these specific issues in mind. However, we are all in computer technology programs, and all studied our first year before COVID-19 hit. As such, when we began conducting user interviews, we found that many of the issues we thought were the biggest issues weren’t as apparent for all students. For example, we asked questions about social interaction because we remembered having a hard time meeting students in our classes, however none of this was a problem for our engineering interviewees who were placed in cohorts and had the same classes with the same people every day in first year. While we found that some faculties had hard times meeting people in their classes while some didn’t, we found that one of the more important issues was that first year students would make friends and then go off stream with them due to co-op, and would lose their study buddies or friends for their next term. Since friend groups had already developed, they found it more difficult to then become friends with new people in their classes. So, our feature design ideas were changed to go from being a way to meet new people with interests like yours, to a way to meet random people to study with or interact with when your friends or peers aren’t around, or are unavailable. Further, we found that while students didn’t have a hard time finding information online pertaining to university-related questions, they did find it annoying to have to search through many different websites to get the answers they were looking for, since there are so many different pages and sites with information concerning the school. So, we developed our chatbot feature so that students could find information easily, or at least be pointed to the right resources in one go. Through these interviews we also found that a big stressor for first year students had to do with managing their time well under the new workload and difficulty of university classes compared to highschool ones. Our interviewees mentioned that they found it difficult to put aside enough time for each activity and had a hard time knowing when they should begin studying for exams, even in the midst of assignments. So, we created our AI scheduler to help students learn how to separate their time between assignments, classes, as well as school social events pertaining to their interests.
​
Overall, the user interviews allowed our team to learn a lot about our target audience for the app, and learn where our initial and continued assumptions were failing our understanding of the problem. By doing this, we were better able to produce an app design that fits the description of our problem more thoroughly, looking at the users themselves to allow us to see how we could help them.
Initial Designs Ideas
Initially based on the data from user interviews, we discovered that students face challenges in making friends, managing time effectively, and accessing reliable information. To address these issues, we decided to incorporate a matching feature to facilitate social connections and networking, providing a solution to the common struggle of meeting new people and forming friendships. The inclusion of an FAQ/Resource Board was driven by the users' frustration with existing platforms like Discord and Reddit, indicating a need for a centralized and reliable source of information for university-related queries. Additionally, the scheduling/calendar feature was identified as crucial in helping students manage their time efficiently, as many expressed difficulties in balancing academic commitments, social activities, and personal responsibilities. Lastly, the decision to include a discussion section for school/co-op stemmed from users' desire for a platform to seek advice, share experiences, and find support in navigating academic challenges and co-op placements, reflecting the need for a supportive community within the application.
However, The VSD envision cards exercise helped our team to think deeply about our previous set of features which led to many changes. As we thought about stakeholders, both direct and indirect, we decided that it would be best to remove the scheduling/calendar feature and the faq/resource board feature. These features were generic and were not providing enough value because of the existing alternatives. The VSD cards encouraged us to promote a lifestyle change that would lead to sustained friendships well into the future. We decided to include more user-centric features like an advanced scheduler and a chatbot. These features synergize well with the existing features and give our app a unique identity. In addition, making sketches and user stories helped us visualize user interactions with our features and highlight their most significant details.
So after the detailed analysis of the information from user interviews and making sketches, and user stories, we decided on the new set of the app’ features:
​
1. The decision to include an AI scheduler tool was likely driven by the common theme of time management challenges mentioned by the users. Many interviewees expressed difficulties in balancing their academic responsibilities, social activities, and personal life. An AI scheduling tool can help students create efficient and personalized schedules that optimize their time and prioritize important tasks. The tool could consider class schedules, study sessions, social events, and even suggest breaks for relaxation or self-care.
2. The presence of a chatbot tool has been inspired by the users' desire for quick and reliable access to information and resources. Many interviewees mentioned using platforms like Discord and Reddit for information, but they were frustrated with the lack of direct answers and reliability. A chatbot integrated into the app could offer immediate responses to common queries, such as degree requirements, important dates, campus services, and co-op program details. This feature could provide a more user-friendly and efficient way to access relevant information.
3. The inclusion of a random coffee chat scheduling tool suggests that users expressed a need for more opportunities to connect with others and establish social connections. The tool could facilitate random matching between students interested in meeting new people, which could lead to meaningful friendships and networking opportunities. This feature might cater to students who struggle to find time to make friends and want a more structured approach to socializing.
4. The decision to include a booking campus appointments tool is likely based on the users' challenges in accessing relevant resources and services, such as counseling services and health services. Many interviewees mentioned difficulties in finding and accessing such resources. With this tool, students can easily schedule appointments with various campus services, reducing the barriers to accessing support and assistance.
In general, these features meet the key challenges and needs expressed by interviewees. The app aims to improve time management, strengthen social connections, and simplify access to necessary resources and information, making campus life more comfortable and enjoyable for freshmen.
Paper Prototyping
Our goals for the paper prototyping stage of the project was to test the main flow of each feature. Specifically, we wanted to see if users could easily add a new task via the AI scheduler, book an appointment through the booking feature and sign up for a coffee chat with a new friend. We wanted to test these main tasks because if users have difficulty completing them then it would mean that we have to reevaluate the design and user flow of our app
We gave our tasks in the form of questions to our interviewees, and observed if they were able to figure how they can accomplish the task. The list of questions were:
-
What do you think the features are, based on the icons in the nav bar?
-
What do you think the app is about? What do you think it does?
-
Can you navigate to a chat bot feature?
-
Is this what you expected?
-
-
Can you navigate to a feature that matches you with other students for social hangouts?
-
What do you expect from this screen? What do you notice, what do you think will happen
-
Can you change the location of the event?
-
Can you send a message to someone you’ve previously met with?
-
Can you book a meet up with a math student for wednesday for an hour?
-
If they click meet up: what is the difference between meet up and study
-
-
Can you navigate to a feature that would handle booking an appointment ?
-
Do you feel confident that you know what to do on this page?
-
Can you book a doctor's appointment with Dr. Carrie Bailey on June 24 at 9:30am?
-
-
Can you navigate to a feature to book an appointment?
-
-
Can you navigate to a calendar?
-
Can you check the notifications?
-
Can you look at the schedule for the particular day?
-
Can you find the difference between a user added event and an AI-suggested one?
-
-
Can you edit your schedule?
-
Can you delete an event from the schedule?
-
Can you change the title of the event?
-
-
Can you edit your to-do list?
-
Can you add a new event to the schedule?
-
Can you look at the recommendations from AI?
-
Can you find out about the recommendation?
-
Can you add the recommendation to the schedule?
-
The paper prototyping stage of the project was one of the most iterative. We received plenty of feedback on various areas of the app which we thoroughly considered and made changes where appropriate. For example, we originally had a coffee cup as the icon for the coffee chats feature but users told us that they found this confusing and did not immediately realize that the coffee cup was for the coffee chats feature. Therefore we changed the icon from a coffee cup to a chat bubble and in subsequent interviews users were much more likely to recognize the feature from the icon. There were many other instances of this type of iteration. Overall, the paper prototyping stage helped us build and design our application in a way that was conforming to users.
Design Iteration
Based on the paper prototype evaluation results and user feedback, several design changes have been identified as required to improve the app's usability and user experience.
​
First of all, users associated some icons on the bottom navigation bar with different functionalities, leading to initial confusion. To address this, the design team decided to replace the home icon with a calendar icon, the calendar icon with a book and bookmark icon, and the coffee icon with a coffee cup and chat bubble icon. These changes better represent the respective features, making it clearer for users to understand their functionalities.
Additionally, users requested titles for each feature at the top of the screen to provide better context and clarity when navigating through the app. Incorporating feature labels will make it easier for users to identify the purpose of each section and enhance the overall app navigation.
Also, users initially hesitated when trying to navigate to the Coffee Chat feature. To improve this, the design team replaced the history button with a chat bubble icon, making it more intuitive for users to access their previous coffee chats. Additionally, a preference button is added to allow users to adjust their matching preferences, improving the user experience.
Users expressed a desire for a weekly view and a 3-day view in addition to the existing monthly view in the AI Scheduler feature. Implementing these view options will provide users with more flexibility in managing their schedules and meeting their preferences. Furthermore, users suggested adding a trash can button for deleting events in the AI Scheduler feature, making it clearer and more intuitive for users to remove events from their schedule. The design team provided the functionality of deleting an event when you click on it and go to the editing page. The title field in event editing was relabeled to "description" to avoid confusion, and a URL field will be added to allow users to include additional links when editing events.
To reduce confusion, some users proposed removing the ToDoList feature and integrating events directly into the calendar. However, many other users were interested in having a to-do list in the app, so the design team updated the page design. This will make it easier for users to navigate and edit to-do, and the title will directly indicate the purpose of the list.
To improve navigation and data entry, users asked for arrow buttons to be added to the daily view to easily navigate between the next and previous dates. The design team took these requests into account, but in order not to overload the page with additional buttons, it was decided to have the ability to swipe between pages. The necessary hints were added to the design.
These design changes are intended to improve the usability of the app, clarify functionality, and enhance the user experience based on feedback received from users during the evaluation of the paper prototype.
High Fidelity Prototypes and Evaluation
The high-level, scenario-based tasks for both the heuristic and the cognitive walkthrough evaluations include:
-
Book a Doctor's appointment with Dr. Carrie Bailey
-
Add an AI-suggested event to your calendar
-
Find someone in your faculty to meet up and study with on campus
Each high-level, scenario-based task highlights a key feature of our app and should be intuitive if the app is well-designed. For the book appointments feature, we expect/hope it to be simple for the user to go through quickly. An AI scheduler may be a foreign concept to the user, who may not know how to approach/perform the prompt. We want to see if users can understand the feature and if additional explanations in the app would improve user comprehension. For the coffee chats feature, we want to test whether a user can navigate the various settings/preferences/chat pages to perform the task and how long it takes to complete.
Heuristic Evaluation
For our heuristic evaluation, we want the user to focus on the following heuristics:
-
Match between the system and the real world
-
Consistency and standards
-
Error prevention
-
Recognition rather than recall
-
Aesthetic and minimalist design
We want our system to match the real world by making it easy to understand by making information appear logically following real-world conventions. So booking a doctor’s appointment on the app should collect the required information to make an appointment in real life. To maintain consistency and a minimal design, we wanted to make our UI follow other apps that are very well-used. We drew inspiration from Google Calendars to create our AI calendar feature and from Tinder and Hinge for the coffee chat feature. We used some of the Apple standard UI elements for our app to make navigating backwards, marking notifications as seen and editing and deleting reminders easier by conforming to platform conventions. We also want users to feel like they can explore the app without making mistakes with error prevention. So we have various confirmations for accepting a coffee chat match or before making a doctor’s appointment. Tasks like creating calendar events can be easily edited and deleted. We also minimized the user’s memory load by making the user focus on one aspect of the instruction as needed and reviewing that information afterwards in the appointment booking feature, coffee chat preferences and settings, and the AI calendar. Most dialogues did not contain irrelevant information since there were separate pages or buttons if the user wanted more information. For example, the AI calendar suggests an event and explains why the event got recommended if the user clicks the “?” button.
Addressing the aesthetics and minimalist design and the consistency and standards of the app, we adjusted the colour scheme to ensure the readability and accessibility of text, especially for buttons like the appointment cancel button. Exploring a more harmonious colour palette that conveys information effectively, rather than relying on bright red and green, will create a more cohesive design. Moreover, enhancing the contrast of particular buttons will make them stand out, improving usability.
For recognition rather than recall, providing contextual help or a brief explanation of a coffee chat, especially for first-year users or newcomers, will increase accessibility and intuitiveness. Additionally, visually distinguishing the "View my bookings" element from the elements used for adding bookings will improve clarity and prevent confusion.
The final prototype should address error prevention by implementing confirmation prompts for critical actions, such as cancelling appointments, deleting coffee chat meetings, and deleting calendar events. Preventing accidental data loss will improve user confidence in using the app.
Cognitive Walkthrough Evaluation
-
Describe the results of cognitive walkthrough: which tasks you gave to the participants, report on results
The expected action sequences for each of the high-level, scenario-based tasks mentioned above are
-
Book a Doctor’s appointment with Dr. Carrie Bailey
-
Sign in -> Click "bookings" in the navbar or homepage -> Click "health services" -> Click "doctor practitioner" -> Click "Dr. Carrie Bailey" -> Choose a Date and Time -> Fill out appointment form -> Click "submit" -> Booking is added to a schedule.
-
-
Add an AI-generated task to your calendar
-
Sign in -> Click "AI calendar" in the navbar or homepage -> Click on today's date on calendar or "expansion" icon -> Click on “+” button -> Walk through the AI recommendations -> Click on “checkmark” to add recommendation -> AI recommendation is added to a schedule.
-
-
Find someone in your faculty to meet up and study with on campus
-
Sign in -> Click on “Coffee chats” in the navbar or homepage -> Click on “preferences” button -> Adjust preferences (choose “study” purpose) -> Click on “save preferences” button -> Choose your faculty’ location -> Click “save location” -> Click ‘back’ -> Click ‘book match’ -> wait for match -> Accept a chat found -> Wait for confirmation -> Chat is added to a schedule.
-
Success and Failure Stories
During the cognitive evaluation, users demonstrated proficiency in using the application. Users completed tasks and interactions without encountering any significant issues. They efficiently navigated the AI calendar and displayed ease for editing AI-suggested events when required. The overall performance indicated that users could accomplish the high-level scenarios as expected. One notable failure story was when users missed changing preferences or settings before booking a chat, leading to confusion and potential scheduling conflicts. The small size of buttons, especially for AI-generated tasks and navigation elements, proved problematic as users found it challenging to click accurately. The absence of a sign-out button left some users puzzled about how to log out.
Improvements for Final Prototype
Based on the feedback and design suggestions from the cognitive evaluation, button size and touch accessibility will be enhanced by enlarging interactive elements throughout the application, ensuring effortless navigation, particularly on smaller screens. Account management will be improved by adding a visible sign-out button, simplifying the log-out process for users. Lastly, consistent back button functionality allows users to navigate back seamlessly. By incorporating these improvements, the final prototype will provide an intuitive, user-friendly, and efficient application, addressing the identified pain points and delivering a more satisfying user experience.
Conclusion
Looking at our final design and prototype of our app, we are confident that it has solved the main problem areas we wanted to solve at the beginning of the term. When we got the initial problem prompt, and then through our user interviews, we decided that the main issues that most first years at the University of Waterloo face revolve around lacking social time, time management issues, and a lack of easily accessible school-related information. Through our design process, we began to realize that these issues affect first-year students most greatly, however they can affect students of any year, so we tried to make it a welcoming application for students of any age to use. When we go through our final design now, we believe that our app does a successful job at helping solve or mitigate these issues for student users. Our AI scheduler and bookings features help students with time management, our chatbot helps find information, and our coffee chats feature allows students to have social interaction even if they’ve gone off stream with their friends or are having a hard time meeting friends in the first place, whether it’s for studying, chatting, or networking.
If we could do the project again, we would try to go a bit slower in trying to make decisions at the beginning. Since we’ve all been first year students before, we thought that we knew what students would want from an app like ours, and what would be useful to them. However, talking to students in different programs, faculties, and years made us realize that a lot of our assumptions weren’t correct, and that there were other pieces that were more important to the puzzle. If we were to go back, one of the main things we would change is our approach to the beginning of the design process, trying to get rid of any initial assumptions as best as possible. Further, when we were initially coming up with our features, we had many ideas, and they were all fairly large scale. For the first month of our design process, we were focused on very large features that didn’t mesh very well together, making it harder for us to decide on which way to take the application. Reflecting now, we ended up having to go through many changes and hurried fixes during our more laid out design process because we hadn’t thought through our initial feature ideas long and hard enough to make them robust and sound for the rest of the design process, which ended up causing small issues in the long run.While we do think that our features in the end product are important for an app trying to solve this problem, we did worry throughout the term at times that our app was trying to be a catch-all instead of focusing well on one area specifically. As such, if we were to do this project again, we’d like to focus more closely on making the app feel very cohesive and as though each feature tied to every other feature.