Designer’s Toolkit: Road Testing Prototype Tools

We’ve all been there: you’ve got a few days to throw together a prototype. For expedience sake, you go to one of your large, well known tools to get the job done. The files quickly become bloated and crash—hours of hard work lost. There’s got to be a way to create prototypes at a similar level of fidelity with a lighter weight tool.

After test driving some alternative prototyping tools I discovered that there are indeed other good options. Here is an overview of what I found, followed by assessments of each tool, with hopes it will help fellow designers in the prototyping trenches.

Choosing the tools

After researching existing prototyping tools, I narrowed a long list of about 40 to a small set of 10 that looked the most interesting. Some factors that influenced which tools I selected include:

  • Hearing about the tool from fellow Cooperistas or other colleagues.
  • The popularity of the tool based on what I read in other blogs.
  • Whether it looked cool or exciting from my first impression of the design and features.

This is not a comprehensive set of tools, but includes the ones that I was interested in checking out.

Read More

Austin in SXSW – The Digital Master (1 of 3)

It used to be the case that we understood computation as a representation of the real world around us. It was used to model effectiveness of bombs, cities, or patterns of life. But that has flipped. Now the physical world around us is an instantiation of a digital source. Our source used to be an analog, in the case of photography, a negative. The source is no longer analog atoms, but rather a digital master. This is the first of a three part series. Follow the rest of the conversation in part 2 and part 3

Austin, March 11, 2:50pm: You’re staring at your phone, desperately trying to figure out the most appropriate, break-through, next-level place you could possibly go. But you’re also moving, your feet propel you forward guided by the over flowing list of lives you could be living at 3:00pm today. Welcome to the crowd of SXSW’13, a hoard of nerds, some of whom you’ve highlighted as potential friendships, contacts, and maybe something more. Jumping to your other compass, the twitter-sphere, you search for what’s good in the last 2 minutes. Expo G? You’ve got a good 10 minute walk. It starts to rain, and you see a swarm of folks donning red ponchos with a line emerging behind them. Just in time, you happily wear a url in exchange for a dry walk to the next venue. Despite bumping into other tilted head walkers, you find yourself in a massive conference room, ready to be inspired, snap an instagram, and grab some quotable references for your tumblr later on. Halfway through the talk, it hits you: ‘what’s next?’ You pull out your shiny glass master and realize 4:00pm promises 13 potential futures. The notion gives you pause. Imagine, what would SXSW be without the net? No digital schedule, website swag, no live tweeting, no ambient cloud of intent. Just a room with a bunch of people talking. For better or for worse, our reality has flipped, what was once a world of physical things organized by people, is now a world of digital things augmented by people. We look down for orientation, and up for verification. I’d like to share with you how SXSW taught me to stop worrying and learn to love the new master.

The digital master of the built environment

Making plastic junk is now a digital pursuit. One of the first unveilings at SXSW was a consumer level 3D scanner. A couple of years ago the makerbot was released with a promise to disrupt how real things are made. The cycle is now complete with the ability to scan an object into a digital mesh. The mesh can then be modified and printed out to a new plastic object. This is consumer level! For the price of a PC in 93, you can purchase a 3D scanner and printer.

The demo object (scanned and printed) was a garden gnome, once of many crapjects waiting to happen.

Read More

Detailing Lyrical Travel

In our last Drawing Board, we explored the desire some travelers have to uncover and experience the authentic spirit of a place. For the Lyrical Travel Drawing Board, we meet Jeanette. She’s in a new town with a day on her hands. Without much to go on and wanting to avoid the same old guidebooks, she turns to Latourex for inspiration.

The Drawing Board Episode 10: Lyrical Travel from Cooper on Vimeo.

Credits: Chris Noessel, Christina Worsing, Greg Schuler

In the video we introduce the high points of the service. In this blog post we’ll go deep in explaining some of our design thinking about how such an app might work to help Jeanette accomplish her goals.

Our Inspiration

