Loading ...

Responses by Mark Nader, senior product designer; Johnny Rodriguez, director of strategic innovation; and Jeff Bick, creative director, Fresh Consulting.

Background: We developed the site to educate about the importance of the UX design process by understanding a problem before trying to solve it, the value of productive friction in finding internal clarity and reaching a consensus on a solution, and the need to produce quantitative and qualitative data to uncover patterns in user behavior.

Design core: The site is based on a geometric, low-poly art style, simplifying characters and elements while maintaining personality and expression. These basic geometric elements come to life through the use of color, opacity, sound and animation.

Favorite details: We are most proud of the illustration, visuals and sound design. Our entire design team contributed to the illustrations and storytelling. Our internal process drew on ideas from more than six designers. We were able to create a consistent and cohesive illustration style across four different worlds.

Challenges: Combining sound design and custom illustrations with the use of cutting-edge web technologies, to craft an immersive experience. There is a challenge in creating elegant animations and transitions while maintaining performance.

With our time constraints, we felt that it was best to focus on desktop. We would have made the experience scalable with more time. If we would change anything, we would have focused more on mobile users wanting to consume the same content on the desktop-based version.

New lessons: From a technical development perspective, we learned about the use of sound and parallax effects in combination with scrolling. We also learned about SVG/CSS optimizations and creative animation effects that render well in the browser.

Navigation structure: We wanted our users to be able to quickly explore a world, relative to their needs while preserving the fun. So we kept it simple but not too granular. There are two distinct ways to navigate between the four worlds that we created. The feature that makes the navigation unique is the subtle transition of the music when going between worlds.

Technology: HTML5/CSS3/JavaScript, WordPress as the CMS, JQueryskrollr for parallax effects, jQuery Mouse Wheel PluginjQuery Validation Pluginhowler.js for sound design, jQuery.countdown for countdown to next world release, UAParser.jsmatchMedia() polyfillSharer.jsTabWindowVisibilityManager and MAILCHIMP API 3.0 PHP.

Anything else? The use of skrollr was one of the more advanced implementations of parallaxing and vertical and horizontal scrolling that Fresh Consulting has worked with. Because of this unique implementation, we had to work on the physics of how smoke from the train is rendered on the screen along with the other elements it interacts with during the experience.

defeatboco.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In