NOCTA
DATING APP | FIGMA | UI | UX
Love is not a one size fits all solution, and neither should the apps that help you find it. Nocta recognizes the many problems creatures face when looking for love. Whether it’s feeling isolated, unconsidered, or unwelcome, most dating apps fail to fill niche roles.
Nocta was developed to help Mothman find love through a platform that feels inclusive, welcoming, and dark enough not to hurt their eyes at night. Emphasis was placed on creating an intentional app by prioritizing self-expression, accessibility, and inclusivity, Nocta helps all users approach dating with curiosity and a dash of mystery.
The Challenge
RESEARCH
I began this project with Competitive Analysis with other apps: Tinder, Hinge and Bumble. I took note of features that felt inclusive and relevant to my app and ones that didn’t. Utilizing this information I created a User Flow (seen below) and did some basic wire framing to help guide the development of icons, branding and overall flow. This also helped me identify any overlap or pain points for the development and design.
I also created a User Persona for Mothman himself to identify any pain points he would potentially have with other apps and dating in general. His main struggles were with accessibility in a lack of dark mode apps, a lack of inclusive options and too rigid matchmaking techniques. These are the main things I focused on to create an app that solved these issues.
Research on the man himself was done through the legend and documentaries.
User Flow of the app to guide wire framing and mockups.
Rough wireframes/sketches of screens to figure out user flow, assets needed and components I’d like to create.
DEVELOPMENT
After creating the User Flow and Persona, I knew that one of the next steps would be branding the app as the look and feel was extremely important to not only the accessibility when it comes to Mothman, but also it would help it stand out visually from it’s competitors.
When ideating on this, I started out with something closer to a moth and with a lot of realism. As I developed these I realized that they were not aligning with the brand mission or voice, so I started to distill the moth into more essential information. As the brand evolved, the icons all have overlapping elements and rounded edges, which reinforces the idea of connection and inclusivity, which aligns neatly with the app’s goals of fostering genuine connections.
This style was then applied to all the icons moving forward, including a set of twelve for interests, and four for the navigation bar.
Iterations of the Nocta logo, focusing on style, shapes and weights.
After finalizing the Nocta icon, the other iconography quickly fell into place.
COLOR
Based on the legend of Mothman himself, the color red was intentionally chosen to represent not only his glowing eyes, but it is also the color most commonly associated with love or romance. The dark blue is meant to represent the dark of night. When overlaid with red, it creates purple.
When creating this app, I utilized a wide range of colors in order to have sufficient contrast between the background, type and surfaces. Utilizing Figma’s Token and Variable features, I assigned different color values to different variables such as surfaces and text to apply as styles for anything as needed. This helped keep everything consistent and I could change a color globally at any time. Additionally, all colors are adhering to WCAG standards.
All final screens from sign up to app usage.
Screens
All screens were created utilizing the research phase of this project, the User Flow and User Persona guided the entire design phase. In order to solve the main issue, which is the lack of inclusive language and settings in most dating apps. Solving that, I created multiple options for their identity and what they’re attracted to as well as a page for interests! This allows users to find better matches faster and also express themselves more authentically.
The secondary problem Mothman faced was a rigid matchmaking system so I got rid of that entirely! Instead it’s been replaced with a more anonymous system of matching based on shared interests, and location in combination with a customized profile! This removes the need for mindless swiping.
Potential Ad application focusing on Nocta’s brand