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

Mr. Yuk Website Redesign

The goal

My goal was to completely redesign the website for CMU’s Men’s ultimate frisbee team, Mr. Yuk. Accurately representing the culture of the team was the primary challenge I faced; I sought to represent the mix of competitiveness and goofiness within the slideshow video above, which would play when a user first visits the website.

The users

I created four personas: “Played Before Pete”, “Other Sport Omar”, “Alumni Adam”, and “Current Player Carl”. The first two are both incoming freshman to CMU and primary users. Played Before Pete has played ultimate in high school for two years and Other Sport Omar primarily plays basketball, but is open to playing a different sport in college.

The team

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

 

Final Concept

Desktop prototype

The two CTA’s on the homepage are meant to directly appeal to Played Before Pete and Other Sport Omar as the former is looking for contact information, while the latter is looking for a competitive, fun team to join.

All pages in the Adobe XD prototype can be visited, but the roster page is the only page with clickable elements. The second row of player cards, #7-#10, are clickable and the 2018 roster can be visited.

Mobile prototype

Like the desktop prototype, all pages can be visited, but only the roster interactions listed above work. Incorporating micro-interactions is my main focus moving from these mockups to implementation.

Interactions

Roster cards

I created this interaction to be consistent with the “baseball card” motif I employed. This type of card flipping interaction can also be easily applied to the mobile roster page, which shows player information on the back of each card.

Micro-Interactions

Incorporating more micro-interactions to guide user interactions is a high priority for me. I specifically wanted to use an arrow to guide the user, as this same element is used on the “Roster”, “Harmful”, and “About” pages.

Process

Research

Google Analytics

I kept this data in mind while working on the site architecture and for determining whether pages needed to be visually enhanced or could be removed.

Survey and interviews

I sent out a survey to both current players and alumni in order to learn about how they used the current website and what mattered most to them. I then followed up with informal interviews to learn more.

googleSurvey.png

Synthesis

Moodboards

The general culture/brand of Mr. Yuk is a potent mix of competitiveness and goofiness. Creating a simple moodboard to refer to helped remind me to include humor in the redesign.

Personas

The personas I wanted to focus on the most were Other Sport Omar and Played Before Pat, as they are both incoming students to CMU who would make ideal recruits. The other two personas were certainly important, but since they already have strong ties to Mr. Yuk, Alumni Adam and Current Player Carl are secondary users.

Information Architecture

I chose navigation elements based on Google Analytics, survey responses, and the logistical knowledge I have on the college ultimate frisbee season. Thinking about which personas would visit which pages helped me organize, consolidate, and remove certain pages.

1-infoArchitecture.jpg

Prototyping

Sketches

I began with sketching, frequently checking back to my personas and moodboards to guide my decisions. While sketching general layouts, I also recorded ideas for animations and micro-interactions.

Digital mockups

Finding a unifying visual style which could be applied to the different types of content (photos, videos, rosters, forms, etc) while staying true to the “Mr. Yuk brand” was a tough challenge. Highlighting visual content was one of my foci.

When I began considering split screen layouts, I began experimenting with how it might apply to different types of pages and saw some limitations, for example, on the roster page.

I used the motif of playing cards when designing the roster page. This allowed me to highlight the graduating players from each roster with a green gradient in order to honor those who would be leaving the team. Secondly, this allowed players to share their experiences on Mr. Yuk, helping convey the team culture to incoming students.

UX writing: contact page

I spent a long time agonizing over the right blend of approachability and levity in order to appeal to Played Before Pat and Other Sport Omar. Stand-up writing and examination of clever UX writing helped inspire me.

User Tests

I ran user tests with Adobe XD prototypes, asking users to complete tasks on the website while performing “think-out-loud” protocols. An example task was to find out who the juniors were on Harmful (the b-team) in 2018.

Design changes

One category of errors I saw could be solved primarily with design. For example, this user had no idea there was content beneath the initial landing page and became confused. I solved this by adding navigation arrows just above the fold.

desktop3.gif

Technical changes

The second type of errors I saw could be primarily solved with coding. For example, using javascript to move the viewport would’ve helped this user understand the connection between the albums and the photo gallery.

Responsive design

Hamburger menu

I placed the interactive elements in an area easily accessible for right handed, one handed use, in accordance with the “thumb zone” principle. Also, the entire width of each nav element would be clickable, to afford left-handed use.

Roster cards

I chose to use color images instead of black and white as there would be no opportunity for a hover state (making the color image visible). Also, since the viewport on mobile shows player cards stacked vertically, the visual noise of nearby player cards is far less, in comparison to the desktop roster page.

mobile2.png

Only 1-2 mobile roster cards can be seen at once, so I opted to use color images instead of the black and white images used for the desktop roster cards. On desktop, color images looked too distracting next to each other and made seeing the green highlight difficult.

comparison@2x.png

Mobile testing

In addition to testing the usability of my mobile designs, I also wanted to test if the “about” page in the redesign could stand in for the “team info” page and the “history” page in the current website. I created the “about” page in order to simplify the site architecture, but wanted to make sure users wouldn’t be confused.

Implementation

Coding

I’ve been coding in HTML and CSS, with a fair amount of javascript. I will post a link to the final updated website soon.

coding.png

Compromises

I began the process of implementing the website before I had finished my final visual mockups in order to check the technical feasibility of several features. As expected, there were a couple of changes which needed to be made.

Online forms

The server the Mr. Yuk website is stored on doesn’t support any back-end, so making a contact form I could style seemed impossible. My two options were embedding a google form or using a 3rd party back-end service. I opted for the latter.

Social media icons

In order to use official social media icons, purely greyscale wasn’t an option. The contrast between the icons and header was higher than I would’ve liked, so I moved them to the footer.

Conclusion

Stay tuned for implementation updates!