One early morning, InDesign sort of made its way into the shower. The AM grogginess helped to lower that InDesign wall that I’ve built up over the years and allowed InDesign to interject itself into the prototyping process. And so, here we are: http://tapotype.com/documenting-your-prototype.

October 19, 2012
I just launched a site called tapotype.com, which is a reference library of transitions using Fireworks & TAP, a platform developed by the folks at UNITiD. On the site, you can play with out-of-the-box TAP transitions on both desktop (Chrome, Safari) and mobile devices. I’ll also be posting tutorials in the Tips, Tricks, and Tutorials section from time to time.

What’s most exciting about this is that with some CSS3 and scripting knowledge, you can create custom transitions. In the long-term, I plan on adding custom transitions to the site and updating the TAP files so that you and other designers can use them in your prototypes. In the meantime, check out the latest tutorial on how to build an app that teleports you from one place to another. Enjoy!

Public Art Fund brings dynamic contemporary art to a broad audience in New York City by mounting ambitious free exhibitions of international scope and impact that offer the public powerful experiences with art and the urban environment.

Earlier this year, I had the opportunity to work with Tender Creative as the lead experience designer to bring those “public powerful experiences” to the web. Through the redesign and restructuring of the site, our goal was to bring public art awareness to New Yorkers and to provide a resource for them to dive deeper into the back story of these public art pieces.

Overlooking the Landscape
Before venturing off into the land of idea generation, I scouted the original site, digging through all the layers of content, documenting what was where, and making notes of where they could be based on our design objectives.

Public Art Fund Site Map [Before]

In the proposed site map below, the content silos link across the landscape. The main content of the site was no longer pigeonholed into the projects section (as seen above), they were now experienced across the entire site.

Public Art Fund Site Map [After]

• Exploration
• Guidance
• Archival
• Discovery

Sketching out layouts for the home page

In the proposed home page layouts, the content’s main focus was an upcoming/ongoing exhibit, an artist, and an event. These three sections provided a jumping point into work that was currently relevant. As seen in the site map, these three sections also branched visitors out to various parts of the site.

PAF Home Page V1 – This layout presents the three main types of content: exhibitions, talks, and artists.

PAF Home Page V2 – Similar to V1, the top is a curation of three types of content minus the carousel.

When selecting “Exhibitions” from the drop down menu above, visitors would be directed to all of the current exhibitions. When viewing exhibitions, there were two views to choose from: image view (below) and a map view.

The Exhibitions section (image view) showcased all of the current exhibits in NYC.

The map view (below) gave context as to where the exhibits were located with respect to the visitor.

The Exhibitions (map view) plotted all current exhibits on the map.

When accessing an individual exhibit, visitors can find out more about the project, specifically:

• Information about the artist
• Background information on the inspiration of the art piece
• Information on the piece itself
• And all other supplemental content, e.g. videos, interviews, events, etc.

To promote a sense of exploration, the exhibit pages were kept very open. Visitors could either scroll down the page or use the sub-navigation on the left hand side to navigate through the different sections on that page. Since the page could get vertically long, the sub-navigation would follow along as visitors scrolled down the page.

The exhibit page.

The exhibit’s map view displays the location of the exhibit.

In the end, there were about 20+ pages that were laid out and a handful of social strategies that revolved around building each of the Public Art Fund locations scattered throughout NYC. It was also a little over a couple of months since I started and my time as a freelance UX designer was up at Tender. I handed the project over to the designers and developers and that was it.

Public Art Fund, Redesigned.

Like Woah!
Several months later, I revisited the site to discover that the redesign had happened. The rebranding that I was introduced to while meeting at Tender’s studio in SoHo

had wrapped itself around the wireframes that I had created. Although there were some additional UX work put into it after my departure, the team pulled together and really finessed the hell out of everything.

See the site for yourself: http://www.publicartfund.org/.

It was a pleasure working with Tender Creative!
Hannah Yampolsky / Creative Director
Natalie Bergh / Producer
Jordan Winick / Art Director
Christopher Eckel / Senior Designer

• A 3 minute song on Rock Band the game (pro drums): 300NF
• Biking from Jackson Heights to W39th street on a foldable bike: 1200NF
• A 6 mile run along the Westside Highway: 800NF

