Recently Gesture Theory launched the new Undercurrent website. This was a great project to work on both professionally and personally. I hold a lot of the people that currently work there and those that had been there at some point in time. Typically when we launch a product or site I’ll go through the process on the blog. This time instead I’m going to point to an interview I did with Matthew Carlin of Undercurrent where we discuss some of the finer points of the site titled Production Notes: Undercurrent.com. Below are some of the screen shots of the site in various devices.
I remember the time when the iPad was just a rumor, something that was being discussed on blogs and other sites. There were guesses on what Apple would release with unlimited potential. When I finally got my hands on one the day the 3G version became available I started dreaming about what I wanted to design on it. Photos & videos seemed like a great start. The iPhone showed us the potential of gestures: swiping, tapping and pinching. The only issue with the iPhone was that the screen was kind of small for the purpose watching videos. Photos seemed decent on a smaller screen but still something felt lacking. So when I started to consider the design potential of a much larger screen that the iPad offered with gestural possibilities, I really wanted to consider the opportunity of photos and video. At Behavior I got that chance to design the first Live TV app. Last week at Gesture Theory, we released the Forbes Photos & Videos iPad app.
The Forbes website has a lot of great video and photo content associated with their posts. We saw a huge potential to take that content that is updated daily on the website and create an app specifically to display it an appropriately larger format. A person could filter content in a number of different ways like what is popular or the type of stuff they wanted to see. Maybe they wanted to see just videos, or vice versa. We also knew that the speed could make it easier to go through a number of galleries faster than on a website. I noticed that when I started using the app, I was sharing more through Twitter and Facebook than on the website. We also wanted to make it a resource that people would come back to, so we designed the ui to make it easy for a person to save content for future use. Forbes organizes their posts into a number of different channels like Business, Investing, Technology and so on. We designed a page that gives an overview of all the content while allowing a person to dive deeper into each channel.
There’s a couple small tweaks we will be making for the next release but overall we’re really excited about this app. We really enjoyed working with Forbes on this and appreciated them listening and beleving in our proposal. We’re also thinking about the potential of creating a platform that will make it even easier to publish on to the iPad and other tablets as they pick up steam.
In the meantime, the Forbes Photos & Videos iPad app is available in the iTunes store.]]>
The AIGA engaged Gesture Theory to review the AIGA|Aquent Survey of Design Salaries 2010 website and provide our recommendations on how to improve the site for the 2011 launch. In the proposal they expressed the importance of building an online experience that tells the story behind the data. As we looked at the data it became apparent that the design philosophy should focus around adding visuals to compliment the numbers in order to make it more appealing and easier to consume for the reader. We approached the project in a number of phases. First, we identified a number of “quick-win” design changes that would improve the site and add value immediately. Future phases will involve iterating over the coming year with other gradual improvements to existing features and functionality throughout the site.
We planned a quick 3-week sprint from start to final release that incorporated equal efforts toward UX, design and development. Our first priority was to perform a technical assessment to determine what we could do in the limited amount of time. That involved looking at the provided data and legacy systems already in place. Next, we looked at the navigation of the site, while keeping in mind both what a first-time viewer and returning viewer might expect. We also performed basic use-case analysis to understand the different types of readers. Sample viewers include an HR manager looking to create a job listing with an appropriate salary; an employee looking to see where they fit in with their colleagues; an employer looking to see where the market is; a student that is about to enter the job market for the first time; or a career-changer looking to explore different roles in the industry. Generally, we found that a person is either looking to compare salaries to see if they’re being compensated appropriately (or compensating appropriately, in the case of an employer), compare the market conditions of their region to other regions or to understand what they can work up to in compensation. From there we reworked the sitemap and outlined the data visualization through wireframes. Once we had a good idea of the structure of the site we explored a number of visual design approaches that best represented the content through charts, typography and layout. While we were exploring the design, a prototype was being developed in a staging environment that allowed for quick testing for improvements before final release.
Each section was examined closely for ways to improve the experience.
Looking at the site, we adjusted and renamed some of the sections to better reflect the story behind the content. “Overview” was renamed to “National summary,” and became the site landing page. Previously,the first thing that people saw was the introduction letter from the Executive Director, which we didn’t think was valuable for repeat visitors. The “Salary calculator” was improved by displaying the results on the same page as the filters. “About” is a new section that combines insights from Richard Grefé as well as information about the AIGA and Aquent. “Definitions” provides descriptions for each of the highlighted positions and outlines the methodology used to collect the results. In the previous version, “Resources” contained a few links that were located in a side bar for a couple pages. In the new version of the site, it was expanded and moved to its own section with the addition of visuals. “Feedback” is a new section that opens up the conversation to allow the readers the ability to comment and provide suggestions on how the AIGA can improve the site.
National Summary of total compensation
We took a close look at how the data had been presented in the past. Previously, by just showing tables of numbers, a person looking at a glance didn’t have an easy time comparing positions. Combining both the salary and additional compensation into a bar chart allows a person to compare relationships quickly. We also enhanced the experience and interactivity by adding a mouse over feature on the bars, which reveal additional information when activated. Using the salary data, we calculated hourly and daily rates based on an average 2,000-hour work year. For the additional compensation, we broke out the total value along side the total compensation. And for each position in the grid, mousing over the titles provides the description for that position.
Median total cash compensation 2000–2010
We wanted to visualize the historical data as opposed to just displaying a list of numbers. After laying out the data and connecting the dots, the resulting presentation was much more impactful. It’s now very easy to see and consume the salary trends for each position over the past decade. And if a user wants to view the actual numbers, they simply hover over a particular year.
Previously, depending on how the salaries were filtered, the results page would often be empty. Even more frustrating was the fact that the results (or lack thereof) would be displayed on a different page. That meant that after a person spent time specifying all of their criteria, they would often have to press the back button and start all over again. By placing the filters on the same page in the left rail, the results change dynamically with every selection allowing for quick access and comparisons. In addition to the filters, there is a suggestive search located in the drop down menus that makes filtering by a specific position or location much easier.
About, Definitions and Resources
We made the text reader friendly and images have been placed where appropriate.
As the site evolves over the short and long term, the feedback form is intended to open up the conversation and allow the readers to sound off on how they would like to see the site improve.
AIGA|Aquent Survey of Design Salaries 2010 website
Last Wednesday I had the opportunity to be a part of an AIGA Webinar titled Devices Everywhere with Ethan Eismann and moderated by Callie Neylan.
In the next day or two there should be a more in depth recap of the actual discussion on the AIGA website. For the time being though I thought I’d share some of my points in response to the design landscape within the context of devices everywhere. Below are some of my my points to the design landscape within the context of devices everywhere, a recap from the AIGA can be read on their site.
Designing for mobile first
A couple years ago, the typical steps for designing something on screen meant that a designer designed for a desktop browser. Trying to interact with the site on a mobile device was almost an afterthought. But with more focus on product design and mobile devices, sites and apps are now being designed for mobility first, desktop second. The focus of the desktop has evolved too. Depending on the functionality a desktop might focus more on settings and editing features while the tasks and activities are more focused outside on a mobile device.
It’s kind of fragmented
There’s a lot of tactical and strategic considerations to be made. Primarily is how and why a person will be using the device, and which device, and will there be multiple devices that need to share and interact with each other. How is the content being used on the devices going to be saved, opened and shared? Will two different type of devices be able to interact with each other.
Content that is slightly dynamic can be viewed in almost an infinite number of ways
Think about a blog post—someone can tweet it, email it, view it on tons of different rss feed readers (keep in mind that some of the ui is different on the same rss readers depending on the platform), reblogged and copy + pasted all with a simple tap of a mobile device. How that content is parsed and displayed in new formats all makes for an interesting challenge. Encourage people to share a message or put up a wall that no one has time to read. Images are another issue along with the growing ability to aggregate and embed sound.
People can click, press or do some sort of motion like a wave to do an action
People designing can’t rely on a person clicking. There’s no cursor or mouse over ability on the iPhone and iPad. There’s tapping and swiping gestures that open up the abilty to challenge interactions that were never possible before. Motion sensors can pick up interactions that connect to other devices. People might be typing with one hand and doing something completely different in the other hand.
We have to design around connectivity: wifi, 3 & 4G, and no connectivity at all
When we we’re just designing for the desktop browser, the internet either worked or it didn’t. With devices that changes entirely. How does an app work when there’s no connectivity vs when there is. How do files cache and load when the network speed changes depending on location.
Not only do we have to deal with different browsers, we have to deal with devices and different sized screens
Depending on what type of app is being designed, the interactions are going to be different on different mobile devices. Screen real estate, proportions and formats all need to be considered. Some options are to make the grid fluid and flexible while other times have to be designed differently depending on context. How a tablet might be used could be different from someone using and taking a smart phone everywhere.
There’s the question of how finished a product should be for a release—fully polished or release and iterate
Depending on the product, size of team, budget and timelines of a project, and facing a lot of unknowns about what a person or market is willing to use, the product development cycle might release fast and often fixing and evolving with each iteration. Other strategies rely on keeping the development as secret as possible and release a polished product.
We have to design with and around api’s that can be updated without advance warning
Designing around dynamic data that can be mashed together to create awesome experiences is cool. What’s not cool is when the experience is designed around a data set that may change without any warning.
The fact that we now can measure just about anything has implications for the design process
This isn’t a new idea, but the speed that things can be measured and send alerts to someone is interesting. With that valuable information available at a person’s fingertips allows for decisions to be made in realtime. Designing around that level of dynamic speed could be challenging.
While this isn’t a definitive list, below are a couple sources that I’ve found helpful as I evolve my design skills.
Communicating Design: Developing Web Site Documentation for Design and Planning
By Dan M. Brown
Sketching User Experiences: Getting the Design Right and the Right Design
By Bill Buxton
Subject To Change: Creating Great Products & Services for an Uncertain World: Adaptive Path on Design
By Peter Merholz, Todd Wilkens, Brandon Schauer, David Verba
iOS (need to sign up)
On Friday Gesture Theory was invited to present to AOL’s Experience Design Studio (XDS). We talked about Observing, Remembering & Sharing. Below is our deck.
Because I’m a hybrid designer of sorts, it has always been a long conversation for me to convey what I do. As I explain parts of the process, people nod their head like they understand but sometimes I wonder if they really do. Recently I received an email any designer would be thrilled to read. Chad Mumm of SWITCHED asked me if I’d be willing to design an app while they filmed the entire thing.
About a month ago I went through an intense three hours going through the entire process that made sense for me within the time frame to design an all encompassing multi platform app.
I broke the process down into six phases:
1. Use cases
· Considering what people actually want to do with a weather app (thanks to the people that responded to my question on Twitter).
2. Analyzing what is already out there
· Deconstructing a couple apps and sites already out there and comparing what they do to the use cases from the first category.
3. Exploring ideas
· Creating new features that support the user experience.
· Building out the design in form.
5. Testing + prototyping
· Working details after placing the wireframes on devices.
6. Finish, test and iterate
· Look at the prototype on the device, test what works and fix what doesn’t.
Each of those steps was ten to fifteen minute sprints that I set up for myself. It wasn’t a lot of time but gave a good idea of how an app could develop. While I put a lot of pressure on myself I really enjoyed the time seeing what I could do. I highly recommend doing a crazy exercise like that once in a while to push creative constraints.
Yesterday the film and post went live on SWITCHED. I was extremely lucky to have had Chad and his crew film me. Being thrilled would be an understatement. I now have something in real life that I can point people to that shows what it is exactly that I do.
Below I’m displaying the post, the design as it would function on the different devices and a couple photos I took as I was being filmed. There’s a lot of detail to the actual design that could easily work so don’t be surprised if I turn this into something real in the next couple of months.
Even if I hadn’t been invited to How to Build Great Products: Insights I would have probably attended. There was a number of products & brands that I think are doing things better than everyone else. There was Kickstarter, Foursquare, Chartbeat, Buzzfeed and Huffingtonpost among many others. It was really exciting to be able to talk and share some of my experiences inside the group. Plus I got to hear and learn from all of them.
Ty Ahmad–Taylor and Kevin Kearney did a great job of planning and organizing the event. While the event was only one day the prior evening there was a dinner to get to know some of the speakers. I had a lot of great conversations though the one that stood out for me personally was Charles Adler of Kickstarter. I can’t think of a better product that is using design & technology to make a successful movement.
During the event I was on a Q & A panel with Kevin & Cindy Alvarez with Ty asking the questions. To be honest I had no idea what was going to be asked. Usually I think better on the fly when I’m in front of a computer but I think I was able to hold my own up there. The second part of the day didn’t go exactly as planned. I was part of an ignite style presentation where I had to go through 20 slides in five minutes. Because each slide was automatically forwarded my original pdf was converted to a ppt. I didn’t know that was going to happen and the ppt inadvertently bitmapped most of the slides. So instead of seeing my illustration in orange there was a lot of gray pixels. Not to make excuses but it did throw me off. I ended up basically reading each of the slides with little interjection. Next time I do a similar presentation I’ll practice with the intention that anything can happen and how to power through it. Either way it was a great learning experience.
As for the substance of my talk which I’ve embedded below, it was a combination of tech, design, process and my experience at Daylife. It was sort of strange talking about something that I’m no longer working on but figured it was a great opportunity to take a fresh look at what I had been a part of. I’m always mindful that there are a lot of companies that would like to have the success that Daylife has had so I never divulge anything that isn’t already already in the public realm. Looking back it was fun to see how things evolved as a platform and system and what products spun out of there. That experience has really helped me over at Behavior when we work on apps for the iPad and system designs.
The overall experience of going through the pre planning of writing my talk, meeting a ton of new people that I’ve respected from afar and hearing what they had to say was unique experience for me. There was a lot of takeaways but the one thing that stood out for my implicitly is to keep moving. Everyone was observing, measuring, iterating and working towards something even better than what they had started with. When things didn’t work out they just kept moving forward anyways.
Scaling Personalities (Adaption, White Labels And the Digital Ecosystem)]]>
I’ve posted my presentation that I prepared for Parson’s Design IV class. It’s quite similar to the talk that I did in Dallas for the AIGA in February though I shuffled the order up for a more appropriate context for the class. On Monday night James A. Reeves asked if I’d like to come in to his Wednesday class to talk about Design Notes and Agile Design. What is interesting today is that a lot of people that are now in school have grown up through Facebook and don’t even consider the potential of publishing online and how that communication can help them.
The first section is about publishing, why I do it, the type of content that I write about and the benefits of keeping an active mind. The second section which was somewhat titled differently from my previous talk was called Repeat, Repeat, Repeat. In that space I talked about a couple projects that I continued day after day for a lengthy period of time. By trying something day in and day out it has allowed my to experiment, edit and take the pressure of trying to be perfect. By taking a step back over time it’s helped my to see patterns emerge that I wouldn’t have seen and in turn allowed me to self analyze to improve. The last part of the talk was a high level idea about Agile Design and using my experience at the successful start up Daylife as my case study.
Through all my examples I hopped that they remembered to:
· Learn through experimentation
· Experiment with technology
· Repeat and edit
Afterwards we as a class talked about their projects that were using a bodega as a starting point to gather data and visualize information in a meaningful way. It was a fun conversation and I appreciated the chance that James gave me to share some of what I’ve been working at.]]>
Unexpected Narratives and Creating the Right Conditions
Last Thursday I traveled from NYC to Dallas to Arlington to hang with the AIGA Dallas Fort Worth Chapter and present a talk I titled Unexpected Narratives and Creating the Right Conditions. Jimmy Ball and the the Chapter treated me extremely well and made the experience great for me. I’ve attached the deck and made note below of all the posts that were covered in the talk.
1. STORY LINES
Walking to work in 60 Seconds, my 20/20 at #makethink AIGA Design Conference 2009
Watching the sun interact with design
New York City Colour Study Before the Crop
36 days of New York Sky: January 16th 2008 – February 20th 2008
New York City Colour Study Timeline
New York City Colour Study – Time when photo was taken graph
A Couple More New York City Colour Study Experiments – the old school animated .gif and weekly view
Starting the #walkingtoworktoday photo project
Experimenting with Fragmented Medias while #walkingtoworktoday
Unexpected Narratives and Creating the Right Conditions
Five reasons why I blog
Deborah Adler ClearRx Interview
An interview with John Gargiulo, owner of Swich in NYC
The Person behind Nooka: an interview with Matthew Waldman
Alissia Melka-Teichroew (@alissiamt) Interview: designer, founder of byAMT, curator, and maker
QuadCamera and ToyCamera Interview with Takayuki Fukatsu, creator of iPhone Apps
A great conversation with Swissmiss (Tina Roth Eisenberg)
REVIEW COPY: Look Both Ways by Debbie Millman
REVIEW COPY: I Miss My Pencil by Martin Bone and Kara Johnson
Banksy at work in NYC: Broadway & Howard St.
My walking experience with the AIGA NY ALPHABET/CITY: A WALKING TOUR WITH TOBIAS FRERE-JONES
The Flo in Florent
My Link Drop Process
Link Drop Today Release Notes
Video on Agile Design from my Creative Mornings talk is up
Working on Getty Images SmartGalleries by Daylife
3. HYBRID GRAPHIC DESIGN
What is the logo worth?
Face pics are the new logo
Company Deal Announcements
Branding Issues: Flickr + Yahoo + Microsoft
Lean Pocket Info Fail
Confusing MTA Subway Turnstiles
the Locksmith’s Business Card
Flexing scale, marks and other consistent things that brands could be
Branding abstraction in the real world (at least in NoLita)
Quotes to remember as a designer
4. CONTENT IS THE NEW UI
My News Flow on Flight 1549
Web actions du’jour
What Graphic Designers need to understand
How my iPhone evolved how I tell stories
Sketching out a blog post loop
Thinking about twitter feeding facebook status
More buy and vote on demand, and distributing things in digital
Podcasts are now magazines, magazines are what newspapers used to be, and music files are now…
24hr music app for the iPhone
Showing Competitors on a Product Site
Inside Out with Invader in NYC
Still photography and video evolution
I survived the opening of #makethink AIGA Design Conference 2009 relatively well, met some smart people and had some good food. Not much more a designer could ask for when starting a conference. Rewinding for a minute—July 30th was when I got an email from friend and President Debbie Millman asking if I would like to represent the AIGA NY Chapter for 20/20. The basis is an open ended brief of presenting something on Make Think in any media of my choosing for one minute. I had seen the prior conferences version online for Gain and Next so I knew what I was going to be a part of. I immediately emailed Debbie back letting her know that I’d be happy to do it. I had a vague idea that I wanted to be minimal on the speech, let the visuals speak for them self, and it was going to be about NYC. In the end I chose to share what it’s like for me to walk to work everyday in the best city in the world.
Above are some of the photos I took on my daily walk. The entire set of photos can be found on flickr. The video that I pressed play to is on Vimeo and YouTube. I also have a pdf, though if you’d like a copy of that please email me.
The prepared text:
Hi, I’m Michael Surtees from AIGA NY and I’d like to share what it’s like to walk to work every morning in NYC. I start in the mid 30’s and walk about 40 minutes to SoHo. This is the every day graphic design in it’s purest form that lives and dies on the street depending on how strong the mark is. I love experiencing this stuff because I spend most of my time thinking on screen.
5/8 Michael Surtees from CreativeMornings on Vimeo.
I’m really happy to mention that my Agile Design talk at Creative Mornings can now be seen on Vimeo at http://www.vimeo.com/4831538. The entire video is about half an hour with the Q & A—I guess I went over my ten minute slot, ha. I just want to thank Tina and the entire Creative Mornings team for giving me the opportunity to talk, setting up the event and producing a great video that ties my talk together. I also wanted to thank James A. Reeves who was hanging out in Finland and was the virtual skype guest, and Core Industries for sponsoring the talk.
And please let me know what you thought of the talk. I’m kind of curious to hear from designers who are working in a more traditional framework of waterfall. Does agile seem like a good idea or something that should be left to engineers? And to save some time, here’s the links from the last slide…
The Age of the Unthinkable: Why the New World Disorder Constantly Surprises Us And What We Can Do About It
by Joshua Cooper Ramo
Is incremental design the wave of the future?
Ethan Eismann (Look for the Designing for Agile: Seven Practices)
Twelve emerging best practices for adding UX work to Agile development
Design as an Iterative Process
Is Your Agile Software Process Handcuffing the User Experience Design?
Kanban Development Oversimplified