Redesign

Explorations for VICE.com

Project Overview:

This redesign project was aimed at modernizing and enhancing the user experience by updating design elements to the content, structure, and overall visuals.. The goal was to create a cohesive design lift that aligns with the brand’s evolving identity while improving usability and engagement across the platform. As one of the product designers, my focus was on redesigning the contributor page, topic pages, section pages, and key components of the homepage. Collaborating with the broader design team, I contributed to the overall design direction and ensured consistency throughout the user journey.

Role:

Product Designer

As this was more of an internal side project within our design team. We tackled this project by examining direct feedback from our editors to identify areas of improvement, particularly around navigation and discoverability. We conducted user research with various designs regarding text styles, colors, variety of components etc. While testing also to understand how the platform was being used and where the pain points lay using our VICE Voices team —  an exclusive group of VICE readers that are specially focused for user testing of features and products.

Image: Homepage Desktop Mockup

I collaborated with other designers to brainstorm and wireframe different layouts for the contributor, topic, and section pages. We focused on creating a clean, flexible design that would allow users to navigate seamlessly between different content types.

I worked closely with the design team to develop a cohesive design system, including typography, color schemes, and component libraries. This ensured consistency across all pages, from the homepage to the individual content sections.

The explorations were shared with the VICE brand design team under for feedback and direction regarding visual language. Once design explorations were completed, each component and page was be spec’d in Figma.

Image: Homepage Grid Mockups

Homepage:

On the homepage, I was responsible for several section components that showcased featured articles, trending topics, and multimedia content. These components had to balance visual appeal with functionality, ensuring users were encouraged to click through and explore more content.

The section components were designed with modularity in mind, allowing for easy updates and variations depending on the editorial team’s needs. This flexibility ensured that the homepage could remain dynamic while maintaining a consistent look and feel.

The "Latest Stories" component was incorporated into the feed following its initial launch on i-D. We maintained consistency by using the same VICE typeface and color scheme as in the original design, ensuring a unified visual experience across platforms.

Image: Stories Shelf Mockups

Article Pages:

The exploration of article pages included both short-form and long-form content, designed for optimal viewing on both desktop and mobile devices.

During the design phase, we conducted a limited amount of user testing to evaluate different header styling options. Feedback was mixed on whether headers should be bold or light. Ultimately, we chose a lighter font styling as it aligned better with the overall aesthetic of the redesign, creating a more cohesive and modern look.

Image: Longform Article Mockups
Image: Shortform Article Mockups

Topic & Section Pages:

I focused on redesigning the topic and section pages. Redesigning those pages required very minimal design adjustments. We updated the typography style in the header title and incorporated a brief summary (dek) to enhance readability and user engagement. The new design used a flexible card grid system that adapted based on the type of content being displayed (articles, videos, etc.). This system allowed for easier content browsing and emphasized hierarchy, so users could immediately see the most important or trending topics.

Images: Device Mockups Topic Pages,  (L) Previous Design and (R) Redesign

Images: Device Mockups Section Pages (L) Previous Design & (R) Redesign

Image: Device Mockup Previous Design Contributor Page

Contributor Page:

The redesign aimed to highlight the contributors as thought leaders by improving their individual profile pages. The new layout prominently displayed their latest articles, featured work, and social media links to create a more engaging experience.

I integrated clear navigation patterns to make it easier for users to explore more content by the same contributor, increasing time spent on the page and overall engagement.

As a potential feature inspired by the New York Times, we considered incorporating a "Share Confidential News Tip" option. This feature would allow users to send confidential tips directly to specific journalists, enhancing user engagement and contributing to more personalized and secure communication. The banner features the new brand color scheme, aligning with the design of the Homepage Promo Rows for a consistent visual experience.

Images: Device Mockups Redesign Contributor Page: With/Without Profile Images, Brief or Long Bios

Additional Homepage Explorations of Section Components:

In this phase, we explored several interactive homepage section components, including:

Interactive Long-Form Articles: Designed to enhance user engagement, these components featured interactive elements that allowed users to navigate through lengthy content seamlessly. The focus was on creating an immersive reading experience with smooth transitions and dynamic content presentation.

Video/Article Carousel Cards: We developed carousel cards to showcase both videos and articles. These cards were designed to allow users to swipe or scroll through a curated selection of content, making it easier to discover related stories and multimedia pieces.

Newsletters: Regarding the newsletter design, we explored incorporating accent colors and utilizing the space more effectively with promotional units. Currently, the design is a straightforward black background with white text, which lacks visual interest.

Our approach involves making the promotional units optional, allowing editors to choose between displaying one or two units or none at all. This flexibility ensures that the design can be tailored to different needs and preferences. Additionally, the updated design can be seamlessly adapted across all breakpoints for a consistent user experience.

These explorations aimed to enrich the homepage experience, making it more engaging and interactive while ensuring a cohesive design with the rest of the platform.

Image: Interactive Card
Image: Carousel Card
Image: Carousel Card

Images: Newsletter Component

Final Outcome:

The final design was visually cohesive, clean, and modern, aligning with the brand’s evolving identity. The use of consistent typography, color schemes, and grid systems ensured a unified look across all pages.

The new contributor, topic, and section pages delivered a much-improved browsing experience. Users could now easily explore more content, follow contributors, and dive deeper into specific topics, which may result in increased time spent on the site.

This project was an excellent opportunity to contribute to a high-profile redesign, combining user experience, visual design, and development to create a platform that both users and the business could thrive on. It reinforced the importance of close collaboration with other designers to ensure consistency across the platform.

Other projects: 

thyda

copyright © 2024