With all of this data on our phones and up in the cloud, how would someone new to this know about NikeFuel or even have an idea as to what a specific amount of NikeFuel means?

This is where NikeFuel stickers come in. They help to contextualize NikeFuel with respect to everyday things that we are familiar with. NikeFuel stickers introduce the concept of NikeFuel to the public while informing them what it is required to achieve a certain amount of NikeFuel.

Here are just some of the stickers that have been left around the city so far.

UPDATE 2: A Tumblr to track all of this > http://howmuchfuel.tumblr.com/

UPDATE 1: People have informed me that they have observed others as they approached the decision point below (elevator vs. stairs). They noticed that some were speculating the amount of NikeFuel earned for going up three flights of stairs while others asked the person with them if they wanted to earn some NikeFuel for the day.

Prior to the shiny, vinyl stickers coming in, I resorted to recycled office supplies.

NikeFuel stickers have arrived. Thanks to PSprint.com for making this happen!

140NF / Use 4th Floor

12 NikeFuel / Rub your hands!

2000NF / 500 cal ~ 2000 NF

Browse, want, and own AF1s on the Facebook Nike 1thology facebook app.

In 2012, Nike is celebrating the AF1′s 30th anniversary by rolling out new AF1s throughout the year. In order to create social buzz around these shoes, we were tasked with recreating the past AF1 experience within the context of Facebook.

Site Audit
Before diving into ideation, system diagrams, and interactive wireframes (prototypes), I inventoried the content and features that were available on the site. This gave me a better understanding as to how Nike perceived the AF1s and the shoe’s role within the sneakerhead community.  The site audit also helped set expectations for us in what we were going to deliver to the client.

Nike AF1 Site Audit – PDF

Ideation / Sketches
The following sketches show some of the previous functionality through the lens of Facebook. They also include new features such as a countdown for individual shoe releases and different methods of navigating the genealogy of a shoe.

Countdown to releases build anticipation among sneakerheads

A direct translation from previous site with some minor additions to the filters

Creating an engaging way of navigating the genealogy of a specific Nike AF1

What’s not present in the sketches was a concept sparked by one of our teammate’s visit to Sneaker Con 2011. Thanks Evinn Quinn! During our conversation, we talked about the behaviors exhibited at the event. What I discovered was that not only were people buying shoes from the vendors, they were also buying and trading shoes with each other. This opened up new doors and got us thinking about how the Facebook AF1 app could connect people in their quest to find the AF1s they were looking for within a trusted shoe community.

Trading and selling via http://www.freshnessmag.com/2011/12/11/sneaker-con-nyc-12-10-2011-event-recap/

In order to build an AF1 explorer and trading platform, we broke the design down into phases. The first phase involved creating and integrating custom Facebook actions relevant to the shoes. Instead of “liking” a shoe, users can either “want” or “have” a shoe. These two custom actions also feed into some of the features that were being transferred over from the previous site such as “Most Popular” (based on Wants) and “Most Exclusive” (Wants/Haves).

User Flow/Ecosystem Diagram
Since custom actions on Facebook weren’t officially rolled out to the public at the time, it was our responsibility to educate the client about what we were recommending. I created a visual one pager of a user flow through the different touchpoints within the Nike AF1 app experience. I also included a second version that was a bit more in-depth. And yes, you are reading that correctly. Eggosystem.

AF1 User Flow and Ecosystem Diagram

Wireframes. Interactive Wireframes.
After we got approval from our client, I put together the initial set of wireframes. I spent some time going through all the pages and once I got them to a good place, I quickly linked them together to create a more interactive experience. At R/GA, these interactive wireframes (prototypes) have been proven to create better conversations both internally and with clients. They also help me as an experience designer to think through problems in a more thoughtful manner.

AF1 Wireframe/Prototype V1.0

You may have also noticed that we moved away from the genealogy focus (as mentioned in the ideation section) in favor of keeping the interaction lightweight while maintaining an engaging experience.

With feedback from both the internal team and with our client, I went through a couple of more iterations and ended up with the following set of wireframes. I also included an additional set of wires containing annotations relevant to the major interactions on each page.

AF1 Wireframes V2.0

