Role UX/UI Designer, Researcher
Team Size 3 People
Timeline 12 Weeks
Before & After
Before: Yahoo's homepage could be easier to navigate
Overview
Yahoo is a search engine, news site, and email service active in multiple countries. With 700 million users visiting Yahoo’s websites each month, it’s imperative that essential features do not get lost within the dozens of offerings.
I conducted a study with two other team members focused on improving the information architecture of Yahoo's homepage in order to attract new users and retain existing users.
Research Question
To what extent do participants find Yahoo US’s homepage easy to use?
Participant Data
The demographics of our participants were quite homogenous because they were recruited from a course for UX Designers and Product Managers.
Research Process
We conducted remote usability tests where we encouraged each participant to talk aloud and complete tasks during three scenarios.
Each scenario related to a different aspect of Yahoo's homepage; Search, Settings, and News.
Search - Are participants able to interact with all of the search features available?
Settings - Can the participant easily access the language settings?
News - Can participants discover the content they are interested in?
Our metrics were task completion, ease of use, and satisfaction.
Research Findings
A confounding variable that should be noted is that one participant used the mobile version of the site, while the other two used the desktop version.
Design Process
I was solely responsible for designing the UX and UI of the homepage.
From our findings, I decided to prioritize three things:
1. “Choose your Country” is currently hidden for new users, so it should be moved to where users would look.
2. Make all the possible search features (e.g. private search) known and viewable from the homepage.
3. Add whitespace and filters, so users have an easier time scanning and curating the content they want to see.
Information Architecture
The goal is to condense the current Yahoo homepage down to its essential features, so they can be prioritized in the design.
Since Mail is only accessible after signing in, it is has the least amount of accessible features on the homepage.
Sketches
I created some rough sketches just to explore the layout and hierarchy of the prototype.
Inspiration for the information hierarchy came from direct and indirect competitors known for their news and search features.
Google, Bing, Vox, Vice, The New York Times, and The Washington Post were some of the competitors referenced throughout the design process.
Initial Wireframes
During testing, every participant scrolled down when they couldn't find a feature. Because Yahoo uses endless scrolling, this caused more frustration.
It was essential to make every part of the site discoverable from above the fold of the homepage.
Initial Prototype
The initial prototype has trending news stories at the top and a customizable news feed with filters at the bottom.
Settings are in the hamburger menu. It includes region/language selection and private search.
Whitespace was added to increase feature visibility and comprehension.
First Click Testing
I conducted an unmoderated first click test with 10 participants via SurveySwap.io.
The participants were between the ages of 18 and 34 years old. 90% of them spoke more than one language. None of the participants use Yahoo as a search engine, instead they all use Google.
There was a consensus that settings would be located in the hamburger menu. There was a split on where private search should be located.
Overall, there was no clear choice for where participants would look in order to find specific topic.
After reviewing the feedback, 3 participants liked the aesthetics, but another 3 commented that the design lacked focus and was confusing.
Final Wireframes
The goal of this wireframe iteration is to directly address the feedback from the first click session.
1. The homepage uses a new grid layout to add organization and clarity without sacrificing visual interest.
2. The main navigation is expanded, so users are more likely to find the topic they're looking for.
3. The "Trending Now" & "Horoscope" sections were removed, because News should be the focus of the homepage.
4. The extra filters were also removed, because they distracted from the main navigation.
5. All search options and settings will remain in the hamburger menu, because that tested well with participants.
The homepage should align with Yahoo's definition as a "news site, search engine, and mail service", so those are the feature highlighted at the top.
Final Prototype
Additional details have been added to help users navigate through the homepage.
The weather is at the top corner and it adjusts to the user's location.
News stories include their topic, the source, the amount of time needed to read, and the number of comments.
Constraints
I did not have access to Yahoo users, while I was conducting research or usability testing. This design would've benefitted from their input, since they have the most insights in terms of their actual experience with Yahoo.
In particular, Yahoo users from various countries would've been ideal, since Yahoo is a global service.
Lessons
If a feature isn't easy to find, it doesn't exist. Yahoo has so many useful and meaningful features, but participants had trouble finding what they were looking for. There are many people who aren't Yahoo users, so they don't get the benefit of experience. Features like language settings must be always accessible in order for them to be used. Users tend to rely on their experience with other products to guide them. I chose design patterns from well known competitors in order to bridge the gap.
