Penultimate Sketch Templates for desktop & iPhone design

Penultimate just launced an update to their iPad app that lets users make their own paper backgrounds from photos or images in your library. Just a few days ago I was wishing for that very thing! So I've quickly modified a few of the existing templates I've been using in Omnigraffle to fit the Penultimate canvas, and will continue to create some more. Enjoy them and let me know how they work out for you!

INSTRUCTIONS:

1. Download these PNG files
2. Get them into your iPad photo library (email or SMS them to yourself)
3. Make sure you upgrade to the latest version of Penultimate and then hit the paper icon in top right
4. Add new paper background templates
5. Design away!

I'd like to give credit to Adaptive Path (for the desktop web schematic) and iPhonePool.com (for the iPhone schematic) All I did was reformat them for use within Penultimate. All lawsuit-related inquiries can be posted as comments here ;)

Desktop web - One Up

Desktop web - Two Up

Desktop web - Four Up

iPhone - One Up

 iPhone - Three Up

OK, HSBC, it's time to bring your website into the modern era.

1. it takes FOREVER to simply get into my account, with so many odd hurdles and redirects.
2. this screenshot is at 100% zoom. wow, optimized for dinosaur screen resolutions

Posted via email from tomcdaly's posterous

Injecting humanity into your product

I'm really loving the way some sites and apps pay attention to the fact that an interface is a dialogue and that there are real people with real needs on the other end of the GUI. Two examples that stand out this week are:

1) Think Vitamin (from the folks at Carsonified)

Ryan Carson and the team behind the Future of {Insert Topic} Conferences drop little nuggets throughout the interface that show they're thinking about their customers. Such a simple little thing, no heavy development required, not much production work at all, can do so much. They don't have to tell me I'm rad, but they do. Nicely done.

(notice the blue chat bubble coming out of the weird skull illustration telling me why i'm rad)

http://thinkvitamin.com/

2) Kayak

After searching for a flight, and setting up my fare alert, I was curious about their travel check lists they were promoting on my dashboard. I clicked on the "Business" checklist, and the last item in the list was "TPS Reports." They got me. So simple once again. A humorous cult movie reference poking fun that the business world was the perfect way to inject some humanity into a system that could just as easily be all about spitting out row after row of boring tabular data. A+ guys.

Kayak includes "TPS reports" in their default business travel checklist

Establishing Design Principles

There has been a lot of talk lately about design principles: why teams need them, how to establish them, how to know if the ones you've come up with are useful or just a self-indulgent exercise. In a recent episode of the Big Web Show, Aarron Walter, principal user experience designer at MailChimp, discussed the principles he established for the his team that serve as a guiding light during the design process. Aarron mentioned one of TiVo's design principles titled "It's a TV stupid!" which was a comical reminder to their design team that people are sitting on their couches in their living rooms or their bedrooms.

"It's a TV, stupid!" ~ TiVo Design Principle

Jared Spool also recently posted a piece about what makes a successful set of design principles, using those established by the Windows 7 desktop and mobile UI design team as an ideal example. Based on his experience working with teams to create principles, he recommends that design principles be based on actual research. He continues to list six points with which to evaluate a set of design principles.

So while the topic is fresh on everyone's mind, I'll take this opportunity to share the design principles we have established here at House Party, Inc. to guide our team through a massive redesign. The core team is small, but since we also work with a few remote contractors it becomes critical to ensure everyone is on the same page as they press their noses to their screens designing interactions. Every company will have a different set of high level goals a design will aim to address, and design principles should map directly to them.

Design principles for the HouseParty.com redesign:

• It's about parties! These people are having parties...make it fun, but not goofy or childish
• Face it, House Party is not Facebook. People come here for specific things and then go back to their lives. Make sure they are successful at what they need to do while here
• Make it social! Create opportunities for sharing! How can people let their friends and family know about what they just did? bake in social when it makes sense and feels natural. Don't be afraid to push the envelope a little bit without being too pushy.
• The desktop is not the only show in town. Always think about how it would work on a device with a smaller screen. Are you sure you've boiled the task into it's simplest steps?
• Don't complexify it. Would your mother or aunt Millie know how to use it? is it intuitive? make it so!
• Create reusable components: Think about how it would work in a column half the width? Twice the width? Embedded on someone's blog?

These principles (or values) are fairly new, and they have been working well for our design team so far, and score fairly well after running them through the six tests Jared Spool offered in his article.

I'd love to get your feedback on our design principles. Post a comment below.

Design Studio Workshops: The benefits of Co-creation

