My Humber Schedule app

My Humber Schedule app

image

Project Brief

Understand the flaws of the current Ellucian GO app utilized by Humber students and create a mobile app experience that solves its flaws. I decided to focus on improving the "My Timetable" section of the Ellucian Go app as I found it underdeveloped for Humber students' needs. The project focused to deliver an app that will allow Humber students to keep track of their educational experience more intimately as scheduling is a reoccurring pain point for the target audience.

Duration

September - October 2020

Tools

Notion, Miro, Adobe XD, Google Forms & Zoom

Roles

Mobile App Design, Research to Conception, Visual Design, Testing

The Design Process

Step 1

Step 2

💡

Concept Frame the Problem

📝 Step 1 | Research

App Audit

As of June 22, 2020 - the MyHumber Mobile App was replaced with the Ellucian GO app to increase the accessibility of Humber information to students. Some of the features that were highlighted were availability to class schedules, student profiles, grades, and HMail.

Design Affordances

I first downloaded the app and took notes on the different types of affordances. Knowing when some of the affordances caused issues helped in understanding where I should start to implement changes for a redesign. Below are some notes of my findings I took via Notion:

image

Unnecessary Actions

⚠️

While it does allow access to class schedules, student profile, grades & HMail, it simply redirects you there → this causes overstimulation for the user (Ex. lots of options that redirects the user to many different sites)

⚠️

Certain pages and features were hard to find for the student profile → more time and action required to navigate through the app (designed for a web experience rather than mobile)

📌

The main issue resulted from the app structure (i.e. the excessive options available). I wondered if all this rudimentary and general information was really necessary for students. For instance, how many of these stated features of Ellucian Go were actually used by students?

Design Sprint

Within our home group that consisted of 5 members, we conducted a design sprint (5 Phases) where the challenge was, "How could you make life better for a Humber Student?"

  1. We tried to understand the challenge by brainstorming as many ideas as we could individually. One idea per sticky note was the method and after, we discussed our answers.
  2. We specified the problem as "How to effectively time manage in order to balance work/school life?" and came up with possible solutions. A lot of the solutions had to do with methods to help visualize tasks either digitally or traditionally.
  3. We selected "Time logs" as a solution to concentrate on because it would help a student understand how their time is being spent. In this phase, we analyzed whether this method would be desirable, viable and feasible. For example, we considered whether it would be desirable for students looking to visualize their time management and for students already familiar with self-tracking apps.
  4. We made a prototype of the solution by demonstrating a typical user flow and noted the important components this time log would have.
  5. I took on the role of recording and explaining our design sprint activity on behalf of my team.

Our Miro Board for the Design Sprint
Our Miro Board for the Design Sprint

Phase 1 of the Design Sprint, Column 1 was my ideas
Phase 1 of the Design Sprint, Column 1 was my ideas
📌

Takeaways Phase 1 was most useful in understanding the type of reoccurring problems Humber Students generally faced. From comparing our responses, our personal experiences validated the ideas we wrote. We then discussed similar ideas related to the topics of productivity, time-scheduling, and efficiency

User Interviews

Next, I conducted 6 user interviews with Humber students in my program via phone calls and a member of my home group conducted one user interview. For these interviews, the questions were split into three main categories: personal background, calendar questions, and time management questions. I found that through the design sprint and my general research, the term “time management” came up frequently as a reoccurring problem for students. The term in my opinion is a broad problem that is not only exclusive to students. As such, I felt this was an important point for further clarity within the user interviews.

My goal was to find specific pain points derived from the topic of time management and record Humber students' process of staying organized. The interviews were a great method in gaining an in-depth understanding of my target audience. Since answers from participants varied in terms of detail, I utilized follow-up questions where appropriate and considered areas of improvement for better question phrasing. Below is an example of the interview template I created to conduct this interview and some of my insights from the completed user interviews.

Interview Question template & 1 filled out Interview
Interview Question template & 1 filled out Interview

Screenshot of my Notion notes about Insights and Patterns from User Interviews
Screenshot of my Notion notes about Insights and Patterns from User Interviews

📌 Takeaways

Below is a list of pain points that have been separated into main topics. These topics were derived from the design sprint, broad research, user research and home group discussions. In the next stage, I decided to choose which ones I can focus on by grouping similar pain points together.

Online School

  • Issues with internet connectivity
  • Keeping track of SYNC class times
  • Keeping track of ASYNC activities
  • Keeping track of assignment due dates