Besides the wireframes themselves, I also experimented with some of the smaller interactions that happen along the way. Using Keynote and assets generated from the wireframes, I created the following video that demonstrates a potential interaction when navigating the huge shoe grid.

AF1 Interaction Demo

Conclusion
We started the project based on a set of assumptions gathered from our client. By fully understanding what had to be done, we were able to diverge and converge on ideas and responded to the client with solutions that surpassed expectations. We were also able to better sell the idea via diagrams and interactive prototypes.

As of today, March 8th, the site is currently being designed by the visual team and this post will be updated once the site goes live.

December 7, 2010
With most classes taking place in the evening, many Interaction Design students elect to freelance or work part-time while completing the MFA program. Second-year student Gene Lu shares his experience of applying what he learned in school to beyond the classroom walls, and how graduate students can benefit from working for a startup while in school:

In the summer of 2009, I quit my full-time web designer position at a B2B company and began preparing myself for the inaugural class in MFA Interaction Design at the School of Visual Arts. During that time, a friend asked if I would be interested in working part-time as an interaction designer in a startup company, DramaFever.com, which specialized in streaming Asian media online. With only a few freelance gigs paying my bills at the time, I decided to take the offer. The next thing I knew, like all startups, I was working with a handful of people out of an apartment in NYC.

The MFA program kept me busy. We were learning a ton of new material from some of the best talent in the industry. Halfway through the first semester, things started to click. I realized what I was doing at school applied to my work at DramaFever. Take for example, John Zapolski’s infamous question at our second Strategic Innovation class, “What is your competitive advantage?” For DramaFever, it was the only company in the States that had the licenses to stream specific Asian titles, whereas its competitors were doing it illegally. John’s class taught me how to better analyze companies to determine their probability of success. Strategies such as differentiation through design and fulfilling unmet needs (a majority of DramaFever’s viewers are non-Asian) all rang true, which further convinced me that I made the right decision to work in the startup.

DramaFever staff at the New York Comic Con, where they held a discussion panel on “Asian Entertainment Trends in American Pop Culture.”

Throughout the first semester, I began creating more effective storyboards and workflows for new site features (Fundamentals in Interaction Design); improved visual aesthetics for a better user experience (Communicating Design); and even had a hand in coming up with new features based on feedback from viewers. By the end of the first semester, traffic on DramaFever.com leaped from 3,600 to 11,000 unique visitors per day. Of course, it’s important to note that in addition to design, other factors such as content acquisition and marketing pushed the needle on the traffic.

By the time spring semester rolled around, I had incorporated data visualization to help users better understand their viewing habits on the site (Information Visualization); gained an understanding in decreasing bio-cost to create an improved viewing experience (Design of Systems); started to go through emails for qualitative feedback and data-gathering for persona creation (Research Methods); and paper prototyped a set of new features (Prototyping User Experiences).

As of November 2010, DramaFever has acquired on average, 30,000 unique visitors per day, which means almost a million unique visitors per month with an average of a 16% bounce rate (16 of 100 people have only viewed the homepage and left the site).  Pretty darn good with respect to industry standards.

Some of you may be still wondering why you should work at a startup when going to grad school. I’m sure you have heard of the (lack of) success rate that startups tend to have, but who cares. Due to the volatile nature of startups, they are usually open and/or flexible to new ideas. Being students in an innovative program such as the MFA Interaction Design program, startups offer the opportunity to apply and structure what we’ve learned, outside the classroom walls. And who knows, if the startup does well, you’ll at least be set with a job after graduation.

–Gene Lu, Class of 2011

You can read more about Dramafever’s success at Techcrunch (being published on this site was something we joked about while cramped up in Seung’s apartment early on, but has finally come true!) and at Fast Company.

Copilot Deal Performance Dashboard - Final Design

Copilot is a service that provides restaurants with instant reports on the performance of their past deal campaigns. Earlier this year, I had the opportunity to work with them in designing their first ever online analytics tool. The deal performance tool allows restaurant owners to navigate and compare multiple deal campaigns, which help to better inform them on the effectiveness of each deal leading to smarter decisions in the future.

