The Beginnings

An 8-week Adventure Designing Developer Documentation at ZURB It’s very rare that a sticker— a Yeti, of all things— would be enough to get someone hooked on a brand. This is not a post about awesome stickers, but rather about the last eight weeks I spent interning at a small (but mighty) Product Design company named ZURB. All because of a great sticker. After a design talk I attended my second semester of college, I scored a Yeti sticker from a ZURBian at the time. The talk itself had been about the future of web design, and how this tool called Foundation (the Yeti was the mascot) could help solve your problems. Naturally I looked more into it, played around with it, and have been using Foundation ever since version 3. It has now matured to Foundation for Sites 6, and remains the world’s most advanced responsive front-end framework. Now almost 3 years later, and one previous application in, I’ve had the opportunity to work with the team behind Foundation: ZURB. Meet ZURB ZURB is a Product Design company based in Campbell, CA. They’re likely most well-known for Foundation for Sites and Foundation for Emails. Both frameworks reflect ZURB’s purpose of changing the way people design connected products and services. Left: Playing baseball before a Foundation Meetup. Center: Getting ready for a Soapbox with Tina Chen of Slack. Right: Me and former design intern Preston. The Project The Foundation documentation (Sites + Emails + Apps) gets around 1 million unique visitors a month. That’s a whole lot of eyeballs. Eager to put my passion and prior experience with using the frameworks to use, the project of improving the docs felt like a great fit to all of us. We set out with a team of 5: 1 Foundation advocate, 1 Lead Engineer, 1 Design Lead, 1 Design Mentor, and myself (a designer/dev). Our goals were mainly to improve site navigation, create more opportunities for community engagement, and improve the experience for new— as well as veterans— to the frameworks. The 8-week Product Design Process Week 1: Competitive Analysis/Audit & In-person Interviews Week 2: Needfinding + Opportunity Sketches Week 3: Ideation Sketches & Lo-fi Sketches Week 4: Hi-fi Mocks Week 5: Visual Design Week 6: Code Week 7: Code & Tests Week 8: Internal Launch Week 1: Competitive Analysis/Audit & In-person Interviews Before the design process could start, we needed to make sure we were all on the same page about who we were building for, and why. This meant getting a better understanding of other the playing field, as well as hearing from current users. Our competitive analysis revolved around the top eight or so responsive frameworks out there. We analyzed the pros and cons of each, and tried to figure out why they made certain design decisions. This allowed us to understand what problems they were trying to solve. Foundation has a lot of unique problems it’s trying to solve, so many of the competitive solutions wouldn’t work for us. We also conducted in-person interviews of current users. This research revealed insights about things like power user usage which would later influence the design process and ultimately give us more confidence about the solutions to the problems we had identified. We also looked into existing data we had to uncover trends and usage. Week 2: Needfinding + Opportunity Sketches A quick sketch around quick-access to commonly visited pages.What we found from research and the competitive analysis: The docs were a great start, and there was plenty of content to work with. There were a lot of great opportunities to connect with other ZURB outlets (i.e. University courses, events, newsletters) and better integrate the ZURB name with the frameworks. We realized that the Docs weren’t as welcoming as they could be, especially for beginners. Making the experience more guided and providing alternative content mediums (like video) we thought would help. Opportunities to implement the idea of ZURB’s motto (“Lead by Design”) Increase community involvement Look into ways to increase awareness + drive traffic to ZURB University courses and studios In the Opportunity Sketches we conceptualized these business and product goals. By keeping the sketches rough and vague, but organized as “buckets”, we were able to communicate the ideas to the rest of the team. Week 3: Ideation Sketches & Lo-fi Sketches After figuring out the problems we were up against and some opportunities we had, we moved into Ideation and Lo-fi Sketches. In classic ZURB fashion, this meant using Sharpies, felt-tipped pens, and highlighters. Using these tools allowed us to iteratively translate ideas into reality. During the Lo-fi Sketch phase, we continued to iterate on the buckets of opportunities and ideations we had previously defined. Lo-fis were the start of the visual design process; it required thought about layout, scale and hierarchy. Week 4: Hi-fi Mocks With the Lo-fis in place, we moved into Hi-fis. This meant bringing the hand-drawn Lo-fis into Sketch and adding more definition to the visuals. One of the biggest pushes in this stage was towards checking the scalability of our design patterns. The classic question in Product Design: Will it scale? By pulling in real content from the current Foundation Docs, we were able to verify and tweak design patterns so that they would work cohesively towards our project goals. Week 5: Visual Design The final official step of our design process was Visual Design. This phase was about creating highly-refined mockups so that during the coding phase there’s no guesswork needed. To accomplish that meant considering the states of different patterns (i.e. empty state, loading, success, error, hover, active, focus). It also meant working with color, typography, space, layout, and finalizing design patterns. Final considerations about responsiveness, accessibility and the overall experience goals were also made. One of the unique things that I really like about ZURB is that the designers all know how to code. This means they typically follow their designs from concept to production-ready front-end code. It’s great because it allows for tighter control of the finished product, as well as an extra phase to tweak the design based on how the real prototype feels. Week 6: Code Now that the visuals had been fleshed out, it was time for the magic to happen. This is one of my favorite parts, personally, as you finally get to “use” what you’ve been looking at for so long. It’s also when you see whether or not the design patterns will really work across browsers and devices. Luckily, we had a great…Foundation… for coding the Docs. A previous ZURB Engineer (Geoff Kimball) created a lot of great components and processes which we were able to leverage. Unsurprisingly the Docs are built on Foundation! Because of my past experience and the flexibility of the framework, Panini, Supercollider, and help from Lead Engineer Kevin Ball, this part of the process was pretty seamless. The first week of coding was mainly about setup, task prioritization, and basic scaffolding of the pages and components. Week 7: Code & Tests With the pages and components scaffolded, the second week of code was mainly about touching everything up to reflect our designs. It was also about adding in new features. I don’t want to spoil too much (since it’s not public yet), but Pinning commonly used pages, quick access to Recent Pages, and Github integrations were a few of the awesome new features we implemented. While doing all this, we also ran a few internal tests throughout the week to make sure our solutions were as successful as possible. Week 8: Internal Launch After two weeks (two weeks and two days specifically) of being heads-down in code, we demoed the new Docs to the entire ZURB team. It was great to be able to show the before and after of the Docs for both Foundation for Sites, as well as Foundation for Emails for context. Conclusion Like anything, there’s always more work to be done, and more room to improve. But I’m very excited to see where the Foundation Docs go from here. We were able to tackle a lot during just 8 weeks, and that’s thanks to ZURB’s talented, passionate team of do-ers. — Huge thanks to everyone who helped the project come together: Project team: Mandi Saeteun (my amazing mentor), Brandon Arnold (amazing design lead), Kevin Ball (amazing Engineer), Rafi Benkual (the notorious Foundation advocate) Feedback and support from: John Cheng, Jenn Tang, Tim Hartwick, Shannon Rhodes, Daniel Codella, Christine Siu …and everyone else on the ZURB team! Left: Mandi, Shannon, Shawna and John cheesin’. Right: Me during a presentation. Are you looking for an internship? I highly recommend ZURB! Here are some other Medium articles to inspire you to do your dream internship: Twelve Weeks @ Basecamp: A Summer TaleOr, how I went from data zero to…herom.signalvnoise.com A Day in the Life of a Google UX Design InternMany people ask what I do everyday here at Google. According to my photos on Facebook, it seems like all I do is play…medium.com — You can follow me on Twitter, see my photos on Instagram, and and visit my site at http://nickwittwer.com.