Inspiration

Building a designer-curated neighborhood guide

View all posts

When we moved Hyperakt to Brooklyn’s Gowanus neighborhood, we were so excited by all the new-to-us restaurants, coffee shops, bars, and creative spaces. Our Senior UI/UX Designer Eric Fensterheim had the idea to make a simple, user-friendly neighborhood guide.

Inspired by designer-curated guides like Scouted and Wallpaper, we set out to create On the Grid: a reliable resource that captures the true essence of the places we love through beautiful photography, candid descriptions, and design-driven curation.

Here’s a look at how the project started, how we’re growing it, and what’s next.

Start small, but think big

Preliminary sketches for On the Grid.

Preliminary sketches for On the Grid.

On the Grid launched with just one neighborhood, but it was built with expansion to other neighborhoods in mind. We first launched On the Grid in April 2015 with Gowanus, Brooklyn. Powered by Siteleaf, a nimble CMS with a super user-friendly interface, adding content to the site was a breeze.

“Start small, but think big.”

Pushing for the simplest possible interface, we stripped navigation down to the essentials and kept our writing short and sweet. As opposed to most other city guides, we wanted the star of the show to be the reportage style photography.

Starting out with just 2 templates, the neighborhood grid page and the individual location page, we settled on navy blue as a neutral, constant color for all typography and iconography. This would allow future curators to have the freedom to choose different background colors should we expand the site to more neighborhoods.

By curating Gowanus ourselves, we prototyped the idea and tested processes so we could effectively support others helping us expand to new neighborhoods. The curation of Gowanus effectively set the tone for all future content.

“Once you build a product, it’s 99% about community management and engagement.”
The Gowanus neighborhood guide showcased Hyperakt’s favorite places to eat, shop, hang out, and get inspired through reportage style photography and our own honest impressions.

The Gowanus neighborhood guide showcased Hyperakt’s favorite places to eat, shop, hang out, and get inspired through reportage style photography and our own honest impressions.

On the Grid was designed to look beautiful on giant screens as well as tiny ones.

On the Grid was designed to look beautiful on giant screens as well as tiny ones.

The site’s simple user interface makes it easy to browse through the local gems. Users can explore a neighborhood through the grid view or map view. Locations can also be filtered down by type.

The site’s simple user interface makes it easy to browse through the local gems. Users can explore a neighborhood through the grid view or map view. Locations can also be filtered down by type.

On the Grid’s brand was designed to be highly structured, yet playful and dynamic, just like the content on the site.

On the Grid’s brand was designed to be highly structured, yet playful and dynamic, just like the content on the site.

Iconography helped establish the visual style of the site, relying primarily on 2px stroke simplified illustrations.

Iconography helped establish the visual style of the site, relying primarily on 2px stroke simplified illustrations.

Growing from the inside out

As soon as On the Grid launched, we started asking our favorite NYC creative companies to join us by representing their own neighborhoods. Fortunately, a few companies took us up on it and helped convince us that we weren’t the only ones who thought this would be a worthwhile endeavor.

They each took on other neighborhoods to curate, which meant that we had to rethink our landing page to allow our users to access them and prepare our CMS for new users to upload their own content.

In designing the city landing page, we had the opportunity to project greater ambitions and show other designers that we were set up for including every creative neighborhood in NYC. We also wanted to think ahead about the possibility of expanding to other cities. We loved the idea of illustrating city travel posters and featuring them prominently.

“Money is not the most powerful incentive.”

Since neighborhoods would all be represented by different colors, we settled on the navy blue for the background color. We built on the illustration style of the icons to create the Empire State Building, which occupies a substantial amount of the page and stays fixed in place.

The right side of the page scrolls to display color tiles representing each neighborhood and crediting it’s curator. Working out the responsive states of the site at different screen sizes and making sure this system worked well for cities with different numbers of neighborhoods were the greatest challenges we had to overcome here.

The city landing page’s split screen design allows us to give cities a grand cover while also allowing access to its diverse neighborhoods.

The city landing page’s split screen design allows us to give cities a grand cover while also allowing access to its diverse neighborhoods.

If you build it, they will come

We launched the NYC landing page in May with the East Village, by The Original Champions of Design. We also featured tiles with release dates for the neighborhoods we knew were in the works: Little Italy and Nolita by Barrel, and South Street Seaport by Wasabi Rabbit.

From that point forward, announcing future neighborhood release dates became a key engagement tactic for On the Grid. By building anticipation for content we didn’t yet have published, we were able to show our ambition for the site and keep users coming back to see what’s new.

