project title: Snowflakes by Hado Labs

client: Hado Labs, LLC

my roles: UX / product designer, 3D animator, illustrator, marketer, data analyst, web designer,

technology used: Photoshop, Illustrator, Blender, AppCooker, Xcode

 

​

 

Hado labs was a partnership between me and Matt Branthwaite. Matt wanted to update his iOS skills, and I wanted to further explore app design, and build on the success I had with my first app, Annamika. Our goal was to make inspired and entertaining apps for the iPhone and iPad.

​

Market Research

To start, I researched the app market. I looked at reviews in the app store, posted online, and recommendations from friends. I downloaded dozens of apps, took screen grabs, and made notes of inspirational interfaces. I came up with a short list of successful apps and verified their success with analytics from appannie.

 

Of note were: Uzu, a generative art and sound app that makes use of iOS' particle system; Let's create! Pottery HD, a 3D potters wheel that you shape and paint on your iPad; and Paper by FiftyThree a beautifully designed tool for writing, drawing, and note-taking.

 

 

​

Uzu, Lets Create Pottery and Paper by Fifty-three iPad apps

 

 

​

images from appannie.com

 

​

​

Ideas and Concepts

Over a few weekends Matt and I met at a coffee shop and discussed strategy and picked apart how other apps were created. I asked him questions like "how difficult would it be to do this... or how does this work..." This was very helpful and gave me a much clearer understanding of how software engineers work and what they need from UX designers to produce results. I would often google search ideas and send him direct examples of previously written code that may solve the same problem we are working on. I also learned important things like you can't combine Java code with Xcode, more importantly, making things look simple is often quite complicated. Eventually, I came up with 9 different app ideas that were fairly simple to execute within a few weeks or months.

 

​

 

​

—Yoga—

Created with a playing-card type navigation that allowed for custom yoga routines and used airplay to display on a TV.

 

 

​

​

—Sound Patterns—

Inspired by the work of Ernst Chladni and the acoustical observations he made by vibrating plates. I wanted to recreate this effect using the iOS particle system.

 

​

 

​

—Poetry Generator—

This app would take work with a sort of Mad Lib framework but would generate poetry on its own with magical type effect using the iOS particle system.

 

 

​

​

—Pop Art—

Similar in concept to the Prisma app that came out this year, it would use an open source algorithm of a combination of convolutional neural network and artificial intelligence.

 

 

​

​

—Wishes—

A conceptual art piece, with users posting their wishes, and a website capturing and displaying them by approximate location.

 

 

​

​

—Exquisite Corpse—

This app concept was inspired from the game invented by surrealists, this drawing app uses social media to collaborate online.

 

​

​

—Advice Generator—

Generates good or bad advice depending upon the outcome, (but mostly humorous advice.)

 

​

​

—Custom Suits—

An app that would allow tailors or consumers to take and record body measurements and send it off to manufacture custom suits in a variety of styles, colors and fabrics.

 

​

​

—Snowflakes—

 This is the app we decided to create. Inspired by our research, we combined the touch-play from Uzu with the 3D magic of Pottery HD, and set out to create something truly unique. The idea was to create animated 3D snowflakes that every time you touch the screen, a snowflake would develop and grow from a tiny little speck to a fully formed snowflake, and then slowly melt afterwards. Kind of a magical Harry Potter experience on your iPad.

 

 

 

​

 

​

User Personas

​

​

​

​

Wire-frames and Prototyping

We used AppCooker to create a prototype and agile methodology to create to-do lists to move the project along. With only two members, it was fairly easy to communicate via email without the need for heavy documentation. For simplicity, we followed the iOS Human Interface Guidelines and used the standard design patterns.

 

​

simple pencil wireframes from one of our meetings.

 

​

prototype created in appcooker

 

​

​

More Research

