Editor’s Note: Today’s post is a Q&A with Maren Sigson, a Software Engineer–and a Women Techmakers member with Lazer Technologies–and Michael Elkeslassy, a Creative Director with Laetro. They share how they created an immersive map experience to celebrate the stories of Women Techmakers Ambassadors.
Women Techmakers (WTM) is Google’s program for women in technology to find community, amplify their individual brands, and discover resources. Every year Women Techmakers identifies and recruits Ambassadors for their program who play a key role in promoting the community by hosting events, giving speeches, creating content, and mentoring other women in tech. To celebrate the inspiring stories of these Ambassadors, we’ve launched the Women Techmakers Story Map, an immersive, interactive web experience built with Google Maps Platform.
We sat down with Michael Elkeslassy (Creative Director) and Maren Sigson (Lead Developer, WTM Member) to understand more about the inspiration and development of this experience.
Why did Women Techmakers choose a map to tell these stories?
Michael: Since the arrival of the Google Maps APIs nearly 20 years ago, developers have really led the way in pushing the boundaries of how we think about maps. How we use maps has evolved profoundly, we’ve gone beyond just a tool for physical navigation to content hubs. Now with new Google Maps Platform APIs and capabilities, you can go even further, crafting map experiences that enable immersive storytelling.
And immersive was exactly what the Women Techmakers team was looking for. They were collecting all of these amazing Ambassador stories, and wanted to show not just where their Ambassadors are located, but bring people into their world and their stories.
How did you approach the build?
Maren: As a Women Techmakers member myself, being able to develop a project that showcases the experiences of other women in my field was just fantastic. These are really important stories, and giving people access to them in an immersive way will help more and more present and future Women Techmakers learn about how to navigate the world of tech.
Michael and I worked closely with the Google team to storyboard how to best bring people into these stories. It felt almost like we were making a movie as much as it felt like developing.
While we showcase a selection of Ambassador stories at launch, we wanted to build it so we could add more and more stories over time. First we determined what type of features would be the most useful based on the type of content we would feature.
Michael: One key challenge was figuring out how to house all of the content in one place. Often, you have to have separate experiences for each type of content, whether that’s video or geospatial. We came up with the concept of a “Story Map”–a content hub that could feature stories in both video and written formats. We knew we wanted to also showcase the resources that the Ambassadors feel are especially useful for Women Techmakers like them. Some are physical locations and some are digital locations, so the design had to solve for that as well.
Maren: These types of resources are really important. They’re like a list of top tips from experts in the field. They’re exactly the type of institutions and organizations I wanted to know about when I was getting into software engineering–and I still do!
What programming languages, frameworks, and/or libraries were essential in building this project?
Maren: We made the most of Google technology. The Story Map is hosted on Google Cloud. From Google Maps Platform, I used the Maps JavaScript API, Places API, Photorealistic 3D Maps from the MapTiles API, and the Street View service within the Maps JavaScript API. I also used Cesium for the globe, polygons, and camera movement. Google provides a lot of useful information around how to make the most of Cesium in their API documentation.
Did you have a favorite?
Maren: JavaScript–there’s so much you can do with it now. If you don’t know JavaScript, I would absolutely recommend people add it to their coding repertoire. You can build front end and backend solutions, and geospatial solutions too. JavaScript was the main language I used to tie everything together in this experience.
What challenges did you run into when building this experience?
Michael: Initially, one of the biggest challenges was determining not just how to best feature the different aspects of the stories, but also what not to feature. You can include so much in a map now that it’s a true storyteller medium. Any storyteller will tell you that what you exclude can be as important as what you include.
For example, while these Ambassadors are leaders and stalwart supporters in their local Women Techmakers’ communities, they also recommend resources that are outside of their location. We decided that we wanted to be able to show local resources but also share links to online, location-less resources.
Maren: Applying the 3D tiles was remarkably easy, but I hadn’t used Cesium before, and that took me a little while to get the hang of. But after a few tests, I felt really comfortable with it and how it works with the 3D Tiles API. I have a sound understanding of JavaScript which allowed me to utilize all of these tool sets.
For example, for the orbiting effect around the 3D tiles, we need to mathematically determine the new camera position based on how much time had passed from the last frame and where we were in the curve of the camera path relative to the building. It took a little time to refactor and then understand how Cesium treated data sets.
So it really was a bit like movie making, with 3D perspectives and camera movements. We talked a lot about how to “bring people in” or what perspective to showcase within the map. As Michael mentioned, with maps we can change perspective and showcase content in so many ways. A big challenge was designing a way to show relevant content as the user navigates through the experience. We don’t want to overwhelm people with content, but make it easier for them to go step by step, and go backwards and forwards as they are experiencing both a physical and digital space.
How long did it take to build? What else would you have done if you had more time?
Maren: It took about two weeks of development, and then some QA. It was fast. Of course, I would always like more time, but the Google Maps Platform documentation and approach is really easy to work with. We iterated on a few tests to make sure the perspective matched the design, but it was speedy–and I was the only developer.
Michael: The design took about 6 weeks. Once we figured out exactly what resources we wanted to share, it came together pretty quickly. We spent a good amount of time to really get the illustrations right, and worked carefully with our illustrator Genevieve St. Charles to develop a style that captured the Ambassadors in a simple but elegant and engaging way. We actually came up with the Story Map idea after a few rounds of design, and then everything fell into place.
What are key lessons you learned along the way?
Michael: Think beyond the map. There is so much you can create with a map and so many ways the idea of the map can be transformed, we now don’t think anymore “what experiences can we bring into a map” but rather “the map is the experience.” If you can imagine it–video, audio, new worlds, VR, AR–the map is now a palette for all of those.
Maren: I also think developers can start to take part really early in the design phase. I totally agree with Michael that a map is really a palette, and when you know what the APIs can do, developers can really help guide the creative process too, and come up with new, amazing ways to showcase content and engage audiences.
What advice would you give to developers building Google Maps Platform?
Maren: If you haven’t had much experience with geospatial APIs and platforms, don’t be intimidated. There is a small learning curve, but it’s really fun once you get into it, and there are so many ways you can apply the APIs. We’re already thinking of new experiences we can bring to life. I would recommend experimenting with the Photorealistic 3D Map Tiles utilizing Cesium as the tiles renderer. It’s really exciting to be able to work with a 3D interpretation of a physical space. I could follow the documentation and then it all came together pretty seamlessly–it’s quite powerful.
And if you’re a woman in technology, definitely join the Women Techmakers community. As a Women Techmakers member, the best part about this project for me was to hear all of these inspiring stories, and to create something where people could really feel the strength and support of such a useful community.
