Project Overview
Lumen on Ninth is a modern student housing community offering vibrant, amenity-packed living spaces designed for an elevated university experience. Located on Ninth Avenue just steps from The Ohio State University (OSU), the apartments combine cutting-edge amenities with elevated style for a supercharged housing experience. The website needed to reflect this elevated, tech-forward living experience while providing prospective residents with all the tools necessary to explore, tour, and lease effortlessly. I designed a fully custom website that incorporated animations, interactive features, and a clean aesthetic to showcase the community's premium offerings.
Scope of Work
Full Custom Website Design
Interactive Features (Virtual Tours, Google Maps Integration)
User Experience (UX) Enhancements with Animations
Mobile Responsiveness
SEO-Friendly Structure
Challenges
Maintaining Visual Consistency Across Multiple Features:
With several interactive features like virtual tours, floor plans, and Google Maps integration, it was a challenge to maintain a cohesive visual language that balanced functionality and branding. Careful attention was given to typography, animations, and color consistency to create a unified experience.
Optimizing Animations for Performance:
Animations were key to enhancing UX, but ensuring they didn’t hinder site performance required careful optimization. This included minimizing loading times for animations and ensuring smooth transitions across devices.
Designing for Mobile Without Sacrificing Functionality:
With a mobile-first audience in mind, translating the full experience—including interactive floor plans and virtual tours—into a responsive design required creative problem-solving to maintain usability and visual appeal.
Showcasing Comprehensive Information Without Overwhelming Users:
Balancing the large volume of content, such as amenities, floor plans, and FAQs, while keeping the layout clean and digestible was a key challenge. The use of white space, collapsible sections, and animations helped streamline the experience.
Coordinating with Third-Party Tools and APIs:
Integrating virtual tours, Google Maps, and other third-party tools seamlessly into the design required troubleshooting and collaboration to ensure everything worked harmoniously.
Design Solutions
Dynamic Animations and UX Flow:
To create a visually engaging experience, the website incorporates subtle animations and clean, directional lines that guide the user through each section of the page. These interactive elements enhance usability by naturally directing the user’s eye toward key information, such as amenities, floor plans, and contact options. For instance:
Scrolling Lines: Linear visual elements highlight transitions between sections, fostering smooth navigation.
Hover Effects: Interactive animations on buttons and images encourage exploration and engagement.
Micro-Animations: Subtle movements within virtual tours and amenities sections bring the content to life.
Pages and Features:
Home Page:
A clean, visually striking layout introduces Lumen on Ninth with bold headlines, curated visuals, and clear calls-to-action (e.g., Schedule a Tour, View Floor Plans).
Virtual Tours:
Fully interactive 3D tours allow users to explore the units and community spaces. The seamless integration of virtual tours enables prospective residents to envision themselves living in the space from the comfort of their own home.
Amenities:
Features were categorized and visually broken down for clarity, with icons and animations highlighting offerings like Bluetooth showerheads, whole-home automation, and the rooftop pool.
Floor Plans:
Interactive floor plans with hover animations showcase unit availability, pricing, and layouts, making it easy for users to explore their options.
Location Page with Google Maps Integration:
A custom-designed location map paired with Google Maps API gives users instant access to nearby attractions, dining, and campus landmarks, emphasizing the vibrant High Street area.
FAQ Section:
Organized with dropdown animations, this section provides clear, concise answers to common leasing questions, improving user satisfaction and reducing inquiries.
Contact Page:
The contact page is optimized with a simple form, direct links to leasing inquiries, and dynamic visuals to maintain engagement even in utility-focused areas.
Mobile Responsiveness:
The site was designed to perform seamlessly across devices, ensuring that all animations, interactive features, and visuals are fully optimized for mobile users.
Brand Integration:
The website design stays true to Lumen on Ninth’s branding by leveraging its color palette, typography, and vibrant photography. Modern type treatments, paired with bold headers and inviting imagery, convey the community's youthful and energetic vibe.
Results
The custom website design has positioned Lumen on Ninth as a premier student housing option in Columbus. Key outcomes include:
Increased Engagement: Improved user journey with animations and an intuitive layout leading to higher session durations.
Streamlined Leasing Process: Interactive floor plans and virtual tours simplify decision-making for prospective residents.
Enhanced User Experience: Directional animations and responsive design provide a cohesive experience across all devices.
What I Loved About This Project
This project allowed me to combine clean design principles with interactive animations, creating a truly immersive experience for users. I especially enjoyed finding creative ways to incorporate directional elements, guiding users seamlessly through the site while making the content both functional and visually captivating.
