At the end of each year, we like to thank our clients for the opportunities we’ve had to produce awesome work, grow as individuals, and as a company. It seemed fitting that after having such a successful year to put some extra effort into showcasing our achievements.

In the past, we've printed cards and they turned out great. But this year we decided to do something a little different. Initially, we were going to create a single page 'greeting card' but Jeff and I decided to flex our creative muscles before heading into the frigid New England winter, and create a one-of-a-kind, interactive holiday site.

alt

Finishing strong

Our agenda was simple. Thank our clients, share some celebratory stats about MojoTech, get people to come back more than once, and last but not least, finish the year out strong with a side project we could be proud of. We decided that for 25 days in December we were going accompany each stat with custom artwork. We teamed up with a few of our engineers, shared our idea and got to work — the momentum was infectious.

Shipped on time by the fine folks at MojoTech

We initially talked about this idea back in early November, giving us plenty of time to work. But as the month crept up on us, end-of-year schedules became busy and we almost didn't ship on time. The key word here is, almost. Never afraid of a challenging project on a tight deadline, this was going to get done, and done right. We hunkered down in the eleventh hour and shipped Day 1, on time.

This was truly an agile and iterative process. We shipped without mobile support, and there were performance issues. But, if we had waited to ship with all these features we would have missed the mark — and that was unacceptable to us. So instead, we made it better every single day. More people contributed, more feedback came in, and more enhancements went out.

Choosing the right tech stack

We started with a similar setup to what we use on our main website - a static site with Gulp for handling tasks. Soon we were battling flexibility issues for handling transitions and making this feel like a single paged app, when really it wasn’t.

Our decision really came down to development time. We needed a lightweight framework that would give us a solid router to work with and the ability to easily add state/route transitions. The obvious choice for us and those involved was to go with React. As a designer, I can say it was very easy to work around the code, add new days, and make any edits needed to the layout without involving an engineer. Using React even allowed us to add a game that one of our engineers had worked on a while back.

Low Poly for dayzzz

We picked an art style that was visually appealing and easy to recreate by anyone who wanted to contribute to the project. This allowed us to move quickly and get lots of Mojos involved. Even Nick stepped up and created some art!

alt

Low poly is a great looking 3-D inspired art form that is fairly easy to replicate in 2-D. The more polygons you add, the more detailed the final design. Working from our list of stats, we came up with ideas for each day and allowed folks to self-assign.

Sketch vs. Illustrator? We had bigger problems...###

It didn’t matter much, although we primarily used Illustrator because exporting was neater and gave us more control over the SVG source. Since we were working with SVG, Brian created a React component that handled animating/transforming the polygons on load. Which lead to a problem we discovered with how vector aliasing works in the browser.

alt

Create some triangles roughly where you want to show detail.

alt

Now, group the points. Excellent...or so we thought.

alt

You can see whilst in the editor and in the real world, that these connecting shapes should not have any gaps between them, but as it turns out this isn’t the case. There is a hairline space between each shape, which causes unwanted artifacts.

Jeff came up with a workaround where we overlap adjacent shapes to correct the aliasing. It added a little bit of extra work to the process, but we felt it was worth it to have a cleaner final product.

alt

alt

*If anyone has any tips or a better workaround for this, please share with us. We'd love to hear!

2016… and beyond!

It was nice to rally together at the end of the year and produce something fun and quality. We received a handful of leads from this project, and while this was not part of our original agenda, it was certainly welcome.

This year we're going to be working to make a lot more of these types of projects. They're challenging and rewarding for everyone involved. Most importantly they help keep the "quality-above-all-else" culture that MojoTech was founded on alive and well. Here’s to a great 2016!