@UVA
Club Management Suite
Website Redesign
A semester-long project for my Human-Computer Interaction course covering the fundamentals of user research, analytics, design, and testing. '@UVA' is the online club roster at the University of Virginia. It is designed to assist students in finding and joining organizations of interest to them. My team chose to redesign this site to improve both its usability and desirability through a more comprehensive suite of features.
Project Overview
It can be difficult to find a sense of community at an institution as large as UVA. Having to rely on a poorly-managed, inaccurate club roster only exacerbates this issue by discouraging students from engaging with clubs. My team chose to tackle this issue due to its personal relevance to us as current UVA students.
My team completed this project as coursework for a UVA class on Human-Computer Interaction. I feel it is important to note that content of this course was focused far more heavily on the fundamentals of user research, analysis, and testing than on the creation of stunning visual interfaces. For this reason, my team was asked to spend most of our time conducting research and producing quality documentation and proportionally less time refining visual designs for our project.
I chose to revisit this project several months after the completion of the HCI class in order to focus on the visual design component in a way that I was unable to do during the semester. Iterative mockups for my personal redesign can be seen at the bottom of this page or by clicking the button below.
Highlighting key design decisions
At the core of UX Design is the process of making design decisions based on the needs of users. Below are three decisions my team made in order to better suit the needs of our users.
Problem Statement
"@UVA" is the official club roster for students at the University of Virginia. For years, it has suffered from a lack of use, due to its inability to integrate with existing club workflows.
The site is not visually unappealing so much as it fails to cater to the needs of its users. This creates a domino effect in which club leaders are de-incentivized from conducting club membership through @UVA, so club members learn to avoid interacting with the site, rendering it effectively useless. As an example of this effect, see the attached image showing the home page for the UVA Astronomy Club. Here, club executives direct prospective members away from interaction with the @UVA site.
Project Timeline
The primary goal of the contextual inquiry phase is to intricately understand the user's work practices. During this phase we interviewed a mix of 10 club executives and members to observe their interactions with the @UVA site along with their workflow surrounding club management as a whole.
The synthesis process has three main goals: identification of the primary work roles in the system, organization of the work model through diagrams, and interpretation of user needs through a work activity affinity diagram. Our team identified two main categories of concerns from the sampled users: site usability and club management.
Requirements extraction is the process of turning subjective user needs into objective technical constraints for the new redesigned system. My team and I extracted 17 requirements from our research. Six of these are shown below.
The creation of models ensures that the entire team understands the complex relationships that exist within the system. They can be in the form of flow models, work environment models, or even hierarchical task inventories. For this project we chose to create flow models in order to represent the relationships between external platforms and the @UVA system.
In the design phase, we created a series of prototypes with progressively higher fidelity including sketches, wireframes, and Figma mockups. It was important that we weighed multiple aspects of usability in each prototype, such as the design's feasibility and familiarity for users.
The team conducted multiple rounds of usability testing, capturing both qualitative data through interviewing and quantitative data through surveys. The test results were incredibly positive when it came to our concept and approach and neutral with regard to attractiveness.
Through a personal redesign, I tackled many of the visual issues present in my team's final design by reworking the site layout in Figma. This process turned out to be incredibly fruitful and allowed me to put a personal touch on what was originally a collaborative project.
User Inquiry
1
Scope of the Project
There are over 20,000 students at UVA, each involved in clubs to a verifying degree. It was important to the team that we got a well-rounded picture of the needs of our users while meeting the time constraints of the semester.
2
Defining User Roles
We chose to accommodate club leaders as our primary users. This is because leaders have the most complexity in their work role. Secondary users were defined as club members and casual users of the site.
3
Conducting Interviews
We conducted interviews with 6 club leaders and 4 members. From these interviews we gathered artifacts relating to the users' work practices. These artifacts can be seen below.
Synthesis
Moving from inquiry to analysis, we focused on interpreting our data in ways that would give the project definition. Each captured statement, sentiment, or workflow practice from the conducted interviews were written out on their own sticky notes. Each interview garnered anywhere from 7 to 13 sticky notes, depending on the amount of information shared by the user.
We chose to organize our interview notes into a Work Activity Affinity Diagram (WAAD), which allowed us to easily spot correlations between user concerns. Our preliminary groupings of notes consisted of themes such as “likes,” “dislikes,” and “wants.” We quickly realized that this method of grouping was not helping us understand the project in any new ways, as different experiences with the club organization process were jumbled within every group. Therefore, we began forming more targeted categories, such as “Communication Challenges” and “Site Usability.” Eventually, we settled on the diagram seen in our final images, which is broken into two broad categories. “@UVA Logistics" represents all of user needs for the website design itself, and “Club Logistics” represents our users' needs in regard to clubs management more broadly. By this point, the team was ready to tackle both of these challenges through the site redesign.
Requirements Extraction
Following our analysis of user needs using both the WAAD and flow models, we created a list of requirements for the upcoming site redesign. To do this, we chose work activity notes that had common messages, often going by category or subcategory to capture general needs. We used these sections as categories for the requirements list and crafted a corresponding requirement statement for each.
Ease of Browsing
"@UVA will allow students to join a club or its email list within one click of the club's page."
Communication
"@UVA will provide both inter-club and intra-club messaging functionality, with support for group messaging."
Up-to-Date Rosters
"@UVA will require club executives to publish an up-to-date list of active club members, either for internal or external use."
Active Participation
"Club leaders will be able to send forms to club members. Members will be able to register for events within the site."
Search & Filter
"Students should be able to search for clubs that fulfill one of more categories."
Painless Student Turnover
"Club leaders will be able to update administration privileges with ease, including during elections or between semesters."
Modeling
We created two flow models, one showing the current club management workflow and the other showing our envisioned workflow that revolves around the @UVA site. Our envisioned flow model is especially important because it gives a bird's-eye view of an ideal @UVA system. It outlines how all of the user classes and interactive features we plan to use on the app are connected. It also allows us to see how the two different user classes will utilize different features in the system.
Initial Designs
The Team's Design
Personal Redesign
There are certain limitations to attempting an entire site design with the span of a one-semester college course. Most notably, my team did not have the time to make the site as visually appealing as would be desired in a real world scenario.
For this reason, I chose to revisit this project a few months later in order to put a personal touch on the final design. At the end of the day, this is a research project for which I am very proud to have been a part. I believe the site design should match this enthusiasm.
Iterative Prototypes
I chose to redesign the home page specifically because it showcases major design decisions that would naturally be repeated throughout the entire site in the event of implementation.
Version 1
With Version 1 I wanted to correct some of the visual flaws from the group's design by laying out a more robust set of components for the club workspace. I also leaned into the tabbed approach to separating club workspaces in order to make navigation painless. The biggest drawback of this iteration is that it fails to provide an internal menu for the club workspace.
Version 2
In Version 2, I chose to simplify the menu bar by transforming the club selector into a simple dropdown menu. This opens up room for the menu bar to hold tools for the club workspace, such as Messaging and Calendar. Another major feature of V2 is its extremely straightforward approach to showcasing workspace components on the home page. Each component is given an equally sized window with a large heading and space for important information. The biggest drawback of this iteration is that it fails to give club leaders much in the way of customizing their workspace. As "flexibility" was one of the most important design requirements of the original project, I chose to correct this in the final version.
Version 3
For the final version of the home page redesign, I took inspiration from Discord by allowing the user to switch workspaces by tapping a club's icon. This visual separation of high-order site navigation to the left from in-workspace navigation to the top gives club leaders the freedom to customize their workspace to a much greater degree. In fact, they can make choices on everything from color schemes and fonts to menu bar items and plugins.
.png)
.png)
.png)
.png)