The Business of Innovation

by

CGHQ-hallway-expanded (1)

Having worked for a 15 person company, a 65,000 person company and now a 140 person (soon to be 600 person) company, I have built my expertise and career around understanding the organization for whom I am working, the organizations with whom I seek to partner and using that collective knowledge to act as a catalyst for innovation and value creation. While I did this kind of work for over 13 years at American Express, partnering with global corporations and NY-based startups, building new products, testing early-stage concepts and creating new distribution channels, my most recent chapter started over a year ago here at Control Group.

Control Group partners with our clients to help them envision how they can innovate in the marketplace and then we design and develop the solutions for them. Our end goal is to make the world in which we live better by creating experiences that are enabled by well-designed, human-centered technology. Our work includes retail, the workplace, cultural institutions, public transit, and now the streets in your city.

Having worked with companies of all sizes, I see the common stigma of people questioning the practices of big companies and their actions in the marketplace. They speak of missed product opportunities, experiences that don’t focus on the user in an impactful, thoughtful way, poor marketing communications, bad service interactions and timeframes that seem outrageously long. The list is infinite.

I focus my energy and attention on understanding why a company is making certain choices, or at least giving the market the impression that they have made that choice. There usually is a reason, whether it be spoken, inferred or inherent in the structure, policies, politics, leadership, decision making process, capital position and/or investment priorities.

I seek to understand the people, motivations, politics and “unspokens” and then use that understanding to enable market-leading innovation. I learn the language, understand organizational goals and appetite, develop relationships, build trust and use all of that to identify areas of opportunity and value creation. I then act as a coach, interpreter, translator and catalyst to make it real. My end goal is to build bridges between and amongst people doing work that makes the places we live, work, travel, play and learn infinitely better.

In the remainder of this post, I want to share what I’ve learned thus far in the hopes that it adds dimension to your perspective and gives you new strategies and tools to accomplish impactful work in the world. These learnings reflect what motivates me — envisioning, building and delivering products and experiences that are great, not just “good enough”. My perspective is most informed by how to enable innovation with and for big companies, but I hope you can find a nugget in all of this that applies to any of the work you are doing.

