Beyond FOWD: The adventures of a designer in New York City

Salsa dancing with the locals, getting kicked out of Plaza Hotel, getting woken up by a fire alarm, and indulging in sinful Red Velvet cupcakes are just some of the adventures that Nulab designer, Siska Flaurensia, experienced during her week in New York for the Future of Web Design (FOWD) conference. Follow her candid stories, crazy antics, and also learn a thing or two about design in our two parts feature special. The

The FOWD conference that took place between 7 and 9 October in New York City is an annual web design conference with an intimate focus on trends, technology, and stars that make the web beautiful. A gathering of diverse and creative designers and developers across the globe, all under the roof of the magnificent AMC Empire movie theater located around the corner of the glitzy Times Square.

First Night of Glitz

As soon as I hopped into a yellow cab from La Guardia airport and hit the busy streets of Manhattan, I knew I was in for a week of visual treats, valuable learning experiences, and crazy adventures from both the conference and New York City itself.

Driving through an overcast afternoon, my cab pulled up next to this purplish-pink retro theme hotel called Yotel New York, a modern boutique hotel with a futuristic Tokyo capsule-size room. When I opened my room door, it felt like I have stepped into a 70’s Star Trek set—any minute now, Captain Kirk is going to materialize in my “transporter-looking” bathroom stall. Thankfully, that didn’t happen. But my room did have a gorgeous view of Manhattan.

Being the adventurous soul that I am, I had to explore Times Square at night! It took a breezy 10-minute walk from the hotel to get to this famous tourist trap locale. Walking through Times Square was like walking through a world market filled with hordes of exotic people (tourists and non-tourists) snapping pictures at the million-watt billboards and themselves. For me, it was a beautiful and dizzying madness!

It was getting late, so I started walking back to my hotel when I stumbled into a Cuban joint—I couldn’t resist the big flashing Havana sign. I ended the night sipping Mojitos, making new friends, and doing a little Salsa dancing with a group of hip New Yorkers. I went to bed feeling pumped up for my FOWD conference week.

Designing for Touch with Josh Clark

I awoke early the next morning to catch a cab to Lighthouse Executive Center, located a couple of blocks away from the famed Central Park and 5th Avenue. The conference week started with a workshop on “Designing for Touch” with Josh Clark, who had an affinity for using visual examples from the old Frankenstein movie, i.e., “It’s alive!” on his slides to drill the basics of touch principles: Layout, Gestures, and Discoverability.

Below are a few pointers he gave on designing for touch, which I think would be useful to apply to your next mobile design project.

• 49% of people use the thumb to navigate their phones, therefore, thumb comfort is super important.

• Put navigation control at the bottom and content at the top, except for Android.

• Android has native “stacked controls” at the bottom of the device, so it is better to move navigation items to the top of the screen.

• iPad and other large tablets favor sides and corners; AVOID top center placement of navigation items!

• Recommended touch area is 7mm = 44 px = 2.75 em.

• The bare minimum recommended size is 44 x 29 pixels.

• A new desktop design guideline to keep in mind is to use Progressive Disclosure, which essentially is to lead users on a path and only reveals what’s important and relevant to them.

• Gestures are the keyboard shortcuts of touch. Reduce the range of motion and let people be lazy. Remember: Be a “Gesture Jiujitsu”! 😀

• Be careful of gimmicks. Don’t let contraption upstage the content.

• Want to know if your mobile design is easy to use? Do a Beta test on 4 – 5 years old kids!

• Play video games and learn from video game interfaces, as they have the best UI/UX flow and engagement. Most video games follow these user engagement steps: Coaching, Leveling up and Power-ups.

• Coaching is to “teach” users how to use gestures to activate various navigation items by using visual cues and to show it at the right moment, thus teaching the gesture. TIP: Repeat visual cues after a passing moment of inactivity to teach or remind users.

• Advanced features can be taught by delivering more gesture tips, i.e., Power-ups.

