Web Development Team Releases Early Build

Earlier this week, the software development team paid a visit to the Bienen School of Music to share an early alpha build of our upcoming project, currently named Voice Tracker. 

Voice Tracker is a tool to help vocalists log their vocal expenditures and keep track of how the quality of their voice changes from day to day. Additionally, the app logs water consumption, vocal rest, and illness.

To build this app, the software development team has been working with Terry Brancaccio of the Bienen school. As an agile development process, it’s important that we get an early build in front of potential users and collect their feedback. We were able to meet with 10 of Terry’s current students and introduce them to the app. Over the next few weeks, these students will log how much they use their voice and report back to us on their experience.

These early adopters will surely uncover a number of bugs and discover some points of confusion in the user interface. This is to be expected. As we gather data from these users and find out what gives them trouble, we will refine the application to ease their pain points and fix newly discovered bugs. The app has been well received thus far, and we look forward to making it even better!

Hello From Smashing Conference

For the past three days, I’ve been out in chilly San Francisco attending Smashing Conference 2018 – a design conference covering a wide array of topics all related to front-end development and elegant interface design.

The conference schedule has been absolutely jam-packed and I’ve been enjoying every minute. To try and recap it all would take me another three days, and I’ve got a flight to catch, so I’ll keep things brief.

Day 1. You may need to stand on your head to read the schedule…


On Monday, I traveled to the San Francisco State University downtown campus to attend an all day training session on Vue.js, a reactive front-end framework that the Media and Design team has been using for a couple years now. We’ve used Vue to create a number of projects including NUPredicts and the RoomReady reporting tool. Though I’ve had enough of an understanding to contribute code on these design projects, I thought it would be worthwhile to get some hands on training from the ground floor.

The session began, naturally, with a introduction to the basics of Vue – directives, computed properties, methods, and templates – and culminated with some more advanced concepts like mutators and animated page transitions.

I’ve got a ways to go in my Vue-ducation, but I’m left with a more solid understanding of the basics, and a piqued interest in all that Vue has to offer.

One technology that I’m excited about is the ability to build complex and interactive native animations in Vue with libraries like Greensock. As you can see in the below codepen, Greensock allows for complex, interactive SVG animations built natively in Vue.

See the Pen Vue-controlled Wall-E by Sarah Drasner (@sdras) on CodePen.


On Tuesday, I visited the beautiful Palace of Fine Arts where the conference kicked off. Day one saw a number of engaging talks. My favorite was one given by the UX Designer, Joe Leech. Titled Designing Powerful User Experiences With Psychology, Joe spoke about the ways we can improve user experiences and interfaces by leveraging what we know about human psychology.

Here’s a picture of the palace grounds.

Here’s a picture of me on the palace grounds.

One takeaway from this talk was the concept of Hick’s Law. To paraphrase, Hick’s law states that users take longer to make decisions when they’re confronted with more options. This may seem like common sense, but it’s interesting when you consider that when surveyed, users tend to claim to want more options!

Relevant XKCD

I mean, it makes sense. If I was trying to buy shoes, I’d probably want to choose from tons and tons of options. When I go to buy those shoes, though, it’ll take me longer and longer to find the ideal pair when more options are introduced.

When conversation rates are used as a metric of success on your website or app, it’s always good to keep your options to a minimum.


On Wednesday, I returned to the Palace for the final day of the conference where I caught an awesome talk on the future of responsive design. In Beyond Media Queries, the Australian web developer, Michael Riethmuller reviewed some best practices for modern responsive design.

For a while now, breakpoints have been used to reshape a site’s layout based on the size and resolution of the device being used to view it. These breakpoints are typically declared using media queries that essentially say, “Okay, when the browser width is less than 700px, the site should switch to a one column layout.”

This approach causes what Riethmuller calls “pressure points” for the site design. A responsive site might look amazing on the large screen of a laptop, and might use breakpoints to reformat on a mobile device, but pressure points occur in between these two ideals.

I’m excited to lessen my reliance on media queries. As browsers continue to evolve, so too do the standards we use to craft our responsive websites. Newer techniques like flexbox, viewport units, and calc functions allow for greater control of a site’s design, without having to create special overrides for dozens and dozens of screen sizes.


There’s tons more that I could write about here, but that’s all I’ll say for now. Should you want to know more about modern loading best practices, the blight of third-party scripts, our relationship with digital interfaces, or all the cool conference swag I came away with, feel free to drop me a line. I’d be happy to share more about my experience at Smashing Conference 2018.

Modern Robotics Specialization on Coursera

This past Monday marked the launch of a new Specialization on Coursera, taught by Professor Kevin Lynch – Modern Robotics: Mechanics, Planning, and Control. Professor Lynch covers fundamental mathematical modeling techniques that students will be able to apply to any future work in robotics. Whether you’re motivated to pursue a career in robotics, are an ardent hobbyist, or if you have some engineering experience and want to see if robotics is the field for you, then you’ve come to the right place.

Professor Lynch developed the Introduction to Mechatronics course at Northwestern, as well as new graduate courses on robotic manipulation and geometry.  With this Specialization, he’ll be able to bring his knowledge and expertise to a global classroom. 

Michael Peshkin’s Lightboard was essential in the production of this course, allowing us to record Professor Lynch’s lectures while simultaneously capturing any written material, his presentation content, and display his script via a teleprompter. This technology is currently available in the Mudd Library’s Self-Service Video Production Studio, for all student, staff, and faculty use. 

The Master of Science in Law Program at Northwestern Law

The Pritzker School of Law will be launching its Master of Science in Law Online Program this coming fall. Designed for...
Read More

Experience Acquia Chicago

The Media and Design software development team recently attended Experience Acquia Chicago.  The half-day summit showcased a long list of customer...
Read More

Congratulations Northwestern Dance Marathon!

Congratulations to the dancers, the NUDM committees and the co-chairs, and to all the donors that made this year’s event another...
Read More

Northwestern Dance Marathon 2018

The Northwestern IT Media & Design team is excited to be supporting Northwestern University’s annual Dance Marathon – partnering this year...
Read More

Dance Marathon 2018 Kickoff

Our behind-the-scenes crew, kicking off Northwestern University Dance Marathon 2018. The live broadcast can be found here. See you in 30...
Read More

New Voice Tracker app – Early Adopters Session at the Bienen School of Music

I was especially pleased to return to Bienen School of Music today (I’m an alumnus, DMA’14) with my team from IT...
Read More

IT S&S provides training session for the MSiA student cohort

The IT Services & Support, Media & Design and Academic Software Development teams, partnered with the MSiA program (Master of Science...
Read More

A Fresh Look for the Data Science Initiative Website

The Data Science Initiative (DSI) at Northwestern has just launched a brand new website today with the help of the IT...
Read More

A Tour Of The Segal Design Institute

The Media and Design software development team is currently working with the Segal Design Institute at Northwestern to design and develop...
Read More