UI/UX Case Study | The Cosmic App
I worked as a solo UI/UX designer, with a primary focus on transforming the Instagram page into an app so that followers on Instagram could become users of the new app. I was responsible for creating interaction designs based on user research and an analysis of the competitive market.
The Cosmic app
Problem
The challenge with astrology apps regarding UX is that they can be overwhelming and difficult to navigate. Many astrology apps offer a lot of information, which can be confusing for users who are not familiar with astrology. Some apps may use complicated language or concepts that are difficult for the average user to understand.
Solution
Designing The Cosmic app, which offers personalized horoscopes and self-discovery insights with a user-centered design approach, aims to provide users with an engaging and satisfying experience that will keep them coming back for more.
The app must be intuitive and user-friendly, with clear navigation and easy-to-read information.
DESIGN PROCESS
Discover Phase
Design Strategy ⟶ Business Opportunities ⟶ Competitor Analysis ⟶ User Research
Design Strategy
The first step is to establish a design strategy. This involves identifying the business goals and objectives of the app, technological constraints, and critical success factors to ensure the app's success in a competitive market.
The goals and objectives of the app:
Clear Navigation: Ensure that the app has clear and intuitive navigation. Users should be able to easily find the information or features they are looking for, whether it's reading their daily horoscope, getting a birth chart interpretation, or booking a personalized consultation.
Visual Appeal: Astrology is often associated with visual elements like star charts and zodiac symbols. Incorporate these elements into the app's design to make it visually appealing.
Accessibility: This includes features like adjustable font sizes, text-to-speech options, and high-contrast themes for users with visual impairments.
Business Opportunities
According to my initial desk research, the app could potentially offer a variety of premium features and services, such as consultations, premium horoscope readings, and astrological merchandise. There are six additional potential products and services that the app could offer:
Competitor Analysis
Competitive analysis helps me to understand the competitive landscape of the market by studying competitors' products. Additionally, I gained insight into user expectations, industry standards, and best practices.
Questionnaire Survey
Before proceeding to create user personas, I need to first understand the target audience better. This survey provided valuable insights into users' preferences, and context, which are essential in designing an app or website that meets their expectations.
User Interviews
I conducted user interviews to understand the needs, behaviours, and attitudes of the target audience to design and develop the app. This valuable information can be used to identify problems, opportunities, and areas for improvement, and to ensure that the final product or service meets the needs of the users and addresses their pain points.
“It would be great if the app could provide insights into my personality, strengths, and weaknesses based on my birth chart. One of the biggest challenges I face when using astrology apps is that the information provided is often too generic.”
“The astrology app I’m using bombards me with too many notifications and messages. I feel overwhelmed and would prefer to have more control over the frequency and type of notifications.”
Define Phase
Affinity Mapping ⟶ User Personas ⟶ Empathy Map ⟶ How Might We
Affinity Mapping
In the Define phase, I focus on prioritizing the features and functionalities of a product based on user needs and preferences. This helps ensure that the design process remains user-centered.
User Personas
Make it stand out
"Verena Nash" is a user persona created based on a specific set of attitudes, goals, and frustrations expressed by interviewees. The purpose of creating this persona is to gain a deeper understanding of the target audience's behavioral patterns and to design a user-centered product that meets their needs.
Empathy Map
After creating user personas and conducting affinity mapping, an empathy map is a useful tool for gaining a deeper understanding of the user's emotional state, gain, and pain points.
Ideate
Paper Sketch ⟶ Task Flow ⟶ User Flow ⟶ Information Architecture
User Flow
It is crucial in the design process as it ensures a seamless and logical navigation experience for app users. By visualising the user flow, potential pain points can be identified and addressed, resulting in an improved user experience.
Design & Test
UI Design ⟶ Prototype ⟶ Interaction ⟶ Usability Test
Design System
The design system of the app, based on these colours and extensive research, aims to create a visually appealing and harmonious user experience. The design system also includes fonts, sizes, and primary buttons. Here, I will explain a bit about the design system's colour scheme and the reasoning behind the choice of colours in the design system.
By utilizing this colour palette, the design system creates a cohesive and visually pleasing experience for users. The combination of Powder Blue, Lavender, Salmon Pink, Warm Latte, and Creamy Beige evokes a sense of calmness, elegance, and comfort, enhancing the overall astrological journey within the app.
Low Fidelity
Low-fidelity design is important as an initial step in the design process before moving on to medium and high fidelity. It allows for quick iteration, focusing on the structure and functionality of the user interface. Low-fidelity designs are low-cost and time-efficient, helping to validate ideas and identify potential issues early on.
Prototypes in Figma
I used Figma to create a prototype for testing some decisions. In the next stage below, I will explain more about my decisions and solutions for this app.
SOLUTIONS
Sign up & Sign in
I have chosen to incorporate these options into the registration process to make it as easy and swift as possible. This includes using clear call-to-action buttons, streamlining form design, and integrating social media options. For example, many users prefer to establish accounts using platforms like Google, rather than registering directly on the website. To address this preference and reduce any inconvenience, I have made these decisions for the app.
Familiarity and Connection
Personalisation with a user's name is important in an app because it creates a sense of familiarity and connection. By using the user's name throughout the app, helps create a welcoming and engaging environment, fostering a positive relationship between the user and the app. This personal touch can lead to increased user satisfaction, loyalty, and overall app engagement.
Home
The home screen provides a visually appealing and intuitive interface, enabling users to access key features and information. The layout is organised to prioritise the most relevant content, including daily horoscopes, personalised recommendations, and astrological events.
Below, you can explore more details about the home screen and my design decisions.
Book Appointment
The book appointment page is designed to facilitate the process for users to schedule consultations with astrologers. The design ensures that the available slots are easily visible and selectable, allowing users to choose the most suitable option for their needs. Additionally, the page includes features such as astrologer profiles, ratings, and reviews to help users make informed decisions.
Unfortunately, the client decided not to proceed with the app's development due to the costs
What do I learn?
During the process, I learned many things, especially how challenging it is to simplify certain terms unfamiliar to some people to make them understandable for any user.
There are points that I noted and learned, which I will apply to my next project:
Simplifying the registration process enhances user experience.
Offering social media sign-up options, such as Google, reduces friction and caters to user preferences.
Personalizing the app with the user’s name creates a sense of familiarity and connection.
Using the user’s name throughout the app fosters a welcoming and engaging environment.
This personal touch can increase user satisfaction and loyalty.
Personalization can enhance overall app engagement by making the user feel more connected to the experience.