The "Scarcity" card from Stephen Andersons Mental Notes DeckAfter pitching a new concept to our CEO & CPO for a new way of doing House Party events, I was charged with validating it before moving forward. In the pitch, there was a clear strategic recommendation to play upon the game mechanics inherent in our business model—namely the principle of scarcity—by asking our members applying to host a party to perform certain actions that involve their social graph in order to compete for the scare resource that is central to the experience, the Party Pack.

The two main questions that came up after the pitch were:

• will our people actually want to play the game?
• how can we maintain a healthy tension between scarcity and mass rejection?

Rather than slink off to a corner to fight the hard fight in a vacuum, I decided it was the perfect opportunity to pull a cross-disciplinary team into a collaborative space to co-create solutions. A design studio framework was the obvious method, so I started planning for it.

Leah Buley from Adaptive Path gave a great webinar about facilitating Design Workshops, but it had been over a year since that so I wanted to refresh my memory as well as research how others are doing it. I found a great post from Jason Furnell's blog The Architecture of Everything in which he thoroughly shares the planning and facilitation of a design studio with photos and video. Big thanks to Jason for sharing his experience and insights. I highly recommend a read of his post if you are planning to run a workshop in your organization.

Here's a snapshot of the agenda for the one day, double session design studio. I would have preferred to do three days of two 2 hour sessions, but schedules did not allow, and the focus of the effort was on a portion of the House Party experience so one day was just fine. Click on the agenda to download the source file to create your own agenda.

Agenda for the Design Studio Sessions

 At the start of the morning session, I took a few minutes

to discuss the goals that would frame the effort. We kept referring back to them throughout the day to ensure we remained focused on the problem at hand.

Next, the group was divided into two teams of five, each sitting at their own table with all of the materials needed for the day's activities. Thanks to the incredible research conducted by Whitney Hess at the beginning of our redesign project, we had a set of solid personas to refer to. Each team was assigned a persona through whose perspective they would complete the activities. It was great to hear the teams discussing the personas and beginning to think as they might think as each team explored the start point of the journey map. What might Cynthia or Marcus be doing before they even hit the web site? What would compel them to visit houseparty.com and choose an party they'd like to host. Again, major kudos to Jason Furnell for sharing his team's customer journey mapping experience.

The sessions were just the right duration so the participants were engaged and excited throughout the day. I can imagine that if the afternoon session were an hour longer that we would have reached the point of diminishing returns. So keep that in mind when planning for your own design studios. Two to three hours per session is the sweet spot to aim for. It's also considerate to your fellow team mates and the other things they have going on. Building in a mid-day break, and ending the afternoon session before the end of the work day will allow them to check email, make phone calls and tend to their actual work. The last thing you want is for your coworkers to be frustrated, and they'll be more present during the sessions if they know they'll have time for the other stuff.

One of the teams in the middle of the customer journey mapping activity during the morning session.

One team working together to build a customer journey map.

The final customer journey map for Cynthia (our primary persona)

We use the six-up templates from Leah Buley's Adaptive Path workshop.

As I secretly expected, the afternoon session was the more challenging of the two. Drawing is not something that is natural for everyone, which is sometimes hard to imagine for us visually oriented people. For many of the participants, they had never been asked to draw in front of other people before—add to that the request to sketch out their visions for a user interface and the level of anxiety in the room increased dramatically. So my team mates and I (UX team, that is) did our best to make the others feel comfortable. There was much less drawing and a lot more discussion that took place, but in the end, each team had a bunch of sketches pasted up on the walls with an incredible variety and depth of ideas. That was one of the key goals for the session: co-creating a solution. It's tempting to run off to your computer, plug in your headphones, fire up Omnigraffle or Axure and get right to making things, but it's important to fight that urge, to get your peers and team mates from other departments together for some old-fashioned, analog collaboration. It builds relationships, creates shared understanding of the project, and it generates a wide variety of ideas that a lone designer would never have come up with on their own.

Takeaways for the next Design Studio sessions

This experience showed that:

• if you're asking people to sketch, it helps to provide more direction and specific assignments
• a structured day is highly recommended. There is comfort in having structure. (think about design grids. The most creative designs often come from working within the grid!)
• establishing goals up front ensures that the activities generate solutions to the problems you have, as opposed to generating entirely new problems (we were covered here!)
• give people time left in their day to touch-base with their "actual" work you're pulling them away from
• you can have fun and be productive at the same time (win/win)

I'm very excited to build design studios into the rhythm of our product design/development cycle for 2011. It's all about generating solutions, checking and validating assumptions and getting there together as a team.

No man is an island. Even the best designer in the world. So get a team of smart folks together, cover the walls with post-it notes and sketches.

Please feel free to share your design studio experiences.