Project Overview

📢This project was one of my internship projects during my 2024 Forbes summer internship as a Product Design Intern.
The focus was to redesign the ‘Forbes Quote of the Day (QOTD)’ page,
to better align with the modern Forbes brand and address usability issues that were impacting user experience and retention.

Role

UX Researcher
Product Designer

Duration

4weeks, Summer 2024
(I spent 4 weeks of the 10-week internship on this project, with the remaining time dedicated to other projects.)

Tool

Figma
Figjam
Adobe Photoshop
Adobe Illustrator

Team

Product Design




Final Delieverable

A sneak peek👀 of
‍Quote of the Day MVP Design (GIF)!

During my internship,
I started with mobile design and scaled it up to desktop and tablet.

This MVP design was developed in collaboration with the engineering team for the Forbes company-wide demo on Aug, 10, 2024.
‍
You can also check out more screens at the bottom!

‍

‍

Background and Goal

[CURRENT WEBSITE...😢]


What is the problem statement?

The Forbes's Quote of the Day (QOTD) outdated, (See the picture on the left)
the page hadn’t been updated in several years(Since 2015😮),
and it had usability issues.
‍
Despite these challenges...
The page received over 1.8 million page views annually, presenting a clear opportunity for improvement.

This could affect Forbes brand image and impact user retention,
so it was a priority for Forbes to redesign the page.
‍
‍
‍
So, the goal of the project was to... ‍

Redesign Forbes' Quote of the Day page,
to align with the updated brand identity, improving usability and user retention.
‍


Project Steps

Step 1.
Step 2.
Step 3.
🚀 DELIVER THE MVP & COMPANY DEMO
My primary responsibility was to deliver the MVP before my internship ended, working closely with a team of 8 engineers to ensure the product was ready for a company-wide demo.
🤝 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.
🧐 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

Research


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.

I analyzed similar sites to identify improvements. Studied how other platforms (such as Goodreads and New York Times) to identify opportunities for improvement.
This involved studying how these platforms leverage quotes to boost user engagement and retention, providing insights for enhancing our own design.

Main Findings


🔍 LACK OF SEARCH AND FILTERS
‍Users might struggle to find specific quotes due to the absence of search and filter options.

📩 NON-FUNCTIONAL SOCIAL SHARING
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.

➕ ADDITIONAL FEATURES
‍Additional features like saving quotes or adding author pictures were not feasible for MVP due to time and resource limitations.

Ideation

Inforamtion 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. .
‍

MVP Design




Starting from Mobile...
‍
With 80% of Forbes users accessing the site via mobile web, and significant traffic coming to the 'Quote of the Day' page through mobile devices, the team decided to adopt a mobile-first design approach, scaling up to tablet and desktop formats.

I am going to share before / After screens for Quote of the Day page,
if you are interested in viewing my design iterations, please email me!
📧 leahoh@uw.edu
‍
‍

Quote of the Day Mainpage




• Font and Colors
Updated the fonts and color scheme (black, red, and white) to align the page with Forbes' current brand theme, giving it a more modern and cohesive look.

• Share Tray
The original page only supported Facebook, Twitter, and LinkedIn. To provide users with more flexibility, we implemented a social share tray with updated options, including X (formerly Twitter) and Instagram.

• Removed Author Photos
While author photos can enhance engagement, Forbes' current layout typically does not include them. Due to technical constraints, I opted to omit the author photos, resulting in a cleaner and streamlined design.

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.

Author Page

• Breadcrumb Navigation
Added a breadcrumb at the top of the page, as previously, users had no clear way to navigate back after searching for an author’s name or clicking an author from the feed. The breadcrumb now provides a more accessible and intuitive option for returning to previous pages.

• Expanded Quotes
Previously, if a quote was too long, it was truncated with "..." and required the user to click to open a new page, adding an unnecessary step. Since quotes are rarely lengthy (with the longest displayed on the adjacent screen), we decided to show the full quote on mobile rather than directing users to a new page.

• Filter by Theme
A filter pill feature was also added here, allowing users to view quotes based on their preferred theme, making it easier to navigate and find relevant 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.

What I Learned...

Collaboration Between Design and Engineer

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!
‍


‍

Go to the Next Project! 🙌🚀
LinkedIn Pod!


‍

Leah Oh © 2024 All rights reserved
linkedine-mail