60 second snapshot
My goal was to completely redesign the CMU Men’s ultimate frisbee team website, working through the research, design, and implementation phases. The redesigned website is live!
I created four personas: “Other Sport Omar”, “Potential Recruit Pete”, “New Student Nate”, and “Alumni Adam”.
This was a personal project, but I received critique from my Advanced Web Design professor, Andrew Twigg.
Contact page (live): https://www.andrew.cmu.edu/user/ultimate/yuk/contact
Beyond the self-deprecating copy and simple contact form, the interaction subtly tells users that CMU is in Pittsburgh, an important fact I initially thought unnecessary. I highly recommend clicking the web link above to try it out yourself!
Home page (live): https://www.andrew.cmu.edu/user/ultimate/yuk/index
The home page features an easter egg interaction and two CTA’s for:
Other Sport Omar (Watch highlights): show competitiveness of ultimate frisbee, build excitement
New Student Nate (Join our email list): direct them to low friction form to join the email list
I was happy to avoid a hamburger menu through using a tab bar, in short, to keep the nav elements within the thumb zone (more on that in the process section). While some of the desktop layouts required specific mobile adjustments, I visually grouped or coded elements into cards which could be easily reformatted.
Full case study
But first, more demo interactions
Since roster pages provide a form of legacy for Alumni Adam, I highlighted graduating team members with a green gradient. I initially overestimated the willingness of my teammates to write compelling bios which might serve as effective testimonials for Mr. Yuk and had to nudge them to spend more time.
About page: andrew.cmu.edu/user/ultimate/yuk/about
Creating a fun interaction was especially important on this page, as half of the content was from the “history” page (2nd least trafficked page on the old website). To increase the animation’s playfulness, I intentionally delayed the sliding of the Yuk face and used non-linear timing. I highly recommend clicking the web link above to try it out yourself!
Multiple people I interviewed specifically mentioned how they wanted to gauge the team culture through media, but couldn’t on the old website. I wanted to show, not just tell users how fun and competitive Mr. Yuk is, specifically looking to front-load photo albums with a mix of goofy and athletic photos.
Surveys, interviews, and analytics
I hoped to learn from current players and alumni what parts of Mr. Yuk and the old website mattered most to them, reaching out to some for further interviews. Google Analytics was helpful for informing the information architecture.
I used all the research above to rework the site architecture. For example, many alumni wrote their favorite page was “history”, but after seeing it was the 2nd least trafficked page, I decided to combine the “history” and “team info” pages.
I ran this think aloud user test with a clickable Adobe XD prototype, asking users how they would find “team info”. After combining the “team info” and “history” pages into the “about” page, I wanted to make sure users wouldn’t become confused. “Team Info” was the second most popular page on the old website, so this was especially important.
Personas and user flows
Many of the persona goals weren’t exact conversions (ex: “see if the team is good”), so crafting exact flows was a bit challenging at times.
The general culture/brand of Mr. Yuk is a potent mix of competitiveness and goofiness. Creating simple moodboards to refer to helped remind me to include humor in the redesign.
While sketching, I frequently referenced personas and moodboards for inspiration. I also recorded ideas for animations as I went, making a conscious effort to not worry about how implementation might work.
Defining a visual style which worked for the different types of content (photos, videos, rosters, etc), while adhering to the “Mr. Yuk brand” was important. I decided to primarily utilize images in order to “show not tell” the team brand.
After this user accidentally scrolled past a target, I decided to implement a scroll-snapping feature which caused headaches for a multitude of users on the actual website. After they contacted me about it, I quickly removed the feature and learned there’s a name for it: “scroll hijacking”.
I began to explore a variety of ways for how pages might be split, as well as scenarios where it didn’t make sense; either way, I didn’t want every page to feature the same type of split screen.
Baseball card motif
I intended for these baseball style player cards to entice high school students like Potential Recruit Pete and to make a distinction between the A team and B team player rosters. The latter’s roster is displayed in a simple table, and doesn’t have space for player bios, which I saw, and potentially overestimated, as a recruiting tool.
The player card animation I planned for desktop adhered to the playing card motif where the player bio was hidden on the back of the card, but I ended up implementing the mobile animation for desktop as well.
When coding the player card animation for desktop, I quickly realized that a bunch of manual, needlessly tricky adjustments would be required to implement my initial plan.
I spent a long time experimenting with the right blend of approachability and levity in order to appeal to potential recruits. There was a video I watched where Jerry Seinfeld mentioned he always wants the first line of a joke to be funny, which inspired me to look for comical photos to use.
The simplified form on this page had two functions: reduce friction for subscribing to an email list and communicate that Mr. Yuk has two email lists, one for students and one for alumni. I also wanted to distinguish this page from the stand-alone contact page to avoid confusion.
My first iteration (far left screen) adhered to the split screen layout, but the contrast and saturation of colors made the contact form on the right side feel overly blocky and awkward. Also, this page was missing a fun interaction.
For interactions like these, coding responsively was a necessity. I used this test case to determine when to make the “Yuk location icon” appear, tracking the relative growth of the map, which remained the same regardless of viewport size.
The prototypes I tested had limitations on feedback for mouse clicks, resulting in confusion. I made sure to remain silent even if the user became lost, but noted where jQuery would be necessary, for example here, moving the viewport up.
For interactions like these, coding visual feedback for what was being done in jQuery behind the scenes was essential. I gained experience breaking down complex tasks into small functional bits I could test, before coding further.
Coding the media page was far more involved than I expected it to be. These were the operations I needed to code upon a user clicking the “right arrow”:
select SRC of the previous main gallery image: (content/media/mediaRegionalsP22019/regB19-1.jpg)
remove everything up until the hypen: (1.jpg)
remove the last four characters from what’s left: (1)
create new variable for this, this is now the index for the upcoming image: (1)
IF: this index is equal to the total number of images
change the index to “0”
use that index to select the new image: (content/media/mediaRegionalsP22019/regB19-2.jpg)
clone selected image so it isn’t removed from list
replace the previous main gallery image with the new cloned image
add special class to the new cloned image so it’s SRC can be selected
After some iterations, I realized I could utilize a tab bar which fit entirely within the thumb zone. Based on web traffic, I made the home and roster pages always visible. The contact page wasn’t as popular, but to afford easier communication between potential recruits and team leadership, I made the contact page the last tab which was always visible.
For the mobile roster page I opted to use color images to avoid the experience of scrolling through a long column of greyscale player cards. On desktop, always visible color images would’ve reduced the ability to easily see the green gradient, but with only 1-2 player cards visible at once, the visual noise was lower.
Based on an early look at Google Analytics, I decided to forgo the “mobile first” design approach. However, after publishing the redesign and reexamining the analytics, there were more mobile than desktop users. If I had more time, I would spend it revisiting my mobile layouts.