Personal

  • Being accountable/ following schedules
  • Dealing with forgetfulness when creating own schedules
  • Being overwhelmed or stressed with the idea of time-management
  • Maintenance of mental health
  • Dealing with loneliness (missing the student on-campus life)
  • Difficulty with achieving the perfect balance between school and work life
  • Poor ergonomics from staying at home

Schedule

  • Different time zones for international students
  • Using several organization methods (both written & digital) to classify school and life activities
  • With written calendars/planners/organization method, no method to get real-time notifications and have to resort to checking
  • When unexpected events occur and having to re-organize schedules

💡 Step 2 | Concept

After collecting the research, I specified the main pain points for the app redesign to solve. Ultimately, I wanted to implement some of the methods used by Humber students to stay on track of their coursework I found from user interviews. The idea of making some type of scheduling/productivity app is not an original one as numerous solutions exist currently ranging from paper products to digital apps. With this in mind, I focused to redesign the "My Timetable" section from the Ellucian Go app to be more customizable for a Humber student.

Thus, my design question was simplified to this: How can I redesign the "My Timetable" section of the Ellucian Go app to better assist Humber students' management of their respective on-line course tasks and activities (SYNC class times, ASYNC activities, and assignment due dates)?

🎨 Step 3 | Design

Inspiration

I researched different competitors to determine what were the consistent layouts commonly used and what features were currently offered. I also used these references as inspiration to define how my app design would differ from what already exists out there.

Several methods (apps & traditional) used for tracking that I researched
Several methods (apps & traditional) used for tracking that I researched

Sketches and Wireframes

I first created sketches on paper using the themore.eu template. As seen below, I sketched out the six main screens that demonstrated the most important functions of my app redesign. Afterward, I created two black and white wireframes on Adobe XD. The 2nd one was more robust than the 1st, showing more detailed screen layouts and options. After the creation of the two wireframes, I created a final mock-up design in colour with placeholder text that would be revised in the prototype. Between each iteration, I conducted design reviews with fellow cohorts in my program and my professor to receive feedback about the work as it progressed. This helped me to understand the successful aspects of my design and sections that required more refinements.

View Sketch Wireframes (Click to reveal more)
image
image
View 1st Wireframe (Click to reveal more)
image

View 2nd Wireframe (Click to reveal more)
image

Final Mock-up

image
image

📱 Step 4 | XD Prototype

Main Layouts

When the user logins in with their Humber Account, they first see a monthly view and then a weekly view of all their educational activities. In the original app, they used a daily view but user interviews revealed that students preferred weekly or monthly layouts so I made sure to incorporate this in the redesign.

The Weekly View shows checkmarks that the user can check off once they complete the task. With this to-do list approach, completed tasks are crossed off and checked to encourage a sense of pride or satisfaction as noted during my design review feedback. Since the weekly page may make it difficult to differentiate between course times, assignment due dates, or course tasks, a filter view was included.

Video that depicts the main layouts of the app
Video that depicts filtering the weekly view to show only course times

Add/Edit Functions

