Hang 5

OVERVIEW

Client

Hang5 created an application which enables people to create meaningful virtual relationships based on Eastern Astrological compatibility.

Project Brief

The client’s request was to revamp their website with the goals of teaching users about Eastern Astrology and creating hype around their app. The client wanted the website to peak the interest of their target audience, Gen Z, while still providing a massive amount of information. We presented to them a highly interactive site that that is information dense yet digestible and interactive enough to hold Gen Z’s attention.

Research

User Interviews

Age 16-23
5 interviews

Research Findings

Users primarily incorporate astrology into their lives to gain a better understanding of others
42% or 16 out of 38 people would be willing to meet friends virtually without the intention of meeting in person
Users learn about astrology through books and websites

50% of participants prefer to learn about astrology in books rather than on websites.

Competitive Analysis

We studied features of other friendship making apps to determine what to include in our website and application.
We studied 4 similar applications to understand our competitors' strengths and weaknesses and to find a gap in the market.

Moderated Testing

Users struggled to locate the nav bar on the right side of the screen. We moved the nav bar to the left because English speaking users read left to right.
We added a non-binary button for inclusivity
Hang 5 showed the user their day zodiac rather than the more common year zodiac with no explanation as to why so we described the purpose and importance of the day zodiac

Primary Persona: Frankie

Frankie identifies as they in order to ensure that although we were covering the ancient topic of Eastern Astrology, we were relevant and inclusive.
We included Frankie’s year Zodiac, goat/ sheep on their Personality Sliding Scale. Frankie is 19, and in the target age range. We kept Frankie’s Zodiac in mind when developing their personality.
We are creating an educational website so our primary persona should be a novice when it comes to the concept of Eastern Astrology.

Problem Statement

Frankie wants a way to discover more about Eastern Astrology but finds the information on the internet daunting.

How Might We...

Captivate Frankie with the teachings of Eastern Astrology on a website?

Pain Points

Half of our participants don't want to learn astrology on a website and would prefer to read a book.
Eastern Astrology information is dense and can be overwhelming.

Information Architecture

User Journey

The goal of our user flow was to ensure that Frankie could become excited enough about Eastern Astrology that they would share to social media and download the app, thereby fulfilling the purpose of the site.

Map

We wanted our interactive elements to be featured in the nav bar to draw attention to them. We placed our educational information under “learn astrology” and then broke that information down further based on research of content.

Applying it to Frankie

We wanted to make the complex topic more accessible by applying it to a specific person, Frankie.

UI/ Visual

Style Guide

We established a color guide, our avatars, and corresponding elements to represent element and yin/yang combinations. We also came to a consensus on our information system.

Wireframes

Goal

To create engaging aesthetic and copy that inspires users to download the Hang 5 application.

Lo-Fi

Mid-Fi

Goal

To teach users about the 4 pillars of destiny- year, month, day, hour
Incorporate interactive elements to engage user -> developed slot machine which demonstrates the 4 pillars and how they work together

Lo-Fi

Mid-Fi

Goals

To teach users about their zodiacs
To write engaging copy that captivates users and establishes a bond between them and their zodiac

Improvements

Incorporated new emojis
Added forecast chart
Added copy
Incorporated side scroll and tabs to organize information
Included both day and year zodiacs

Mid-Fi

Lo-Fi

Goals

To teach users about the 10 heavenly stems and 12 earthly branches
To establish charts and symbols which effectively articulate information architecture and establish a visually pleasing aesthetic

Lo-Fi

Mid-Fi

Goals

To teach users about yin/ yang and O-Haeng
To hide information so that the user wouldn't be overwhelmed

Improvements

Established a file UI to hide copy
Developed spinning yin/ yang symbol
Added star background

Lo-Fi

Mid-Fi

Goals

To teach users the origin story of Eastern Zodiacs
To create a racing game and excite the user about Eastern Astrology Zodiacs

Mid-Fi

Testing

Maze Testing

This is some text inside In our Maze test, 40% of people didn’t scroll down when prompted to look for the dragon despite this being necessary to complete the task. Our solution was to create an arrow to show users that they could scroll.

Prototype

User Flow Video

See Ava explore the Hang5 website and learn more about Eastern Astrology

Learnings & Next Steps

Learnings

How to better break up and layout information. My team reviewed many information layouts and decided on the most effective ones.
How to effectively work with a client and balance their goals with best practices and evidence from studies.

Next Steps

Incorporate user testing to improve information architecture.
Greater distinction between buttons and toggle.
Further refine “Race your Zodiac” game.
Evaluate zodiac content to increase relevance with target group.
Integrate profile login into Zodiac page to remember personalized zodiac compilation.
Incorporate branding and visual elements into relevant socials to increase exposure to target group.

Hang 5 Website