Overview
I redesigned the Forbes Quote of the Day experience to better align with the modern Forbes brand and address usability issues affecting content discovery, engagement, and retention.
The Quote of the Day page had not been meaningfully updated since 2015, leaving a high-traffic experience outdated and difficult to navigate. The redesign created an opportunity to modernize the product and build a scalable foundation for future growth.
Impact
Shipped a redesigned experience serving 1.8M+ annual views
Improved crawlability and indexing
Helped the page reach #3 in organic search results for “Quote of the Day,” up from no previous ranking
Contributed to the migration from Angular to React
Final Design
Background
The original Quote of the Day page had not been meaningfully updated since 2015 and no longer reflected the current Forbes brand. The high-traffic page also had several usability issues, including unclear navigation, limited search and filtering, and outdated sharing options.
This created an opportunity to modernize a widely used Forbes experience while improving content discovery and building a more scalable foundation for future growth.
The Goal
Redesign the Forbes Quote of the Day experience to:
Align with the current Forbes brand
Improve search, navigation, and content discovery
Create more opportunities for engagement
Build a scalable foundation for future features
Project Steps
step 2. 🤝 MVP PLANNING & ADJUSTMENT
I collaborated with the team (Product Design & Engineering) to decide which features should be included in the MVP and made design changes based on technical feasibility discussions. I also organized and documented features that would be implemented later.
step 2. 🧐 ONGOING DESIGN-DEV ALIGNMENT
Throughout the process, I consistently checked that my designs aligned with what the engineering team was developing, making necessary adjustments to ensure smooth implementation.
Understanding the Problem
Rather than treating the work as a single modal design, I expanded the project into 3 connected initiatives.
The first two initiatives addressed immediate product needs. The framework extended the work into a longer-term system that could support multiple teams.
I analyzed similar sites to identify improvements. Studied how other platforms (such as Goodreads and New York Times) to identify opportunities for improvement.
I conducted interviews with three users to understand their most desired features and the pain points they encounter on this page.
The existing page had several usability issues, which were already noted in the PRD.
However, I wanted to dig deeper to identify any overlooked problems that could affect our MVP design or inform future iterations.
Key Findings
🤯 Quotes Were Difficult to Find
Users consistently struggled to access the 'Quote of the Day' page due to unclear navigation paths and a lack of functional search / filter features. This issue hinders user engagement as they are unable to easily locate the page or search for specific quotes.
🪦 Sharing Was Outdated
The social sharing feature was outdated and not functioning properly, still using old platforms like Twitter (now X) and without Instagram integration, significantly limiting user engagement.
🤝 More Ways to Engage
While features like saving quotes or adding author information would enhance the experience, they are not feasible for the MVP due to time and resource constraints
Information Architecture
Through research and collaboration with engineering and design teams, I defined which features to include in the MVP and which to save for future iterations.
To accommodate this, I created an IA that outlines how to structure the current page for MVP while planning for future features.
⚪ Grey : current features
🔴 Red : features that will be included in the MVP.
🟠 Orange : features to be added in future iterations.
This approach ensured that the MVP design would be flexible and scalable, allowing for smooth integration of additional features later on.
User Flow
Before detailed screen design, I created a refined user flow based on the IA.
This mapped out how users will interact with the MVP, ensuring a seamless user experience. .
Starting with Mobile
Because approximately 80% of Forbes users accessed the experience through mobile web, the team adopted a mobile-first approach.
I designed the core mobile experience first, then adapted the system for tablet and desktop while maintaining consistency with the Forbes design system.
Quote of the Day Mainpage
Font & Color
Updated the typography and black, red, and white color palette to better align with Forbes’ current brand.
Share Tray
Replaced the outdated sharing options with an updated tray, including X and Instagram.
Removed Author Photos
Removed author photos due to technical constraints, creating a cleaner and more consistent layout.
Search bar and Fliter Pills
Search Bar
To improve usability, I added placeholder text in the search bar, prompting users with “Search quotes and authors” to provide clearer search guidance.
Filter by Topic
Since all quotes are associated with topics, I added a filter pill feature, allowing users to easily switch between topics and browse quotes more efficiently.
Quote Feed Count
I included the total number of quotes relevant to the search and the number currently displayed on the page, providing clarity to users about the available content.
Quote Sharing Page
Quote Sharing Page:
When a user shares a quote from Forbes, the recipient lands on a dedicated page displaying only that specific quote. To increase engagement, we now include "related quotes" (based on the shared quote’s theme) and a "See All Forbes Quotes" link at the bottom, enabling users to easily return to the main Quote of the Day page.
Scale Up!
Desktop and Tablet:
After finishing the mobile design,
I scaled it up to desktop and tablet, ensuring alignment with the Forbes design system.
Collaboration Between Design and Engineering
The biggest lesson I learned is the importance of collaboration!
Handing over a Figma file to the engineering team was not the end, it was the beginning.
We cross-checked and verified each other's work, highlighting the importance of communication.
a BIG thanks to eng team for making this a great experience!
UP NEXT
Explore another project!