What I’ve Learned:

  1. Understand Their Culture – Effectively engaging with a client requires learning their business and culture. It’s not unlike traveling to a foreign country where you need to educate yourself and learn to speak the language. What are their priorities and goals? If they are publicly held, what are they messaging to the street through their earnings reports? What kind of regulation are they subject to? What major policy decisions are under debate that impact their business? What language do they use? Are there acronyms that everyone uses? (RGU was one on my last project — it stands for Revenue Generating Unit). Are there Operating Principles that all work ladders up to? Speak in their language so that they can understand you.
  2. Observe The Organizational Structure – Investing the time to understand the players, their respective priorities and areas of responsibility is critical. Take in all of the signals available to you, from business cards to the way people introduce themselves in meetings, to body language to organizational charts if they are willing to share. Observe how individuals in the company work together (or don’t). The reality is that as companies get larger, more territory lines are drawn, more jockeying happens and more attention is placed on how to effectively carve out one’s world. While it can seem ridiculous, it’s a reality. And it’s not limited to Fortune 100 companies. This kind of understanding takes months and years to accomplish, not just days and weeks. And it needs to be continuously honed.
  3. Consider These Factors Before Pursuing – Finding the right audience for the kind of work we do is worth the hunt and the wait. Having that sponsor set of stakeholders who have demonstrated the will, political and relationship capital, fortitude and budget is critical for a successful engagement. Establishing a trusting, transparent and consistent rapport with this individual or team of individuals is one of the most important roles for the collective team. If the audience isn’t the right fit or doesn’t have the appetite and fortitude to see it through, carefully assess if your firm should pursue the project.
  4. Never Stop Nurturing – Regardless of if you have a paying engagement with the client or not, never stop building and nurturing the relationships and establishing new relationships. They will return value to your firm over time and they make the work that much more satisfying thanks to deeper connections and understanding.
  5. Instill The Big Picture – Trying to sell process almost always fails. While we know that we have really effective methods that have driven our success over the last 14 years (UX design visioning, agile product development, project governance to name a few), the client wants to buy the outcomes of these processes. Help them see the pot of gold at the end of the rainbow from early on. While the end product or experience may not yet be known, keeping the team and dialog focused on that higher purpose and North Star is critical to instilling confidence and commitment.
  6. Show You’re Delivering – Demonstrating progress helps to establish credibility and leads to permission. Smartly package and merchandize the value you are delivering throughout the project.  The earlier in the project you can do this, the better. I saw this play out really positively on a recent project we did for Comcast. During the first sprint, our Design team established the principles that would guide the remaining 13 sprints to ensure that we delivered on the client vision for the user experience. The principles and themes really resonated with our stakeholders and were the foundation of every sprint review.  As a result of them, we were able to make a compelling case by sprint 3 to gain access to data sources that would make the Customer Timeline App exponentially more valuable to the associates working in the store, and in turn provide a much more informed and user-centered customer experience. The progress we’d demonstrated from the outset was a key driver of getting this permission to do something different than had originally been planned.
  7. Be Transparent, But Don’t Overshare – Revealing too many of the inner-workings of your process during the project can lead to unnecessary instability with the client. I think this is a common and understandable challenge in the software development world. Good software development involves attacking risk early and clearly communicating what those risks, blockers and dependencies are. Telegraphing those things to the client, especially with the language used in software development (risk, blocker, escalate) puts the client on high alert and does not instill confidence. The message can (and should) be relayed, but it is important to be smart about where you position that in the conversation and the language you use.
  8. Utilize Different Degrees of Face Time – Relatedly, identifying which forms of “client facing time” are best suited for which purpose is an important filter to apply to any message. One of the things I’ve seen is people assuming that all “client facing time” is created equally, or not taking the time to consider the forum. Just because you are on a call or in a big meeting with them, don’t assume it’s the right place for a message. Sidebar conversations are a powerful tool to incorporate into the mix. If you’ve effectively invested the time in building trusting and transparent relationships with your key stakeholders (see #2), you will have access to them for these smaller group conversations and they will appreciate your preparing them for a message and/or seeking their counsel on it. Clients don’t want to be surprised, especially in a forum where the information is exposed in front of a larger group than desired.
  9. Enter No Meeting Unprepared – Planning and preparing for client meetings, whether they be routine weekly meetings or one-off sidebar conversations, always pays off. Yes, I know, one more thing to do! Can’t I just wing it and ping them later if I forgot something? Well, you could. But, I’ve found that I am able to help Control Group successfully build great products for our clients through planning. Taking the time to identify the items we need to address with the client, prioritizing them and strategizing about how I will frame them with the client has been incredibly valuable. Done right, this leads to deeper trust, greater transparency and most importantly, GREAT products and experiences in the world, which fulfills our team.
  10. Be Considerate – Bringing a generous spirit to all that you do (and certainly 1-9) leads to better outcomes. Yes, I’m a very positive, optimistic person and what I’m suggesting here needs to feel authentic to you as a person. That said, always try to put yourself in the other person’s shoes and imagine what they are facing and how that impacts what you are trying to achieve. I was reminded of this recently when I walked past a watering hole near our offices and read the message they’d put on their chalkboard out front:

Screen Shot 2015-08-24 at 3.54.07 PM

When working with clients and other organizations, it’s important to always remember that they are fighting battles we know nothing about. Remembering this when it seems like they are taking an unnecessary amount of time to get back to you or not responding to your email or not able to commit to a product feature that seems so obvious and valuable can help you keep perspective and remove the noise and unproductive energy from the process.

If you’ve made it to the end of this piece, have you decided that you never want to work with a big company ever again? Before you leave thinking that, let me close with why I think it’s worth it. Big companies were once small companies. They had something that the market responded to and they successfully grew that into something bigger. Growing an idea from a small company to a large corporation is a major feat. By working with a big company, you increase your ability to build a product or experience that can have a major impact in the world in which you live. These big corporations have plenty of complexity but they have also built up large customer bases, marketing channels and capital to invest in attracting new customers. If I’m going to pour myself into creating market-leading, innovative products and experiences, I want as many people as possible to start using them.

Vote for us to be at SXSW next year!

by

Link_Brooklyn2_Barclays_resized (1)

It’s that time of year again, SXSW panel voting is open, and we’re so excited to be returning with two panel proposals this year as our newly formed company, Intersection.

An Updated Guide to Civic Innovation

For this dual speaker talk, we’re introducing Intersection to the world with Chief Innovation Officer, Colin O’Donnell, and Chairman Dan Doctoroff. In planning for the future of our cities, it’s important that we factor in civic innovation and the forging of public-private partnerships in order to adapt to the city’s ever-changing landscape. (Vote here!)

 

Taking it to the Streets: Digital Gets Physical

As digital screens continue to integrate into our everyday living in wearables, taxi cabs, and subway stations, the promise for Digital Out-Of-Home (DOOH) advertising has never been brighter. With an esteemed panel comprised of Titan, IPG Media Lab and Annalect, our speakers will be evaluating every spectrum of this concept, from branding opportunities to the power of targeted data. (Vote here!)

Thanks for taking the time to vote, we hope to see you in Austin!

Airport’s Promising Retail Market Driving Digital Innovation

by

duty

This week, Governor Cuomo approved a $4 billion overhaul for LaGuardia Airport to expand and create more space for flight operations. In addition to expanded flight operations, there is sure to be a large retail component to the new LaGuardia, ranging from duty-free sales to luxury goods to airport dining.

The numbers behind the gold rush into airport retail are pretty staggering as airport sales are expected to grow 73% by 2019. Not only that, the global duty-free market is expected to be worth $73 billion by the year 2019. Luxury goods and fashion are another bright spot in the airport retail landscape, with £1 in every £160 expected to be spent on fashion in London’s Heathrow Airport in 2015.

The promise of revenue expands beyond retail as well. Airport experience management company, OTG, has recognized food service revenue lifts of 15-20% after installing an iPad-based ordering system throughout the airports it manages.

There’s a reason more retailers are incorporating technology into the airport space. Here’s how airports can provide an pervasive retail experience with the power of three factors:

beats

Deeper Digital Experiences: Unlike the mall, an airport has a captive audience and can lead customers on a deeper, more intimate retail experience. Since airport travelers defy the national average of smartphone users (with 97% of passengers carrying at least one mobile device), the incorporation of tech in stores has been long awaited. Use of in-store tech has a 32% impact on driving sales, and allows for more creative innovation. Digital displays like SFO Airport’s Beats by Dre kiosk goes beyond traditional signage to incorporate interaction with the customer. Any time an item is grabbed off the shelf to examine, the screen automatically shows the product’s “stats” for the customer to see. The project boosted unit sales by 120% and helped showcase an endless aisle of products with the touch of a product.

 

dutyfree

Shipping Convenience: The ability to have items shipped lifts the friction for the shopper. Companies like Mini-Me Labs are using multichannel platforms to give shoppers the option to have their items shipped wherever they would like. No longer restricted by luggage capacity, customers are free to enjoy the retail experience without having to check more baggage.

 

otg ipad

Decentralized Retail Touch points: Wireless-enabled kiosks allow customers to buy any item wherever they are standing. These kiosks extend the retail floorspace beyond the shop into the entire airport space, similar to our OTG Management project, which extended the restaurant’s sphere of influence from the concourse storefronts into to iPad kiosks around the gates at the extremities of the airport. Our work with OTG combined both the information-sharing and omnichannel concepts that allow passengers to check their flight status before they choose a well-done steak vs. grab-and-go sandwich, order and pay for food directly from their terminal seat and have it delivered directly to them.

These three approaches highlight the possibilities for airport retail. As consumer tech demand continues to grow, now is a prime time for airports to reevaluate their retail experiences. With a promising market ahead, we can hope to see more omnichannel platforms continue to evolve in airports and provide engaging buying experiences.

The Quiet Magic of the Responsive City

by

MTA1

Imagine me one morning, acting the role of a typical New York City commuter. Standing on the platform waiting for the R train, reading a book (The Martian, recommended) on my mobile with my earbuds in, listening to Skrillex remix Tom Waits or something equally horrible (not recommended).

Then comes the Quiet Magical moment, completely without warning. I sense movement out of the corner of my eye, and see people heading toward the stairs. I realize an announcement is being made on the speakers but the horrible bass dropping in my ears drowns it out completely. Then I glance at the MTA kiosk and, right there on the screen, is the service change alert that tells me there is an incident at 14th Street and trains are delayed.

I was already halfway up the stairs towards the 4 train before I realized the “magic” that had just happened: the thousands of hours put into the construction of the kiosks in the subways, building the infrastructure to deliver the messages, the hours spent perfecting the front end client, all resulted in something completely different than what we expected. Because as technologists, we often just think about the “wow” moment. The crazy interactive ad that makes people stop and stare.

That timely service announcement didn’t just move me, it moved hundreds of people to route around the damage instantly, quietly and yes, magically. Indeed, the voiceover is great, but what about the people who walk onto the platform and have to wait five minutes for another one? To commuters in New York City, five minutes is a lifetime. I’m guessing hundreds of thousands of dollars were saved in productivity (and who knows, maybe people didn’t lose their jobs) just because of a simple image with text on it – and of course, the countless difficult problems solved invisibly in the background to allow that image to be displayed seamlessly and reliably in an advertising loop.

As I exited from the 4 train onto the platform, I watched people step aside to let me off. It came to me that this selfless action of “moving aside” is also exactly the kind of humble, daily magic that perfects the daily flow of our cities. The process of the city, reinforced by the technology, creates a wave of sub-sonic magic moments that build to the background roar of efficiency that moves the needle on human happiness. This is what Intersection will accomplish. Oh, there might be some “wow” moments along the way also.

Props to the CG MTA crew: Nicole Nguyen, Myk Bilokonsky, Damian Gutierrez, Hal Dick, Eric McGill, Erin McGill, Dan Kang, and all dozens of people who have worked on the project in the past 5 years.

Intersection_FollowInsta

To stay updated on our future projects, follow @intersection_co.

Control Group’s Intern Summer Project: Show NYC

by

Screen Shot 2015-07-24 at 4.31.07 PM

Eight weeks ago, our summer interns entered our office bright-eyed, bushy-tailed, and ready to work. In their time spent here, they have contributed to projects like MTA On the Go and LinkNYC. You might think eight weeks isn’t that much time for a full learning experience, but what you are about to read will prove the contrary.

Four of our interns were tasked by our Software Engineering department to build a CMS platform with user-generated content for Control Group’s existing MTA On the Go kiosks. We as a staff got to physically see it when they presented at our monthly company meeting, and to say we were impressed would be an understatement. This is the story of how they were given the (not so) simple task of building a CMS system and turned it into Show NYC.

 

Our Team

Interns2

  • Josh Addington – “I finished a degree in Computer Science this past year and have been working on picking up modern web development with a focus on back-end development. During my time here, I built up the Django back-end and ReST API, and managed our AWS infrastructure.”
  • Omayeli Arenyeka – “I am a rising junior at NYU, studying Computer Science and Design. I was attracted to Control Group because they seamlessly integrate captivating displays and robust technology. I worked on design and front-end development for the website, kiosk, and mobile app using HTML, CSS, JavaScript, and Angular.”
  • Emma Chesley – “I am a rising sophomore at MIT, majoring in Mathematics with Computer Science. I was looking for a summer internship that would allow me to coding in a professional environment, and I found that—and more—here at Control Group. My primary focus this summer was front end design and development, using HTML, CSS, JavaScript, and Angular.”
  • Sage McGill – “As a recent graduate of General Assembly’s Web Development Immersive, I was looking to gain more experience and sharpen my skills as a developer. I knew of Control Group’s representation as one of the most innovative shops in New York City; I feel very fortunate that I had the opportunity to be surrounded by the vast amount of knowledge in the office. For this project, I was primarily responsible for building the mobile application and setting up the Angular framework for our web application.”

 

Our Process

Interns1

Working with AWS

“I came into this internship knowing that I wanted to work with Amazon Web Services. AWS is the de facto cloud infrastructure, so I knew it would be a great asset. I had taken a stab at AWS before, but was left frustrated with its unclear documentation. I knew that the supportive environment with Control Group’s world class developers would make my internship the perfect time to try using AWS again. After pouring over documentation and many conversations with our very own Erin McGill, I got everything set up and running.”- Josh Addington

Learning AngularJS and Ionic UI Framework

“To build the mobile application, I was challenged to work with an unfamiliar framework in an unfamiliar language, hosted on an unfamiliar platform. Before writing any code, I spent hours reading documentation as well as comparing mobile UI and JS frameworks, various plugins, and countless libraries. This research spike was extremely valuable in choosing what technologies to use. For the mobile application, we ultimately used the Ionic UI framework bundled with AngularJS and wrapped in Cordova. Although research is a valuable learning tool, nothing proved to be more valuable than diving head first into a new technology, trusting that it would eventually become more clear. With the help of an amazing team, I went from having little to no experience with these technologies to a functional product in just eight weeks. Not only did I learn a lot, but I also gained the confidence I needed to approach any new language or framework in the future.” – Sage McGill

Organizing Everything with Trello

“During this internship I was introduced to Trello, a project management tool. It gave me a comprehensive view of our project and allowed me to see our team’s workflow for any given week. The biggest challenge I faced when using Trello was remembering to move my cards across the board as I worked on them. Trello works best when it is used consistently and constantly, and sometimes I fell short of that. With that in mind, I thought it was a wonderful tool for Scrum because it kept our team abreast of our weekly features and tasks as well as their progression across the board. It’s the perfect digital version of sticky notes on a cork board.” – Emma Chesley

Velocity Tracking

“The importance of velocity tracking was stressed to us since day one. Velocity tracking is an essential part of Scrum: teams add up all of the points they committed to during sprint planning and compare that against the points completed throughout the week. After several sprints, a team has a sense of the speed at which they work—their velocity. This gives a team a better sense of the amount of time it will take to complete particular features and the project as a whole. Our team’s velocity increased dramatically after the first week. In the latter half of the internship, we hit our stride. We achieved close to three times the number of points we completed during the first sprint, which in turn motivated us to work even more efficiently.” – Sage McGill

Starting the Day Off Right

“Developers at Control Group start every morning with a team meeting, and we did the same. These meetings are called ‘standups’ because the whole team congregates somewhere in the office and stands up for the duration of the meeting, which should not exceed fifteen minutes. This unique forum encourages brevity, and the frequency with which it happens promotes communication. Despite our team being slow to physically get out of our seats and stand up, morning standups proved to be invaluable. We relied on standups to get up to speed on what our team members were focused on that day. We explained potential challenges in the work ahead and coordinated efforts to tackle time-consuming features. Daily standups were an integral part of our team’s collaboration.” – Emma Chesley

Location, Location, Location

“Location turned out to play a huge role in our coming together to build a product in just eight weeks. When we first began working together, we used Slack, a team messaging app. We soon realized we did not need an application to facilitate conversations because we were seated right next to each other—conversation and collaboration were inevitable. This is what developers call an analog solution. We were able to chime into conversations and lend insight into tackling difficult assignments. This kind of informal coordination allowed our team to be more organized. Our co-location improved our software development immeasurably.” – Omayeli Arenyeka

 

Our Execution

wireframe2

User Testing

“We had about four weeks of building features (technically half of our internship) until we finally decided we wanted users to test our product. We conducted user testing sessions during which we asked users a series of questions and then watched them navigate the website. Like all developers, we assumed everything we created would be as intuitive and sensible as we intended; but, of course, it was not. We received a lot of helpful feedback and suggestions on how to make our website better, changes that would have been more difficult to implement in later weeks. Fortunately, there were no drastic changes to be made—cue sigh of relief.” – Omayeli Arenyeka

What We Love: Good Snacks and Team Lunches

“We interns can certainly attest to the fact that having snacks in the office is a wonderful treat. I always had my eye on the kitchen, waiting for the Fresh Direct order to arrive so I could snag an avocado. Many of the interns turned out to be candy fiends, scouring the office for lollipops and Starbursts alike. Group lunches were a fantastic way to facilitate better relationships between teams and the interns as a whole. Our team had a fun outing to Chipotle, teaching Ben Haas, our supervisor, some favorite Chipotle hacks. Pro tip: always ask for tortillas on the side.” – Emma Chesley

Presenting at the Company Wide Demo

“Our team agrees that our most productive day in the office was that of the company-wide demo. The website we had built was untested on mobile devices, and we were being asked to show the mobile website to the entire company. We committed to demoing our product just five short hours before the presentation. Throughout those hours we worked at full throttle, opening and closing pull request after pull request. The pressure of the impending demo motivated us in a way that no other demo had, and I believe some of our best work was produced in those few hours. It was a great opportunity for us not only to improve our product, but also to feel the pressure of a real world client demo.” – Sage McGill

 

Our Experience

office-2

Dressing the Part

“One morning I received an email about the start of my Control Group internship with the term “business-casual” in it. I looked in my closet and realized I did not have anything I could consider work attire. I spent an hour online Googling “business-casual” until I ventured to H&M to buy a collared shirt. It did not take more than an hour at Control Group to realize I did not have to buy that collared shirt—people can wear whatever they want to work. I soon found my work attire: a t-shirt and pair of jeans.” – Omayeli Arenyeka

Working at a Company during the Merger

“After just three weeks of interning at Control Group, it was announced that CG is merging with Titan to form an urban experience company called Intersection. Intersection is the first company to be launched by Google’s Sidewalk Labs. When I heard this news I looked around the office, trying to gauge how employees felt about the impending change. The word “merger” has a negative connotation, as it is often associated with layoffs. But at the company announcement, Control Group’s Founding Partner, Colin O’Donnell, and Sidewalk Labs’ CEO, Dan Doctoroff, spoke about the merger with enthusiasm, optimism, and sincere hopefulness. Intersection has been created with the intention to improve quality of life in cities around the world. Control Group and Titan had already begun on that mission with their joint project LinkNYC—bringing the largest network of public Wi-Fi network to New York City. The new journey that CG was embarking on piqued my interest. What excites me most about technology is its ability to have a lasting impact on society, and Intersection aims to do just that. Working at a company during a merger is a unique life experience, and this merger is particularly exciting and fascinating.” – Emma Chesley

 

On behalf of CG, we’d like to thank all of our interns for their hard work on ShowNYC and glad that they got a positive experience that went beyond the sugar highs they got from the candy bowls.

App Design Prototyping: InVision, Pixate, and beyond

by

IMG_9517_sm

On the design team here at Control Group, we often create prototypes of our designs, whether we’re testing flows with users, evaluating approaches for microinteractions, or demoing a mature design to potential clients. The greatest value of a prototype is that it lets us find flaws early, when it’s still cheap to be off the mark. While pencil and paper are enough for trying out a solution, sometimes we need to simulate the real thing.

In the past few years, a spate of web-based prototyping tools has hit the design scene, giving us the freedom to bring design to life before coding ever begins. Control Group designers have tried out many of these tools and found a few to fit our workflows quite well, particularly InVision and Pixate.

Both Pixate and InVision are powerful and quite easy to learn, but better suited to different cases. For my workflow, the following distinction makes sense:

Pixate excels at the micro level, InVision at the macro.

Pixate is great for testing and communicating (with great fidelity) what happens within one screen or a few screens of a mobile app, including motion, microinteractions, and gestures like dragging, swiping, pinching, etc.

InVision is awesome for testing and communicating what happens across a whole series of screens, like how an entire system can work and flow.

 

PIXATE

When I’ve used it:

  • When I have an idea in my head about a specific interaction design with animation, and I want to try it out, see how it feels, and refine it.
  • When I’m showing an interaction to developers or clients, and it’s so complex or so core to the experience that a demo is needed. Simply explaining it with flat design and words or waving my hands around doesn’t do the trick.

Why it’s great:

  • In Pixate, you can either build a screen from scratch using the shape and type tools (which I haven’t done), or cut up your design into pieces (based on what needs to move on the screen) and then get to prototyping.
  • The process to get things moving has a small learning curve (sped up by Pixate’s blog of demo tutorials), but is pretty intuitive. The animations can be carefully fine-tuned with easing, timing, and sequencing, and many gestures are supported.
  • The results are rendered as native iOS and Android. That means that what you’re showing is realistic both in how it looks and feels, and how feasible the development of it will be. (If you’ve ever made an After Effects prototype of an animation, wowed a client with it, and then found out that the developers can’t make it happen in code, you know this is important!)

The limitations:

  • If you have a bunch of screens and an extended flow, things get hairy. Fast. All the screens essentially need to live in the same work area on various layers.
  • You also can’t save “states.” For example, tapping a button makes a bunch of objects fly off screen to reveal a new screen, but in order to have a working “back” button, you have to animate the reverse of every object flying back on screen to get back to the original state. This gets rather slow!

You have to carve up your design and re-create it in Pixate (or build from scratch in Pixate). This makes sense, and the fact that you don’t have to do it in InVision is also why you can’t move individual objects in InVision. Still, it takes time.

 

INVISION

When I’ve used it:

We use InVision prototypes in just about every project at Control Group, at many stages. We use them as tappable wireframes to work out flows and communicate them to internal and external stakeholders during the concept development phase. We also put those prototypes in the hands of users to help inform UX decisions. In later stages, we use InVision to communicate flows to developers, to demo to clients, and to have a living version of our product design at an easy reach in the studio.

Why it’s great:

  • With InVision, you can upload your screens as flat images directly from your existing designs, without cutting anything up or re-laying it out in the tool. This is a big time saver.
  • Without fuss, you can quickly start adding hotspots that link screens together into complete flows. When you make changes to your design, it’s very simple to update the prototype, even having that happen each time you save your PSD (if that’s your preference).

The limitations:

  • While you can make transitions between screens, what you can’t do is have objects move within a particular screen, or do fine-tuned animation, since each screen is a flat image. For example, if your app contains a panel that slides in, you can’t show that slide—you just show a new version of your screen with the panel in place.
  • While showing motion is not always needed in a prototype, sometimes motion provides wayfinding and context to the user (or client). It also gives them a mental model of how your product works.

Since we sometimes use InVision to walk clients through a refined design, there are times when a key piece of the story is missing when we can’t include animation within that screen.

 

animation_med2

A HACK

In one such instance, I decided to shoehorn some animation into our prototype by using animated gifs, which InVision does support.

In the example above, I wanted to show an alert panel sliding in from the side on a particular screen. To achieve this, I put the following within my InVision screens, in this order:

  1. A screen for the “before” state (I had to blur some content since the project is not public). A timed transition takes us to the next screen.
  2. An animated gif (without looping) of the alert panel sliding out. I created this in Photoshop since I had all the layers there for animating. With InVision’s time feature, I added a timed transition from this screen to the next one, allowing just enough time for the animation to play out.
  3. The “after” screen. In this case, the flat .png of the screen with the alert panel. This then gets hotspots applied so the interaction can continue.

The result: It works! If you’re working in Photoshop already, this is a convenient way to create your animated gif. What’s less ideal is that if your design keeps changing (as it will, of course) you will need to keep recreating that gif, which is not always trivial if you had to rasterize layers to animate (as you do with smart objects and text in Photoshop).

 

Other ideas?

If you think that seems convoluted, I’m with you. I imagine at some point there will be (or already is?) a magic bullet tool that would fit our workflow and combine the strengths of InVision and Pixate. The ideal solution should be just as fast as dropping designs in InVision for extensive flows, but still allow detailed exploration of animation and interaction patterns.

The closest I’ve seen is Proto.io. When I tried it out a few months back, it seemed like a decent chunk of time was needed to learn the tool as well as to get the prototype up and running. That was more time than I had in my schedule, so I’d be curious to hear others’ experience with it. I noticed they’ve added new asset management features like Dropbox syncing, which could speed things up.

It looks like we weren’t the only ones wanting to add more interaction detail to InVision prototypes. The very day we published this blog post, InVision released a new feature called Overlays to allow animation of objects on a screen. This is exciting, and we can’t wait to dig in and try it out. Anyone give it a shot yet?