He also added that as designers, we are no longer confined to designing within the constraints of a rectangular device. Now (and in the near future), touch technology would challenge us to rethink how we design our websites and apps. A summary of what we learned that day is as follows:

• Buttons require cognitive and physical efforts.

• Gestures = keyboard shortcuts.

• Use the entire screen as a control.

• Standards emerging: Tap, swipe, pinch/spread, long tap.

• Model data as a physical object.

• Explore multitouch gestures.

• Create a smart teaching layer.

New York Dreaming

It was drizzling outside by the time the workshop has ended. With an umbrella in my hand, nothing could dampen my spirit as I strolled to the upscale 5th Avenue located a few blocks away—of course, not without swinging by the popular (and super packed) Apple Store on 5th and then crossing the street to the luxurious Plaza Hotel, New York’s most famous 5-star hotel.

My incurable curiosity has caused me to (accidentally) crash in on a private function that was taking place in the famous ballroom and get kicked out by the “men in black.” Oh well, it was worth it! The ballroom was beautiful, dreamy, and everything a girl could wish for. Talking about wishes, I blame my little shenanigan on the movie Bride Wars, which showed two best friends getting married at the Plaza’s ballrooms, and that wishing got me into trouble, hah!

After my day’s adventure, I went back to my good old 3.5-star retro hotel, fell asleep to the song New York, New York by Frank Sinatra playing softly in the background, and my New York dreaming continued…

Pass the Popcorn, Please

The sun was forcing its way through the gray clouds to cast a warm glow on my skin; finally, some sun! I flashed a smile at the doorman as I stepped out to the pavements from the hotel lobby. It was the perfect day to begin my first day of learning at the FOWD conference.

The strong aroma of delicious popcorn hit my nostrils the moment I entered the AMC Empire movie theater lobby. The place is huge but thankfully, there were direction signs and friendly FOWD ushers who helped the attendees navigate towards the fifth level of the building where the conference took place. When I reached the floor, I was greeted by smiling faces huddling in small groups to chit-chat or network. FOWD organizers were awesome to provide us with breakfast munchies and coffee. As I grabbed a cup of coffee and a croissant and made my way through the crowd toward MT Graffiti Wall, I began to get really pumped up. Never have I seen this many creatives in one place!

 

The conference was divided into two tracks: Main Stage Track and Rising Star Track, and we could choose to attend any session from both tracks. Choosing between the two tracks was difficult. All the sessions were equally appealing, and while I had planned out a schedule for myself, I never did quite follow through with it. 

As the conference was about the start, I sat myself down on one of the comfortable plush red chairs lining the rows of the Main Stage Track before snapping a mandatory selfie. Tearing my eyes away from the FOWD welcome slide that was projected on a huge iMax screen, I saw hundreds of people seated around me on their laptops, tablets, and smartphones, either busy browsing on the Internet or sharing about the event on social media with the #FOWD hashtag. As for me, I chose my trusted Moleskin notepad and iPhone to document my favorite presentations.

Ian Murphy, the conference Director came on stage to welcome us to the first day of the conference and to introduce the opening keynote speaker, Khoi Vinh, a mobile product designer at Etsy. 

Khoi’s Mobile Magic

Khoi’s presentation was on “Magic & Mobile” and drove home the following points on building products for mobile platforms:

• The best way to gain insights into users is to feel their desire and distress and to empathize with them. Avid entrepreneur Ev Williams said it best in his quote:

• Building a product for everyone is like building for no one.
• Go narrow instead because it makes your job easier.
• The formula for a successful niche mobile app = lower the input effort + maximize the output + make it novel. Example of a novel app that works fantastically: Dark Sky 

He concluded that building product is half the battle, marketing is the other heavy lifting— that’s where the pretty pixie dust comes in.

Jason Pamental’s Responsive Design

Jason Pimentel, co-founder of H+W Design, had an interesting presentation on Responsive Design (RD).

