Project Overview

What's AntAlmanac?

AntAlmanac is a student planner application designed by students for students. It possess many great features like creating multiple schedules, shows students statistics on when students add classes, shows them where your classes are on a map, notifies students of availability in classes that were previously filled up, and many more.

Why are we here....?

To keep it short, redesign a button.
For more context, my team and I were brought onto the project to redesign a button so that they could increase the utilization rate of one of their features. The feature allowed students to add themselves to a list when a class was full so they could be notified when a space opened up for that class.

That's it?

After the onboarding meeting, I thought the same thing as well. For a 10 week timeline it was not enough work for both my designers and myself. I took the initiative to explore the product to see if I could find other areas of improvement for my designers and I to work on.

Smaller Issues

Underutilized Features

Although there are many great features, from this web app, they are not being utilized. Either because of poor UI like the button or are unaware of the existing features.

Information Overload

The user is facing information overload because they have so many features presented to them at once. Rather than using many useful features to their advantage, many just plan their schedules and leave.

Main Issue

No Visual Hierarchy

The 2 previous issues stem from this main issue of having no visual hierarchy. Without the visual hierarchy, all features are at the forefront leaving the user overwhelmed and  unlikely to use the other features.

Our Goals

• Redesign the button the developers asked us to redesign to increase the utilization of their notifying feature

• Create a visual hierarchy for the application to increase the utilization of unused features.

  • Collect research about which features are essential to students when planning their courses for the next quarter/semester.
  • Synthesize and apply the data to create a visual hierarchy that highlights the essential features and recesses more niche features to reduce the content the user intakes.

Final Design

Problem 1: Redesigning the Button

From Text and Outline to Buttons

The original "button" was the word full with an outline of a rectangle. Visually did not look like a button nor did it signify that people could get notified. If the class was still open for enrollment, there would be no indicator at all.

In the new design, when a class is full the students can click on the button. If the class is still open the button will be greyed out, but if it's full then it will be blue to signify students they can click on it. The new design features a bell icon which is usually associated with alerts and notifications.

Problem 2: Building Visual Hierarchy

Less is more

The old design had many buttons which crowded the design and had inconsistencies with the links like how past enrollment is a button but prerequisites is a link.

In the new design, we opted to simplify it by creating a description button which opened a modal that would tell the user the course description and any prerequisites that the class needed. Since the developers wanted to include other statistics besides past enrollment, we decided to make a statistics button which would open up a modal and allow students to decide what statistics they wanted to see.

One Column One Function

Originally the indicator that showed whether a class was open or closed was doubling it's function as a button to get notified when the class was full.

However my team and I split it into 2 columns. One that showed the status of the class, the other to let them know whether they could be added on a list to be notified.

More Information Please

Many of the modals that were there, never gave enough information. For example classes that were selected appeared on the left but when you clicked on them the only function was to delete them from the schedule.

Due to the lack of functionality, we designed modals that would give more information and power to the user.

Research

Methodologies

Current Designs

Full "Button"

Pros: color is prominent and draw's user's attention
Cons: Not apparent that it's a button. Button doesn't give indication on its function or have a call to action (CTA)
Improvements: making it look more button like, have a design that either has a CTA or indicates a function.

Class Modal

Pros: Does provide important information for the user.
Cons: Clicking on the modal only deletes it from the schedule. No customization directly, must click on submenu to access customization.
Improvements: integrate more functionality into the modal like adding more customization options for easy access.

Class Links

Pros: Allows easy access to all information.
Cons: No structure and may overwhelm the users with options. Links and buttons have inconsistent style.
Improvements: create a more cohesive style and establish some hierarchy by condensing some information

Map Modal

Pros: Simplicity
Cons: No picture integrated, must click on link to see image of building
Improvements: Adding a picture so that obscure buildings can be easily identified

User Surveys

What we were trying to learn.

• How do students go about planning their schedules during the school year?

