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

Mr. Yuk Website Redesign

Clickable Prototype

Feel free to explore! There were some limitations to the interactions I could create with Adobe XD.

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

Based off of surveys and interviews I created four personas: “Other Sport Omar”, “Potential Recruit Pete”, “New Student Nate”, and “Alumni Adam”. Each persona has a corresponding user flow.

The team

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

 

Final Concept

User Flows

Creating user flows for each persona proved to be a incredibly useful and surprisingly difficult task. With a goal for each persona, the way in which I created each screen became much more clear. However, since many of the persona goals weren’t exact user conversions, crafting goals and flows for each one was a challenge.


Personas-othersportOmar.jpg
Board 3.png

Personas-potentialrecruitPete.jpg
Board-PotentialRecruitPete.png

Board-NewStudentNate.png

Board 4.png

Interactions

Roster cards

I created this interaction to be consistent with the “baseball card” motif I employed on the “Roster” page.

Micro-Interactions

Incorporating more micro-interactions to guide users 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, surveys, and interviews

Google Analytics was helpful while working on the site architecture and for determining which pages needed to be focused on or which could be removed. With my survey of both current players and alumni, I hoped to learn how they used the current website and what mattered most to them, reaching out to some with further questions.

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.

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

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 Potential Student Pete 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.

Mobile 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

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

rosterComparison.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!