The Next 50

a custom-built platform that profiles notable figures shaping the future of Hip-Hop.

Project Overview:

In celebration of the 50th anniversary of Hip-Hop the digital team requested a custom build highlighting notable profiles that tell the story of the genre's future. This project showcases the next generation of sounds, artists, scenes, and trends that will continue to shape and influence Hip-Hop culture moving forward.

Role:

Lead Product Designer

Prototype:

Explore the Figma prototype at your leisure.

Optional: For the full mobile experience download the Figma Mobile app

Image: Pop-up Modal Explorations

Our goal was to explore and integrate VICE's bold color scheme alongside the unique brand colors of the project. This combination allowed us to create a cohesive visual identity that both honors VICE’s distinctive aesthetic and complements the specific branding of the project.

Highlight the Future of Hip-Hop: Showcase emerging talent, trends, and cultural influencers in a dedicated digital space.

Engage Users with Dynamic Content: Incorporate multimedia elements like videos, articles, and interactive features to immerse users in Hip-Hop’s evolving story.

Create a Seamless User Experience: Design an intuitive user interface that encourages exploration of different profiles and content.

We applied these colors thoughtfully across various design elements, particularly in the pop-up modals and as accent colors throughout the page, ensuring a visually engaging and dynamic user experience. By blending both color palettes, we aimed to reinforce the brand’s identity while enhancing the overall look and feel of the digital experience.

Image: Desktop Mockup

As the lead product designer, I was responsible for the overall design strategy, from ideation through final execution. This included developing wireframes, prototyping, visual design, and collaborating with the stakeholders and the teams to ensure a cohesive user experience.

I began by analyzing the target audience—Hip-Hop fans and culture enthusiasts. These users value vibrant, visually dynamic experiences that mirror the energy of the culture.

Image: About Modal Explorations

Interactive Features:

Profile Cards: Each artist or cultural figure was featured in a profile card that users could click on to access more detailed content or hover state to display a brief bio.

"More Profiles" Section: To encourage further exploration, I incorporated a "More Profiles" section at the bottom of each page, allowing users to seamlessly discover more emerging talent.

With the following designs below, we aimed to explore variations of the card grid layouts specifically for desktop, optimizing visual organization and user interaction. Additionally, with implementation of the "More Profiles" card grids at the bottom of the page to encourage users to explore further profiles from other sections, promoting deeper engagement with the content.

The flow was designed to be intuitive, leading users from profile to profile with minimal friction, while keeping the experience engaging.

Images: Desktop Card Grid Explorations

Images: Desktop Card Grid Explorations

Image: Tablet Mockups

For the mobile designs, I designed multiple wireframes to explore how to present a diverse set of profiles, balancing text and multimedia content. We focused on refining the pop-up modals and adding "More Profiles" card grids at the bottom of the page to encourage users to explore additional profiles from other sections. Editors have the option to feature either 3 or 6 additional profiles in this section. We also experimented with branded colors to create a cohesive, visually appealing experience that enhances user engagement.

Image: Mobile Profile Modal Explorations  

Image: Profile Modals with a variety of card designs for the "More Profiles Feed"

Image: Mobile Mockups of the card designs for the "More Profiles Feed"

These are several hero design concepts we explored, each emphasizing different elements such as the overall layout, header positioning, and subheading (dek) placement. We also experimented with the strategic placement of video or GIF content to enhance visual storytelling and engagement.

Additionally, we tested various approaches to organizing the subsections, ensuring a seamless flow of information and an intuitive user experience. These iterations allowed us to assess how different design elements work together to create a cohesive and impactful hero section that captures attention while maintaining clarity and functionality.

Image: Desktop Hero Explorations

Final Design & Outcome:

The final product successfully celebrated the future of Hip-Hop by creating an engaging, immersive experience. Users could easily explore profiles, watch videos, and read in-depth bios or VICE articles related to artist, all while being drawn deeper into the culture. The platform’s dynamic design hoped to generate significant engagement and was well-received by both the client and users.

Increased Engagement: The dynamic and multimedia-rich design are expected to increase time spent on the platform, with users exploring multiple artist profiles and related content.

Positive Client Feedback: The platform’s innovative use of design to tell Hip-Hop’s evolving story was praised by the client for its creativity, impact, and seamless integration of media elements.

Successful Brand Integration: The project maintained VICE’s brand identity while also reflecting the forward-thinking ethos of Hip-Hop, balancing the old and the new in both content and design.

Other projects: 

thyda

copyright © 2024