Sketches
In the preliminary sketches below, I experimented with an overall view of all deals accompanied by small multiples. The purpose here was to provide users with a quick glance of the deal campaign landscape via the main view while the small multiples would give more insight into each campaign.

Copilot Sketch 1.1

Copilot Sketch 1.2

After some helpful feedback from the client, I simplified the dashboard by reducing the amount of data being displayed. In the initial sketches, showing small multiples across all deals for each category didn’t provide much value since they were pretty much the same. The real value here was comparing the deals within each category. To resolve this, the small multiples for each category were pushed into a drop down that would pop up on hover (item 1 in the sketch below).

In the main view, the line graphs were overlaid by bubbles (item 2), which represented the magnitude of each point. This allowed for quick comparisons among a set of deals for a specific day. There were also small multiples below the main view, which compared multiple deals by the week (item 3).

Copilot Sketch 2.1

In the next sketch, there was the idea of locking the filtering menus since the report was originally going to be a long scrolling page. Users would be able to quickly hide/display certain campaigns by unchecking/checking them within the locked menus. We decided to nix the long scrolling page later on for the sake of simplicity, which meant no more fixed menus.

Copilot Sketch 2.2

Wireframes
After getting the okay on the second set of sketches, I had a general idea as to how this experience was going to be. To be honest, I felt a bit unsettled because of all the moving parts, which was why I quickly moved into clickable wireframes. As a side note, depending on the project, I sometimes pepper my wireframes with clickable hotspots in parallel with the wireframing process itself.

The following prototype was my first approach on wireframing the dashboard. You’ll notice that the navigation repeats itself halfway down the page. This was a rough replication of what the scrolling experience would be like.

Tip: If you’re creating clickable prototypes, it’s a good idea to highlight the areas that are clickable, in this case, with yellow circles.

Copilot Prototype Version 1

After testing the initial prototype with some users, some things were a bit unclear, e.g. the hover states of the three items under “General Stats”. There was also the concern of the overwhelming amount of data that was presented to the user as they scrolled down the page. With these and other additional problems in mind, the wireframes were updated to the following.

Copilot Prototype Version 2

Final Designs
Once wireframes and flows were approved, I threw on my designer cap. At the time, several months of straight wireframing at my full-time gig had caused some visual design atrophy, but fortunately, I was able to regain my design vision. You’ll sort of notice this as the designs progress in the mockups below.

The following was the first design pass at the main page. This was a direct translation from the wireframes and I was more or less disappointed with how it looked. The variety of navigation at the top was just too confusing.

Copilot Design Version 1

This was a slightly better, but the top navigation was still a bit ambiguous. The navigation didn’t really look like it contained buttons and although the hierarchy was correct, it wasn’t apparent.

Copilot Design Version 2

The design below addressed a lot of the issues from version 2, e.g. navigation buttons looking like links rather than buttons. Another issue that came up was that the checkboxes in the legend didn’t really look like checkboxes. I was probably trying to be a bit too clever here.

Copilot Design Version 3

Alas, final designs!

In the following mockups, you’ll notice that the big number section moved up above the navigation. This decision was made because the client wanted to provide users with a way to quickly get an overview of the general stats across all pages, e.g. redemption, gross revenue, and covers. In doing so, users would be able to view the rest of the data in context with these general stats.

Copilot Final Design

Copilot Final Design

Copilot Final Design

That’s it folks. You can check out this and other Copilot products by signing up over at Copilot.com.

Role
Interaction/Visual Designer: Gene Lu

In recent years, there have been many ways to quickly prototype an iOS app. The best prototyping tool that I’ve seen so far that doesn’t require any programming has been a combination of Adobe Fireworks and a PHP/Javascript library called TAP. Created by the folks at UNITiD, TAP allows you to mimic iOS transitions by simply filling out the “alt” field of hotspots (within your Fireworks file) with the type of transition that you would like to see after tapping on that hotspot. Fortunately, UNITiD has already put together a thorough tutorial on how to use TAP.

So what exactly is this post about then?

As implied by the title, this post is going to explain how we can quickly load our prototypes, which are stored locally on our computers, onto our iPhones.

Before diving into details, here’s a quick overview of what’s ahead:

