It’s hack week at BuzzFeed, and this has been a particularly special one. This summer’s hack week coincided with BuzzFeed’s global service week, giving members of the technology team the option of hacking on projects for nonprofits. After a few weeks of research, Cap Watkins, VP of Design put us: Product Designers Emily Brick and Lindsey Maratta, and Director of Engineering Swati Vauthrin in touch with TechGirlz, a nonprofit that aims to close the gender gap in tech by developing fun and educational workshops for girls.
TechGirlz helps expose young women to the diverse career opportunities within tech – their courses range from Podcasting and Photoshop to Ruby on Rails and Programming a Raspberry Pi. It’s a grassroots style initiative, where anyone can run a hands-on workshop, and the TechGirlz team is willing to help each instructor out along the way. They’ve put all of their workshops online for free, hoping to grow the number of participants and instructors globally. Even more remarkable, through their weeklong Entrepreneur camp, based on the Lean Startup methodology, they encourage young girls to think about the world through an innovation mindset.
As a team, we were excited to find an opportunity to help out a group of fellow female technologists on an initiative to educate future women in tech. We held a kickoff call with TechGirlz’ founder, Tracey, and community outreach manager, Sarah, to get a deeper understanding of their needs and challenges and determine where we could make the most impact. Their enthusiasm and passion for the cause was infectious, and we left the call with enough energy to carry us through hack week and beyond.
The Challenge
While TechGirlz has a built a solid digital destination for information about their program and details regarding the workshops they offer, there was a big disconnect with the user experience. Some of the challenges we saw included:
User information collection: Users were taken from the TechGirlz website to an external web form in order to fill out required information to request access to the workshop plans. They then needed to wait for an email with details on next steps.
Access to workshop materials: They were only available via a Google Drive that needed the appropriate permissions. This felt disconnected from the rest of the website.
Analytics: There was very little tracking available to understand who was accessing workshops and what workshops were the most popular.
Communication is key
To have a successful Hack Week project (or any project for that matter) we needed to put in place good processes for collaboration. We held our kickoff call on Day 1 and scheduled a recurring virtual standup each morning to check in on progress, answer questions, and define next steps with the Philadelphia-based TechGirlz team.
Within our own team of hackers in NYC, we self-assigned priorities and responsibilities daily, and checked in regularly in our fresh slack channel (when we drained our laptop batteries and weren’t hacking together IRL). Initially, we documented these priorities into a proposal to share with Tracey and Sarah. This provided an artifact for us to compare our work with on Friday to see if we met our goals.
Most importantly, we wanted to hand off something valuable for the long term. We could hack something together in a week, but the TechGirlz team should feel comfortable working with it moving forward. We put together a document that detailed a long term plan of action and future recommendations for useful improvements.
From Product Owners to Partners
We quickly experienced the ups and downs of partnering with an external organization, a role we hadn’t played in years. It was their product, their tech. The TechGirlz site is completely managed via WordPress. With that, we needed to summon our WordPress memories and ignore our bias for working in Solid, the open source rapid prototyping framework that we developed here at BuzzFeed. Even if a standalone site was what they originally had in mind (and would be easier on our side), we knew in the long term we wanted them to be able to immediately use and scale whatever we handed off.
Hackin’ Away
Thankfully they had set up a staging environment, which meant we (probably) couldn’t break their production site! It was helpful to compare our changes with the production instance to determine if bugs or errors we came across were ones that we introduced. Encountering these small front end issues also meant we had to address fixing them – how far in were we willing to go, and were small improvements worth compromising our week’s roadmap? Standups came in handy to call these to the attention of our remote teammates, and though we ended up making some tweaks, we reluctantly refrained from undertaking any full scale code refactor.
A benefit of working in their Wordpress environment was that for any feature we wanted to add – there was a plugin for it! We were able to take advantage of the active Wordpress developer community to find several options for authentication. That, combined with a little bit of PHP knowledge, meant we could customize the plugins to suit our own needs.
Contributions
We knew we needed to introduce the concept of authentication coupled with user management. This would allow potential instructors to get information and download materials all in one location, after providing basic information that would give TechGirlz valuable insights and metrics about their product and users. We decided on the WP User Manager plugin because it provided a straightforward plug-and-play user interface. Additionally, there were many paid upgrades available for future integration with SalesForce and MailChimp. In the end we delivered:
Integration with user management – the ability to create users, manage profiles, and eventually track user behavior.
Accessible downloads on the site depending on whether you were logged in, with a call to action for unregistered users to sign up.
Updates to back-end PHP for some custom user integration logic.
Front-end bug fixes including an improved navigation to support the user avatar linking to login and profile.
A plan of action for further user engagement and tracking, as well as a recap of edits we made to their code, down to the line numbers.
Lessons Learned
This was an amazing learning and collaboration experience for us. We’re so grateful to have been connected with the awesome team at TechGirlz. Of course, no Hack Week recap would be complete without some educational soundbytes:
Start with questions, not answers: TechGirlz came to us with a feature to implement – a lightweight external interface for displaying and accessing workshop materials – but we dug deeper to identify the root question, “How might we organize and present workshop materials in a way that scales, while gaining actionable learnings about users and content?”
Know your users: We threw around ideas for authentication that included social login, Google Auth, and others. Given that Tech Workshopz in a Box are free and open source, we didn’t want to restrict access to them in any way. We instead found an approach that required nothing more from the user than the existing third party survey – a name and email address.
Balance your investments: In four short days, we needed to invest time and energy into the right solutions. We could have spent all four days creating the exact authentication solution we wanted from scratch, but that would mean a more difficult handoff and path to implementation. Rather than reinventing the proverbial wheel, we invested several hours into researching and customizing the right third-party options, and several more hours documenting our work and our recommendations for the future in order to provide an easy transition back to the hands of the organization.
Identify and execute quick wins: We had to make compromises to make progress. Using third party authentication meant we gave up some flexibility, but we gained security, easy integration, and time. Addressing a previously broken navigation with small scale solutions (hide an underutilized search on mobile), meant avoiding a more complicated CSS refactor.
Next steps:
Be on the lookout for a TechGirlz workshop in the near future, coming to a BuzzFeed [NYC] office near you and hosted by yours truly! And in the meantime, learn more about TechGirlz at TechGirlz.org and CNNMoney.