This Drawing Board was inspired by “Experimental Travel”, aka Latourex. Latourex is short for LAboratoire de TOURisme EXperimental. Experimental Travel was developed by Rachael Antony and Joël Henry as a series of techniques to make travel more interesting. In this type of travel, people play “games” on the road, to get them off the beaten path. We love this idea where chance operations inspire and help support us in our search for unique and authentic travel experiences. In our Drawing Board, we explore how this approach might translate to a service design opportunity via a mobile experience.



The first thing we realized is that as in Latourex itself, no single game would suffice. So we envisioned a container app called Latourex Travel Games that has an open and extensible architecture. Some game modules would be available at launch, but over time more modules could be added, keeping the content fresh. Lyrical Travel would just be one module within this container app, and the sketch below shows that the Latourex app is what Jeanette would download.



Once downloaded and launched, the app would briefly introduce itself, and then get Jeanette to the action as quickly as possible by providing a default selection from the available modules. If she wasn’t interested in this first randomly selected module, she could “roll the dice” (or shake the phone) to get another one. While fun and in the spirit of Latourex, that mechanism could become tiresome if she was looking for a particular module, so we provided means to select a particular one from a list if she wanted. Since we knew that such an app would grow by word-of-mouth, we also let her replicate the module through which she learned about the app: Lyrical Travel.

In the world of Latourex, Lyrical Tourism is a game where travelers select a song for a given location, and let the lyrics suggest things to do and see. When we imagined what this could be in a mobile app, we recognized we could keep the spirit of the original game and improve upon it by providing:

  • A huge database of songs that might fit given locations
  • Easy access to lyrics
  • Automated local suggestions based on those lyrics
  • Simple ways to capture, curate, and share the experience

We saw that we could facilitate this experience in four steps: getting started, guided suggestions, capturing key moments, and curating/sharing the results.

A Four-Step Process

1. Getting Started

In preparation for her adventure, Jeanette first tells the app some things about her travel: where she wants to explore; what her transportation options are; and how much time she has. We suspect that most users would open the app just before wanting to explore, so the default screen uses her current location, allowing her to select another or even randomize. Rather than make these separate steps, we thought the map screen had enough real estate to let these be simple radio buttons or toggle buttons as overlays to the map. This way it would feel more like a single step even though it has three separate pieces of information.


We’re also big fans of the power of Lyrical Travel to encourage people to rediscover familiar places like their hometowns and suspect setting the current location as the default would encourage this idea when people open the app near home.

With a location set, a song is next needed. By default, Lyrical Travel makes a suggestion, selected at random and based on a search of the location Jeanette has chosen. She has a control that lets her listen to it to see if she likes it. That makes it simple to use. We understand that a default song wouldn’t always be to her liking, so the app enables her to either “re-roll the dice” or allow her to select from her own music. (You’ll notice the interaction is the same from the prior screen. You can read more on the pattern, below.)

These two options—randomization or direct selection—work, but we also wanted to provide her an “in-between” option that would keep the interaction simple and still ensure an ideal match. To accomplish this, we thought that she could permit the app to scan her music collection (on the phone, or possibly in the cloud). In this scan it could look at any ratings she provided, combined with the sheer volume of songs she has of particular categories. From this, Latourex could infer the categories of music she prefers, similar to how Pandora can infer preferences from a small set of choices.

2. Guided Suggestions

With a place and a song in hand, the app next begins to make suggestions on what to do by looking for key words in the lyrics. The algorithm would try to find more unusual words and unique phrases first, so the suggestions would be particular for each song, but gracefully degrade to more common words if those first ones don’t have any results. The app would then display the suggestions it found about local activities and place them alongside the lyrics, highlighting the connections if possible. Suggestions include an image, a title, and a small overview. With a tap Jeanette can get to more details, including directions from her current location and the ability to rate suggestions. She is able to delete any suggestion with a swipe, giving room to other suggestions of greater interest.


3. Capturing Key Moments

Using persistent tools below the suggestions, Jeanette is able to capture moments through text, photos, and video. She’s free, of course, to follow these to the letter or interpret as she pleases. As she collects memories of the day, they stack below the suggestions, next to the lyrics. If she wishes, she can delete or rearrange these with standard iOS gestures.

4. Curating and Sharing the Experience

