#VoxProductBuilds

On Friday, February 20th, 6 members of the Vox Product team set out to the frozen tundra that is Indiana to work with students from Ball State and Northwestern universities for the first #VoxProductBuilds workshop. Gathered in a classroom at the Ball State Indy campus, our goal for the weekend was to work with students to teach what it takes to build a visual system and end with a selected design direction and rough wireframes, with the eventual final output being a website. The event took place in conjunction with SND’s Best of Digital Design competition. We’re happy to have partnered with SND in its continued efforts to host knowledge shares and events such as #SNDMakes.

Ryan Sparrow, professor at Ball State and director of the competition, teaches a class called Travel Journalism. Ryan, along with a group of students, are traveling to Cuba for eight days to explore the culture and needed a website to easily share their stories.

For the students, it was an opportunity to collaborate with professionals, and learn more about how media tech companies design for the web. For those of us on Vox Product, it was fun chance to share and get fresh perspective on our own process and field questions from those studying to join our field.

Day 1: Research

We kicked things off Friday evening with a review of the recent Eater redesign, briefly explaining our design process. We broke the students up into groups of three or four and discussed how design research is an important part of defining any visual system, and discussed the project requirements.

Due to our time constraints, we discussed a reasonable scope of work for the weekend, and identified the most valuable pieces of the project. We also decided to focus on strictly visual design and storytelling and didn’t explore much UX or interaction because of our small amount of time, although we plan on making those a focus of future #VoxProductBuild workshops. We gave them a bit of homework asking them to do research and find examples of websites or magazines that they felt were useful references as we headed into our first full day the next morning.

Day 2: Moodboards

Bright and early Saturday morning, we dove head first into reviewing the gathered inspiration and finding some more as a group. Georgia Cowley, a senior designer at Vox Product, lead a portion of the morning reviewing typeboards and moodboards, and how we use them to inform our visual systems. We set our students up with some InDesign templates and had them use their gathered inspiration to help inform boards of their own. We gave them some requirements and discussed some best practices around choosing type to account for things like display, multiple breakpoints, web-readiness and cost (Google webfonts are freeeee).

Students then broke out into their individual teams and we helped guide them in their type explorations. Using the provided typeboard template, they compiled a few groups of type that included headline, byline, body copy and a utility face that could be used for things like pullquotes. After, students refined their typeboards, and each team presented their choices and explained their thinking to the group.

Once typeboards were finalized, students again broke into their teams to begin designing moodboards and applying their finalized type. Using a combination of imagery, color, mood, tone and shape, each team worked to build their moodboards. We helped them refine as needed, and again we presented their final directions to the group.

Ramla Mahmood, a Vox Product designer, then led a group wireframing session as we reviewed requirements together. We reiterated the importance of communication with stakeholders and clear requirements, and collected a list of elements we wanted to include in the site, both functionally and visually. We discussed the basics and importance of wireframing, along with some tools and best practices. As a group, we roughly laid out the elements of the pages we were going to design. We decided to wire up a homepage, and for ease of use, a combination article page / photo gallery / longform article page.

Aidan Feay, a Vox Product design intern, and I did some research into which platform would make the most sense for the project. Initially there was discussion of using WordPress, but it seemed too robust for the needs here. We settled on using the Ghost CMS, and got started developing a custom theme with the plans to open source it. We settled on Ghost because of its simplicity. It has built in user and asset management, plus a nice responsive UI and a smart writing environment that supports markdown.

This seemed like a good route for students journalists and photographers alike to easily login and compose a post. We familiarized ourselves with the framework, got the app running locally and setup a public repo so we could collaborate. Ghost is built on Node.js and uses Handlebars.js for templating, so it made local development a breeze and quite easy to pick up. The open source theme lives here: https://github.com/zohf/8-days-theme.

Day 3: Final Design Directions

We reconvened Sunday morning and enjoyed a gourmet breakfast of endless coffee and yesterday’s Sour Patch kids. Students broke into their teams and the Vox Product folks bounced around and helped with final design polish and answered questions as needed. Aidan and myself pushed to complete a working prototype based on rough wireframes while everyone finished their final designs. After a strong push, we setup presentations for 12PM since many of us had flights to catch shortly after.

Each team presented their final design directions, and for the limited amount of time we had to spend, coupled with a major snow storm and one student running her car off the road due to weather conditions, the 3 final design directions are wonderful and we are thrilled with the results. You can see each of them below.

(click for full verions)

Takeaway

Getting together with like-minded people for a weekend of design and build is typically a great time, but having an opportunity to offer guidance and answer questions to talented, curious and energetic students was amazing, and I’m thankful for the opportunity. It was rewarding to be in such an enthusiastic environment.

The students found it rewarding, too. In a post on Storybench, Ball State student Katy Jamison said, "The Vox process will be valuable to me in the future to develop not only digital products, but print products as well. Understanding the user will be an important element in the future of student media and this weekend made me realize how little we currently value the user in the process of producing media." Knowing students were able to gain that sort of knowledge validates Vox Product’s interest in skillshares.

This weekend was a great reminder that there is value in sharing the wealth of knowledge we are all gaining with each other and help guide the next generation of media designers and hackers. I left with a renewed passion for storytelling and was reminded how fun collaborative design and build sessions can be. Here’s to the next #VoxProductBuilds workshop.