AggieLife Redesign – Helping Students Find Community

Project Overview

Applications: Figma | Time: 6 weeks, October 2021 — December 2021

Background

The University of California, Davis is one of the most populated schools in the UC system, with over 35,000 students and 800 clubs on campus. One way students are able to connect with student organizations is through the UC Davis platform AggieLife. AggieLife provides a mutually beneficial space for students to engage with clubs and for clubs to showcase themselves to students. When approaching this redesign challenge, AggieLife was in need of crucial changes. The platform is difficult to understand and overwhelms its users through obscure and cluttered information, making it hard for students to engage.

Current Organization and Individual Club Pages

Over the course of six weeks, we sought to discover the challenges users faced when using AggieLife and design a new interface that makes them feel excited to interact with student organizations.

Problem Statement

AggieLife’s main challenges are its lack of interactive elements, ability to engage with clubs, and an overarching feeling of disconnect among its users.

How might we foster a sense of connection, community, engagement, and excitement?

Meet the Team

The AggieLife Redesign Team

Timeline

Over the course of 6 weeks we followed this 4 phase plan to create a re-design of AggieLife

Timeline for AggieLife

User Research

Our first phase consisted of user research. To better understand the landscape for which we were designing for, we needed to start looking at the design challenge from many different angles. This was achieved through a variety of methods consisting of surveys, interviews, personas, and affinity mapping.

Survey

We surveyed 29 UC Davis students using a Google Form survey. This allowed us to access basic information about our users and obtain the quantitative data needed to define the scope of their experience with on-campus organizations. Through the survey, we quickly saw how UC Davis students use AggieLife, what pain points they could easily identify, and what values they held around searching/promoting student clubs.

From the data we collected, we were able to identify a few key, fundamental challenges its users face. Of the 29 responses we collected, 51% of students have a hard time getting involved on campus, 69% have never used AggieLife, students limit their use to one or two features and other visually focused/interactive platforms like Facebook and Instagram are mainly used to access club information.

Interviews

To dive deeper into our users’ pain points and needs, we conducted five interviews. These helped set the framework for our designs and led us to uncover details and nuances that exist within the challenges we were facing.

Our findings showed us that students don’t consider AggieLife a viable option for finding and interacting with clubs, the search filters are too broad and difficult to use, and the platform’s copious amount of information overwhelms its users.

Persona

To bring the data we collected from the surveys and interviews, we created two personas. Through this, we are able to empathize with our user while always keeping them in mind as we begin our decision making process.

Ideation and Synthesis

AggieLife Team Affinity Mapping

After collecting our user research, we began to synthesize our findings through affinity mapping. We defined key insights where users are being challenged by the current AggieLife design and formulated research questions to address different pain points within the current design. Our group narrowed down our focus through group discussion and voting on the problems we thought were most important to address.

Our overarching research question was:

“How might we foster a sense of connection, community, engagement, and excitement within AggieLife?

These question guided as as we created specific research questions for each page we were redesigning:

• How might we create a more direct and engaging homepage?
• How might we make it easier for students to find organizations that meet their needs?

Design Process

Wireframe Sketches

These research questions guided us as we started ideating solutions. We began the design process by first sketching low-fidelity wireframes.

Initial Wireframe Sketches

Mid Fidelity

Using findings from our research, and low-fidelity sketches, our objective for mid-fidelity was to design the general frameworks that best solved the main problems we encountered.

In this phase, we focused on the most common pages that a user would encounter. Our designs began with the Home, Organizations, and Internal Organization pages.

Home: Presenting most relevant information to the user

To clearly emphasize important details, we experimented with using card designs. In regards to reducing clutter, we removed the ‘Latest News’ section as we found that users did not tend to use it, or are aware of its existence. Additionally, we updated the overall look and feel of the page to make AggieLife more approachable, and appealing to users. We incorporated a hero image, and changed the wording of most descriptions to friendlier ones.

Organizations: Making the search for organizations as efficient and intuitive as possible

Our first major change was the filtering systems for organizations. Though at this stage, we just wanted to have a general goal of more intuitive filters, not necessarily focused on ideating specific filters just yet! As with our home page, we experimented with a Card presentation of clubs rather than the original List format.

Internal Organizations: Displaying club information clearly and effectively in a friendly and engaging format

Users are most interested in the purpose and opportunities of a particular club they are interested in. From this, we opted to design it so that users are first met with an image banner, shortly followed by a concise, readable purpose statement, and finally the club’s socials.

Next, users also need general information about the club. Namely, what the club is about, meeting times, meeting frequency, and meeting location. This is solved by creating a section dedicated to this general information. For example, an “About Me,” followed by “Meeting Information.”

Another design we experimented with was designing a dedicated event calendar on a particular club’s page. This would make the page more interactive, and if done correctly, intuitive.

Design System

Design System and Components

