Web%2B1920%2B%25E2%2580%2593%2B41.jpg

Mr. Yuk Website Redesign

// UI, UX //

60 second snapshot

The goal

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!

The users

I created four personas: “Other Sport Omar”, “Potential Recruit Pete”, “New Student Nate”, and “Alumni Adam”.

The team

This was a personal project, but I received critique from my Advanced Web Design professor, Andrew Twigg.

Demo interactions


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


Mobile layouts

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.

mobile-2.png
mobile-2.png
Panning interaction controlled on scroll, so everyone in the roster photo can be seen

Panning interaction controlled on scroll, so everyone in the roster photo can be seen

 

Full case study

But first, more demo interactions


Roster page:

https://www.andrew.cmu.edu/user/ultimate/yuk/roster/roster2019

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!


Media page: https://www.andrew.cmu.edu/user/ultimate/yuk/media

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.

 

Research

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.

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.

1-infoArchitecture.jpg

User testing

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.

 

Early mockups

Moodboards

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.

Sketches

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.

Digital prototypes

Homepage

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.

5-usertest.gif

User testing

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”.

Split-screen layouts

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.

Roster Page

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.


Initial animation

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.

Contact Page

Main page

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.

combo.png

Stand-alone page

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.

1-contact copy.png
2-contactHeight.gif

Coding responsively

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.

Media Page

User testing

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.


coding-2media_5.gif

Coding process

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.


Actual implementation

Logical and specific file naming was key

Logical and specific file naming was key

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”

  • ELSE:

    • 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

Mobile design

Nav menu

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.

Player cards

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.

Mobile vs. desktop player cards

Mobile vs. desktop player cards

Analytics

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.

mobileRationale.png