The Fresh Connect
Role // Contract UX Designer | Client // Columbia College Chicago | Designed in // Figma | Developed in // Squarespace
The Fresh Connect is an annual event celebrating Hip-Hop music and culture at Columbia College Chicago in Chicago, Illinois. Featuring events, performances, networking, and student work, the event is crucial to the University’s Hip-Hop program, and is an annual gathering space for the Hip-Hop community in the city.
Each year, CCC Marketing Practicum students are tasked with rebranding the event, which includes a marketing rebrand of the website. Students are allowed to hire contract workers, as would be true of a real-world marketing project, and I was hired on to conduct their visual rebrand (including color scheme, fonts, and the event logo), prototype their site, and update the Squarespace site for the event with the new materials.
Client Requests & Original Site
The client for this project was focused on a total visual redesign while still maintaining the Hip-Hop atmosphere reflected in the original site. Originally, the client requested a bright, retro color palette reflecting more of the 70s and 80s, though in the second iteration chose to go with a darker color palette that better reflected the energy of the event itself.
Additionally, the existing site displayed little concern for the user experience, with a non-traditional site format, text displayed in images (that would not be able to be parsed by search engines for optimized SEO, and could impact those using a screen reader), and a confusing navigation. The client requested that the same content be displayed, but in a more user-friendly format with clearer page names and organization. The site needed to be both mobile and desktop friendly, but only desktop prototypes needed to be generated in order to have the design and layout approved prior to implementation in the Squarespace site.
The turnaround time for this project was quick, with one month from hire to hand-over. The first prototype was generated within the first 1.5 weeks, with the second generated 1.5 weeks later, and one week to add in last-minute changes, links, and details, and to train the team on how to properly update the site so that the client would be able to sustain the site throughout the upcoming year.
View screenshots of the original site, no longer accessible via web link, below.
Landing Page: The original landing page for the site, which featured a shatter animation as the user scrolled down. The user would have to click a button titled 'Enter' at the bottom of this page in order to enter the site. The primary issues with the landing page were that it did not feature the event, and that it was not intuitive - it was not obvious or conventional that the user had to scroll down in order to enter the site.
About Page: The original about page featured a snippet of a song, and several pieces of disjointed, center-aligned text. Additionally, some buttons overlapped text, making it difficult for a user to use the full capability of the site.
Event Info Page: The original event information page featured a photo of a flyer, and some videos about previous events. The flyer utilized a QR code, which is difficult for users pulling up the site on mobile. Additionally, there are SEO and accessibility concerns with containing important info in an image, which cannot always be parsed by software in order to 'read' the text.
P-Lee Fresh: This page discusses P-Lee Fresh, a CCC alum and Hip-Hop legend. A scholarship is held in his honor at the College, which is discussed on a separate page.
Memorial Scholarship: This page discusses information about the P-Lee Fresh memorial scholarship, encouraging users to donate. It faces similar SEO and accessibility issues as the event info page due to its use of text in image form.
Check-In: The check-in page also serves as the RSVP, which could confuse users. The form also asks for some irrelevant information, and fails to ask important questions, like permissions to use the given email and phone number for contact.
The original logo for The Fresh Connect, provided by the client, which had to be incorporated into the final design, but could be modified or embellished.
First Iteration
The first iteration of the redesign was based off of the client’s request of a retro, 70s/80s feel. A color palette was provided and approved by the client prior to prototyping, but it was ultimately decided by the project team at-large to go a different direction with the design. View a video walkthrough of the prototype, or view it full-screen in Figma by clicking the link below.
Prototype designed in Figma, logo designed in Adobe Photoshop.
Second Iteration
While the client liked the layout of the site, the overall project team wanted a different atmosphere and color scheme for the final product. A new color scheme was drafted and approved by the team, featuring silver metallics and a series of blue-purple hues, with a primarily dark scheme. This iteration was approved by the project team, and used for the final design.
View a video walkthrough of the prototype, or view it full-screen in Figma by clicking the link below.
Prototype designed in Figma, logo designed in Adobe Photoshop.
Final Design
The final task of the project was to recreate the final, approved prototype in Squarespace, where The Fresh Connect hosts their website. A relative 1:1 recreation was achieved in the final design, with the exception of the form due to Squarespace’s limited form design features.
View the website via the video walkthrough, or click the link below to experience it for yourself (available in both desktop and mobile-friendly format).
Final Reflections & Takeaways
The quick turnaround time of this project forced me to boil my design process down to its bare essentials and to understand which elements of the design process are most important, as well as how to tailor that to the project at hand. In this case, that meant focusing on the content organization and visual appeal, as the content itself and the copy was provided by the client and needed to be kept the same.
The near-180 degree turnaround on the visual design of this project was also an exercise in thinking outside of the box - trying to come up with something entirely different from what I had just created was difficult, but a welcome challenge that encouraged me to not commit too hard to any design decisions early in the process.
The project also reinforced my skills in communicating and defending UX decisions to a non-design audience, which will be a huge help as I continue on in contract work with teams where there may be few or no full-time design staff.