As a designer and (the occasional) front-end developer, I decided to sit in on the presentation called Drawing on Quicksand: Thinking Responsively, Designing Responsibly. He presented quite a few good points on RD:

• Responsive Design can help us achieve design solutions, but first, we must know the ‘how’ to design for the ‘why.’

• Design a website for mobile as if it is an app. The term ‘mobile-only’ is like an extra pinky toe—unnecessary!
• Be responsible to your users & clients! Design for meaning, hierarchy, and understanding, not for fixed relationships and proportions.

• Jason likes the Facebook drawer feature and how it elegantly tucks away the navigation list.
• Responsive Images Community Group http://responsiveimages.org/.
• 74% of mobile web users will leave a site if it takes longer than five seconds to load.

How true is that!? He wrapped his presentation with this thought for us to take away: Responsive is not a line item; it’s designed. Don’t just look at your sites on different devices; see how they work, how people use them, and where.

Steve Hickey’s Web Prototyping

Rising star speaker Steve Hickey, a UX Designer & Developer at Fresh Tilled Soil, gave a great and useful presentation on web design prototyping.

Here are a few good points and useful tips curated by Steve:

• Use sketches; always start on paper! Prototyping on rough wireframe, e.g., POP app (Prototyping on Paper).
• Try storyboarding apps such as Briefs, Flinto, and Proto.io.

• Test early and test often! Recommended book on testing: Steve Krug’s Rocket Surgery Made Easy.
• Mockups = Useless.

• Try zooming your comps out, create Style Tiles to use time efficiently, and design in the browser.

Quite a useful list of resources for both designers and developers. Thanks, Steve! He summarized his presentation with the following points: Sketch a lot, start prototyping instead, test early and often, avoid comps for every screen, reduce workflow redundancy, and the process is never a straight line.

The Creative Geeks Party

The first day of the FOWD conference wound down with a final keynote by Josh Clark on Beyond Mobile: Where No Geek Has Gone Before. Once Josh wrapped things up, all the creative geeks headed out the AMC theater to get ready for the Attendee Party at a chic local bar called Latitude Bar, courtesy of the cool peeps at Media Temple. Thanks for the free booze, folks!

I had a great time networking with fellow creatives and even got a chance to exchange thoughts with the speakers and FOWD crew. 

Brendan Dawes’ Data Art

On the second day of the conference, I woke up with a feeling of sadness as I realized it was the last day of the event. I was determined to take advantage of a full day of learning, starting with a keynote by renowned British designer Brendan Dawes, whose work has been featured in the permanent collection of  The Museum of Modern Art (MOMA) in New York. His presentation on Carefully Everywhere focused on data and numbers and how we can take data and make it beautiful.

For him, everything is in numbers—including the number of kills by James Bond in all James Bond movies!

I (and the rest of the creative geeks) was enchanted by the beautiful slides of his visual interpretation of data and numbers. He believed that data by itself is not enough, data needs poetry. Check out this beautiful data visualization that he calls art. Who knew data could become art?

Shay Howe’s Modern Style Guides

Apart from Steve Hickey’s web prototyping presentation, another that I found useful to apply to our daily work as a designer or developer is by Shay Howe, who did a fantastic job advocating the process of creating modern style guides. He reiterated a few good points on modern practices and standards, benefits, and strategies for creating a style guide for design projects.

According to Shay, creating a style guide can improve workflow by cutting out unnecessary steps, thus providing better deliverables, and raise awareness by creating a shared vocabulary, thus advocating quality between departments, e.g., designers/developers and marketing people.

He advised us to take visual inventory when creating a style guide and also to recognize patterns by identifying what to include in the guide, e.g., branding, buttons, colors, forms, typography, etc. Below are some tools to help you create your own style guides.

Once style guides are created, share them with the team and collaborate on them. He reminded us to precariously balance between sticking to our guns and making changes requested by others. The rule of thumb would be to always predict the unpredictable, say no when necessary, conform to standards, and study other style guides, e.g., MailChimp‘s style guide.