As we began releasing more neighborhoods, On the Grid received more attention from the design community, and the buzz inspired creative companies and individuals to reach out via email and Twitter to volunteer to curate their favorite neighborhoods.

“Build anticipation for content you don’t have yet so users return to see what’s new.”

In a matter of weeks we had commitments from talented local designers we’d vetted to curate over 20 neighborhoods! We quickly set up a neighborhood release schedule, a social media plan, and a curator’s guide to support all of our new collaborators.

We’ve been releasing new neighborhoods weekly ever since.

On the Grid’s color palette grows organically as new Curators put their mark on the site.

On the Grid’s color palette grows organically as new Curators put their mark on the site.

The world beyond New York City

The more neighborhoods we published in NYC, the more we started hearing from designers all over the world who wanted to bring On the Grid to their cities—this had been our dream for the project from day one. Launching in multiple cities required additional UI/UX changes to the site.

We approached the design of the world landing page (our current homepage) similarly to how we designed the New York City landing page. The left side is fixed and welcomes you to the site, while the right side allows you to scroll through all of the available and upcoming On the Grid cities.

Since all city tiles are the same navy blue color, the big differentiator on the world landing page is the unique city illustrations.

“Design modularly so quick expansion is possible.”

In the span of a month, our team illustrated handpicked landmarks for over 100 cities around the world to which we plan to bring On the Grid. We also incorporated a new global city menu in the site’s main navigation and dropdown menus at the top of every neighborhood and location page allowing you to quickly jump to a different neighborhood or city.

On the Grid was designed from the inside out, starting with the location profile page and working our way out to the neighborhood, city and world landing pages as the participation of curators grew in NYC and around the world. The entire site currently contains a total of four unique templates.

On the Grid was designed from the inside out, starting with the location profile page and working our way out to the neighborhood, city and world landing pages as the participation of curators grew in NYC and around the world. The entire site currently contains a total of four unique templates.

But adjusting the site’s architecture to accommodate multiple cities wasn’t our only challenge. Expanding to more cities also required us to restructure our community management so our small team wouldn’t get overwhelmed.

Inspired by the Creative Mornings city organizer model, we decided to introduce city ambassadors who, in addition to curating a neighborhood of their own, helped us find the best local curators for each city. This allows us to extend our reach far beyond what it would be if we were taking on every city by ourselves.

Our first city ambassador, TRÜF, led the way with Los Angeles in early July. We made it easy for other potential ambassadors to get in touch by applying directly from the city tiles.

Become an ambassador button image.

Adding “Become an ambassador” buttons on more cities helped make it really easy for more people to express interest in getting involved with the project. It also helped project our ambitions for covering as many cities around the world as possible.

Landing page evolution since April: from neighborhood to city to world.

Landing page evolution since April: from neighborhood to city to world.

What’s next?

It’s been 5 months since we launched On the Grid. We’ve published 60 neighborhoods (each featuring 25 places on average) in 18 cities. There are over 70 On the Grid ambassadors and over 200 curators who are now working to get their respective cities On the Grid, with more added daily.

Our growth plan for the next 12 months is even more ambitious.

Our growth plan for the next 12 months is even more ambitious.

Available neighborhoods around the world.

Available neighborhoods around the world.

As the On the Grid community of ambassadors, curators, and everyday users continues to grow, so does our vision for the project. We’re currently prototyping a mobile app that we hope to launch in early 2016.

On the Grid App early prototypes.

On the Grid App early prototypes.

We’re designing products featuring the dozens of city illustrations we’ve created for On the Grid, and soon we’ll launch the On the Grid Gift Shop. Leading off, we’ve just released a screenprinted poster that features 100 On the Grid cities, available for purchase now.

18” x 24” On the Grid 100 Cities Silkscreen Print.

18” x 24” On the Grid 100 Cities Silkscreen Print.

We’re also exploring partnership opportunities with several major brands, which we hope will expand On the Grid’s audience.

Takeaways

Author

Marianna Fierro, Designer at Hyperakt
Hailing from the hills of Udine, Italy, Marianna began her adventure in the States as a foreign exchange student. After graduating with a degree in Visual Communication Design and Photo Illustration at Kent State University, Marianna moved to New York. Her passion for exploring cities, trying new food and making friends shaped her into the ideal On the Grid community manager and product developer. At Hyperakt Marianna is a designer who juggles between design, photography, and putting a smile on everybody’s face.

Join over 3 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 3 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 3 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 3 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 3 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.