The Detroit Red Wings Guide
The Detroit Red Wings guide is a website I coded from scratch. It provides information about the current players on the team, the 11 Red Wings' teams who have won the Stanley Cup, and the best players to have ever played for the franchise.
My Role
UX Designer
Content Developer
Web Developer
Tools
Visual Studio Code
Figma
Github
Procreate
Timeframe
November 2022
Summary
Using HTML, Javascript, and CSS I created a multipage website hosted on GitHub that met the needs of my users.
I created user personas based on my previous interactions with my target audience - people going to their first Red Wings game. To meet the needs and goals of my personas, I created a multipage website using HTML, CSS, Javascript, and Github that informs viewers about the Detroit Red Wings' current players, championship teams, and hall-of-fame players.
Project Inspiration/Problem
I knew there was a need for a centralized resource that provides first-time fans with the information they desire.
When I took some of my friends to their first Red Wings game all of them asked me the same questions about the Detroit Red Wings franchise. This experience made it clear there was a need for a centralized resource that contained the information my friends were looking for.
User Personas
I created two user personas based off my expereince with my friends.
I reflected back on the times I had taken a friend to their first Detroit Red Wings game. I took note of why they wanted to go to the game, the information my friends wanted to know about the Red Wings, how they had tried to find it, and the questions my they asked me. I turned all this information into two personas that could help guide my design.
Design Goals (Based On Personas)
-
Create a keyboard accessible website with a mobile, tablet, and desktop view
-
Inform viewers about the current Detroit Red Wings Players
-
Inform viewers about the 11 Detroit Red Wings teams that have won the Stanley Cup
-
Inform viewers about the best players to have worn a Red Wings jersey
Design Decision - Website Organization
I decided my website would have 4 pages: home, current player info, hall of fame players, and championship teams
I determined that my website would consist of four pages (home, current player info, hall of fame players, and championship teams) to ensure that my website contained the information my users wanted and addressed their needs. All four pages are in the website's navigation menu, giving visitors easy access to the information they want and simplifying the user experience.
Design Decision - Colors and Typography
I used the colors of the Detroit Red Wings brand to reflect the subject of my website
I elected to use the colors of the Detroit Red Wings brand - black, red, white, and some shades of grey. Throughout my site, I used versions of the Cabin font typeface, with the exception of page headers. The page headers have a serif font so they stand out against the rest of the text.
#C8102E
#FFFFFF
#000000
#EAEAEA
#FAEBD7
Heading 1
Heading 2
Paragraph 1
Ideation Sketches
I created ideation sketches of each page Procreate
I used Procreate to quickly sketch a design of each page on the website. For each page I sketched a design for my mobile, tablet, and desktop views which allowed me experiment with different page layouts.
Website Coding
I created the mobile, tablet, and desktop versions of my website using media queries
Since my simple sketches were done I had a pretty good vision for my website so I decided to start coding. I started coding the mobile version first. Once my mobile version was done I used media queries to make the tablet and desktop views for my website.
Accessibility Validation
I put my website through a series of accessibility validators and passed all the tests
After I completed my code I decided to upload my HTML and CSS files to their respective W3 validators to check if I had any errors in my code. I also validated my website for accessibility using AXE development tools and WAVE. I passed all tests in the validators. Although my website did have 22 AXE color contrast warnings, I inspected each warning and determined that my color contrast was effective in those areas, and therefore I could disregard the warnings.
User Testing
Most of the feedback was good, but there were a few things that needed to be fixed (below)
Once I had "completed" my website I invited friends and family to try it out. Overall I received positive feedback, however, there were a few things that my users didn't like (below).
Website Modifications
I modified my design to fix the problems my users identified
I made modifications to my website based on the feedback I received from my users. I fixed my typo, resized the homepage slideshow, reduced the whitespace around my h1 headings, and changed the fonts on my current players page.
Project Takeaways
-
It's imperative for UX Designers to place themselves in their users' shoes to understand their needs. Otherwise, the deliverable may be totally ineffective.
-
Whitespace is your friend in UI design
-
Although very difficult, its possible to make a keyboard accessible hamburger menu
-
It's possible to make a automatic slideshow keyboard accessible but just because its possible doesn't mean you should
Similar Projects...
The Bar at 327 Braun Court
UX/UI Design, E-Commerce, Local Business, UX Research
Worked with the client to completely redesign their website. Conducted 2 field visits and 1 contextual inquiry to assess client goals and establish user needs.
