Our theme for 2016 was 'Explore New Frontiers'.

HackIllinois

Design and Engineering, 2013 - Present
Work / HackIllinois

I've been involved with HackIllnois, the University of Illinois' annual collegiate hackathon, in various capacities since it was first held in 2014. I've been a part of the core team behind it and also been a member of the design and systems teams responsible for designing and building the website, internal tools, and the infrastructure that supports them. I most recently worked on all things web for HackIllinois 2016. View the the 2016 website here.

Challenges: One of our biggest issues was the fact that we didn't have enough time to implement the website exactly the way our visual designers wanted it. Limiting scope and keeping your teammates happy is hard when you're given a ton of great ideas to explore, but can only see so many of them to completion when you're racing against time. We ultimately did implement everything the designers wanted, but it came at the cost of a lot of sleep, and some botched commits at 4 in the morning. In hindsight, totally worth it.


HackIllinois 2016

I worked with HackIllinois' design lead to build the website for the event. The design direction for the website had already been approved before I started working on it, which made it a little challenging – I didn't have any input with respect to interaction design and the feasibility of the proposed design. I was only given visual design specs, and the interactions and end-UX were left up to me, which was really interesting. I also had mocks and wireframes just for dekstop-sized screens, so it was up to me to figure out how we could make the website responsive without moving away from the look and feel of the website, something that was really important to the designers and core team behind the event. I was handed redlines and specs, and got to work.

Navigation: One of the most challenging parts of translating the single-screen mock into something that would be usable on all devices was making sure the navigation was usable and effective without making it get in the way of content. The design worked well on desktops and large tablets, but there was no good way to present the same thing on even smaller screens without either compromising content, or the original design – neither of which were doable. I sketched a few different approaches to help figure out how to proceed with the navigation:

We went with #3, because retaining the tabbed aesthetic was important, and it felt like an elegant solution.

Option 1: This was probably the weakest of the lot. It looked clunky, and forced us to confine the content of the binder to an even smaller container. It also favored right-handed users by default– it wasn't an issue per se, but it wasn't ideal either.
Option 2: Another exploration that I wireframed and prototyped. We decided not to hide links behind a hamburger button because new content would load in the same container, and would make reading a frustrating experience. That would've also meant adding other potentially disruptive interactions like changing the scroll position of the binder unit.

Option 3 in production, on an iPhone 6.

Option 3: Didn't add to the vertical length of the page (which was huge to begin with), and stayed out of the way until it was needed. It also provided sufficient visual cues to users, letting them know that it was the navigation. Making use of a common gesture and making the navigation layout horizontal was a good idea, because it meant both left and right handed users could interact with it just fine. It also retained the tabbed binder feel. Success!

Option 4: Close second to Option 3. This one brought up the native select element to let visitors pick a tab. This standardized this experience on an OS level, which was good – but from a cohesion standpoint, it was the farthest from our existing design, and offered us no control over the design from a visual perspective.

Performance: We had huge static assets on our single-page website doing a lot of jank stuff, so our initial perf audit didn't yield good results – especially on desktops. We wanted 60fps scrolling, but only ended up with ~20fps. Our biggest issue was the fact that the background-size: cover; and background-position: fixed; CSS properties hate each other and refused to cooperate. I eventually ended up removing the background-image from the body of the page, and placing it as a background div that stretched across the viewport. That helped with scroll performance, but it still wasn't 100% there. I eventually realized that the browser was blocking the scroll event whenever the cursor hovered over an element that had a pointer event bound to it (so... everything?!). I ended up writing some JavaScript to block pointer events while the page was scrolling, and that approach helped a lot. We eventually got to 60fps scrolling by reducing asset bloat.


HackIllinois 2015

HackIllinois 2015 had a single page site with lots of moving parts (literally), a lot of images, and a parallax library that leaked memory (I'm not kidding), which made it perform less than desirably. I helped design portions of the 2015 website, and helped improve the website's performance. The theme for 2015 was Arctic Exploration. View the the website here.


HackIllinois 2014

The first installation of HackIllinois was space themed, and we came up with a website and branding that reflected that. View the website here.


Similar work