design

Night at the Museum: Hack The Universe Remix

I was extremely lucky to be accepted into the American Museum of Natural History's (AMNH) Hack the Universe hackathon, the first one to be held there. It's part of AMNH's BridgeUp:STEM initiative which focuses on the intersection of computer science and science. A huge thank you to the folks who put this together because it was AMAZING!

Hack the Universe was an overnight hackathon in which participants were introduced to the Digital Universe data set and had access to all kinds of tools to make their hacks - we had the opportunity to play with Leap Motions, Oculus Rift, 3D printers, and more. The museum gave us a couple of challenges as food for thought for what we wanted to make that covered all sorts of topics. There were over thirty teams at the event with all sorts of amazing ideas, and we got to use the Hall of the Universe as our workspace. 

It's so cool that I have to say it again: we got to work... in the Hall of the Universe... all night long. 

I worked with a fabulous team of people with backgrounds in UX, astrophysics, and development to put together planit, an Oculus Rift game where the player can make their own solar system based on an astro mechanics engine the team built. The object of the game is to make your solar system survive as long as possible - you can build it from the ground up with all kinds of stars and celestial bodies. 

Making planit 

planit was originally pitched by Geoff, who wanted to make a 'Build Your Own Solar System' app on the Oculus Rift. When we first came together, we iterated on the idea to turn it into a game in which the player could either build their own solar system or play with an existing one that we could give them. I led the team through the exercise of visualizing the workflow of what the app would look like.

Given that we had less than 24 hours to build a functional proof of concept, we focused on the 'make your own solar system' task. We divided up the following tasks: 

  • Design - wireframes and visual design for the proof of concept. I served as an interaction designer in addition to being a project manager.
  • Development - we focused on the Oculus Rift as the primary device and used a Myo as the primary input, but a few people were also interested in the Leap Motion as well. The game was built in Unity so that we could make it cross platform easily.
  • Mechanics - building the astro mechanics engine to power the player's solar system 

Most of us eventually succumbed to the need to sleep (I left because there were no more cots available at 4:30 AM) but we put together an amazing proof of concept as well as UX mockups. You can find our work on the Hack The Universe GitHub - we have our demo video, slides, and clickthrough prototype available for anyone who's interested!

Here are some of the screens we made (Diego did the primary visual design work based off the wireframes and I helped him to finalize them for the final presentation)

Lessons Learned

  • Bring Post-It notes to the next hackathon - This was the tool I missed most. It was very helpful for the whiteboarding exercise. I had to at times memorize exactly what was going on with the project and keep track of deadlines, so writing stuff down would have been less stressful
  • Know your limits - I could feel my brain grinding to a halt at 4 or so, so I called it a night and got some much needed rest to be functional the next day.
  • Have a diverse team, but this might be an exercise in luck - there was not a single person who wasn't key to the success of this project, and I am again so grateful that this was the team I had in my first experience as a hackathon participant. We came from all kinds of backgrounds and could help each other out. Jack, Geoff, Robby were our tanks who worked the whole time, but everyone pitched in where there was a need. 
  • Practice your presentation, and then practice it again - we all collectively helped with writing the script and the presentation even though only Diego, Geoff, and I would be on the stage. Diego was going to talk through the slides while I drove the presentation, so we practiced multiple times to get our timing right. The end result was stupendous - even though I was caught off guard by the timer being started earlier than I expected, we avoided the technical difficulties that some other presenters had. Diego rocked it, the presentation was smooth, and we had an excellent presentation. The preparation was worth it
  • Take personal risks - Something that I didn't do was help with the coding (though I did get the chance to look over Geoff's shoulder). I would love to do so next time and now have the guts to ask for some programming work. But this was my first time designing for a 3D interface, and I enjoyed the challenge immensely. 
  • Have a cat herder - It's easy to get lost in the details of the implementation sometimes, and frequently we ended up having some chaos with side conversations, rabbit chasing with details, and generally getting derailed. There were moments where we had to refocus, and I had to say 'okay let's step back for a minute and come back to the bigger picture'. Keeping track of deadlines and tasks was something I did mentally in order to keep tabs on where we were, which was helpful in getting to the finish line.  

Results

Our team worked so hard to put together an amazing presentation and we won in the Education category! I could not have asked for better teammates and am so lucky to have had this experience for my first hackathon. We won bragging rights and a 3D printed Theodore Roosevelt bust/trophy with the AMNH and MakerBot logos. There was a lot of joyful screaming, fist bumping, and picture taking. Go Team planit!

Resources

  • Wireframes (Proof of Concept) - rough wireframes I threw together for the flow of the POC
  • Process flow - Tiby took my whiteboard notes and made a clean visualization of them
  • Clickthrough UI Prototype - I took the mockups Diego made and made a prototype for the iPad using InVision
  • Preso Slides - Diego and I practiced multiple times to perfect the timing and we got it down cold!
  • YouTube Demo - Jack was our Vanna White for the demo. Geoff provided the live narration for our presentation (if I find a recording I'll add it here)
  • GitHub - All the hard work everyone did in one place!

Update: We are continuing work on planit and have a ton of exciting ideas for where to go! I'll post updates as often as possible!

Of Personal Projects, Present and Planned

Public Announcement: I have a logo! The wonderful designer behind the TTP logo is Elaine Tai, a dear friend and an awesome web-everything. She's currently an apprentice at Galvanize's g-school, but you can find her on Twitter. I've been getting back to my mobile roots and experimenting with two very different platforms: Android and Windows Phone. My work is centered around iOS, so I want to familiarize myself with the interactions and design paradigms of these two platforms to supplement that.

Please note, all assets belong to their respective owners but the designs are mine. I don't know the Legalese needed, but all references to Windows Phone and its UI belong to Microsoft; references to Holo UI and Android belong to Google; and finally, Southwest Airlines and Rapid Rewards to Southwest.

Southwest on Windows Phone: One thing that I love about the design language of Windows Phone is how flexible it is in accommodating other brands. I used Southwest's existing mobile as a blueprint and built wireframes for a bare bones port to Windows Phone. In addition to that, I tweaked some of the information architecture around to follow the 20/80 rule (show the 20% of the functions users use 80% of the time).

---

Android Music Wrapper: Remember this rant? This one too? I wanted to take a pass at designing what the software to wrap around all my services would look like on Android, so this is the first draft of the application. It doesn't have a catchy name, but it's a work in progress

---

Please please please share any feedback you have with me! I want to let these sit and rest for a while before I iterate on them, but anything you have would be great. I'm definitely still learning as a designer, and I hope that in time these wireframes won't even be recognizeable with how different they'll be from the final products.

Those are things that I've been doing on my personal time, and in addition to working on these I have some thoughts that have been brewing in my head thanks to IxD13 and its inspiring talks. In addition to those ideas, I'd love to experiment with designing for B2G and go back to trying my hand at webOS. But here's what I've been thinking about:

  • The Flying Experience: Why is it that traveling is just AWFUL? Part of it is the experience of the airport. Yes, we will always need to go through Security, but what about the check-in process? Can mobile tech help make this better? Some airlines have QR codes for tickets, but what if we could eliminate the ticket altogether? What would that look like?
  • Museum Exhibit 2.0 - This is inspired by the talk from the incredible minds behind the Royal Ontario Museum's Incredible Dinosaurs exhibit as well as the Doctor Who Experience. I'm a bit of a museum nerd, and I'd love to use mobile to take an already inspiring experience and enhance it. I don't quite know what kind of exhibit just yet, but I want to try!

That's all I've got for now, but once again, please take a look and let me know what you think! These are just version 1.0, there's quite a long way to go on both.