• What do they like about Antalmanac and what are some areas of improvement?

• What features do people prioritize over others?

What did we do?

Within the time span of a week my team and I collected 44 surveys
21 questions in total
5 contextual questions
9 questions about their experiences with planning schedules
7 questions about Antalmanac

Who did we ask?

Synthesize

I synthesized the data into a ranking list in order to make it easier to know what our redesign should prioritize and which features it should recess. This ranking was also meant to assist the developers on deciding which features to focus more resources on.

Design

Full "Button" Design Journey

Problem:

The button didn't look like a button and had no call to action or indication on what action it would perform.

To Toggle or Not to Toggle

My First Iteration:

Pros:

• Labels on the top give the users what each columns function is and what information it relays.
• Toggle is familiar to users
• Separate column for status and notify means there won't be confusion on what function that column serves

Cons:

• Toggle is big and doesn't provide an indication on what they turn on and can be useless with the labels at the top.
• An added column crowds the UI

Tammie's (one of my designers) First Iteration:

Pros:

• One less column which leads to a cleaner UI
• Bell Icon did give a call to action to user
• Button did look clickable

Cons:

• Prior to it being a bell the button would say full. Meaning there is no call to action initially
• lack of column labels can confuse new users like first year/ transfer students

Solution

We made a hybrid solution by keeping the notify column separate from the classes' status and keeping the labels on top. We swapped out the toggles for the bell icons. With the columns being separated there was not need for the user to hover over the full button to reveal the bell icon.

I Can't See It

Although the button was nice, our next problem was that the white background of the button had a poor contrast ratio with the light blue background that colored each row. Another problem was that when the user did finish adding themselves on the notify list, the check was too small to see.

Solution

We remedied it by making the button dark blue  and make the button just a check mark in green so that the users can see it.

It's Crowded in Here

Problem:

Bar with the course information was crowded and the buttons were inconsistent. It combined buttons and text links making the UI look inconsistent.

3 to 1

Usability Testing Results

2 is Still Less Than 3.

Taking what we learned from usability testing, we opted to separate the course info and statistics into 2 different buttons after. We kept the prerequisites and the course description together. This reduced the percentage of people that struggled from 70% to 40%

Just Delete?

Problem:

Class tiles on the schedule had very little functionality and provided minimal information. If the student wanted more information, they would have to look up the class in the search again.

Bigger is Always Better!

We could have expanded the schedule size but it would mean that a student’s whole schedule wouldn’t fit on the screen.

Expansion is the Key

We decided to have a smaller card that would expand to a larger card that would provide the same functionality and information, but in a smaller form factor.
The smaller card would only show the title and what class type the class was.

It Says I'm Here, but Which Building?

Problem:

Map Modal was great. The only thing that needed to be added was a picture of the building. This would allow for the students to identify which building they needed to enter.

User Testing

Using Maze.co my team and I conducted usability testing on 17 participants. 11 of those participants were able to make it through the entire test successfully. Alongside using Maze.co test, there was also a supplemental survey that would check to see if they were able to do the task as well. The questions would only be able to be answered if they were successful in the task.

Note: The usability test is one flow so that the users could follow the tasks in a certain order. If you want to see the full prototype, please return back to Final Design section to view full prototype.

Tasks

We had 10 missions for the participants to complete. Each task was to check if the task became easier from our redesign.

Direct Success is described as the user following the intended path.
Indirect Success is described as the user following an unintended path but completing the mission.
Unsuccessful is described as they moved on to the next question without completing or completely left the test.
‍

Insight

From the user testing conducted, we learned:

• People were successfully getting notified from the notifications button on the top navigation bar.

• People would be confused by the icons for course description and statistics and what their function is.

Design Changes

We updated the design so that the buttons would have labels so that user's wouldn't be confused. We also changed the icon from a bar graph to a line graph.

Reflection

What's next for AntAlmanac?

Wanna see more?