StarCrossed

StarCrossed is an app that connects people based on astrological and personal compatibility. It can be used for dating or finding friends.

TABLE OF CONTENTS

DESIGN ROLES
  • UX Design
  • Research
  • Visual Design
  • Brand & Identity
DELIVERABLES
  • User Surveys
  • Personas
  • User Stories
  • User Flow
  • Competitive Analysis
  • Wireframes
  • Brainstorm
  • Style Guide
  • User Testing
  • User Research
  • Prototype
TOOLS
  • Figma
  • Google Form Surveys

01. OVERVIEW

Astrology is a very popular subject, especially among Millennials and Generation Z, many of whom use it to determine relationship compatibility. However, despite the popularity of dating apps, there are no dating apps that include astrology in it as a key component. Thus, my StarCrossed app is meant to unify astrology and dating into a singular app. Users can use this app to not only understand astrology and keep up with horoscopes, but connect with people based on astrological and personal compatibility.

02.PROBLEM

While there are many astrology apps and dating apps available, many users are dissatisfied with both. For astrology apps, most users feel that they do not understand enough about astrology to understand how to apply it to their lives. For dating apps, many users, particularly women, do not feel comfortable using them because of online harassment and concerns with safety. As such, StarCrossed aims to not only merge the two subjects into a single app, but to provide a positive experience for everyone who wants to use it.

03. USER SURVEY

When I wrote the survey, I wanted there to be space such that in the event that there was not a market for astrology dating apps, I could use the information to go into a different direction with this project. The results I got from the people who completed the survey went as follows:

The most common reasons why people use astrology:
Just for fun, or to connect with social groups: 81.1%
Contextualize people's personalities: 62.2%
Respondents use astrology to do the following:
51.4%
of users
  1. Describe themselves and self actualize
  2. Use it as a guidance for navigating life
Are respondents open to using an astrology dating app?
Open: 62.2%
Strongly enthusiastic: 13.5%
Majority of people surveyed are:
Millennials

Generation Z

From the responses, it is clear that there is a market for this kind of app among astrology users, especially if they use it to figure out aspects of their individual personality. It is also important to note that for respondants who are not connected with astrology, 81.8% of people are open to using an astrology app provided that it explains to them what different astrology terms mean, as well as the purpose of the different signs within their natal chart. This is determined by one's location and time of birth, and is meant to explain the intricacies of one's personality. This is to say that if the app provides educational material about how astrology works, it may garner interest from people who are both passingly familiar with astrology and already invested in astrology.

04. USER PERSONA

These user personas were created based on two different profiles: Regina, who is a romantic and uses astrology as confirmation bias but with a healthy grain of salt, and Natalie, who is a skeptic but uses astrology to connect with people and make sense of their personality.

REGINA

astrology amateur

NATALIE

skeptic

Age: 25 years
Gender: Woman

Quote: "For me, I just use astrology as confirmation bias on myself"
Age: 22 years
Gender: Non-Binary

Quote: "Astrology appeals to folks who want guidance and a tool for self reflection and feel left out of institutional religion. People crave structure during chaos and astrology provides that outlet."
GOALS:
  1. Learning more about astrology and the characteristics ascribed to them so she can see them in other people
  2. Connecting with a potential partner over astrological compatibility
  3. Finding relationships with people who have a shared interest in astrology
GOALS:
  1. Using an astrology/dating app that allows them to connect with other people
  2. Having an app that could help plan dating by listing potential dates or hangouts, with the option of it being based on their chart compatibility
  3. Learning more about how planets determine people's actions
FRUSTRATIONS:
  1. Not knowing enough about astrology to understand planetary movement or sign compatibility to comprehend astrology's application to relationships
  2. Dating apps that are not friendly for women by doing little to combat harassment
  3. Difficulty finding a good way to establish compatibility with dating apps
FRUSTRATIONS:
  1. Fear of how personal information will be used by tech companies
  2. Fear that one's birth chart shown in full could compromise someone's security
  3. People taking astrology too literally and excluding certain signs

05. COMPETITIVE ANALYSIS

Because of the surprising lack of astrology centered dating apps, I have used popular programs that are centered exclusively around astrology or dating for my competitive analysis.

Co-star is by far the most popular astrology app according to survey respondents. This app uses AI technology and NASA's data about planetary bodies to create customized horoscopes for users based on their natal chart.

In terms of websites, Cafe Astrology is an established, well known site that has a wealth of information for astrology users of all experiences. This page covers everything from generating natal charts to explaining planetary placements and horoscopes.

For dating apps, I chose Bumble, which is a well known app that got popular for having women reach out first in heterosexual relationships. This feature was designed to give agency for women and potentially decrease instances of harassment.

Minimum Variable Product:
  1. Horoscopes based on sun signs
  2. Natal chart for users, and an explanation as to what the signs in the chart mean
  3. Explaining planet placements
  4. Connecting people using chart compatibility, but in a way that is inclusive for skeptics of astrology
Differentiators:
  1. Lack of astrology centric dating apps will make this product stand out
  2. Make the app open for astrology skeptics who use this to contextualize their personalities
  3. Make it open to friendships as well as romantic relationships

06. USER STORIES

