CMU BUGGY SITE REDESIGNDuration: Oct - Dec 2023
Role: Project Manager
Focus: UX Design, Prototyping, Web Development
Group Members: Alicia Chen, Emily Krueger
Tools: Figma, HTML/CSS, Javascript, Bootstrap
For the course 67-240 Mobile Web Design and Development, my team worked with the Buggy Alumni Association to improve and develop their mobile and website platforms.
Project Overview
Buggy is one of CMU’s oldest and most unique activities. The Buggy Alumni Association is a nonprofit whose goals are to build a strong community of Buggy alumni from all Buggy organizations, provide a channel by which alumni can remain connected to Buggy, develop and maintain an accessible record of Buggy history, and expand student participation in Buggy.
Over the fall semester, my team researched, designed, and developed 2 apps, one mobile and one web. As the Project Manager, I worked closely with the client and facilitated weekly meetings to evaluate their needs and propose a feasible technical solution.
Here’s what you need to know about Buggy:
Buggy (also called Sweepstakes) is a race held annually in April since 1920 at Carnegie Mellon.
Teams of five athletes (the pushers) push an un-motorized vehicle containing a driver around a 0.84 mile course in a relay format where the vehicle serves as the baton.
Over 400 Carnegie Mellon students (both men and women, mostly undergrads) per year participate as part of one of the 12-15 organizations – about half of which are greek.
The Challenge
To create a more approachable platform and assist the BAA in reaching their goals successfully, they were looking for a solution that addressed the following:
For students…
For alumni…
Connect and support other alumni, look back on records, and stay up-to-date with next Raceday
With these in mind, we started researching and designing the website, meeting with the client once a week to ensure their needs were addressed.
Increase relevant resources and accessibility of those resources, expanding participation and popularity of Buggy also when students graduate
The BAA is looking to increase accessibility for their audiences to reach their goals faster.
But their current site has complicated, deep navigation and information overload.
Previous Site
Updating the navigation bar links
Reducing links on Homepage
Improving navbar (locationally and aesthetically)
Adding specific calls to action
Improve Navigation
Modernize Interface
Reducing informational clutter
Adding large images
Implementing new cohesive color scheme
Improving informational hierarchy
Ideation + Discovery
Why is this a problem?
To gain a comprehensive understanding of the site and what the clients were looking for, we interviewed Rob Siemborski, the BAA Webmaster, and Madison Scott, the BAA Web Developer. These are the insights we gained…
Inaccessible Content
Users have to click through multiple links to find what they’re looking for. Some pages are hidden deep in the website, making content hard to find.
Outdated Interface
The aesthetic and interface is outdated; information is not organized in a minimalistic way, overwhelming users when they open the website.
Inability to Achieve Goals
The BAA struggles to achieve their mission goals because calls to action aren’t emphasized.
We started with researching the BAA and its target audiences.
We found that…
Mobile Focus
In the last 12 months, users access the website the most by far through their phones, so we made sure to emphasize a user-friendly mobile experience.
The Raceday page is accessed the most, especially nearing Raceday in April. Therefore, we made sure this page would be one of those we chose to iterate on and develop.
Raceday Page
With this research, competitive analysis, and communication with our clients through weekly meetings, we began to create a tree map for the website’s content organization.
BAA Tree Map
Because one of our main purposes was improving the site’s navigation, this tree map was important in early stages while we were brainstorming the navigation bar.
Prototyping + Testing
We planned 3 total rounds of testing and iteration on our wireframes before beginning development. Our clients provided us with BAA-involved individuals that would be helpful to test on. We aimed to have a comprehensive testing set with students both involved and uninvolved with Buggy, alumni, and parents.
Low-fi Wireframes
For our first low-fi wireframes, we took inspiration from the competitive analyses we conducted and current CMU sites. We wanted the style to be similar with CMU-sponsored sites and have an overall clean, modern look. We focused specifically on ease of navigation and utilizing large images throughout the site.
User Testing Round 1
In our first round of user testing, we interviewed 5 people. These 5 consisted of 3 BAA Members and 2 students uninvolved with Buggy. We utilized think-aloud testing to get a general idea of the users’ impressions of the site and to get an idea of their mental model. At the end of the interview, we used task-based testing to gauge how well our new organization of the site was and whether users could find what they were looking for in each scenario.
Key Feedback + Changes
Confusing calls to action for alumni
Lack of emphasis on student resources
Mid-fi Wireframes
User Testing Round 2
With the key changes listed above and other small edits regarding prioritization of sections to appeal to our largest target audience (alumni) and overall aesthetics, we began our next iteration. We added color and images to 5 pages from our first iteration that we were most likely to develop.
For this round, we interviewed 3 people: 2 BAA members and 1 Buggy student (heavily involved with Buggy as a driver). We kept the same interview script but started timing how long it took for people to complete each task. Using that, we looked at graphs to see which tasks were successfully completed and which took longer. From there, we knew what to improve on to make the site more efficient.
Lack of differentiation between students and alumni
High-fi Wireframes
One of the tasks people were taking longer to complete was how to get involved as a student vs. alumni. Because the page was called ‘Get Involved’, people didn’t know which audience was targeting. Therefore, we brainstormed alternative titles for the page with our clients, and ended up trying ‘Membership’ instead. Although it didn’t have as much of a call to action, it would be clear which audience it was targeting: alumni.
Unexpected color scheme from Buggy’s perceived image
We received comments that the color scheme we currently had wasn’t representative of Buggy’s image. Interviewees felt that Buggy was ‘vibrant’ and ‘thrilling’, and pastels didn’t communicate those feelings. We darkened the overall color scheme utilizing CMU’s official brand colors hoping to align more with Buggy’s perceived image.
For our final iteration of wireframes, we implemented the above changes, hoping to see an improvement in task completion for our last round of user testing as well. We made other small changes based on our clients’ opinions.
User Testing Round 3
Our last round of user testing was different from the previous two because while we were conducting it, we started developing the final site. So, from our user interviews, we weren’t looking to make large changes to our site. Rather, we wanted to see how effective the navigation changes we made were. We did this by comparing task completion times from the last round.
We found that people had trouble differentiating between the membership and involvement links. Initially, we had a secondary navbar for alumni to get involved and a link to the ‘Membership’ page on top of the primary navbar. People expected that information to be altogether and had issues accessing the ‘Membership’ page from other pages because it was small. To solve this, we added a global navigation tab titled ‘Get Involved’.
One of our tasks was finding Buggy resources for students. Our interviewees had to click through a few pages/links to end up on the ‘Buggy Reference’ page, so we added a specific call to action for students on the homepage.
As you can see, the average time spent on each task has decreased from round 2 to round 3 demonstrating the increased efficiency of navigation.
Development
With our client, we selected 3 pages to fully develop: the homepage, Raceday page, and Buggy Reference page. We utilized HTML, CSS, Javascript, and Bootstrap to create our final site. As Project Manager and with my prior frontend coding experience, I led development with all three pages.
Along with the completion of the 3 pages and a final report, other deliverables included a 4-minute presentation to our class, clients, and other Information Systems department staff, and a 1-2 minute demo of our product.
To demonstrate the changes we made overall, this is a comparison of the previous homepage with our newly developed one:
Final Product
Reflection
This project was one of the most fun and realistic projects I’ve completed in my time at CMU. The course’s focus overall aligned with my interests which made me excited and motivated to work on it whenever I could. I chose to step up as Project Manager because I wanted to gain experience leading a team and I definitely learned a lot. As Project Manager, there was a lot more administrative work to do than I initially thought. Those duties included being the main point of contact for all interview scheduling and client and advisor meetings. I worked on my organization skills with scheduling interviews and coordinating that with my two other teammates. I also created agendas every week to send to our client. Overall, I had to stay on top of many different tasks throughout the month that we worked on this project along with other academic coursework and athletic commitments. However, because I enjoyed the amount of freedom we had with our work and how the product was truly our own, the time commitment didn’t feel like a lot of work and instead felt interesting.
Technically, I also learned a lot. I’ve had previous experience with web development but not as much with Javascript and none with Bootstrap. Learning these two simplified web development so much and made me even more interested in it. Being able to start from scratch and receiving feedback the whole time from our clients and our advisor made the project feel more realistic than any other project I’ve done. I’m very proud of our final product, both the wireframes and the developed site and I’m excited to create more products that are user-centered