Work From Anywhere But Home

Web directory of NYC’s best work-friendly cafés

As a dedicated cafe enthusiast in New York City, I often find myself savouring a cup of matcha while diving into my latest design project. My love for exploring different cafes inspired me to create this website, serving as a comprehensive directory for those seeking work-friendly cafes in the city.I leveraged my extensive cafe knowledge to evaluate each location’s suitability for working, creating detailed notes for each cafe entry. The website features a robust filtering system, allowing users to search cafes based on specific criteria and location. It also includes a search function to find specific cafes by name, making it easier for users to discover their perfect work spot.

VISIT: www.workfromanywherebuthome.site

YEAR: 2024

SKILLS: Web Design/Development, UI/UX, Branding

TECH: HTML, CSS, JS, JSON

Quick walkthrough of the website on desktop

Responsive UI for web on mobile

Style guide and unique assets

Moodboard and visual concept

Enhancing Personalisation & Usability with JavaScript

DYNAMIC RECEIPT WITH USER DATA

Captures and displays a custom name input to add a personal touch.
Auto-generates date details to track visit timestamps.
Counts and records unique site visits, using localStorage to persist user data across sessions.

Challenge: Ensuring unique visits were accurately tracked across different browsing sessions.
Solution: Used localStorage to store and retrieve visit counts efficiently.

JSON FILTERING SYSTEM

To help users refine their cafe search, I built a JSON-based filtering system that organises cafes by key attributes such as location, amenities, and ambiance.

Challenge: Optimising performance when handling large datasets.
Solution: Implemented efficient array methods (filter(), map(), reduce()) and debounced the filtering function to minimise redundant processing.

SEARCH & TAGS

I implemented a real-time search function that allows users to filter cafes using tags (e.g., "Wifi," "Open Past 6pm," "Meals").

Challenge: Creating a seamless multi-tag filtering experience.
Solution: Used a Set-based tag system that dynamically adjusts search results based on active selections.

DESIGN & UX CONSIDERATIONS

Ensured real-time feedback for users by displaying active filters instantly.
Designed aesthetic micro-interactions for smooth transitions.
Focused on accessibility, making the input fields keyboard-navigable.

TAKEAWAYS & NEXT STEPS

Expand the search system with geolocation-based filtering.
Optimise receipt rendering using p5.js or SVG for more engaging visuals.
Integrate server-side data handling for a scalable experience.

I shared my process behind Work From Anywhere But Home at Index Space’s Creative Showcase!