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.
ABOUT ME
Visual Design
Wireframing
Prototyping
Figma
Ernst & Young - CCaSS
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
WSJ CIO Journal Webpage Redesign
The WSJ CIO Journal, with content sponsored by Deloitte, is a dedicated section on The Wall Street Journal website tailored for Chief Information Officers (CIOs) and IT leaders. It covers key topics such as digital transformation, cybersecurity, and IT strategy, helping executives stay informed on emerging technology trends and business innovation.
Enhancing User Experience for WSJ Deloitte CIO Journal
Objective: Enhance the desktop and mobile user experience for the WSJ Deloitte CIO Journal by addressing key pain points and improving overall engagement
Task: Redesign the platform to improve ad viewability, optimize content discovery, enhance search functionality, and refine the newsletter sign-up process for a seamless user experience.
Tools: Figma, Photoshop
Design choice: The redesign prioritized brand consistency by seamlessly integrating WSJ and Deloitte's visual identities. The approach emphasized a user-centric experience, featuring intuitive navigation and enhanced functionality. Key design elements included strategically placed ads, a streamlined landing page layout, and improved search and newsletter sign-up processes, all aimed at maximizing user engagement and satisfaction.
Design Process
My design process included research, ideation and design phases.
Research: this includes conducting user interviews to identify pain points such as poor ad visibility, inefficient content discovery, and limited newsletter customization on both desktop and mobile platforms.
Ideation: Solutions were brainstormed and prioritized, leading to the development of wireframes that addressed these issues.
Design phases: Sketches, wireframes and high-fidelity prototypes were created, resulting in a mobile-optimized interface with improved ad placement, streamlined content access, and enhanced search and subscription features. Iterative design refinements ensured a user-friendly, business-aligned experience.
User research & Discovery
User Interviews: CIOs, IT leaders, and business executives who need quick access to relevant insights.
User Pain Points Validation: Interviews with stakeholders and user feedback confirming issues with mobile layout, ad placement, and search.
Competitive Analysis: Benchmark against other executive publications with effective mobile UX and search capabilities.
User interviews
Gathering User Insights: To determine what needed optimization, I conducted one-on-one interviews with five technology executives, research analysts, investment bankers, and current users. This helped me understand what matters most to WSJ users. After gathering my research, I established user stories to document the various pain points, needs, and motivations for accessing the WSJ Deloitte CIO Journal. This process served as a gut check to ensure my designs would effectively address these issues.
User Pain Point Validation
To ensure our design solutions effectively address user needs, I validated the identified pain points through a targeted research process. By analyzing feedback from existing users and reviewing user interactions with the WSJ Deloitte CIO Journal, I identified common challenges and frustrations. This validation helped prioritize areas for improvement, allowing for a focused approach in enhancing user experience and aligning design strategies with user expectations.
Ad placement: Ads are not positioned to enhance viewability; on mobile, users must scroll to the bottom of the page for a single ad.
Landing page navigation: The 'What's Trending' section on mobile is located too far from the lead articles, requiring excessive scrolling to find relevant content.
Sesarch functionality: The search feature is not optimized, making it difficult for users to retrieve articles using specific keywords.
Newsletter sign-up: Users can only subscribe to all CIO Journals, with no option to select Deloitte-specific content.
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.
.jpg)
Competitive Analysis
To better understand how other executive publications present content on desktop and mobile, it is essential to evaluate its current offerings against industry leaders such as McKinsey Insights and Gartner. This comparison focuses on key aspects, including user experience (UX), search capabilities, and content organization.
McKinsey Insghts
User Experience (UX): Clean, minimalist design with intuitive navigation; mobile version facilitates quick access to trending articles and insights.
Content Organization: Logical organization highlights trending topics and research, making it easy for users to find relevant material.
Subscription Accessibility: The email subscription option is clearly positioned at the bottom of the screen, allowing users to easily sign up for updates on the latest insights
Gartner for CIO
User Experience (UX): User-friendly interface with clear categorization
Content Organization: Content categorized by function and industry, allowing for quick navigation to pertinent information.
Subscription Accessibility: The subscription option for insights is clearly visible, making it easy for users to sign up and stay informed about the latest updates.
User interviews
Gathering User Insights: To determine what needed optimization, I conducted one-on-one interviews with five technology executives, research analysts, investment bankers, and current users. This helped me understand what matters most to WSJ users. After gathering my research, I established user stories to document the various pain points, needs, and motivations for accessing the WSJ Deloitte CIO Journal. This process served as a gut check to ensure my designs would effectively address these issues.
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.