Jeanette is able to save and share her experiences through curated “video postcards.” We wire-framed three different ways for her to edit: Edit by ratings (the simplest), simple editing, and power editing. Below you’ll see the sketch for the Edit by Ratings screen, which lets Jeanette rate individual elements. The Postcard Player chooses and dynamically displays the elements during the duration of the lyrics, ensuring a minimum time per element, and augmenting elements with “The Ken Burns Effect” slow panning and zooming effects. Though we did not have time to comp it up, we thought that to be in the slightly-random spirit of Latourex, the postcard wouldn’t be a fixed video, but a semi-random display, like slideshows from a photo album app, that plays with the selected song and overlaid lyrics.

To share the postcard, Jeanette has the option to share with others by posting the video to the Latourex site, or sending a link directly to whomever she likes. There are some complexities about getting the media from her phone to the site, but we did not detail these out in this wireframe pass.


Design Challenge 1: Keeping Jeanette in the world

To meet Jeanette’s goals, her experience should involve interacting with technology but not being consumed by it. She shouldn’t walk around the city all day with the phone in front of her face. How do we create interactions that integrate into the flow of a person’s day but not interrupt it? To solve this problem, we made the interface as modeless as possible, letting her drop in and out of it as she needs or wants to.

Design Challenge 2: Avoiding musical burnout

If a single song serves as a guide, how is it offered in a way where the person doesn’t burn out on it by the end of the game? To solve this problem, we chose not to play the song by default. It was tempting to have the song underscore the lyrics as she was interacting with the lyrics, but it felt like it would be too much. It’s always opt-in, and the app would work well with her music player app.

Design Challenge 3: Varying degrees of control

When it comes to planning and travel itself, people want varying degrees of control. From highly supported and structured to free-form and interpretive, Lyrical Travel enables people to make decisions from direct selections to self-guided interpretation. This pattern of enabling people to move from simple to more complex decision-making processes is experienced across the service. For example, in the process of choosing songs people can accept suggestions; choose from random; or make their own, personal selections. In using the lyrics as a guide, people can select and follow specific suggestions in the order in which they appear in the song; jump around and choose at random; or disregard suggestions completely and interpret lyrics using their own internal compass. And finally, when creating a video postcard, as mentioned earlier, people can turn the reins over to Lyrical Travel or take full control of curating their day using the tools provided by the app.

Design Pattern: Random default first & Roll the dice

In several places throughout the app, we noticed a pattern emerging, and once we found it, we opted to stick to it. The pattern is that for choices Jeanette needed to make, we would not present a menu of options. Instead, we would first present a good, default selection. If she was in a hurry or wanted to keep it simple, Jeanette could just press OK and be on her way. And of course we would offer an option to select directly through a full-featured menu, but that didn’t feel complete given the spirit of randomness that’s inherent in Latourex. To meet that spirit, there’s a “roll the dice” option that would select another option randomly. And in the music selection we even went one step further to take advantage of existing data to improve the likelihood of a roll Jeanette would really love.

Service implications

In order to deliver on the promise of the ideas in the video, we realize that there would be not just an app, but a complete service underneath it, to help connect travelers and house the marketplace of modules. Imagining this container service led us to aspects of the design such as hearing about it through an existing member, letting similar travelers’ selections influence suggestions, and giving Jeanette options to meet other Latourex travelers near her.

Wrapping Up

We had a lot of fun making this short video as we explored some fun topics like travel, inspiration, and chance operations. We hope you’ll enjoy the fruits of our labor. We even have a bit of an itch to have this app in hand ourselves when we do our own travel, and though we don’t ever want to design for ourselves, we think it’s a positive sign. What do you think? Would you use this app? Can you think of other ways Travel Experiments can be brought into such an app without losing their magic, and encourage a community of Latourists? Let us know what you think in the comments below.

Contributors: Chris Noessel, Christina Worsing, and Suzy Thompson

Related reading

sCoop: Week of April 30

Life at Cooper

Photo