• Install and launch MAMP onto your computer.
• Download the TAP folder and extract it into your MAMP folder.
• Export your Firework files as .lbi into the TAP folder.
• Compile the prototype.
• Create an ad hoc connection between your computer and iPhone.
• Access the prototype on your iPhone via an ad hoc connection.

Install and Launch MAMP
If you’re unfamiliar with MAMP, it is an application that runs a web server on your computer. And? And with a server on your computer, you can run the PHP and javascript that comes with the TAP files that you’re about to download, but first, install and launch MAMP.

Download TAP (Touch Application Prototypes)
Head over to UNITiD’s site and download the latest version of TAP. Once you’ve successfully downloaded the file, extract it (labeled tapv0.46 by default, but feel free to rename) and place it into your htdocs folder, which can be found in your MAMP directory.

Link and Export Your Fireworks File as .lbi
Link your pages together in Fireworks with the hotspot tool along with their corresponding iOS transitions. If you’re unclear with this part, refer to UNITiD’s site as they have provided an in-depth tutorial on how to do this.

Once your file is ready, export your Fireworks file as a .lbi file into the library folder, which can be found in your extracted TAP folder, with the following export settings:

Export settings when exporting as .lbi

Compile the Prototype
Before accessing your prototype, you need to compile the .lbi files that you’ve loaded into your htdocs folder. Also, make sure MAMP is running. Open a new web browser window and navigate to http://localhost:8888/tapv0.46/build/. This page basically lets you configure several settings for the prototype, but for now, let’s click on BUILD in the upper right corner. Once you’ve successfully compiled your prototype, it should look something like this.

Successful builds look something like this. If you have red errors, something’s wrong.

Creating a network

Create an Ad Hoc Connection
So now that you have a web server running on your computer, we need to access your prototype via your iPhone. Since there’s currently no connection between the two devices, we need to set up an ad hoc network. Click on the network status symbol in the upper right and click on Create Network. You’ll have the option to edit your computer name and select a channel. Let’s ignore these for now and click on OK.

Now grab your iPhone and go to Settings > Wi-Fi and select the network with your computer name. If all things go well, you will be connected to your computer via your iPhone.

Accessing Your Prototype on Your iPhone
In order to access the prototype on your computer via your iPhone, first find out the IP address of your computer. You can do this by going to Network Preferences (make sure AirPort is selected, not Ethernet) > Advanced > TCP/IP. The IP address for your computer can be found next to IPv4 Address.

With your IP address handy, head back over to your iPhone and enter in the following URL (the folder name may vary depending on whether or not you renamed tapv0.46 to something else)  http://ipAddressForYourComputer:8888/tapv0.46. You’ll be prompted to add the prototype to your home screen.

Adding your prototype to your home screen

And voila, you’re done!

Wrapping It Up
One of the great things about having the prototype on your local machine is that it’s a lot quicker to update files, which means more iterations over a given amount of time. Also, it doesn’t require you to gobble up server space elsewhere.

If you would like to share your prototype with others, upload your folder, e.g. tapv0.46, onto the web and send them the link, e.g. http://yourDomain.com/tapv0.46 (or whatever you’ve named your folder). Similar to the step above, they will be prompted to add the prototype to their home screen.

As a parting gift, I’ve created a quick one pager below summarizing the key items above. Happy prototyping!

Sketches
If you are unfamiliar with the system, it is composed of two different sleeves that go into the shoe. Each sleeve is built for a certain type of gameplay. You can also further customize the sleeves themselves by mixing and matching the components of each sleeve via Nike ID. The following sketches show some of my thinking before diving into wireframes.

Kobe VII System Sketch V1

Kobe VII System Sketch V2

Wireframes
Since this was a very shallow ID project, I went with static wireframes [PDF]. The rest of the content that was placed below the top portion of the site were content modules previously developed for other shoes, which I also worked on, e.g. Lebron 9, KD IV, etc.

Kobe VII Wireframes - PDF

To better demonstrate what happens when a user clicks on either “Attack Strong” or “Attack Fast”, I created a short video demoing the interaction using Keynote.

Kobe VII Demo (.mov)

Final Design

Kobe VII System Final Design

Team
Art Director: Chris Jovanov
Copywriter: Brad Soulas
Interaction Designer: Gene Lu
Producer: John Mullin