Co-star - Single [New].png

Co-Star Application Mock Redesign

A mock re-design of one of my favorite new mobile applications, Co-Star, showcasing my digital wireframe work

Dates: May 2019

Client: Personal Project

Role: User Interface Designer

 

Why This App ?

The Co-Star Astrology application is one that is up and coming in popularity. It’s one of my favorite applications, but I think it has a very poor user interface, which makes it clunky and frustrating to use.

 

Problem Statement

The user experience design of the Co-Star application makes it difficult to navigate through the application smoothly due to a confusing naming scheme and page placement of items.

 

Let’s Talk about the original Design

 

Here is my digital wireframe of the original application’s Home Page:

Co-star - Single [Old].png

This is a copy of the actual application’s Home Page (for comparison):

Co-Star - Real Design.png
 
 

Questions looking at this Ui

Whenever I look at user interface and the information architecture of a product, I look at some specific parts of the User Experience:

  • What features does the client use the most? AKA what would they want to get to as easily as possible?

  • What features would draw more people into the application, and keep them on it for longer?

  • What features are confusing? What are the user’s pain points? What can be simplified or made uniform so it’s easier for the user to navigate?

6D9E3CA0-7643-43E2-8839-47F57B2D8FDF.jpg
 

Most Prominent Application Feature

One of the largest draws into the app, and what has made it so popular, is the “Daily Horoscope” that pops up onto your phone, which is often funny or interesting.

But it doesn’t actually appear on the application’s home page. Since it’s such a feature of the application, I think it should be highlighted within the home page as well.

 

UX Pain Points

After identifying the answers to these questions, I created a pain point user flow chart to look at some of the main issues with the current design.

Co-Star - User Flow Chart.png
Co-star - Changes marked.png

  • The most used feature on it is by far the “Birth Chart”. Fans of astrology download the application primarily for that feature.

  • However, the Birth Chart link is awkwardly placed under the heading as “your chart”, and is therefore often overlooked on the page.

  • “Messages”, a feature that is practically never used, is featured in the top right corner. There is no reason to send anyone a message through the application, and therefore this is an absolute waste of a crucial menu space.

  • The way the application is segmented with grey and white is arbitrary and confusing.

  • The most important and interesting part of the “Friends” feature is seeing who you are most, and least, compatible with. But with this design you have to click into each name to see that information, which is clunky and time consuming.

  • The “All Updates” is misnamed and confusing as a way to get to your full daily horoscope.

  • “Add” in the top lefthand menu corner is misnamed & confusing (“add what?”)

 

The Redesign

Co-star - Single [New].png
 

The redesign focused on rectifying the previously listed pain points, while keeping the app’s original aesthetic and design intact.

  • Highlighting the “Quote of the day”

  • Highlighting the Daily Horoscope, and adding it to the homepage

  • Simplify the colors / boxes, improve the overall aesthetic

  • Add “birth chart” to the upper menu, and clarify “add friends” instead of “add”

  • List out your top four “Most Compatible” and “Least Compatible friends, and leave the full list under the “add friends” section, instead of the home page.

These changes simplified the application and made it more enjoyable and interesting for the average user, while emphasizing the parts of it that are most popular and making them easy to access.

This design will draw people into the application more frequently, encourage them to add friends and potential partners to it to see their “Compatibility”, as well as give them control over which aspects they want to see more or less of.

 

Full Wireframe Comparison of Redesign

New Design

Old Design

Co-star - Long Temp.png

CONCLUSION

The redesigned aspects, such as highlighting the “quote of the day”, adding in a automatic “compatibility” feature, and making your “friend” page and “birth charts” pages more accessible, greatly increased the user’s engagement with the application.

It highlights the social aspects as the application, encouraging people to add more friends to it and therefore grow their user base, as well as log in and engage with the app more frequently.

After completing the redesign, we would move from wireframes into a full prototype, and then potentially show the work to the client for approval. This may lead into an A/B testing phase to make sure the design was actually helping to facilitate more use and ease of use of the application.