Portfolio Home
More Projects

UI/UX Design for MyACC Student Portal

Redesign of Internal App

Austin Community College

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.

My role: Lead UI/UX Designer within the IT Department

Team members: As the only UI/UX Designer on a cross-functional and cross-departmental team, I worked closely with the following colleagues:
- Front-end Developer
- Applications Development Manager
- Director of Student Affairs
- Director of Marketing
- Web Manager and Web Designer for the public-facing ACC website
- Project Manager
- Offsite Development Team – Project Manager, Front-end Developer

Primary stakeholders: V.P. of IT, V.P. of Marketing, College Provost

Goal: Revise current design of the MyACC student portal with a more pleasing and usable interface. Timeline was 2-3 months, based on the school calendar, with a projected launch of Fall 2019.

Users: The portal would be used primarily by ACC students, but also by faculty and staff. ACC currently has over 70,000 students enrolled, including dual-enrollment high school students.

Techniques used:
- In-person usability testing with students (11 total) using a tree test, tasks to achieve, and a questionnaire
- Card-sorting for restructuring navigation
- Relationship building with team members that spanned multiple departments and locations
- Wireframes, high-fidelity mockups, and style guides using Adobe XD and Photoshop

Challenges:
- I was brand new to the team, which had already been working on this project for a year without success.
- Communication issues between IT and Marketing groups, as well as external development team
- After testing, we discovered that the hierarchy of menus and links needed to be reworked.
- Late start resulted in time constraints


Usability Testing

MyACC Original 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.
(Click to enlarge)

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.

Deconstructing the Navigation

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

In response to the inability for students to find their advisor, I came up with these potential workflows for displaying that information. We decided to go with the expandable button layout, rather than the modal window, because it was already established in the code.

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, 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. This version is currently on hold, pending further testing of the current one.

MyACC V2.0 by J.E.Durall

Project Summary

This project was an exercise in teamwork and flexibility. Once we were all on the same page as a team, it didn't take long to get the new portal design across the finish line. I was later commended for bringing everyone together in such a productive way.

I feel that more testing should have been done before launching the updates, but there were issues with the timing that prevented it.

Ideally, I would have liked to put version 2.0 into production much sooner. Had I been brought in earlier and there hadn't been the previous communication issues, we might have had enough time to implement it. Fortunately, I was able to pivot into a general visual refresh of the existing page, while implementing the updated navigation.

MyACC Before and After