USER TASK IMPORTANCE
New user I want to sign up for a new account high
Insert name and date/time/location of birth high
Get a natal chart with an explanation of what it entails high
Answer short questionnaire about what you are looking for when connecting with other people high
Set your preferences for potential matches high
Write your biography and what you are looking for high
Upload images for your profile high
Facebook authentication medium
Importing contacts you know medium
Change information you put in the app medium
Returning user I want to sign in to my account high
Search for someone to connect with high
Send message request to a profile you want to connect with high
Check your horoscopes of the day high
Report or block accounts that you don't want to see high
Change your filters or preferences high
Accept or reject message requests from profiles that want to connect with you medium
Matchmake your friend with a profile that you think is compatible with them medium
Learn more about the signs in your natal chart medium
Change your filters or preferences medium

07.USER FLOW

The user flows are meant to show the trajectory for the following five features:

  1. Creating a new account
  2. Inputting information for new users
  3. Finding a match
  4. Confirming a match
  5. Finding one's horoscope

08. SITEMAP

I combined the trajectories in the five user stories I created into a single sitemap. I also included other features that were not in the user flows, including a matchmaking feature and a way for users to access their settings.

09. WIREFRAMES

The wireframes are made based on the sitemap and provides very limited features. I have tested this with users, and while most can figure out how to navigate the app, those who have limited knowledge about astrology seem to be the most confused as to how to navigate these wireframes since the explanations about the signs are not there, but are represented as a block.

10. BRAINSTORM

I made several sketches for a potential logo, playing off the name "star crossed." I was aiming for something that captures the essense of an astrology/dating branding without being too cheesy.

I eventually went with the star surrounded by twelve "mini-stars" represented as dots, with each of them representing one of the twelve signs of the zodiac. Here is a preliminary design that shows the dimensions of the first iteration of my logo.

I also made sketches where I tried to organize the features that should appear in the app, including essentials that should be in the settings or filter sections. Some of these features also end up in the profile page.

11. BRANDING

I made a mood board to get a sense of what kind of brand I should develop for the app. Looking at different images, I found that for astrology related subjects, I leaned towards using darker colors to represent the night sky.

I incorporated the color scheme into my style guide and my logo, using dark blue colors. For font choice, I went with Inconsolata and Special Elite because of how they resemble typewriting fonts. I chose them because it conveyed an old-fashioned vibe that complemented the longevity of astrology.

12. USER TESTING

The first iteration of the high fidelity mockup was made with bare minimum aesthetics based on the wireframes. The initial appearance is devoid of color and personality, and is meant to show the structure of the app. The prototype is also availible below.

The second iteration was spent making adjustments to the previous iteration and making changes that would help users navigate this site.

One of the first changes I made was for a user who had large fingers, and has trouble using small buttons. I increased the size of the buttons that are meant to approve or reject potential matches to suit their needs. The larger buttons I ultimately chose to use are at the right hand side.

I also made minor design changes in areas such as the new user questionnaire section, in which I changed the "other" designation in gender to "custom" to be more inclusive towards gender non-conforming people. I am still not very satisfied with this method of gender categorization, and it is something to look into if I were to do future iterations of this project. I also changed the radial buttons, which generally is used to select a single option, to a checkbox to indicate users can choose more than one option. The final design choice is on the right hand side.

Moreover, as I started to incorporate the branding into the prototype, I found that some users had trouble with the design choices I made. For instance, I used a glowing effect to mimic that of stars in the night sky to stand out against the dark colors. However, some users had trouble visually processing this app, as it produced a blurring effect for them that makes it difficult to read. In deference to this, I took the advice of one user who suggested that limiting the glowing effect inside the button could make this more readable for them. The final design choice is on the right hand side.

There was also a series of minor adjustments I made for this app to be more inclusive, and the one that sticks out the most was made by an airline assistant. Because she is constantly traveling and has an unreliable location, distance is a tricky area for her because she could be at different states at different times. As such, I significantly increased the maximum distance so that people with similar professions could also use this app. The final design choice is on the right hand side.

After making these changes, I have the third iteration completed, which includes the aesthetics drawn up in the branding and takes into consideration the feedback I got from the people who tested this prototype. The app takes on the following appearance:

13. PROTOTYPE

The completed prototype for the StarCrossed app, which is also the current third iteration of this app, can be found here:

WHAT I LEARNED

I was unfamiliar with iOS as someone who only used android my entire life, and I am unfamiliar with both astrology and dating apps. This made it a challenging project in that I was doing something with subjects that I do not have much prior knowledge to. I did think I was over in my head when I first did this, so I was surprised by how well this all came together, considering that I was not really sure what I was doing in the process of creating this prototype. This helped me feel more confident in my ability to tackle projects that are outside my comfort zone.

I also found that I was able to create prototypes much faster than before, and do a better job in directing users in the directions I want them to take when they are navigating through my app. I could see the improvements I made in designing and organizing my projects in comparison with the previous one I was invested in, so it was encouraging for me to see that I have grown somewhat as a designer.

I also see the areas in this project where there is room for improvement. I stopped at the iteration where I am at right now, but I think being aware that there is always more that I can do with this project can be helpful in making better products.

CONTACT ME