Cooper recently brought back the Friday Afternoon Social Hour! Everyone enjoyed Suzy’s seriously strong sangria and tasty tapas, and the great conversations in this all around good time. If this sounds like how you’d like to wrap up the work week, join us! We are currently looking for a Business Development Manager.

See more of our life at Cooper on our Tumbler

Sketch 2.0 Released

sketch2

*Download the sample .Sketch file from my Dribbble account.

Sketch 2.0 is a new Mac application designed to be what Adobe Fireworks has struggled to become: the defacto standard for interface design. With a toolset targeting the professional user interface and icon designer, Sketch seems to be headed down the right path.

Sketch is not without its issues and may not be mature enough to replace Photoshop or Fireworks as of the version 1 release; however it’s an excellent start and well worth your time to checkout.

Several of us at Cooper are very excited by Sketch, so expect a more detailed review soon. In the meantime, checkout Sketch for yourself.

The Monoprice Graphics Tablet

*Video Monoprice Graphics Tablet line quality by Ray Frenden.

In the world of drawing tablets, there is Wacom and…umm…well…nobody else. That’s what I thought before I read Ray Frenden’s review of the inexpensive Monoprice graphic tablet “The Little Monoprice Graphics Tablet That Could.”

With a starting price of under $50 for a 10X6.25 inch graphic drawing tablet, the Monoprice tablet seems too good to be true. After reading Ray’s review and a quick twitter search of other Monoprice tablet users, I’ve become a believer and am seriously considering replacing my Wacom Bamboo tablet.

Checkout the Monoprice tablets for yourself; it just might save you a couple hundred bucks.

Stay up-to-date with your favorite web service feeds

Feeds

If you’re a Basecamp, Github, Dropmark, or Dribbble user, you might find Feeds interesting. Feeds lives in your menu bar monitoring your favorite web services, notifying you when new content is posted.

Dialoggs enters private beta

dialoggs

Dialoggs is a new web service that just entered it’s private beta phase. Dialoggs describes it’s self as a combination of Twitter, Facebook’s privacy controls, and Tumbler’s multimedia features.

Dialoggs allows you to follow people and send public and private messages just like in Twitter. What separates Dialoggs from Twitter, and what I’m most excited about, is Dialoggs ability to have long form conversations. Not having to worry about how many characters I have left? Priceless!

 

If your interested in learning more about Dialoggs, checkout “Introducing Dialoggs.”

Follow the creators on Twitter to win invite codes to Dialoggs: @drewwilson, @ammmir

Dialog.gs Website

 

Interacting with media across multiple devices

 

With the rise of mobile devices, more and more I need to be able to move files from my desktop to my mobile devices. Apple, Google, and Microsoft, along with several other third parties, have developed solutions but nothing that delivers a truly seamless user experience. Interaction designer Ishac Betran, in his article “Watch This Ingenious UI Idea For Dragging Files From Your Phone To Computer” details an elegant seamless drag-n-drop solution.

iPad Keyboard Prototype

 

Another interesting concept is the “iPad Keyboard Prototype” created by Daniel Chase Hooper. The video demonstrates a simple, intuitive way for simplifying text editing on the iPad. Instead of tap-and-hold to edit text, the user can swipe the cursor around the text block to quickly edit the text.

App pick of the week: Track 8

IPad ui

Track 8 brings the Metro experience to your iPad in a slick music player, allowing you to browse your music in an immersive visual experience.  

Checkout Track 8 for yourself.

 

Read More

Sign up for Kiwi Cooper U!

Kia ora. In an earlier blog post, I asked if Kiwis would be interested in a January Cooper U, and despite it being in the “dead zone” of the summer holidays, the answer was an enthusiastic, “Yes!” So, we’re happy to open registration for a Kiwi Cooper U Practicum between 10-13 January.

Read More

Prototyping article on Adobe.com

Industry Trends in Prototyping, a whitepaper I wrote about prototyping for interaction design, recently went live on the Adobe Developer Center. Of course, they were interested in what I had to say about using Adobe software (which conveniently, we have no small amount of experience with), but I also tried to take a step back to look at the reasons why designers should prototype and different ways of thinking about and building prototypes. Check it out. Let me know what you think. Read More