Responses by Dropbox Design team
Background: When creatives come together to share their ideas and knowledge, we all benefit and grow. We wanted to contribute to the design community in a real and meaningful way, so we built a new design site that acts as a generous resource for designers. The site helps creatives learn about the Dropbox Design team and find work on “Jobs”; read our latest thoughts and ideas on brand, writing, and research through “Articles”; discover how we show up at “Events” through speaking engagements, hosted meetups, and community events; and download our design tools under “Tools + Kits.”
Design: Features for the site were developed based on community research; participant responses guided our content strategy and thereby our feature set. For the site’s artwork, Gabrielle Matte and Rita Troyer led the Dropbox Brand Studio team in creating assets for the Topics, Tools + Kits, Events, and About pages. For articles, Gabrielle asked artists from around the world to show how they see the extraordinary in the mundane. This approach enabled us to create editorial artwork with a diverse, global group of artists. The interface design creates a complementary experience for the content; using the Dropbox color pairing system as the primary means of connection, each image and interface color completes a color pairing. Photography production was led by Ryan Wilson.
Favorite details: A resource we’re especially excited about are the Culture Kits, which are free tools teams can download from the site to help shape culture. The kits are meant to help teams foster psychological safety, so every team member feels seen and heard. The resounding idea behind these kits is that when people feel supported, they can make creative contributions that advance the mission and work of their team. This body of work is rooted in deep design research led by Jennifer Brook, with design support from Beauty Nazzaro, Kelly Arce, Sloane Fuller, and Olivia Luo, and artwork by Justin Tran and Fanny Luor.
Challenges: Rather than go through another agency, we decided to build the site in-house, so we knew that we had to work quickly and use our team’s time and skills wisely. We scoped the engineering and design work within a five-month target, delivering on the day we had set out to hit. Estimates are tough to get right, especially when you’re building a full tech stack from the ground up, so in that sense it was a miracle project. On top of that, this project was a deep collaboration between many creatives at Dropbox. The most valuable lesson we learned through this project was finding a way to enable everyone to add their voice to the choir while keeping a rhythm across such a complex site. The project was led in partnership by Design Program Manager and Editorial Lead Michelle Morrison, Brand Producer Kristine Sale, and Technical Program Manager Jules Lajeskie.
Navigation structure: Our main navigation was designed to expose, at a high level, the content available within the site. Each content item falls under one editorial topic. You can click on “Creative Culture,” for example, to find articles, events, and tools and kits related to the topic. We used text “eyebrows” above each content item to act as an additional mechanism for navigating the site’s content. On filter grid pages—where content can be filtered by type, topic, and tag—we mimicked the alignment tool seen most often in design software as a playful nod to our users and their preferences. Interactive team included Rita Troyer, Theresa Ma, Axel Lööf, and Davy Rudolph.
Technology: We built the site with a tech stack made for web developers, used an isomorphic design with server-side React and deployed a custom TypeScript interface script for use with Contentful. We decided to use Amazon’s AWS Lambda running a serverless Express app, and we’re monitoring traffic errors with AWS X-Ray, which provides detail reports about requests from Express and additionally monitors reports from CloudStack. Assets are simultaneously uploaded to S3 using CloudFront to employ edge caching and improve site performance. Engineering was led by Kyle Ribant, with contributing engineers including Chris Berry, Tanner Godarzi, Dean Pogni, Andrew Mundy, and engineering manager Chris Lufer.