Julia E. Durall, UI/UX Design Portfolio
More Projects

Austin Community College

UX and UI design for MyACC student portal

by Julia E. Durall
Progression of Revisions of MyACC

Overview

Austin Community College had not updated their internal apps in well over a decade, and was making a concerted effort to modernize. They recently switched to a single-sign-on system for students, faculty, and staff, and created a portal called "MyACC" to consolidate all the online services into one place. The project was designed by the development team and had been in production for approximately one year at the time that I joined. After several iterations, they still had not arrived at a finished product that pleased all the parties involved, and decided to bring in a designer to fix the look and feel of the portal to get it across the finish line before the start of the Fall semester. My role was that of UI/UX Designer, working on a cross-functional team spanning three departments - IT, Marketing, and Student Affairs.

MyACC Original State

Assessing the Current State

The portal design had already been through several iterations, and was about to undergo user testing the week after I started. The web manager for the external-facing ACC website and the marketing manager created a task tree test, a series of tasks for students to complete, and survey to complete at the end. I moderated the testing in person, recording video and taking notes while watching a projection of the users' screen. We tested a total of 11 students of varying demographics.

The results of the test confirmed what we already suspected, that most students were unable to locate their personal profile, update their emergency contact phone number, or find the name of their advisor. There were other menu items that were confusing, as well, due to similar names. We also noted that none of the testers looked at content within the secondary menu bar or in the footer. The task tree showed more quantitative results regarding the navigation.

MyACC Usability Tests

Navigation Improvements

The results of the usability testing led me to construct an improved navigation experience. This was particularly important because the entire page was just a compilation of links. I essentially took the whole thing apart, sorted the links into categories that made sense from a student perspective, and reassembled them into a new menu. There was a sidebar of buttons that I was told were previously tested and contained the most frequently used items, so those remained where they were. I teamed up with the director of student affairs to finalize the links and where they were located, as her role on this project was to be an advocate for the students. These also had to be cleared with the development manager, web manager, and marketing manager.

ILS Chart Line Updates

New Design Explorations

I had done some preliminary research regarding the visual design, and had a style in mind for a new layout for the portal. After presenting a wireframe of the new layout to the group, I received positive feedback, with a question about functionality from the front-end developer which helped me refine the concept. Unfortunately, because I was brought into the project so late, there wasn't enough development time for a completely new design. The project manager and development manager agreed that we would just update the look and feel for now, keeping the structure the same.

MyACC Research & Wireframe MyACC My Advisors Workflows

Visual Design Refresh

The main areas of interest regarding the new look and feel were to update the shade of purple to coordinate with the new color Marketing was going to be using for the external-facing ACC website. The team decided that since the users would have to already be registered and have an EID before accessing this portal, we didn't need all the same information as the main website. We were also going to use a stripped down header and footer and make sure there were also links to the companion MyACC mobile app being launched at the same time as the portal. I created both desktop and mobile layouts, as well as a style guide for our development team.

MyACC Visual Design Update 1

Revisions, Part 1

Once these designs were complete, I presented the finished updates to the marketing team, who had the final say in the branding for anything student-facing. When the VP of marketing saw it, she put it into the context of the new purple headers and footers they'd be using externally, and felt there would be too much purple on the page. The web manager and I both agreed, so we worked together to quickly neutralize the colors of the body, while updating the header and footer colors. This became the version we used in the "soft launch" at the start of the new semester.

MyACC Visual Design Update 2


Revisions, Part 2

About a week after the "soft launch", we received data from a survey that our initial users completed. We received mixed feedback, some of which was hard to interpret because the survey referred to both the desktop app and the mobile app, which were completely separate designs and functionality. There were a handful of changes that we all agreed would be improvements that were easy to achieve, such as shortening the height of the header section, having the links in the footer default to open, and relocating the "All Student Resources" link to the top section of "Quick Links". These changes and others were put into the development backlog for a subsequent sprint.

MyACC Before and After

MyACC, Version 2.0

While version 1.0 was in development, I continued to polish the next iteration of the design, which was a fleshed out version of the wireframes I had initially presented. I preferred this layout because it not only added visual interest, but also reduced the amount of wasted space above the fold, and didn't require as much effort to locate the links since they were all visible from the start instead of inside of an accordion menu. This version is currently on hold, pending further testing of the current one.

MyACC V2.0 by J.E.Durall

Challenges

This project was full of challenging moments, much of which stemmed from communication issues between departments and with the third-party development team. The lack of clear communication and direction created a tight timeline, which was stressful for all involved. Also, the heads of Marketing and IT were both territorial and in constant opposition, so I acted as a liason between these two departments because the only way to get this project launched was to have buy-in from all sides. I was later commended for successfully building that bridge.

MyACC V2.0 on Desktop and iPhone