Jimmy Chandler’s Eating Out and UX Design

Shay’s presentation ended early, so I decided to sneak into the adjacent theatre in hopes to catch Jimmy Chandler, a UX Director at Modus Create on 5-Star User Experience: What Going Out to Eat Teaches Us About UX Design. A useful tip I caught from him: when creating sign-in or new account, create it using an email address instead of a username because no one remembers their usernames! He also left us with the following pointers:

• Think about your product as a series of interactions that causes stress or pleasure.
• A usable and reliable product is the equivalent of good service in a restaurant.
• But restaurant hospitality is like a delightful design that meets people’s emotional needs.
• To accomplish this requires empathy and insight.

Jon Setzen’s Online Storytelling

I admired the work of Jon Setzen, Creative Director at Media Temple, who I had the rare privilege to network with the night before at the party. His presentation on Online Storytelling, or “the art of making people fall in love with your brand,” has left a positive note on me as a designer.

Most visitors have 5 seconds attention span when they’re viewing websites, thus, mastering the art of captivating storytelling is becoming necessary to retain visitors. A story uses emotions and nostalgia to connect to people’s memories. It should be immersive, interactive, consistent, and connective. Use impressive photos and videos to create a brand that supports people and people who support the brand.

Video is a great storytelling medium because it holds our attention for a longer span. Jon also mentioned a quote in Internet Retailer Magazine 2012: “Visitors who view product videos are 85% more likely to buy than visitors who do not.”, suggesting that home pages with videos have better retention and conversion rates.

Jon summarized that a great story contains the following elements: a killer home page, convertible product pages, a well-set scene, likable characters, nostalgia, autobiographical stories, and an unexpected twist. These elements, when beautifully executed, create a relatable brand that your customers would be proud to support.

Tiffany Shlain’s Closing Keynote

The main theater was packed to the brim for the final hour of the FOWD conference and no one could have better delivered the final keynote on Cloud Filmmaking: The Creative Wisdom of Crowds than Tiffany Shlain, filmmaker and founder of The Webby Awards and recipient of 60 awards.

She showcased “Cloud Filmmaking Manifesto,” her new participatory way of making films collaboratively with people all over the world, and a film on “Brain Power: From Neurons to Networks,” in which she delivered an inspiring and thought-provoking message on how we are (actually) very interdependent on one another, and how the Internet is the most complex connecting link we have with people all around the world—well, the third most complex! The second is the adult brain, and the first is a child’s brain.

A truly inspirational quote that I took away from Tiffany’s keynote was by Frank Outlaw, who said, “Watch your thoughts; they become words, watch your words; they become actions, watch your actions; they become habits, watch your habits; they become your character, watch your character; it becomes your destiny.”

After the last keynote, I got a lead from Bermon Painter, one of the presenters, on a good cupcake shop across the AMC theater called The Crumbs. For those who know about my cupcake cravings, you bet I had to try it out at all costs. Red velvet cupcakes, here I come!

Last Day of the Adventure

I got rudely woken up by a fire alarm blasting from the hotel hallway the next morning. Jumping out of my bed, I was ready to grab my essentials and scurry out of my room. Thankfully, it was only a false alarm or I’d be out on the freezing street in my jammies otherwise, hah!

With an extra day to spend, I decided to take the subway to the Museum of Modern Arts (MOMA). While getting off the train at my stop, I dodged a big black subway rat running swiftly across the platform through the crowd of nonchalant locals. Disgusted, I hurried out of the dirty tunnel onto the uptown street of Manhattan and followed the street signs pointing towards MOMA.

The museum was huge, with six exhibition floors and a gorgeous courtyard. Too bad I only had time to venture into two exhibition floors, but I did gather plenty of unique creative inspirations for my next design projects. With my “inspiration meter” filled to the brim, I hopped on the yellow cab towards La Guardia airport and hoped for another excuse to visit this wonderful city called New York.