Loading ...

Responses by Hello Monday.

Background: The aim of this project is to expand upon the definition of what it is to be an American. To not pin it down to a single place, but rather, to remember that America is an idea, a country founded by immigrants who valued life, liberty and the pursuit of happiness. Lyft’s immigrant drivers have their own individual stories to tell about what it means to be an American. This project spotlights a few of them, giving them a platform to share their experiences and challenge others to rethink what it means to be a part of this country.

Design core: The beautifully executed content from Even/Odd Films gave us so much to work with. We knew we wanted to create an emotional experience by highlighting the people within the stories from the very beginning. The smart use of video, together with the photography and design, is what makes the site feel so immersive.

Favorite details: It’s hard to choose a single detail. There are so many pieces that we’re quite proud of, from the simple preloader to small graphical elements like the handwritten scribble. The flag introduction was quite challenging—even though it seems fairly simple. We’re also really pleased with the overall flow from landing on the website to navigating through one story on to the next.

Challenges: The introduction was the toughest challenge we faced in creating the project. The drivers’ stories are all so important to tell that we needed something eyecatching to pull users in while enabling them to quickly enter the individual narratives. After multiple concept iterations, we landed on the flag concept—what we call the “fabric of America.” The quick animation prepares users for what they’re about to see while emphasizing the idea that America is made up of the people who live here.

Navigation structure: Creating an immersive way to access the stories without being cumbersome was important to us. We conceptualized the idea of a sneak peek and decided on featuring video trailers for each featured story on hover. It was a way to set the tone for the user when browsing through the stories and gave them a preview of what each story was about.

Technology: The site is built with vanilla ES6 JavaScript that uses a lightweight webpack configuration for building. It’s a purely client-side application with no server-side languages involved. We built an internal command-line tool that uses Chrome Headless to prerender the site for better search engine optimization.

Anything else? The 3-D flag portion of the site is built with OGL, a minimal WebGL framework that made it easy to create a 3-D environment with little overhead. It’s also built with custom shaders and instanced buffer geometry for optimum performance when dealing with all the flag tiles for the intro effect.

take.lyft.com/citiestalkback

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In