top of page

WSJ x Deloitte  Redesign

This is a one-week UX/UI redesign case study that focuses on the current user experience of WSJ desktop and mobile. I selected WSJ because it's more challenging for me to reimagine and optimize a well-developed product that has less headroom for design iteration. 

 
Objective: Elevate the visual design of WSJ/Deloitte for both desktop and mobile users, aiming to identify and alleviate user pain points. Enhance user experience and engagement through the integration of WSJ and Deloitte branding elements.
Time spent: 1 week
Task: Undertook an extensive UX redesign to enhance both desktop and mobile experiences. Integrated WSJ and Deloitte branding for a cohesive look. Improved ad placement, landing page layout, search function, and newsletter sign-up for better usability.
Tools: Figma, Photoshop
Design choice: The design concept focused on maintaining brand consistency with WSJ, integrating Deloitte's visual identity, and enhancing the user experience for increased engagement.

❤︎ LEARN MORE ❤︎

ABOUT ME

Visual Design
Wireframing
Prototyping
Figma

Ernst & Young - CCaSS

❤︎ LEARN MORE ❤︎

Partnered closely with the Head of Creative in brainstorming and creating a set of branding materials for CCaSS - this includes email, newsletter designs, zoom backgrounds, presentations  and event designs.

​

BRAND REFRESH

 VISUAL IDENTITY

ART DIRECTION

Deloitte's Wall Street CIO Journal offers a comprehensive view of technology and innovation in finance, focusing on the Chief Information Officer's perspective. It provides in-depth analysis, trends, and best practices shaping Wall Street's digital landscape. Deloitte's expertise shines through, offering valuable insights for CIOs navigating modern finance technology complexities. With thought-provoking articles, interviews, and case studies, it's a trusted resource for staying ahead in a rapidly evolving digital age.

To revamp the WSJ Deloitte CIO Journal website, I undertook an extensive UX redesign process to elevate both the desktop and mobile experiences. 

The redesign aimed to maintain brand consistency with WSJ while incorporating/integrating Deloitte's distinct visual identity. This process involved thorough research into both WSJ and Deloitte's brand style guides, and seamlessly integrating them into the website redesign.

Refinement 
Enhance user experience and engagement by incorporating WSJ and Deloitte branding elements while addressing key issues related to ad placement, landing page layout, search feature optimization, and newsletter sign-up functionality.

About

Personas

Creating detailed personas based on research and user interviews is essential for tailoring designs to user needs. For the WSJ Deloitte CIO Journal redesign, audience research was conducted to understand preferences. Personas enable empathy with users and guide design decisions, ensuring the website meets expectations and enhances the user experience.

Understanding User Problems

In order for me to find out what to optimize, I interviewed 5 people to understand what matters to WSJ users the most. After gathering my research, I established user stories to help document the different pain points, needs and motivations for accessing the news source which serves as a gut check to ensure that my designs address these problems. Based on these insights, I further analyzed the design architecture of WSJ web and mobile. Here are the following 4 pain points identified from research:

Ad Placement:
The ad is not placed in a location where it raises ad viewability. On mobile, users have to scroll to the bottom of the page for one single ad. 

Landing Page:
On mobile, 'What's Trending' section is not placed near where the lead articles are. Uses have to scroll all the way down to find what they are looking for.

Sesarch Feature:
is not optimized. Users are unable to pull up the articles using specific keywords.

Newsletter Sign-Up:
It only allows users to subscribe to all CIO Journals but not Deloitte specific.

User Flow

I aim to redesign the site so that users can easily navigate and find what they are looking for and elevate the visual design so it provides a more engaging experience for users. To raise brand awareness and ad viewability, a horizontal banner ad is added to the top so that users are more aware of the brand and can easily direct themselves to Deloitte’s page for more in-depth research reports and insights. Visual hierarchy is added to the landing page to help users understand the structure and navigation of the website faster, thus, complete their tasks and achieve their goals faster. Ads are also placed in a separate column from the content so it captures users' attention without impacting users' experience and being interruptive to the main content so that it is clear and unobstructed. 

Photography

The UI design follows WSJ and Deloitte original style guides. I use WSJ's official font and color palette from WSJ and Deloitte.

Design System / Branding

The UI design follows WSJ and Deloitte original style guides. I use WSJ's official font and color palette from WSJ and Deloitte.

Figma Prototype

Figma was instrumental in crafting my UX redesign, enabling the creation of intuitive, user-centered designs that elevate the overall user experience.

Breakpoints

Different breakpoints for responsive design are implemented, ensuring optimal viewing experiences for users on both mobile and desktop devices.

Banners

Designed to captivate and convert, these banner ads created seamlessly blend sleek design with compelling messaging. Meticulously crafted to entice viewers, they drive engagement and promote the CIO Journal's invaluable insights and services.

Before and After

Branding Integration: Incorporated WSJ and Deloitte's branding elements, including colors, typography, and logo usage, to maintain a cohesive and recognizable link between the two entities.
Ad Placement Optimization: Redesigned ad placement to improve ad viewability. On mobile, ads are strategically placed to enhance visibility without disrupting the user experience.
Landing Page Enhancement: Restructured the landing page layout to ensure that the 'What's Trending' section is prominently placed near the lead articles. This allows users to easily access trending topics without extensive scrolling.
Search Feature Optimization: Revamped the search feature to optimize keyword search functionality. Users can now pull up articles using specific keywords, improving the overall search experience.
Newsletter Sign-Up Improvement: Enhanced the newsletter sign-up functionality to allow users to subscribe not only to all CIO Journals but also to Deloitte-specific content. This provides users with more personalized content options.
 
Results:

  • Improved ad viewability and placement, leading to increased revenue potential.

  • Enhanced user engagement through improved landing page layout and search functionality.

  • Increased subscriber base by offering more personalized newsletter sign-up options.
     

Conclusion:
The redesign of the WSJ Deloitte CIO Journal website successfully integrated WSJ and Deloitte branding elements while addressing key usability issues. The improved user experience and engagement have contributed to the overall success of the website, making it a valuable resource for CIOs and IT professionals.

Mobile Version

Enhanced the mobile version of the WSJ Deloitte CIO Journal website by integrating WSJ and Deloitte branding, optimizing ad placement for improved visibility, restructuring the landing page layout to prominently feature trending topics, revamping the search feature for better keyword functionality, and enhancing newsletter sign-up options for a more personalized experience.

HOME

HOME

bottom of page