Feel free to explore! There were some limitations to the interactions I could create with Adobe XD.
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.
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.
This was a personal project, but I received critique from my Advanced Web Design professor, Andrew Twigg.
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.
I created this interaction to be consistent with the “baseball card” motif I employed on the “Roster” page.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Stay tuned for implementation updates!