HuffPost Astrology
HuffPost Astrology
HuffPost Astrology
Client Project / Product Design, Visual Design, Interaction Design, User Research
Client Project / Product Design, Visual Design, Interaction Design, User Research
Client Project / Product Design, Visual Design, Interaction Design, User Research
The Specs
The Specs
Role
Role
Product Designer
Duration
Duration
September 2022 to
December 2022
Team
Team
Geena Yin
Michelle Tran
Gigi Huang
Sharon Jihn
Alba Joy
Vicky Chong
Ari Elorreaga
Disciplines
Disciplines
Product Design
Visual Design
Interaction Design
User Research
Toolkit
Toolkit
Figma Design
Figma Prototype
Adobe Illustrator
Role
Product Designer
Duration
September 2022 to December 2022
Team
Geena Yin
Michelle Tran
Gigi Huang
Sharon Jihn
Alba Joy
Vicky Chong
Ari Elorreaga
Disciplines
Product Design
Visual Design
Interaction Design
User Research
Toolkit
Figma Design
Figma Prototype
Adobe Illustrator
The Specs
Problem
Problem
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.
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.
ASTROLOGY PAGE STATS. TL;DR—the astrology hub’s scale of traffic is small but engaged.
In the 3rd quarter of 2022, 118327/38624 = approx. 3 sessions per astrology hub user per month.
ASTROLOGY PAGE STATS. TL;DR—the astrology hub’s scale of traffic is small but engaged. In the 3rd quarter of 2022, 118327/38624 = approx. 3 sessions per astrology hub user per month.
ASTROLOGY PAGE STATS. TL;DR—the astrology hub’s scale of traffic is small but engaged. In the 3rd quarter of 2022, 118327/38624 = approx. 3 sessions per astrology hub user per month.
I. INITIAL PAIN POINTS
I. INITIAL PAIN POINTS
Performing a diagnostic visual audit ...
Performing a diagnostic visual audit ...
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!
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:
To remediate the grievances we discovered in the visual audit, we defined three bare-bones product requirements for the redesign:
To remediate the grievances we discovered in the visual audit, we defined three bare-bones product requirements for the redesign:
Distinct visual branding to separate HuffPost Astrology from its parent site, tarot.com.
Distinct visual branding to separate HuffPost Astrology from its parent site, tarot.com.
Calls to action to promote exploration within the astrology ecosystem.
Calls to action to promote exploration within the astrology ecosystem.
Toggles and filters for patrons to customize their experience.
Toggles and filters for patrons to customize their experience.
II. USER RESEARCH
II. USER RESEARCH
We let the community of current and potential HuffPost Astrology users inform how we went about translating product requirements into design decisions.
We let the community of current and potential HuffPost Astrology users inform how we went about translating product requirements into design decisions.
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
237 User Surveys
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.
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
INSIGHTS FROM NON-HUFFPOST USERS
Using survey respondents as a proxy for the general public, we see a majority have interacted with horoscopes before.
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.
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).
Very few consider themselves to be experts (i.e. self-reported 4s or 5s).
INSIGHTS FROM HUFFPOST USERS
INSIGHTS FROM HUFFPOST USERS
How often do frequent HuffPost users visit the astrology hub?
How often do frequent HuffPost users visit the astrology hub?
63%
63%
63%
Never Used Before
Never Used Before
18%
18%
18%
<= Once a Month
<= Once a Month
19%
19%
19%
>= Once a Week
>= Once a Week
Only 37% of frequent HuffPost users have ever visited the astrology hub—a metric indicating low visibility on the website!
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.
*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.
12 User Interviews
12 User Interviews
12 User Interviews
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.
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
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.”
“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
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.”
“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
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.”
“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.”
III. MARKET RESEARCH
III. 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.
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.
From our competitive audit, we noted some features that worked well for other astrology platforms.
From our competitive audit, we noted some features that worked well for other astrology platforms.
Iconography that boasts strong ‘Elle’ branding, appealing to their primarily female readership.
Iconography that boasts strong ‘Elle’ branding, appealing to their primarily female readership.
Strong experience personalization: provides specific information for sun, moon, and rising signs.
Strong experience personalization: provides specific information for sun, moon, and rising signs.
Information/temporal filtering, intuitive sliders.
Information/temporal filtering, intuitive sliders.
Informational pages on zodiac signs, Chinese signs, planets, and houses.
Informational pages on zodiac signs, Chinese signs, planets, and houses.
Iconography that boasts strong ‘Elle’ branding, appealing to their primarily female readership.
Strong experience personalization: provides specific information for sun, moon, and rising signs.
Information/temporal filtering, intuitive sliders.
Informational pages on zodiac signs, Chinese signs, planets, and houses.
IV. PRODUCT REQUIREMENTS -> DESIGN DECISIONS
IV. PRODUCT REQUIREMENTS -> DESIGN DECISIONS
Finally, we used all the synthesized insights from our user and market research to convert our product requirements into design decisions.
Finally, we used all the synthesized insights from our user and market research to convert our product requirements into design decisions.
Finally, we used all the synthesized insights from our user and market research to convert our product requirements into design decisions.
Distinct Visual Branding
Distinct Visual Branding
A fresh set of iconography that looks astrological and reflects HuffPost’s brand.
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.
A fresh set of iconography that looks astrological and reflects HuffPost’s brand.
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
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.
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
Life Landing Page
->
->
<-
<-
Horoscope Directory
Horoscope Directory
->
->
<-
<-
Horoscope Page
Horoscope Page
Toggles and Filters
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.
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.
V. A/B TESTING
V. A/B TESTING
We created two flows incorporating our product requirements, newly evolved into low/medium-fidelity designs.
We created two flows incorporating our product requirements, newly evolved into low/medium-fidelity designs.
We created two flows incorporating our product requirements, newly evolved into low/medium-fidelity designs.
Click through the carousel to see those two flows compared with the original designs.
Click through the carousel to see those two flows compared with the original designs.
Then, we asked 15 people for their input on these flows via usability testing.
Then, we asked 15 people for their input on these flows via usability testing.
Then, we asked 15 people for their input on these flows via usability testing.
Some interviewees were sourced from the HuffPost user screener survey, some were just our friends/family.
Some interviewees were sourced from the HuffPost user screener survey, some were just our friends/family.
Helpful Features
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.
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
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?
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?
VI. FINAL SOLUTION
VI. FINAL SOLUTION
Iconography
Iconography
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.
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.
Astrology Hub Landing Page
Astrology Hub Landing Page
Astrology Hub Landing Page
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.
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.
Horoscope Page
Horoscope Page
Horoscope Page
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.
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.
There is now hover animations for the left and right arrow keys to clarify that they lead to adjacent zodiac signs.
There is now hover animations for the left and right arrow keys to clarify that they lead to adjacent zodiac signs.
Educational Resources
Educational Resources
Educational Resources
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).
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).
SINCERELY,
EMILY XIAO
LET'S CONNECT!
VII. CONCLUDING NOTES
VII. CONCLUDING NOTES
Learnings
Learnings
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 redesigns have been (partially) shipped to web! See live at https://www.huffpost.com/horoscopes.
BTW, our redesigns have been (partially) shipped to web! See live at https://www.huffpost.com/horoscopes.
BTW, our redesigns 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!
Thanks to my team members for all the hard work and HuffPost's product + design teams for their guidance!
SINCERELY,
EMILY XIAO
LET'S CONNECT!
SINCERELY,
EMILY XIAO
LET'S CONNECT!