Users can also add course-specific tasks (depicted by the 1st video below). Courses and assignments can be edited as seen by the 2nd video, which depicts changes to the course's day and the course's assigned colour. Although most information should be accurate if it derives from Blackboard (Humber's school system), users and research indicated that the Ellucian GO App incorrectly showed class names and times. An edit function was thus added so that students at least could edit school information correctly if any such errors occurred.

Video that depicts adding 2 tasks under a specific course
Video that depicts editing a course's day & assigned colour

Prototype

image
image

Take a look to browse through the mobile prototype.

👥 Step 5 | Usability Tests

Purpose and Goals of the Usability Test

After creating a prototype in Adobe XD, I prepared and conducted usability tests for 3 individuals. I conducted the usability test to determine whether Humber students would actually implement this app to aid with their educational needs. It also helped to test which parts of the design has the most positive user path, meaning the student could easily check their class commitments, edit them or add tasks for them to stay organized. Another test objective was determining whether pain points were addressed.

Does the app solve the following pain points:

Are the users able to keep track of course/class times?

Are the users able to keep track of assignment due dates?

Are the users able to keep track of school tasks that need to be completed for courses?

Does the app answer other general questions like:

Is the option of being able to fix errors in course information useful for Humber students?

Is the monthly view required for users to interact with first before engaging with the weekly view?

To engage with less information presented in the weekly view, a filter option has been presented. Can users find this information easily within the menu setting?

Are users able to understand and set up notification settings easily?

Does the current designed process for setting up course tasks make sense for users and do they like it?

Methodology of the Usability Test

After summarizing the objectives of the Usability Test, I created a script and conducted the tests via Zoom (due to COVID-19 restrictions) in 6 main stages.

icon

Introduction & Instructions Explained about the app My Humber Schedule and talked about how the usability test will run.

icon

Screening Questionnaire Questions I asked to ensure participants met the target specifications(Current Humber students).

icon

Test Tasks Got participants to complete a list of tasks and saw how many were completed successfully to calculate task efficiency.

icon

Follow Up Survey Sent a Google form for participants to rate their impressions about the app from a scale of 1 to 5.

icon

Follow Up Interview Questions I asked in order to gain more detailed feedback of the participants’ experience when interacting with the app.

icon

Debrief & Thanks I thanked the participants for their time and asked if they had any questions about the experience..

Stage 3 (Test Tasks) & Stage 4 (Follow Up Survey)

Copy of the Test Tasks for the Usability Tests & Screenshot of the Google Form showcasing the follow-up questions
Copy of the Test Tasks for the Usability Tests & Screenshot of the Google Form showcasing the follow-up questions

Summary of the Usability Test Results

Task Completion & Time (Stage 3)

All tasks were completed by all participants and each participant had 1 non-critical mistake within this section. Based on observations, minor comments, and the time it took to complete tasks, the Weekly View page is very dense for displaying information.

Summary Table of Task Completion & Task Time Completion
Summary Table of Task Completion & Task Time Completion

📌

Takeaways Although this page only showed a week's worth of activities, participants had difficulty in differentiating course times, course tasks, and assignment due dates from each other. Many noted the usefulness of the filter feature for the Weekly View page to solve the density of content. The Weekly View page could still be better designed to easily recognize the 3 categories (course/class times, assignment due dates, and course tasks) throughout the week.

Follow up Survey through Google Forms (Stage 4)  

All the responses to the statements were generally positive so it can be safely assumed that the app’s features does serve its intended purpose and they are ultimately useful.

Q5 Results; Google survey chart showcasing a general ease to use the app & Q7 Results; Google survey chart showcasing the app redesign is useful
Q5 Results; Google survey chart showcasing a general ease to use the app & Q7 Results; Google survey chart showcasing the app redesign is useful

Follow Up interview (Stage 5)

  1. Which parts of the app did you like the most and why?
  2. Which parts of the app did you like the least and why?
  3. Are there any ways certain features and information about the app could be better presented?
  4. Do you feel that you could keep track of your course commitments with this app (course/class times, assignment due dates & course tasks)? Please explain.
  5. Do you feel that the app helps students to accurately make sure their schedule is up to date through this app? Please explain.
  6. Do you think this app could replace your current methods to keeping track of course commitments? Please explain.

📌

Takeaways The follow-up questions helped provided further details that were not answered from the follow-up survey and justify the rating choices. This interview reinforced the idea that the Weekly View required improvement as most mentioned their unlikeable experiences from there due to legibility issues. The menu layout in comparison was quite liked by the participants because it was well organized and straightforward to understand and access. Helpful suggestions to refine the current app were improving the legibility of all activities within the Weekly View by including more spacing between the different activities.

Conclusions

⭐ Learnings

  • How to effectively incorporate user research feedback into the final design (Removal of initial daily schedule layout for a to-do list per course within a weekly view instead based on user interviews)
  • How constant design reviews from sketch to wireframe stage is beneficial to creating a stronger app concept and cohesive UI design
  • How to conduct a proper usability test session and refer to recordings of the sessions to keep track of additional comments or observations missed during the sessionb

🛠️ Improvements to be made

The results from the usability test helped me understand how and where I could further improve the app.

Update the Weekly View Page

  • Create more spacing and legible reading room between each item/activity presented in the Weekly View
  • Find a way to explain the process of setting multiple alarms (Perhaps using the same method an additional task is added within the Adding Task page)

Update the Notification Screen

  • Find a way to explain the process of setting multiple alarms (Maybe the same way an additional task is added within the Adding Task page) Update the Course Task
  • With crossed out tasks, make the opacity lower or a lighter colour so that it is evident when a task is completed compared to the rest of the content

Other Considerations

  • Consider connecting to Humber Mail so that students can link an online calendar with their school tasks on this app (Be careful of the risk of losing the app's main focus on Humber educational experience by connecting with other e-mail platforms)
  • Consider adding the option within the monthly view to choose based on the semester to organize by academic school term and reduce the monthly view scroll to 4 months/semester

Other case studies

image

A mobile app that resonates and engages Toronto youth, newcomers, and/or renters with city planning.

image

A responsive website design for the non-profit organization Harsukh.

Caroline Lee © 2021 — Created with Notion and powered by Super