Auralis

Tools Used: Figma | UI Design | Interactive Prototyping

This project was the capstone assignment for an advanced interface design course, focused on building a fully realized high-fidelity prototype for a digital product. The objective was to apply key visual design principles, such as layout, hierarchy, spacing, and consistency within a defined theme, platform, and design system.

Project Scope:
I selected to do a Mental-Wellness Tracker and designed a mobile interface and gave the name Auralis (375×812px) consisting of 15+ fully developed screens. The goal was to create a polished, interactive experience that clearly reflects the app’s brand and functionality through intentional design choices and reusable components.

UI Style Sheet: 

A defined visual system with color palette, typography scale, icon style, spacing system, and reusable UI components (e.g., buttons, inputs, modals, navigation).

Interactive Components Page: 

Variant-based elements such as button states, toggle switches, input fields, and tab controls that reflect real user interactions and were reused across screens.

Screen Designs + Prototype: 

A fully linked prototype built in Figma that includes welcome/onboarding, login, dashboard, detail views, settings, success/error states, and task flows.

Interactive Components: 

Built reusable and stateful components using Figma 

Variants, including:

• Button states (default, hover, pressed, disabled)

• Icon buttons, toggles, filters, and form inputs

• Components reused consistently across screens
  
  

High-Fidelity Prototype (15 Screens)

Designed a fully interactive user journey, including:

• Onboarding + welcome screen

• User login/sign-up

• Main dashboard with an interactive map

• Points of interest (POI) details and route suggestions

• Profile and app settings

• Success and error states