HuffPost Contract Product Designer (Fall 2022) · UX Design, Visual Design
CONTEXT
Problem
HuffPost’s astrology hub has a dedicated readership, but lacks the visual intrigue to expand its reach and retention. HuffPost’s senior product manager reached out to our team to reimagine HuffPost Astrology’s desktop design, using research to inform visual, interaction, and content rehauls.
Figure 1. Astrology Page Stats
Performing a diagnostic visual audit…
We began by identifying immediate red flags that could cause friction. Click through the carousel to see our brainstorm mapped to the user flow!
To remediate the grievances we discovered in the visual audit, we defined three bare-bones product requirements for the redesign:
USER RESEARCH
We let the community of current and potential HuffPost Astrology users inform how we went about translating product requirements into design decisions.
237 User Surveys
We administered user surveys to capture astrology content and platform preferences at a glance for a breadth of users.
100 non-HuffPost users responded to the survey we put out on social media.
137 HuffPost users responded to screeners (which we later used for usability testing) on the HuffPost website.
Insights from Non-HuffPost Users
Using survey respondents as a proxy for the general public, we see a majority have interacted with horoscopes before.
BUT, even among the majority who have interacted with horoscopes before, the average usage rate is sparse.
Very few consider themselves to be experts (i.e. self-reported 4s or 5s).
Insights from HuffPost Users
How often do frequent HuffPost users visit the astrology hub?
Only 37% of frequent HuffPost users have ever visited the astrology hub — a metric indicating low visibility on the website!
*Age groups were roughly balanced as non-HuffPost user respondents ranged from 17-29 while 94% of HuffPost user respondents were at least 35, with a majority over 55.
In addition to the breadth captured through user surveys, we wanted to collect a few in-depth qualitative accounts of the HuffPost astrology experience benchmarked against personal preferences and other platforms.
Here are some quotes that capture the sentiments of our interviewees, categorized within the previously defined product requirements.
Distinct Visual Branding
“It looks like any regular article, if it had a bit more astrological design I might just believe it.”
“The tile layout (for signs) isn’t too bad, it could be cuter/more colors. The target audience of horoscopes is usually artsy and looks for more intricate designs.”
Calls to Action
“Those links can be designed to look less like ads. If it was less like ads and more like actual information, maybe I’ll be more incentivized to spend more time on the site and click into the links.”
Toggles and Filters
“I think it's fine to not have completely in-depth information like other astrology sites (Co-Star, Cafe Astrology, etc). I think that Cosmopolitan does a really good job of mixing in-depth and surface level information. On the top of the page, there is a brief summary of my horoscope and that helps answer my questions directly, but as you scroll there are hyperlinked images to navigate to more in-depth information, such as looking at my Sun, Moon, Rising signs, compatibility, etc.”
MARKET RESEARCH
In the user surveys and user interviewers, we asked participants to introduce us to their favourite astrology platforms (+what they liked about them). Their responses gave us a starting point for market research.
From our competitive audit, we noted some features that worked well for other astrology platforms.
Now synthesizing insights from user and market research to convert our product requirements into design decisions:
Distinct Visual Branding
A fresh set of iconography.
Compliance with HuffPost Life’s colour and style guide -> the astrology hub is a fun recreational experience, and would interest those browsing HuffPost Life more than HuffPost News.
Calls to Action
Format “read more” destinations/hyperlinks like other content in the HuffPost Life ecosystem: i.e. article cards with eye-catching photo covers.
New access points to HuffPost content at all parts of the astrology experience (see schematic below) to address low visibility.
Life Landing Page
Horoscope Directory
Horoscope Page
Toggles and Filters
The proposed information hierarchy:
Shown: daily horoscope, which most readers are here to read!
Concealed: love horoscope, monthly horoscope, yesterday/tomorrow’s horoscopes -> all of these should have the functionality to be toggled on/off according to user preferences.
A/B TESTING
We created two flows incorporating our product requirements, newly evolved into low/medium-fidelity designs.
Then, we asked 15 people for their input on these flows via usability testing.
Helpful Features
Interviewees preferred flow 2 features (pop-up interface, toggle arrows) over flow 1.
Landing pages: astrology ecosystem integration — can access other content at any point in the user flow!
Drop-down text: reduces cognitive overload as users may not be interested in their love or monthly horoscope.
Temporal toggles: the tabular style of the redesigned yesterday/today/tomorrow toggles highlight customizability of experience more than the original subtle hyperlinks.
Areas of Improvement
Provide educational content as add-ons in the astrology ecosystem: i.e. learn about sign types and planets. Most users are beginners who only check horoscopes occasionally.
Integrate add-ons into horoscope pages (not just the landing page).
Clarify, what happens when you click on the arrow toggles?
And… the final solution!
Here is a tour of our reimagined HuffPost Astrology discovery experience.
ICONOGRAPHY
A fresh set of iconography adhering to HuffPost Life’s colour palette: blue-300, primary-500, and pink-500.
The style is simplistic and clean (vs. intricate or sketchy) to maintain consistency with HuffPost’s modern interface.
An astrology hub landing page with access to the horoscope directory (most prominently) while serving as a container for supplementary educational content. This page can be accessed from HuffPost Life, increasing the chances of readers discovering HuffPost astrology vs. remaining only in the nav bar hamburger menu.
A proposed reorganization of the horoscope page to allow for experience customization and reduce clutter. Resources for understanding jargon (planets, zodiac sign, houses) are readily available on the right-hand side for those who may be unfamiliar.
Explanation cards for all 10 planets, 12 signs, and 12 houses — breaking down any technical jargon within the horoscopes' copy. This was a highly requested feature due to most horoscopes users being inexperienced (see user research).
REFLECTIONS
Learnings
My experience working on HuffPost's astrology hub has taught me so much about designing with a product orientation. This project really challenged me to think about function > form and discover new visual avenues that could either draw or keep a user's attention — since the astrology experience is optional vs. the likes of home, onboarding, and profile pages.
I also learned a lot about working with an existing design system, having previously done 0->1 design only. Designing with constraints helped me better understand brand cohesion and as a bonus, it was very fun working with HuffPost libary assets!
BTW, our designs have been (partially) shipped to web! See live at https://www.huffpost.com/horoscopes.
Thanks to my team members for all the hard work and HuffPost's product + design teams for their guidance!