I spent time researching how snowflakes actually grow. I found a few good examples online and I used them to re-create 3D models in Blender. I should note, that my 3D experience had been mainly with Rhino and VectorWorks; but we didn't have the budget to purchase new software so I opted to take the time to learn Blender (and now I love it!)

 

​

    image from ScienceNews.org                       image from SnowCrystals.com

 

​

​

Creating Assets I

I created several 3D models and rendered them as video clips with transparent backgrounds, and then turned those frames into a sprite. This was the simplest way to use the 3D models without working in a program like Unity, or custom coding a rendering engine. With our time budget, we were constrained with what Xcode could do on its own. We had two modes, single, that displayed a single snowflake and responded by touch with a spire drawn on the axis. The other mode was multi, which grew a complete snowflake every time you touched the screen.

 Multi Mode for snowflakes -Blender snowflake l (lo-fi GIF image)

 

​

​

Testing & Redesign

We found that the sprite files were ridiculously large. I split the video clips down to 1/12 of their size and Matt wrote a symmetry algorithm to complete the flakes. It wasn't ideal because the lighting wasn't accurate. Despite this, the app was still going to be several hundred MB. This was one of those "duh moments" that in hindsight should have been obvious. The 3D models and video clips simply would not work like we thought they would.

 

                 

1/12 of the video file, mirrored and rotated 60° 6 times.

 

​

​

Simplifying the Idea

I needed this reign in the idea and simplify it. Looking at so many snowflakes, I noticed, since snowflakes are clear, what you really see is just the edges. So I created a stylized set of simple line drawings. I drew only 1/12 of the shape and ran them through a few Photoshop filters to soften them up. Since Matt had already written the mirror symmetry code, I was able to reuse it to economize the asset sizes.

​

pencil sketches modified in Photoshop and broken up into 3 sections.

 

I also discover that if I divide up each of the segments by a 1/3, and carefully match their edges, I could create a large assortment of shape combinations with only a few assets.

 

​

​

Testing and Implementation

Sometimes things aren't always crystal clear. My communication style is to use visual examples as often as possible. This graphic cleared up an issue we were having fairly quickly. It turned out that the assets were too big and just needed to be scaled down with a few lines of code.

​

​

Over 9,000 shape combinations are possible from the 28 segmented assets.

 

​

​

Adding Additional Features

I decided at this point, that a single white snowflake on a black background wasn't particularly compelling or magical. Adding color and background options, were easy additions to make our app complete. We also created an iPhone version.

​

​

Launch for Snowflakes 1.0

We formed our LLC on August 28, 2012 and had our first app in the app store on November 19, 2012. Less than 90 days from when we started.

​

​

​

Snowflakes 1.1

After our initial release, we tested the app with users and received some valuable feedback. We fixed a few glitches and added in additional photos and solid colors into the background menu options.

​

​

​

Snowflakes 1.2.1

The following year, we updated the iOS with Apple's new UI standards and added in additional snowflake styles and controls.

​

the app is free to download

 

​

 

​

​

PR and Marketing

In addition to creating the website hadolabs.com, I hired a copywriter and created a press release. After researching reviews for similar apps, I contacted several dozen bloggers and magazine editors. I set up a facebook page and ran a few small campaigns. We were featured in Design Boom, Techlicious, WordlessTech, TechnologyTell, and we created a cross-promotional campaign with the Kickstarter iPad case FluxFlap. All were free or no cost solutions.

 

​

​

Related Projects

After completing Snowflakes, Matt and I released Hearts the following February. It was built on the Snowflakes engine and required minimal code changes and all new artwork. I came up with the idea, created new artwork and we implemented it over a weekend.

​

​HeartsiOS Product Design

 

 

​

I had the idea for StyleBoard after playing with the snowflake segments. I thought, "what if instead of matching up snowflake edges, I matched up clothing on a model." It's kind of like digital paper dolls and could be a great way to shop from mobile devices.

​Style Board, LLCiOS & Android Product Design

 

 

view full portfolio →