We used the current UC Davis branding colors in order to visually tie AggieLife to the university. In order to make AggieLife more modern and therefore more appealing to college students, a sans serif typeface was used as well as design choices such as rounded corners and drop shadows.

We focused a lot on grouping information in a way that is easy to understand and scan through. Our solution to this was to use a card format system to introduce clubs and events in order to prompt users to click to find out more.

A tagging system was implemented in order to solve issues of filtering and lack of information. These tags are color coded to fall into categories based on similar areas of study.

User Testing

Summary of User Testing Feedback

User testing was conducted in between the mid-fidelity and high fidelity sprints. There were 5 participants, all college students at UC Davis.

Each were given 2 tasks to complete:

1. Log in to AggieLife and complete the onboarding process
2. Find the club ‘Include’ and save it to your favorites.

Positive Feedback

• Tag system is easy to read and clear in relation to the club
• Clean interface, liked the design of the cards

Areas to Improve

• Too much whitespace causing confusion about ability to scroll for more information
• Too much focus on the calendar visual compared to event information presented with it
• Missed opportunities for personalization(favoriting a club?, RSVP to an event?)
• Elements feel to big on screen which causes unnecessary scrolling
• Missing links between pages and need for better micro-interactions

Hi Fi / Final prototype

Login and Onboarding

1. The home page provides a look into what AggieLife has to offer as well a shortcut to view a few featured clubs and events. Click ‘Sign In’ to personalize the experience.
2. After completing the UC Davis kerberos login, the onboarding process begins in which the user is prompted to add their interest in the forms of pre-made tags. These are used to better understand their interests and make suggestions accordingly.
3. Next, the user can add a short bio about themselves in order to make their profile stand out when applying to clubs.
4. Suggested clubs are introduced that the user can favorite in order to begin adding to their personalized profile page. This process repeats for events.
5. Finally, the user has completed onboarding and it is taken to their personalized profile page. A calendar displaying the meetings for the clubs chosen in onboarding appears and its visibility can be adjusted. Below the calendar there are four sections: ‘My Clubs’, ‘My Events’, ‘Clubs for You’, and ‘Events for You’.

Filtering and Joining clubs

1. Clicking the ‘Organizations’ tab navigates to a page to explore all the organizations on the website.
2. There are four filters available for students to find what they are looking for. Within the ‘Majors’ filter, a drop down menu with all majors offered at UC Davis appears with the ability to select as many as wanted. Click ‘Apply’ view the results in a randomized order to be exposed to new clubs with every search.
3. Click the card of a club to navigate to their internal page that gives a brief summary, an overview of the club, meeting times, and ways to contact them through social media. The ‘Upcoming Events’ section defaults to an interactive calendar format in which clicking on a date brings up a brief overview of the event the club has that day. This view can be changed to a list view for a more focused view. Both have the option to sync the events with an external calendar of the user’s choice.
4. The photo gallery is from uploaded images as well as social media posts to show what the club looks like and their previous events.
5. Click ‘Apply’ to apply to the club. A notice appears in which a club can provide any extra information regarding applications and the request will be sent.
6. If approved, the club is added to the personalized home page in the calendar and the ‘My Clubs’ section for easy access.

RSVP to an Event

1. Click on any event card and there will be a pop up with a brief description of the event.
2. “View Details” leads to a page with a longer description of the event, other events hosted by the club, and recommended events.
3. Click RSVP to confirm attendance and then it will be added to the student’s personalized profile page.

View Prototype

Reflections and Next Steps

Challenges

• Identifying the most important features: AggieLife is an extremely complex website and was often described by students as overwhelming due to its many pages and features (clubs, events, news, forms, profile pages, etc.). Our main challenge was to identify what the most important features were to focus on in our redesign. From our user research, we found that most students use AggieLife for discovering clubs that suit their personal and professional needs. Therefore, we focused on features and user flows related to club discovery.
• Displaying information clearly and concisely: Since each club had a large amount of logistical information (meeting time, description, logo, etc.), one of the challenges we had was organizing that information to be clear and concise. We created our card component system to solve this issue.

Lessons

• Focus on the larger picture rather than the minute details: When constructing frameworks, it is really easy to get caught up with the really specific elements of the site. For example, there were moments where we might’ve spent more time than necessary on the color of some component, the size of a button, or the color of whatever interface for example. While the design of these elements are certainly something to consider, it is more important to ensure that the overall design is solving the main problem.

Next Steps

• Our research found that students associated AggieLife with clubs the most so that is where we placed a majority of our attention due to the tie constraint. After having explored so much of this website and the club section within it, we would like to work on the events pages and even create a more personalized homepage in order to further work on making AggieLife a go-to option when it comes to clubs and events.
• Through our design process we found how valuable personalization can be in making a website cater to one’s needs. It would be interesting to explore how AggieLife could be turned into a mobile app. This would allow for a personalized experience that could be just a touch away, which is especially valuable in the busy, on-the-go lifestyle of a college student.