Microsite Project Summary

Understanding the Topic

At the beginning of this project, I wasn't familiar with NBA or the MVP award at all. Although basketball always peaked my interest as a sport to watch, I've never explored the history, criterias of the award, or the players. Throughout the project, I took full advantage of the Wikipedia and StatMuse site that my creative director linked in the creative brief assignment.

This deeper understanding influenced how I wanted to structure the microsite. Because the site was intended for a more youthful audience, I wanted it to be filled with animated characters and a fun font. Additionally, the Wikipedia page helped me finalize the filters I wanted to include in my "Explore Page", focusing on the names, positions, and teams of the players. Because there were also a lot of information about each player's award and history, I also focused my statistics on the most well known awards won.

Creative Direction and Feedback

The creative director inspired me throughout the wireframe and initial draft process of building the microsite. When discussing the wireframes, I received a lot of positive comments and naturally, my goal was to make the final site as similar to the wireframes as possible. Keeping the intended audience in mind, we both agreed that a vibrant, bubbly design would attract users best. Additionally, the catchphrase on the homepage and informative texts were meant to feel powerful and leading, to catch the users' attention. Feedback from my creative director pushed me to make the site feel more unified across all pages and more interactive overall.

Based on this, I standardized repeated elements such as the navigation bar, spacing, title boxes, color palette, and page structure. I also revised responsiveness multiple times so that layouts would stay readable and visually balanced across different screen sizes. Another important direction we took was making sure all of the buttons on the site were responsive, focusing on the use of hovers and transitions.

Beyond the aesthetic design, we also discussed about how we could implement so much information for every player on the players page within the time frame we had. It was really helpful to find a solution to this where we included player pages for the top MVP awards, and turned down the opacity for players without a players page (for now) to keep the design consistent but not confuse the audience as to why some players are clickable while others aren't.

Design and Developement Process

My design process focused on creating a visual identity that matched the tone of the subject by using a dark background with bright accent colors to give the site a bold, energetic sports feel. I also focused on using rounded boxes, borders, and handwritten-style fonts to help make the site feel more personal and stylized rather than generic. I also paid close attention to consistent content groupings to help guide users through the pages in a way that felt organized and not overwhelmed with the about of information. To do this, I also tried to include different navigations around the site beyond the nav bar at the top of each page. The buttons on the homepage attract the users to the purpose of the site, which is information about the players and their awards. For the players and about pages, I also included side bars to make the information feel less overwhelming.

Beyond the consumption of information and general design feel of the site, I also prioritized responsiveness and interactiveness a lot. After having a layout ready for my microsite, I wanted to make sure the site felt fun by adding many hover and transition effects, without making the site feel too overwhelming. I focused on adding these elements for buttons and other clickable features such as a player's icon. In the beginning, I also felt that many of the pages felt too static, which inspired me to add a slideshow on the homepage with interactive arrows that matched the design of the site but also stayed informative. The Explore page was definitely the hardest to implement but put the whole site together really well. I got really into building the filter buttons and search bar, making it feel like a more professional site, especially with the vast amount of players which can easily overwhelm users on that page.

The microsite was built using mostly separate HTML, CSS, and JavaScripts for each page to help organize the information. For the players page, I used JavaScript and a player data so that the player profile could be loaded dynamically. This helped keep the code more organized and made the site easier to expand.

Tools, Challenges, and Successes

The microsite was built using HTML, CSS, and JavaScript in VSCode. Google Fonts were also used for typography and the Wikipedia and StatMuse pages were used as a research source for MVP history and player context. The overall approach was iterative where I would build a version of a page, evaluate the visual balance and responsiveness, and then refine it based on feedback and testing. I initially focused more on having the content and styling of the site down, transitioned to responsiveness and interactiveness, and finalized it by testing the site and tweaking small quirks.

One of the biggest challenges was styling the site. I tried to follow the acronym for CRAP, which overall, helped a lot with the consistency of my design. However, due to my limited knowledge of the topic it was difficult to brainstorm ideas that I felt matched the topic. This also made it challenging as a designer as I have more technical experience and many of my previous sites had more simple, straightfroward, and technical design styles. The audience and styling of the site was new to me, but it was definitely rewarding playing around with it! I also struggled with responsiveness and making sure information didn't feel too overwhelming on the site. Several layouts worked well on very large and very small screens, but broke at medium widths, especially since I was taking inspiration from my desktop and mobile views from the wireframe. I had to repeatedly adjust breakpoints, widths, spacing, and flex behavior so that pages would remain stable across all screen sizes. I think the overall result was also quite rewarding as there were many responsive features I had to repeatedly fix, but seems to work quite smoothly now. The responsiveness of the site also helped make sure information didn't feel too crowded on the page.

Similar to one of the biggest challenges, a major success of this project was definitely creating a microsite not only on a topic I was unfamiliar with, but with a design approach I've never explored before. Being able to establish a clear visual system and then apply it across the homepage, explore page, player profiles, and about page was experimental and fun. I also think the final site does a good job balancing visual style with communication. It is expressive and themed, but still readable and structured enough for users to navigate easily, specifically the filter and search features on the Explore page.

Use of AI

The use of AI came mostly after the structure of the site was down and repetition around the site. The design inspiration from the wireframes and the structure of the HTML/CSS was all between communication with the creative director.

AI was used when I needed help debugging parts of the CSS that weren't working how I was expecting, improving responsivess of the site, and through layout issues when elements broke at certain sizes. It was especially helpful to identify when certain layouts overflowed, such as the trophy case on the players page. Additionally, I used AI to structure the players on the Explore page by name, position, teams, color, and image. The images and many of the teams and colors still had to be inputted manually, but it really helped to have the structure of the array object down for every player. AI mostly helped with parts of JavaScript that weren't working as intended and debugging.

Although AI helped me troubleshoot and iterate more efficiently, I still made the final decisions myself based on how I wanted the microsite to feel visually and functionally. Especially since a lot of the HTML/CSS are subjective, the final decisions came from whether I felt the changes AI were suggesting would improve the overall design of the microsite or not.

Reflection

I thought the process of this project was really unique compared to other design or web developement classes I've taken. This project really helped me better understand how research, design, communication, and front-end developement all connect and have to work together. I think what surprised me the most beyond the final product of the microsite was the process of effective communication, especially during the research/design process. It felt really professional, but also helpful, everytime we met with our creative director and received feedback on our design progress.

Although the final structure of the site wasn't as out of the scope as I'd hoped, I think I've learned a lot from understanding that the communicative feeling of a site isn't just from adding elements that are out of the ordinary or maybe aesthetically pleasing, but can also come from the simple color palettes, structure of elements, and interactiveness you choose for a site. I think the color palette, rounded elements, and hover effects were already a different side of design from what I usually do, and the final project was definitely a new challenge and success for me.