Denim & Steel

Front Doors and Side Doors

hello@denimandsteel.com — Mon, 13 May 2013 00:00:00 -0700

Software accounts are kind of a pain, but for the most part they’re good at keeping people’s stuff in order. When designing for account access, we we’re designing the way we welcome someone into our work. Obviously that’s an important moment, yet across many sites we see a front-door/side-door treatment of first time and returning visitors that always frustrates but never gets fixed.

Here’s how it generally goes. New members get the front door: big generous buttons, inviting fields with helpful validation. It just wants you to fall right in. This is the right way to welcome people, but too often reserved for making new accounts.

Returning members on these sites are shown the side door: a hard-to-spot text link stuffed in the top right corner that takes work to get to. Then you get to wait for a page load to actually add your credentials. It’s a begrudging welcome, almost an afterthought.

That feels like an amateur mistake, but way too many prominent sites do this:

And lets look at one example from twitter that gives returning members equal footing:

Why does this matter? When I walk into the cafe I visit almost every day, they greet me by name and know my drink. This not only makes me feel good, it makes me less likely to consider going elsewhere. It not only reduces friction to my visit, it sweetens it.

How do we make return visits better?

recognize the return if you can. Re-populate the account name (unless privacy concerns override that) and give the password field focus.
offer the option to stay signed in between visits on the same device.
get the existing member sign in on the homepage, or give more prominence to returning members.
insist to your team that new accounts are not more important than returning ones, and that both use the homepage

Returning customers are important. They provide the value, they recommend you, they tell you what is broken and what can be better, they trust you. Can there be any better reason to give them a first class welcome when they come back?

DSU 2013 Date Set

hello@denimandsteel.com — Sun, 12 May 2013 00:00:00 -0700

Just a quick announcement that we’ve set the date for the second Digital Storytelling Unconference for July 13. We’re very glad to say that The Network Hub has graciously donated the use of their fantastic New Westminster location to the event again.

Along with co-organizers John Wellwood and Kai Chu, we’re supported by Todd Smith and Mags Doyle this year. We want to thank these people for being really quite great to work with.

The details are all on the DSU site, which is still a contender for the longest event URL in the Metro Vancouver area: digitalstorytellingunconference.org, and ticket sales will be opening soon. Hope to see you there July 13!

Rachis

hello@denimandsteel.com — Wed, 08 May 2013 00:00:00 -0700

Ideation

We started where the experience of wine happens: in the glass, at the table with friends, at restaurants and homes. Through cultural and competitive research and workshops, we explored the ways wine is discovered, enjoyed and shared, and used that knowledge to set the tone.

The founders, informed by a lifetime of formal and informal wine tasting experience, had been developing a methodology tasting and describing wine that was closer to the senses. We saw that tasting system as the key to getting interesting review data while equipping people with a non-pretentious, honest and expressive way to talk about wine.

We then built out a vision for a true product ecosystem: tablets, phones, the web and some serious data crunching power coming together to form a product that could belong wherever wine was enjoyed, adding to the experience without getting in the way.

Design

Global Mechanic’s creative power and sensibility for visual explanation meshed perfectly with our expertise in interactive design. The early interface concepts were wildly unconventional, speaking without fear to the senses and encouraging exploration.

Our primary focus was the tasting process, guiding people through tasting a wine and offering gentle prompts to look deeper and notice more, and giving them the means to express what they sensed.

Where Rachis truly stands apart is in the novel visualization of a tasting. Each of the five aspects in the Rachis tasting system is translated into a graphical form that conveys appeal and complexity. Our intention is that taken together, they form a fingerprint of the taster’s experience of a wine that can be deocoded as a detailed tasting, instead of just a number with little to back it up.

Woven throughout the entire product is a social dimension that builds on the discussions people already have about wine: where’s the best value, what’s the right wine for a summer day, and that age old question about any new wine: do you know if this is any good?

Technology

We narrowed in on tablet devices as a natural place to start: they’re unobtrusive at the table, portable enough to bring to a friend’s place, yet powerful enough to provide a richly interactive experience.

There’s so much that’s new about Rachis that we strongly advised against jumping into development without prototyping and testing. Instead of embarking on an iOS development project, we brought the tasting process to life as an HTML5 web app optimized for an iPad.

The benefits were clear, as we were able to design, show, try and revise on the fly. We were also able to show members of the team how we saw HTML as a way to deliver Rachis to Android and other tablet devices at a much lower cost than native development for those platforms.

Validation

To validate the tasting process and our interface approach, we led wine tasting events at a founder’s home. Music, delicious meats and cheeses and a really nice selection of red wine - this is software testing to write home about. Our guests tasted and tapped and told us what they loved and didn’t like so much. In the background we kept careful notes and ran through question scripts, but were excited to see positive responses to core concepts and coherent results from the review visualizations.

Armed with that data we collaborated with the team on the quest for funding. With a lot of hard work through summer days the pitch came together beautifully, and in the fall we learned that Rachis had won 100% of its funding ask.

Ongoing

After getting a pre-launch site in place we dove into full production and anticipate launching in September. With two iOS apps, an adaptive web interface and the backend machinery of a large scale social recommendation service, we’ve got our work cut out for us. Wine tastings continue almost every other week in our studio, and in the following week we apply what we learn in fixes and design adjustments.

It’s an incredibly exciting time and we’re honoured to be working with the creative leadership that Global Mechanic provides. We’ll have more to share, and will be able to take the wraps off the visuals, as we get closer to launch.

Two Problems

hello@denimandsteel.com — Wed, 13 Mar 2013 00:00:00 -0700

A colleague recently asked us to look at a design audit he delivered for a web-based service. He knows his stuff and it’s super-thorough. The client hired him because they know they have problems. They should be all over it. But now he can’t even get them to read the report, much less respond to or act on it.

The report has a lot of information. I mean a lot, and it happened to be delivered as a single, long document, meaning it’ll require a huge effort (from an already busy client) to internalize its findings and put into practice its recommendations. We ended up suggesting the Big Report format as the crux of the problem, and that he could get traction by breaking it into a series of smaller reviews the client could digest a piece at a time.

That got us got us thinking about how we changed our way of looking at presenting information to clients over time, and the realization we made along the way.

Every project has, at its core, two problems: the one we’re hired to solve, and finding the right way to bring the client into that process.

Rather than assume a shared context where clients want to, and can, consume and understand the things we produce as we make stuff, we take time to understand their way of working, then present our work so they understand what’s happening, why, and what their options and obligations are.

Some clients see sketches and wireframes, some see prototypes at different stages; some see five font choices and three colour palettes while some see two. Some clients see code and hear about server needs, other clients get a cloud-hosted account set up for them and a monthly bill from it; some clients get presentations every so often and others spend time with us in group chats every day passing small files back and forth.

If you don’t solve both problems, your client doesn’t get the full value of what you do. What you make might work fine, but they won’t understand and will lack the buy-in that makes your work a complete solution.

Google Glass

hello@denimandsteel.com — Thu, 07 Mar 2013 00:00:00 -0800

We’ve been discussing Google Glass a lot here, and like many find it both interesting and conflicted. It’s technically remarkable, and Google is tackling it with an emphasis on industrial and interactive design we usually think of as coming from Apple.

Yet Glass is a decidedly un-Apple product, and just the mention of it prompts reactions about aesthetics, privacy, and social interaction. These discussions continue to be interesting, so it seems right to share them on the blog.

Bootstrapping Understanding

Glass struggles to find its lineage, the thing that explains ‘where does this come from’, ‘where does it fit in’?

To understand what that means, think about where the iPhone came from. Before it, cellphones and iPods were everywhere, but existing smartphones were in a funk of ramshackle interfaces and implementations. Working from the lineage of existing things (phone and iPod), the iPhone unified them and cracked barriers to mobile web use. It came from something people understood and made it better, which let consumers immediately understand why they would want it.

Glass lacks that bootstrap. We haven’t been looking for a way to live-cast our sky dives, go ‘head to head’ with the paparazzi at the Oscars, or play a conspicuous time-travelling anthropologist on the subway. Sergey Brin went so far as to say during his Glass TEDvertorial that smartphones are emasculating, as if the Chromebook weren’t the penned veal-calf of laptops. Smartphones opened up mobile computing to millions, so let’s be serious.

The use cases we get so far are banal: pictures and video; augmented reality directions, in an HUD. The responses to the #ifihadglass campaign revealed how people find it cool but struggle to find compelling uses. From the banal ”I’d film myself playing hockey”; ”I’d read the news in bed”; to the vague and totally unrealistic ”I’d re-invent ecommerce”; to sci-fi cosplay “like Ironman, voice control and display in front of my eyes”. If you think this is just cherry picking, go look yourself.

Joshua Topolsky’s review noted that it wasn’t until he used Glass for a while that he started to understand why anyone would wear it. If it takes a gadget reviewer a ~month~ while to get used to them, there’s going to be a long road to winning enough adopters to make wearing Glass even remotely acceptable in public.

Update: @sciwizam offered a correction that Mr. Topolsky only wore Glass for a few hours, not a month. That changes the tenor of the previous point and suggests Glass can find easier adoption over a shoerter period of time.

A New Kind of Publicness

And yet the idea of Glass in public is where potential problems go way past marketing. The hallmark capabilities of Glass seem ripe for conflict with social interaction dynamics, both in crowds and between individuals.

Out on the street, you won’t know when Glass is being used on you, at least not in the same way you might notice someone taking a video. (Arguably, voice recording can work more stealthily, but the proximity constraints are so tight it’s pretty impractical). Glass, as Mark Hurst puts it so very well, creates an experience not just for the wearer, but everyone around the wearer, and there’s no way to opt out of that.

From now on, starting today, anywhere you go within range of a Google Glass device, everything you do could be recorded and uploaded to Google’s cloud, and stored there for the rest of your life. You won’t know if you’re being recorded or not; and even if you do, you’ll have no way to stop it.

And that, my friends, is the experience that Google Glass creates. That is the experience we should be thinking about. The most important Google Glass experience is not the user experience – it’s the experience of everyone else. The experience of being a citizen, in public, is about to change.

Up close, imagine talking to someone wearing Glass, which doesn’t seem to indicate when it’s working. Every time their eyes dart you’ll wonder whether it’s displaying what Google thinks are facts about you, but you can’t see or respond to them. Or if it’s recording you. That dynamic seems incompatible with socialization norms in ways I’m not sure we can just get used to.

And so, it’s not crazy to expect some bad reactions once Glass is in the hands of early adopters. Steve Mann’s fixed eyepiece prompted a violent reaction from restaurant staff in France because they didn’t know what it was doing. Mann has been living over a decade of Glass pre-history, and has an interview with IEEE’s Spectrum blog that is so worth reading.

We’ll hear about conflict when it happens, and hear a lot of promises about how good life will get once steeped in information and connectedness. We heard this at the dawn of the Internet, but we’ve since learned about another side of networked commons, how cruel people can be when technology obscures their actions while it amplifies their power. And that makes us wonder about the balance of Glass’s intended uses against the likely problems that Glass advocates don’t seem interested in discussing. Is it all worth not having to look at your phone?

Curiously, the best place for Glass so far seems to be decidedly out of public. In industry, medicine, and other specialized contexts it seems to have huge, desirable and unproblematic potential. It’s too bad we haven’t heard more about those uses as the reason why Glass should exist, and they’d dispel the lack of bootstrap and the lack of compelling use case at the same time.

Let’s Go! Cyborg Future

Thinking forward about Glass gets into the edges of science fiction really fast. Does Glass make you a cyborg? By most definitions, it actually does. But by the same definitions, so do regular eye glasses. Augmentation isn’t new. But let’s assume Glass represents the cyborg moment by popular definition, and ask what does that mean?

To people living this stuff, it means changing the social contract itself. Tylor brought up a short video about Neil Harbisson, who advocates for ‘cyborg rights’. Born unable to perceive colour, he wears a device that conveys colour as sound. He’s extended that beyond the normal range of colour perception, and wants a discussion around normalization what he’s calling cyborg rights.

Mr. Harbisson initially used his technology to achieve a level playing field with what we’d call normal human experience. His extension now takes his abilities beyond the norm. If his technology were enshrined in law as a cyborg right, are we creating scenarios where your place in the world is defined by who has most and best of that augmentation.

An arms race of bodily augmentation isn’t totally new. Fashion is a centuries-old way to express status and aesthetic, and is routinely used to exclude in subtle and overt ways. But fashion doesn’t amplify capabilities in ways that produce unexpected, and sometimes, harmful effects. Effects that we may want the law to curb. Whose rights win when a future someone acquires eyes that see through your clothes? Or silently record you having sex with them? Or that change the way certain skin colours are seen? Do you have the right to use any technology, so long as it’s part of you?

I know, folks just want to use some cool stuff without all this deep thinking. But we’ve seen enough new technology arrive with good intentions but end up with unexpected costs attached. With technology this intimate, we’re obliged to think ahead and take the possibilities seriously rather than just call them tomorrow’s problem. If we just accept it all, we might someday wonder why our childhood memories are held under DRM, or we’re unable to walk down certain streets without because our medical history isn’t compatible.

The Perfect Google Product?

But let’s get back to the present. So conflicted, Glass is kind of a perfect foil for Google.

When they improve on what we know we get hits like Search and GMail. When they try to create whole new paradigms, like how Wave was going to “fix” collaboration, they stumble. They inspire us with audacious scale and creep us out by assuming themselves saviours of a broken world. Their evangelists dismiss and even mock questions of privacy, not understanding that privacy isn’t about secrets as much as having some control of your public self.

You could think they’re evil until you see their naive surprise at how their ambitions make people so uncomfortable:

#ifihadglass I could record your face and location and give it to a massive advertising company.
— Andre Torrez (@torrez) February 20, 2013

Can you blame @torrez for thinking it? Google can talk about saving the world, but their day to day funnels diverse online activity into profiles optimized to sell stuff. Can you blame anyone for not wanting to interact with someone wearing Glass when that interaction might turn into an ad that follows you around for days? Imagine Glass incentivizing a wearer in real time to mention a product name as they talk to you because your profile lines up with that ad. That would suck, and it’s not far-fetched.

And that’s what makes Glass and Google so frustrating, that people so smart with such interesting ideas can be so goddamn untrustworthy.

Inevitability

We’re hearing a lot that wearable (as if we don’t already wear phones inside our pockets), and even embodied computing, is inevitable. Maybe. Jetpacks and flying cars were inevitable. Moon colonies. An end to cancer. An end to war (predicted with every new communication technology). Free energy. Twenty, fifty and eighty years ago these were all inevitable.

There may be a future where we all wear some doodad like Glass and it doesn’t make us feel paranoid and hobbled by something we can’t give up. But I don’t think Google can pull that off. For that matter, I don’t think Apple can, either, or any other company that exists today.

It’ll take a generation of designers and engineers who think only about people instead of users, and of opening up a new world rather than injecting it into society under a business model. It’ll take a society able to question what we’re being offered, and being asked for in return. And for something that asks to be so intimately a part of our lives, it’ll take better than letting our literal view of the world be mediated by an ad company.

We’re ambivalent over whether Glass will take off, flop, or be a step towards more ubiquitous computing. Every technology changes us, and we have a choice and a say through both consumer choices and the law about what we’re willing to live with. Glass is weird and awkward, but however it turns out later it makes an important discussion about our future possible today. And in that, it’s incredibly interesting, and of tremendous value.

Urban Stream Launches

hello@denimandsteel.com — Sun, 24 Feb 2013 00:00:00 -0800

Last Friday was a milestone day for one of our first clients, Urban Stream. Complete with a front-page appearance on the Vancouver Sun, they formally launched the sustainable agriculture business they’ve been developing for over a year.

In their early days, we developed a small website powered by Jekyll and Dropbox folders and a single-page mobile web app for tracking tasks that they’ll be able to build on as their team and locations grow.

The launch happened at Luke’s Corner Bar & Kitchen, where a parking spot has been swapped for a modified shipping container. Inside the container is a demonstration of Urban Stream’s growing system, taking food waste from the restaurant that composts into nutrient-rich soil that then grows herbs and vegetables for the restaurant. It’s an amazing cycle that’s just getting started and points to a future of sustainable, high yield urban agriculture.

It’s really heartening to see Nick, Wes and the team they’ve built in Urban Stream find its footing and get recognition. With partners like Luke’s and community grants from Vancity, they’re on their way to taking a leading role in sustainability and transparency in the food system. We’re proud to have been working with them early on, and look forward to doing so again.

Digital Strategy, Vancouver, and the Next Five Years

hello@denimandsteel.com — Fri, 14 Dec 2012 00:00:00 -0800

Last week we gratefully accepted an invitation to join a consultation group at City Hall. With others working on their own city-related digital projects for business, academia and personal interest, we discussed issues and ideas for city staff working on Vancouver’s digital strategy for the next five years.

It was a great night, with welcoming and friendly moderation by staff and enthusiasm from attendees. We’re excited by the staff’s engagement and interest in this process. They drank up input and spoke candidly about the challenges and opportunities that a city faces in a world of rapidly-moving technological change.

The consultation process advanced this week with the publication of ideas and comments from that session, and the launch of a forum that’s open to all. We’ve found volunteering time and expertise in this kind of effort pays off: you meet interesting people and help set a direction for how our city interacts with digital technology and the local tech industry.

The announcement and call for comments is shared below in full. If you’ve ever lamented a missed opportunity for digital tools to enhance civic life, http://vancouver.ideascale.com is for you.

Announcement from the City

The City of Vancouver is developing a Digital Strategy that will outline both immediate and future areas of opportunity to enhance digital connections amongst citizens, employees, business, and government as well as strengthen Vancouver’s growing digital economy. Your ideas are needed!

Looking ahead 5 years, how are you connecting with your municipal government online? What infrastructure is in place? How is the digital economy being supported?

How you can help the City…

1) Prioritize ideas (can’t do them all!) by voting for the ones you agree with

2) Add new ideas that are not already mentioned

3) Talk about how to address typical challenges of your favourite ideas through your comments.

Share your thoughts today: http://vancouver.ideascale.com/

Available Gets an Update

hello@denimandsteel.com — Mon, 12 Nov 2012 00:00:00 -0800

After a month in the wild we’ve given Available a little update.

It’s been really great to see Vancouver tech and freelancers and agencies using it to connect for work. We’re especially grateful to supporters helping cover server costs as well as those pointing others to Available when they see someone looking for work through Twitter.

With a month of use and some feedback we have a few findings: the interaction model mostly works, and people recover quickly enough when something doesn’t work as expected. We’ve also learned loads about the Twitter streaming API, which is by turns powerful, fast, and a little unpredictable.

Easier on the Eyes

The first change is to make Available nicer to look at. One of our favourite colleagues, Sam Dal Monte, made the overall reading experience much nicer, especially on mobile, and gave the wordmark a fresher look, which you can see above. This should help those feeling the ‘turquoise burn’ in the initial design. You know who you are.

Automatic Retweets

We’ve seen that about half the daily visitors to Available are returning. We owe it to them to make the changes they’re looking for more visible. So now when someone changes their available/hiring status, the @heyavailable account will retweet their post. Simply following @heyavailable will keep you posted when someone starts looking for work or hiring, and when someone gets hired or a position gets filled. It’s a nice way to keep your ear to the ground without coming back every day. If this were a simpler time, we just would have used RSS.

Expiring Posts

To ensure that the content stays fresh we’re expiring posts after two months. So if you get hired, or find someone to hire, you can just leave the post sit and it will disappear in time. This idea of decaying data is really interesting to us, and solves an interface design problem that we didn’t relish when thinking about forgotten posts piling up.

Onward!

We’ll keep watching for ways to improve Available. In the meantime, if you’d like to be a supporter, sponsor slots are $25/month and a great way to show you care about the health of our professional community.

Athos Canal du Midi

hello@denimandsteel.com — Fri, 09 Nov 2012 00:00:00 -0800

Take a look at the live site for The Athos.

Hotel barges were new to us, but are well-known in Europe, and along the Canal du Midi the competition is stiff. Dannielle understands the business with unusual depth, and led us through the signature aspects of the experience, and why it works for their customers. It’s an experience of the senses: tactile, aromatic, and flavourful. Just as important is the feeling the experience produces, the way it helps passengers unwind, slow down, and enjoy a different way of life.

Though we had started by talking about freshening up their website, the real challenge became clear: to express through the web what makes The Athos experience special, for people far away and without a frame of reference for an historic canal in the south of France.

The Approach

We decided early that the traditional website structure that breaks everything into different pages was not an option. Instead, we envisioned visitors drifting through the site at their leisure, immersed in the sensuality of the experience but never overpowered or oversold with content. A relaxing voyage on The Athos had to start at the website.

That goal made us question whether or not to keep the site on WordPress. Every CMS makes assumptions about the structure of sites one might build with it. And sometimes those structures don’t work for the kind of experience you’re trying to convey. Getting to where we wanted would take a custom theme like no other, but the advantages to the client of staying on WordPress were clear, and we wanted to see if we could pull it off.

The content on the original site was sensible, and although it would be re-written, it spoke to categories that we could reorganize to balance the experiential with being simply informative. You can go on at length about the taste of a tomato, but at some point people want to know how much something costs and other important, factual details. We settled on short, easy to read chunks of content that spoke to the signature elements Dannielle had tuned us into.

To coordinate that content re-write along with visual design and photo placement (there are a lot of photos), and to capture the navigation of this big page, we used wireframes that mapped out the site with the physical sections oriented vertically and their variations arranged horizontally. The organization of the wireframes reflected the browsing and navigation experience of the actual site, rather than being a multi-page PDF.

The Design

To realize the visual side we turned to our colleague, Kathleen Moynahan, who happened to have some time before returning to advanced interaction design studies in San Francisco. She was able to take our creative brief and moodboards and tune right into a visual language that could pull the intangible and tangible aspects together.

Kathleen found a balance between big and lush images, and detailed ornamentation that could speak to the sense of understated, relaxed luxury. Her colour palette captures the tranquil waters and the earthly richness that characterize the south of France, complementing the Athos brand colours of deep red and blue.

Denim & Steel vs. WordPress

Remember that part about CMSs and how they do things a certain way?

While sections and subsections on the same page are nothing new to WordPress, adding a second level of subsections is not so easy, meaning we had to programatically create the site structure rather than just plug in some top level pages. Doing so meant a lot of extra work, some of which WordPress didn’t totally like, but we eventually made peace. Because of driving off-road that much, some extra footwork was required to make the specific sections addressable by individual URLs, rather than just calling them with Javascript from navigation actions on the page.

But the result is so worth the effort. Not only will the Athos team be able to update the site content, they will be able to change the very structure of the site through the admin panel despite the heavy customization.

Because we don’t have strict pages to track in analytics, we set up custom event tracking for each of the sections and subsections. On launch day we took a quick look and saw that indeed, each individual content area was being properly tracked, offering very detailed insight into the content that people are exploring, and how deep they go.

This project really opened our eyes to the strength of assumptions that underlie common content management systems, with both benefits and limits to creativity imposed by those assumptions. They’re not necessarily bad assumptions, but they do have us thinking about content systems, templates and whether the limits of the template approach are always worth it. But we digress.

Smooth Sailing Ahead

We couldn’t end this without some kind of cheeky nautical pun, so there it is.

With a renewed marketing plan by Darren And Julie of Capulet Communications, the Athos will reach many more potential customers and greet them with a proper expression of what they offer. While we’ll never be a WordPress shop, preferring and usually needing to roll our own stuff, this project brought interesting challenges and we’re happy that we were able to make something truly novel while preserving the accessibility that a CMS offers. But we’re even more happy with the reaction from Dannielle, who mentioned this in a wrap-up conversation:

"I have been delighted with how your technical know-how has combined with taste and creativity to elicit the feeling or impression that we want to send to our clients."

Just the kind of thing we love to hear.

Speaking of the Vancouver Tech Community...

hello@denimandsteel.com — Fri, 26 Oct 2012 00:00:00 -0700

There’s a conversation on Branch today on a perennial local topic: how do we fix the Vancouver tech community. “Fix” isn’t specifically used in the post, but when this topic comes up there’s an undertone that what we have isn’t working.

It’s easy to get frustrated and lost in opinions, which moves us to grasp for single causes or solutions. The two I notice the most are to demand more from those in the community who have shown some leadership (though that is often confused with those who have notoriety for their work); and to build more things, that action will beget avenues to a thriving tech culture. Both explanations don’t work for me.

Leadership and activity are good things, but I think they’re indicators rather than causes. Does anything ever really have a single ingredient or cause? It’s tempting to buy into (just one click!), but belies a more subtle and complex reality. In other words, healthy communities are multi-faceted, and can’t be prescribed with or ascribed to single factors. When we try to put too much on those single factors, they fall down or become mutations of their original goodness.

Asking community notables to do more doesn’t work because it puts responsibility for keeping the community vibrant onto their shoulders alone. Not seeing the event you’d like to see? Too bad, because under this explanation, if gatekeepers haven’t endorsed it then nobody will follow. That assumption is self-defeat in a nutshell.

So try the second path: just build your thing and get it out there. That approach means everyone is just pitching their own thing, or listening to you talk about your thing only for a chance to talk about theirs. Or worse, seeing if your thing can benefit their thing, checking out as soon as they don’t think you can do something for them. The number of times I’ve seen the latter happen is depressing. People focused on building their thing as a means of engagement have such narrow focus that if you can’t solve their problem du jour, or introduce them to money or exposure, your words are just white noise.

We often look to the San Francisco scene as a model to envy and build from. My experience in that community was very positive: people supported each other without expecting something back other than good will, and I’ve often wondered why I didn’t see that as much here.

Sometimes I think it’s because Vancouver is too small, making opportunities and resources look zero-sum, meaning that if your thing does well then mine can’t. Other times I think Vancouver is an expensive place to live, and that giving up billable hours for socializing without an agenda isn’t worth the risk. Still other times I think we want to only invest our attention in what we think will work rather than just being curious, that we’re afraid to align with projects or people that are yet unproven. And still other times I wonder if just socializing around specializations creates islands that are good parties in themselves but drift apart over time.

Or maybe this is just the shape that Vancouver’s tech scene takes. We can be ok with that, but when the conversation keeps coming up about how to change it we have to be open to the idea that maybe something is missing. Community used to be thought of as people of different backgrounds and opinions finding enough common ground to make living in the same space tolerable. These days we see it more as people of like mind huddling to enjoy each others company while the rest of the world does its own thing. If something is missing, then we don’t need more of the same, we need more of the different.

That means no magic bullet, no perfect venue, no one brilliant organizer, and fewer niche themes. It means enjoying the good and being genuinely curious about what’s going on, not expecting that we’ll ever create a Golden Age of the Vancouver tech community. Because if we can do that and accept where we’re at now, in all our sometimes-great and sometimes-busted ways, we’ll have arrived.

Launching Available

hello@denimandsteel.com — Thu, 04 Oct 2012 00:00:00 -0700

As former contractors and now a fledgling agency of sorts ourselves, we know how hard it can be to find the right gigs, and to hire the right talent when you need it.

So today, we’re launching another of our famous internal projects to the world, this time as a little gift to the Vancouver tech community and the independents and agencies who are making good things happening around town.

It’s called Available, and it’s a re-thinking of what a job board can be. You can check out the case study to learn more about how it came together and how it works, or jump right over to heyavailable.com to try it for yourself.

To our friends in the local design and tech world, we hope Available helps you get work or find the talent that will help you get work done.

Available

hello@denimandsteel.com — Thu, 04 Oct 2012 00:00:00 -0700

Rather than hire a permanent visual designer, we like to work with a roster so that we can find the right sensibility and working style to fit the project. It produces great results, but sometimes means a lot of legwork to find out who is busy and who’s looking for something new.

But you know there are lots of job boards out there. It’s just that they’re tedious to go through, and posting is a pain. So we started to rethink what a job board for 2012 and beyond could be.

The answer we came up with, and decided to build in our spare time, is Available, a minimalist job board that works through Twitter. It works by talking to the @HeyAvailable account. There aren’t many rules, and you can get an entire posting into a tweet as many people do every day on Twitter.

How it Works

Some say the best interface is no interface. Available isn’t quite no-interface, but instead of creating new ones we built on interfaces and patterns that are already out there and known, and just react to them in a specific way.

So let’s say you’re an independent casting your net for some work. You’d just tell @HeyAvailable that you’re, well, Available, what you can do and link to a portfolio. For example, local Drupal expert Richard was first to try it out by tweeting:

@HeyAvailable Available 5 hours a week (one hour a day) for "#Drupal office hours". Got a question? Come on by, I have answers! http://justagwailo.com/

Available put him at the top of the list of people looking for work:

And true to our original use case, we need to hire someone, but by now it’s for some Rails coding. We tweeted:

@HeyAvailable Hiring: Intermediate #Rails developer who can get by in #PHP and #Javascript. DM to get in contact.

And that turned into:

With just one tweet Available puts you in the list of people looking for work. Hashtags are interpreted as skills or specialities, and the link as a portfolio. Made a mistake? Just do it again and we’ll overwrite what was there. If you just send hashtags or a link you’ll overwrite the skills and link in your posting.

The remaining details, and there aren’t that many, are found at the end of the homepage at heyavailable.com. Give it a try and see what you think. We’re limiting things to the tech industry in Vancouver for now, but are open to licensing new installations for different industries and cities. Get in touch if you’d like to talk about doing that.

Supporter Thanks

We’re grateful to the handful of freelancers and agencies who agreed to test out Available. The cat got out of the bag quickly and we suddenly had organic use, but it all worked out. We’ve recognized them with supporter spots at the top of the page, and starting in November those spots will be offered as mini-sponsorships of $25 a month.

Reduce

We started out thinking that breaking out the different parts of an Available posting into steps in a conversation with the Twitter account would make it easiest for people using the service. We modelled conversation flows and had worked things out into a number of steps, but found that by trying to atomize things too finely we created complexity.

Towards the end of the project we changed direction and focussed on making the entire posting interaction happen in a single tweet. After a bit of testing we were feeling much better about the interaction, and the resulting code ended up being simpler as well. When we re-wrote the site copy, that, too, suddenly became much more compact and easier to read.

It was a great example of simplification cascading through every aspect of a product: the design, the code, and the language used to interact with people all cleaned up nicely after that.

Technical Details

Under the hood, Available is built in node.js with a PostGres database and hooks up through the Twitter streaming API to keep interactions brisk. Architecturally we’re working with the ‘small pieces loosely joined’ philosophy, separating the web server from worker processes, and an upcoming message queue will also be broken out. Everything is hosted on Rackspace which is a lot of work to set up, but runs so smoothly once it’s there.

Working with the streaming API did come with some challenges. Connection drops and a bug in the OAUTH authentication cost hours of hair pulling, but were both addressed. Tylor’s fix is in a fork of that library on GitHub.

Experiment Often

We love making these kinds of projects for ourselves just as much as we like making client’s dreams come true. If you’re looking to get an idea out of your head and to a version one, or if you just need some advice before starting something new, get in touch and let’s get the conversation started.

Vancouver.ca

hello@denimandsteel.com — Tue, 21 Aug 2012 00:00:00 -0700

A couple weeks ago the City of Vancouver launched a wholly re-built website as the online face of the city. Like many web developers in town, we knew this was coming since OpenRoad’s Gordon Ross had told us about it at World IA day, where he talked about the challenges and rewards of organizing a web experience around citizen needs instead of department hierarchies.

The re-launch generated some talk, and later the same day the price tag started to float through Twitter. Then local Old Media picked up the story. And that generated a lot more talk.

Naturally we checked it out ourselves, and had our own opinions about what we saw. Since then we’ve learned a lot more about the project from press articles, commentary by some who worked on it, and just taking the time to explore it on our own. I’ve personally worked with some of the people who worked on this site. They do good work, and I believe they did so here, too.

But there are definitely problems with the site. Problems happen on all complex projects, of course, but those we saw in Vancouver.ca are particularly instructive for both the practice of big web projects and the possibilities we see for local government and the web.

Launch-Readiness

Let’s start with the big wins for the site: the information architecture was rebuilt from the perspective of citizen and employee needs, rewriting 60,000 documents and reducing them to 20,000 (with a third of the requested team size), and tying together a technical stack that sounded like the sixth circle of hell but was mandated by the RFP. These are not small achievements.

But when the site turned on, there was little to read about those achievements despite high local interest. As is often the case with design and difficult back-end technical work, those wins aren’t immediately obvious and pay off over time. Without the differences between new and old made clear, many people, including those experienced in big web projects, jumped into dismissing the price as bureaucratic excess. The city, with the help of key vendors, have caught up to that vacuum of information somewhat since the launch, but the first impressions tainted the project in minds of the people who have to buy into it.

Lesson: re-launches of any appreciable size deserve content about what changed and the thinking behind those changes. People want to know, even if they don’t understand the complexities, that their taxes are being well-spent. Producing and highlighting that kind of content isn’t hard to do, so there’s not much excuse.

Wet Paint

Let those who have not debugged on production or done hot fixes on launch day cast the first stone. With that in mind, we can overlook bits of breakage. But two weeks in some really obvious problems persist on the homepage alone despite apparently easy fixing.

For one, the menu for a whole top level category (News, Calendar - yes, with the comma) appears empty. The headings are clickable, but compared to other menus in the navigation it looks broken.

For another, the map at the bottom of the page has hover region bugs that make it look like UBC is associated with a neighbourhood clear across town. Again, not that hard to fix, but it sits there untended.

The more you look, the more you notice: images to show the digits of city services phone numbers, an unusually low quality of the page code, the ginormity of the photo carousel compared with somewhat cramped typography. It adds up to feeling quite raw, and unready, that it launched too early. Combined with the lack of information about the re-launch, that first impression kind of pushes you towards a negative first impression

Lesson: Launching something requires project and product management, and it doesn’t look like those were balanced in the decision making about when to go live. You can have everything in the plan marked complete, but if someone can’t make the call that it doesn’t feel ready there’s a risk of a poor first impression.

That Mobile Thing

We can’t imagine a job where we don’t consider mobile from the start. But we start our projects now, in 2012, while Vancouver.ca started almost 3 years ago. The site is somewhat workable on mobile, but not in any optimized way. This is what the project team took the most heat over in public dialog after the launch. Even if you could accept the $3 million price tag, the lack of attention to mobile is surprising.

The reaction shows how expectations around mobile have changed since the city’s website budget was approved, but official responses to this criticism have been disappointing. One reportedly pointed to legacy tech while others mentioned limited resources and one (laughably) that it wasn’t necessary.

We wondered about this, and after a half hour of hacking in some 65 lines of CSS Tylor got a reasonable mobile version of the homepage working. We get that this is just hacking at the browser level, and the same code wouldn’t work for the whole site, but we don’t think it would have taken a lot for basic mobile accommodations. But big projects have a way of making these things hard to see, if not impossible to act on. The CSS can be downloaded here if anyone is interested.

Lessons: Long projects need contingencies to cushion against technology and cultural changes. If they can’t afford the contingency, they should be smaller projects. Also, we have to stop letting mobile not be part of the game just because of budget. Reducing the overall scale of a project to make mobile work is a trade off that pays real dividends.

Ready, Set, Conclude

We admit we had quick reactions to what we heard and saw on launch day. We had a bit of quick fun with the reported $3 million cost and the lack of mobile support ourselves:

Ok we laughed at that. But a lot of the talk we saw was kind of disappointing. It’s one thing to question a pricey web project, but another to float primitive breakdowns of that cost exclusively across developer salaries and pull magic numbers out of the air about how much it should have cost.

If we want to move big organizations into more open, more nimble technologies and development practices, we can’t pretend that pricing is as simple as spreading a budget across developer salaries while throwing out licensing costs in exchange for ‘free’ open source tech: where would these developers sit? Who writes the content? Who procures the infrastructure?

These things cost money, and on a big project they can cost a lot of money. If this is how the web development community reacts, we only fuel tragi-comically uninformed commentary like that on The Province website. And then we wonder why people have a hard time accepting the costs of projects we bid on. And the cycle continues.

Lessons: The bigger a project, the more costs will be hard to understand without looking deeper. We’ll all look better if we aim for thoughtful over emotional commentary. That said, people complain when they care, and for all the criticism about the project the people who worked on it have to realize that fundamental truth: people care about this, they care about their city, and they want both to be great.

For the City, By the City

In the initial wave of chatter some complained that Drupal, WordPress and other open source tech would have lowered costs, and suggested that involving more local industry engagement would have helped… somehow.

Maybe. Open source is many good things, but it is definitely not free to make it suit your needs. Like all software it takes talent and time to make it work, and both aren’t cheap. But would asking the opinions of a bunch of web industry members really do much good? We believe strongly in building from vision while keeping ears and minds open, so it’s hard to believe that having an ongoing local web roundtable would do much.

But with a city project you can’t help wonder how that energy, that willingness to contribute could have shifted the project from building for a city to building with it. We see one untraveled road that we hope will create a way in for Vancouver’s web talent without becoming a free for all. The key lies with an existing resource that keeps growing: open data.

City of Vancouver has a respectable amount of open data about everything from water fountains to trees to garbage collection schedule zones.

We imagine of a city website that includes a curated library of web apps built by independents and agencies on open data: visit the website, choose apps that do something with city data of interest to you, and use those apps within or independently from Vancouver.ca to deepen functionality and personalization without the city having to anticipate and build for every need themselves.

You could call it an app store for a city. And we can believe that people would contribute that kind of work because they already do. There are plenty of projects already using that open data for fun and good will (like our own This Is Our Stop which uses open data from TransLink). The hard part, getting people to build stuff, is already happening. What those works can use is a way to find larger audiences, and something with the gravity of Vancouver.ca could do that and make itself a world leader in forward-thinking local governance.

Vancouver.ca is a big project for a city and a huge one for web development practices and technologies. That something with so many people and moving parts involved makes it to the light of day at all is an achievement. While the difficulties the site faces are problematic, there’s little doubt that the rebuild puts Vancouver.ca on a better foundation. Here’s hoping that those early problems are resolved soon, and that the site really finds its feet as a central online piece of civic life.

DSU 1.0 Wrap Up Notes

hello@denimandsteel.com — Tue, 21 Aug 2012 00:00:00 -0700

Well, this is embarassingly late, but we’ve finally got some time to wrap up the the Digital Storytelling Unconference that we put on in early July.

What Happened?

First, that adage of unconferences about the people who show up being the right ones was proven true once again. Those who came out proved themselves a great group: friendly, curious, and ready to dance on the edge of emerging ideas.

We cast a wide net with the subject, and got a wide range of conversations back from it. Conversational dialog in video games, tattoo culture, the New Aesthetic, breadcrumbing, and the list of talks went on. While it’s always a good experience to have someone present comfortably, we love seeing the ad-hocracy format of lighting pitches and dot-voting bring move people to pitch their own topic and lead discussions even though they hadn’t planned to, and sure enough that happened, too.

So what did we take away from it all, besides a good day of discussion and some new friends? For one, we learned that storytelling is definitely being changed by digital culture, but that it is a force to be reckoned with and is imposing its own terms on digital culture at the same time.

We also learned that almost none of this is purely theoretical, but that people are doing real work without waiting for anyone to tell them it’s all been figured out and it’s safe to start now. There’s somehting in the air on this topic, and from the response that we got with this first time out for the Vancouver area, we’ll almost certainly be doing it again.

Running a Conference

At the end of the day we looked at each other and wondered how everything came off so smoothly? Did that just happen, with hardly any problems at all? It did, and we have a lot of people to thank for it.

First, our co-organizers Kaishin Chu and John Wellwood, for stepping up and taking care of all sorts of things that we couldn’t. And right after that, the volunteers who came out to an untested event and did their best to help out. They made a real difference and we hope they had a good experience.

Next up, sponsors. We were really lucky to get sponsors who bought into the vision and didn’t ask for much at all in return. The Network Hub, our title sponsor, provided not only the space but also contacts to The River Market, who were also great to work with. Minna and Jay even helped us set up and take down before and after, and really got involved in the day. If there’s anyone building community in this town, it’s them.

Echo Memoirs and HELM Studio came in with financial sponsorship and helped cover our costs, but also gave a lot of support in spirit, which can’t be under-stated.

And finally, Kiran and Mark from the River Market, who opened the market space up to breakout groups, liased with food vendors and were just all around helpful and great to work with.

Closing Notes

Would we do it again? Yup. Will we do other events? Likely. Something we learned from taking the event into New Westminster is that there is a thirst for interesting events happening outside of Vancouver. There are people who want to make it to the things going on in town, but sometimes that trip is a long one to make. Moreover, it feels like it’s Vancouver vs the rest of the region when gatherings happen in the same areas too much, so taking it outside helped create a neat new mix of people. We also learned that getting to New West isn’t that hard; it’s just one Skytrain ride and there you are, right on the waterfront, which is definitely an up and coming area.

We had set out to donate any surplus money from sponsorship and ticket sales to a literacy based organization, but after adding everything up and cutting some cheques, we just about broke even. We’re happy for that, but wish that a donation could have come out of it. With the experience under our belts we’ll know more about what to expect on the financial side next time.

So that’s a wrap. Again, thanks to everyone who came out, and if there are links to blog posts and such that you’d like us to add to this post, send them in.

Global Mechanic Media Viewbook

hello@denimandsteel.com — Sat, 18 Aug 2012 00:00:00 -0700

The traditional path of using printed books didn’t feel right for a team with expertise acoss different types of media, especially in animation. So we sat down to talk about interactive possibilities.

Founder Bruce Alcock and Animator Michael Mann had been kicking around a mandala concept as part of a kinetic type animation that sums up Global Mechanic Media (GMM). Tylor saw the potential for employing CSS motion effects, and within hours of getting visual assets he had a proof of concept working on desktop, iPad and iPhone. We all agreed this was the track to take and committed to seeing what we could do in a 3 week sprint.

Art = Content = Interaction

The Mandala has three main messages: what is at the core of GMM, how staying small keeps them relevant, and the depth of experience they bring to the table. Making an information and interaction model from a mandala is a new one for us, but the internal ringed structure suggested navigational elements and fit with the animations we experimented with, so we ran with it.

Getting the interactive flow right took longer. We played with several ideas, aiming for a sense of intrigue and exploration, but were cautious about frustrating people rather than enticing. With unconventional visuals dominating the view, we built a small interaction vocabulary off GMM’s iconic nut-logo, placing familiar interactive symbols within the nut to expose the functionality without breaking the aesthetic.

We show each section highlighted when the Mandala appears, and then return to an unlabelled view and let the person re-find each item to open and view the related content.

After viewing, that part of the Mandala starts turning, like an ancient puzzle mechanism being unlocked: playful, technical, kind of exotic and inviting you to find out what’s behind that door. In a risky move, we don’t allow a section to be viewed twice until the entire Mandala is unlocked, requiring one end to end trip before any further exploration.

When all three sections are unlocked and turning, the nut reappears with a question mark. Behind there we asked the most basic question of good customer service: what can we do for you? We then turn it over to the person with a text box and an email field, inviting them to get in touch, to find out the answer to that question.

Moving Pieces

This was a beautiful if intensely paced project. Like the Mandala, it had many moving parts: the kinetic type animation, portfolio pieces to feature, copy and voiceover narration all had to land together, and they did. Working with GMM once again we got to do what we do best: take a vision and work out the details as we go along, trying experiments and building on what works while keeping our eye on time and cost.

Technically, the piece relies heavily on CSS3 transforms, animations, and transitions, HTML5 video for displaying the kinetic type animation and portfolio pieces, and Javascript for timing and interaction.

Take a look at the result that is going out to introduce GMM to a new market: meet.globalmechanic.com. And if it gets you thinking of how they can solve problems for you with creative media, you’ll already be close to saying hello.

HTML5 Workshop - August 10, 2012

hello@denimandsteel.com — Tue, 31 Jul 2012 00:00:00 -0700

Next Friday, August 10 I’m leading a full day Publishing Workshop at SFU on HTML5. I’ll help you upgrade your knowledge of HTML by understanding its structure, semantics, and style.

I’m really excited to share what I’ve learned building websites over the past 8 years and to give everyone the inside track into what’s happening with HTML5. Pass this along to anyone who’s looking to finally dive in!

For more information, course outline, and to register, check out HTML5 Broken Down: Structure, Style, and Semantics.

Global Mechanic Media Refresh

hello@denimandsteel.com — Mon, 30 Jul 2012 00:00:00 -0700

It’s a chance we’d secretly hoped for since meeting Bruce and Tina. When we explored their previous site we found a portfolio of great work, but it was clear the site, while well-built, wasn’t able to keep up with the diversity and sheer volume of production.

After discussing how we’d approach the problem, we got the green light. If you want to see how it turned out, go right to globalmechanic.com, and then read on below about how we made it happen.

What really made this project unique is that Global Mechanic is in transition. Traditionally, they’ve focussed on innovative animation for advertising, but have found themselves getting into apps, films, performance and more. As we dug into the website, GM dug into their own brand.

Normally that would scare us: how can you update the way a company presents itself as they’re figuring it out? In this case the two processes played off each other beautifully, and with website re-launch move themselves to the name Global Mechanic Media, stating their value and direction more clearly than ever.

The Experience

In the media business your portfolio is your audition, so our main objective was to surface the expansive portfolio without overwhelming or taking visitors on a click-fest to explore the range of content.

We found our guiding star in the GMM studio in Gastown: the modest street-level door, two flights of steep stairs, and an industrial steel door to the studio offer no clue about what happens next. But you open that door and wow.

That image doesn’t really do it justice, but you can tell the studio is a big, beautiful space. The design touches are simple but dramatic, drawing your eyes along the brilliant (on-brand) orange floor, across big windows and up to a clasically tiled white ceiling. It breathes style without pretension and welcomes you entirely whether it’s your first time or your umpteenth visit.

That space reflects how they work: there’s a flow of ideas, things are happening. Work is being done but there’s no sense of grind. Talented people are working but not being worked, ready to show their creations with a genuine curiosity about what you think. This is how they work, and it’s special.

We set out to make that experience of being in the studio the theme of the site because that was so much of the heart of what makes them so good at what they do.

Go Big

Following our process of prototyping early, we first explored ways of showing off the portfolio, mostly consisting of videos. We pulled the clips into a grid and toyed with making the current video pop into a generous view that really shows it off, keeping our minds on performance. GMM gets to the point and works fast, and the website would need some real snap to convey the responsive nature of their business.

The early results were promising, and we started to think we could use that model as the basis for the site, or at least the portfolio aspect.

The Information Architecture

GMM does a lot of stuff. With a lot of people. In different mediums for different audiences. They have an interesting core of work and numerous offshoots in different, sometimes experimental directions. It’s heaven if you’re looking for a media production agency, but a little crazy-making for an information architect.

When things feel like they don’t fit together, your frame likely isn’t big enough. Rather than outsmart ourselves with clever menus, we went for radical simplicity: GMM boils down to amazing work by talented people: Work, People. What’s left?

Those easy categories were confounded by a collection of projects that didn’t fit into either category, yet had a common theme to them. At the centre of the mis-fits for the old site sat their blog, which had been added after the previous site was built and never felt like a fit despite being very active.

We proposed a third top-level navigation path with the name Mechanica, speaking to hum of activity, inspiring miscellany and reports from daily life showing the personality of the team beyond its portfolio.

With just three top-level choices, navigation became three big doors, easy to open and always leading to something cool, just like the studio, where you’ll encounter work being done, people to talk to, and curious moments around every corner.

The Interaction Model

Remember that video grid we experimented with? We liked it a lot for its big targets, responsiveness, and focus on the visual. It had a good feel on phone, tablet and desktop, so we started to run with it as the entire interaction model.

Sadly, the early sketches walking through the interaction were lost in the fire at our own studio. I was thinking of recreating them but was called out for cheating fate, so believe me when I say they were the nicest sketches you never did see. Tylor, on the other hand, did have some later-stage sketches from a working session in a separate notebook:

The grid format worked for two of the three top-level content types: work and people.

Rather than load new pages for each selection, we use the tab motif to build a navigation path down the page, allowing people to traverse back up the hierarchy just by scrolling up. You can watch a bunch of videos and never lose your place or a moment to a page reload, and that’s the way we like it.

This also worked well for navigating the extensive list of people GMM has worked with, both past and present.

The Visual Design

Bruce Alcock, GMM’s founder, also happens to be a brilliantly talented designer, and took on the visual design.

Bruce bought into the inspiration from the studio in a big way, building key elements from the studio’s interior design: the orange boards of the site’s background are taken directly from the studio floor, and the tiles backing the video clips are from the studio ceiling.

For a long time we worked with a homepage that had no text content, relying only on a gentle pulse on the Work category to suggest a starting place. While we loved the aesthetic, it was clear that some additional content would be needed to a) show the page had finished loading and b) to introduce GMM more articulately.

As we were close to wrapping, GMM had been working with an equation as a new tag line that communicates what they’re about. We dropped it in with some concise copy and voila, the homepage felt complete. The website and the brand update had arrived together.

The Code

Stepping into the existing site was not trivial, because it’s actaully way more than a website: it’s a custom video CMS. That meant learning and working with a foundation that was pretty unfamiliar, yet quite powerful and an integrated part of GMM’s workflow.

We quickly cut back our ambitions to remake substantial portions of that system. It was working well enough for GMM and we didn’t want to introduce a new way of working justified only by the desire for a refreshed audience-facing site. When you start working in someone else’s garden, you need to respect what they’ve done and work with it, and that was our approach.

The blog, built on WordPress, was really easy to integrate into the full site with a custom theme. It’s a testament to how far WordPress has come that this kind of thing can just happen without headaches, and it felt so good to see that piece of their website finally become a first class citizen of the site.

Along the way we made a lot of little changes, like unique URLs for each video, smart loading strategies to get videos playing as quickly as possible, and countless other adjustments that most people will never notice but all add up to a better website experience.

The redesign uses HTML5 for video playback and semantics where possible, and there are some small touches using CSS3 animations. We deliberately avoided adding more animation since the content itself is often animation-focussed. We’re always happy to let the content do the talking.

Wrap it Up

This project was a real treat: talented people doing great work with a spirit of experimentation that we share. As we discussed final touches we asked GMM how they thought the project went, and Bruce responded with this:

From top to toe, Todd and Tylor were thoughtful, insightful, timely, collaborative, respectful, hard-working and productive. The result was better than the initial idea in many ways. Compared to our previous site, all aspects work more quickly and simply. Denim & Steel put plenty of thought and energy into optimizing load times, refining function and above all making sure communication to the user is crystal clear. All in all, they're pleasure to work with, for a great final product.

A month into the relaunch, we heard back on the results so far:

Website visits overall are up 50%
Pageviews tripled
Bounce rate dropped by 9%
Time on site is up by about 25%

In addition to analytics we heard that the updated site was generating new leads, many of which started off with a compliment about the site itself and the expanse of work in GMM’s portfolio. And that was just what we had set out to do.

Then Something Like This Happens

hello@denimandsteel.com — Sat, 21 Jul 2012 00:00:00 -0700

If you know us then you likely heard the news: this past Thursday a fire destroyed the studio space that we share with our friends at Echo Memoirs, Boxcar Marketing, Mol and Barley and Nimble Creative.

We learned about the fire while it happened. In the middle of a user testing session, a call from the alarm company was missed. Then texts came in asking if we were alright, and pointing us to Twitter. Shane Moore’s picture, while grainy, was unmistakable.

We don’t know how to put out fires so we just kept the session going, which proved a good way to keep our minds away from worrying about what we can’t control. An email confirmed our worst fears the studio have been destroyed. Luckily, we have the best kind of clients, so after testing wrapped up they got the wine pouring and we spent the rest of the evening having a good time.

Damage

Walking into a burned out space is surreal. From down the street the next morning you could pick up the scent of charred wood. The stairwell was dark, water still pouring down from higher floors. On the third floor, ours, the floor was bubbled and warped, and in passing one studio we could see through holes in the walls to our own.

Glass and flakes of burned paint and wood were everywhere. All the windows were broken and rain fell through a hole in the ceiling. It really looked like a write-off but we quickly uncovered surprising acts of random preservation.

Our beloved Edward Tufte books were undamaged except for the smoke damage to the covers, outlined by books around them. As books about information design, they now hold unique inscriptions of their own history. Tufte would be pleased at the elemental level of representation.

A small kinetic sculpture still works, a bit rough and without its paint. A hard drive just might still be alive in its scorched casing. Our origami flowers did not survive, their wire stems sticking out of their tiny vase. Like I say, it’s surreal.

Our financial documents were luckily untouched though a little bit soggy. The very early prototype of a physical product that we’ve slowly been working on is also safe, if a little bit scorched. Even our Mental Notes cards survived, and though their sturdy case took a hit it’s a keeper.

And Then

As word spread we got a lot of tweets and email of support, many with offers of places to work at attached or general help. We bank with Vancity and the assistant manager of our branch got in touch to talk a bit. When you look back at three screens full of tweets telling you they’re glad you’re ok, that they want to help, that you’re welcome to work in their space you can’t help but feel good on a bad day.

We sometimes talk about the tech community in Vancouver, how it needs this or that and how it could be better. Then something like this happens, and you realize that to find the best in people you just need the right circumstances and then watch them step up.

The word is that the building is still solid and that the studio will have to be gutted and rebuilt. There is a lot of history lost there, but we’re looking forward to moving back in after a few months. We just about have temporary studio space lined up and will be taking up some of those offers of spare desks until we can move in there.

Thanks everyone for your support and offers of help. After you read this, take a second look at your data backups, your insurance, and everything else. You might never need it, but if you do you’ll be glad you did.

iOS 6 and (Sorta) More Open Maps

hello@denimandsteel.com — Tue, 19 Jun 2012 00:00:00 -0700

Most people don’t think about maps much until they need them. Yet they’re among the most important cultural information artifacts we can produce, asserting and reinforcing the organization, ownership and use of space. Who wins the wars writes the history, but who makes the maps holds tremendous power.

Last week we saw an expected rundown of how iOS 6 would replace the Google Maps app with Apple’s homebrew solution built on OpenStreetMap. But there was one twist that was unexpected, makes perfect sense, and is worth being excited about.

It started, as most change does, with complaints. Developers with their hands on the iOS6 beta remarked early and often that Apple’s maps are sparse with supplemental data, especially in transit and other infrastructure. That’s important info for a mobile device to have, and Google has invested heavily and done a very good job of providing it.

Fill In the Blank

You might think, well it’s beta, so sure it’s incomplete. But in this case incompleteness is a feature, because Apple isn’t going to bother adding all that stuff. Instead iOS apps will be able to register with the operating system as having geographically pertinent information to share, which will then appear in the new Maps application.

To so broadly embrace open and third-party data is unusual for Apple, so much that it will take a while for the implications to become clear.

Set aside the economic argument and there’s an important philosophical decision taken here. Rather than setting itself up as a centralized gatekeeper on what information can be on a map, Apple has provided a way in for a plurality of sources. If it wasn’t a sore spot for Google to lose its place in iOS, what really must sting is to be so completely disintermediated.

While Google typically makes the information they gather ‘free’ to use, they can and do suddenly put up paywalls that aren’t workable for many businesses. FourSquare’s switch to Open Street Map drew wide commentary about cost savings. Even those who can afford it are concerned enough with a private company being the default source for ostensibly public information to the extent that they, too, are cutting out Google.

Mapping Free-For-All?

It sounds like it a wild frontier, but it’s not entirely. Apple still has final say on what apps appear in the App Store, and by extension the apps that can feed data into their own maps app.

It’s not the most open thing in the world, but by comparison it makes Google look monolithic and a bit undemocratic. Since Apple is making the new maps app the marquee feature of iOS 6, we have to believe they’ve really thought this through and won’t screw it up.

We’re particularly exited about what that could mean for our This Is Our Stop project. Were we to wrap the web app into an iOS app, we could see TIOS conversations popping up on the same app that people use to navigate through the world. That kind of presence is something we could never buy, beg or steal, but we don’t have to as Apple is providing a door just for us to walk through.

To make maps is to assert truths about the world that impact us in many ways. Apple’s switch to OpenStreetMap was a huge stamp of validation for an approach to mapping that draws on many sources to constitute what is available to you in the world. By programmatically opening up the maps app to data from other sources, Apple is further diversifying how our mobile devices inform us about the world around us.

Next Forum - Haig Armen

hello@denimandsteel.com — Wed, 13 Jun 2012 00:00:00 -0700

There’s something special about a talented musician who can make something beautiful happen with what looks like so little effort. But behind nimble fingers and a good ear there’s a rich world of thought that touches so much more than just our ears.

Our next Forum will take us there with Haig Armen leading a discussion about music, composition and their intersections with design. Haig is not only an accomplished musician but a professor of interaction design at Emily Carr and a pioneer in the interactive technology experiments from the early days of the web.

Tickets are on sale now for this June 28 gathering, where once again we’ll pull up the comfy chairs, dim the lights and put out some food and drink for an evening of learning and conversation. We hope to see you there.

About Forum

Forum is our speaker series that features a small group in our comfortable studio space with food and drink provided. The format emphasizes interaction with speakers and a focus on topics from outside our normal tech-filled lives. To learn more or to inquire about becoming a sponsor, contact hello@denimandsteel.com.

Southpaw Responsive

hello@denimandsteel.com — Mon, 11 Jun 2012 00:00:00 -0700

Today we wanted to share a novel experiment that takes into account the handedness of a person browsing your website. While this is a subtle design affordance and might only matter for 10% of your visitors, it could help tailor your content to be responsive to the situation that someone is using your site. This is especially interesting on mobile, where people often switch which hand they are using with their phone depending on what they’re doing. Here’s how it works:

Give it a try here

It’s really quite simple: detect which side of the screen someone is swiping or scrolling from and then flip the content so that it’s more visible. That way you can keep content from being obscured by the thumb or make important actions easier to reach.

One important tweak is to keep content that has been seen in the same place, so that if you scroll back up the site doesn’t unexpectantly change. Also on iOS we buffer the changes by a screen length since Javascript events don’t fire until the elastic scrolling stops. This way you don’t see content swapping after the browser finishes scrolling.

Getting closer to how people are using your site is exciting. The article that inspired this discusses using the left and right portion of the screen carefully as it can influence trust of your content. The article also hypothesizes that this could vary from left to right handed individuals, so tailoring the position could be quite important. Let’s keep designing for people and humanizing what we build.

Introducing Whiskers

hello@denimandsteel.com — Thu, 07 Jun 2012 00:00:00 -0700

Today we’re opening up a long-simmering project that started pre-Denim & Steel: a bespoke, open-source project sponsored by Larry Halff.

That project, Whiskers, is the first step for an idea to make the experience of posting to multiple social networks smoother, and to truly own one’s own social media content.

The Origin Story

A few years ago Larry and I had a conversation about the trend of content cross-posted to Facebook and Twitter. You’ve seen them: tweets with a little #fb on the end, Facebook posts with hashtags. They always seemed a fit for one or the other network, but felt mechanical in the cross-post where the language and syntax often didn’t translate.

The conversation moved into a small design project where we worked out the interactive potential for a multi-network posting tool. Instead of posting dumbly to multiple channels, we would let a person to start with one ‘seed’ post and to modify it for each destination as appropriate.

As time went by we saw more people being weirded out by Facebook’s shifting sands approach to privacy, as well as stories of lost access to accounts, and by extension lost data. Having navigated a serious data loss in Ma.gnolia (later renamed Gnolia), Larry was thinking about social tech that built in backup at the personal level as a step towards greater data independence. Whiskers was becoming as much about personal ownership of one’s data as much as it was about making fully coherent cross-posting a reality.

Shortly before Tylor and I started Denim & Steel, Larry asked if we would take on development as well. We brought in Adrian Unger to help move the project along, which with Tylor’s support got us to an alpha offers an installation process, account management and posting to Facebook and Twitter thought the split-posting interface. Everything posted goes into a local database for a safe, user-controlled backup.

It’s been a slow-burn project, but we’re no-less pleased to see the project go open-source today. At its core, Whiskers is a very different way of thinking about the self-hosted personal stack, where social media starts at home and pushes outward, rather than always living at arm’s length. Congratulations, Larry, for bringing this idea to life and for sharing it with the world.

To learn more check out the case study or jump straight to the Whiskers repo on Github.

PolyglotConf and Fast, Beautiful Maps

hello@denimandsteel.com — Mon, 28 May 2012 00:00:00 -0700

This past weekend Todd and I attended the Vancouver Polyglot Unconference, a much needed get-together of local programmers and advocates. Vancouver has been starving for high quality unconferences this year and PolyglotConf delivered perfectly: there was a diverse mix of smart people all there to share what’s exciting them this year.

I talked about Fast, Beautiful Maps, and how anyone can own their maps by building with open data and open source tools like Mapbox. It’s easier every day to create maps that match your project’s brand and to build compelling visuals quickly. In less than 5 minutes we created this map showing parking meter rates in Vancouver:

Take a look at my notes from the talk (lots of eye candy!) and let me know if you’re building anything interesting with the Mapbox stack. Would love to help people get up and running quickly since this stuff is a lot of fun.

Other highlights were Boris’ session on Services To Products (related discussion here), Miran Lipovača’s intro to Haskell (his book is great!), and Allen Pike’s Q&A on Advanced Javascript (lots of homework).

We also enjoyed the discussion around HTML5 apps and what the future of this ecosystem looks like. We have had some recent experience with our launch of Beardspotter and This Is Our Stop, and explaining to others that these are ‘web apps’ has been difficult – great to hear other people’s thoughts on taking web apps mainstream. I also forgot to mention that both of these are open source, so please fork them at https://github.com/denimandsteel/beardspotter and https://github.com/denimandsteel/thisisourstop!

Rolling forward, it sounds like there will be a Polyglot meetup coming soon and if you’re into node.js like we are, defintely get in on the Node Brigade. Looking forward to next year!

Unconference Website and Ticket Sales Now Open

hello@denimandsteel.com — Sat, 26 May 2012 00:00:00 -0700

Things have really been coming together for the upcoming Digital Storytelling Unconference.

This week we opened a home on the web for the upcoming Digital Storytelling Unconference at digitalstorytellingunconference.org. It’s not the prettiest URL, but it’s our URL. This is now the go-to place for event details; follow @dsuvancouver on Twitter for more frequent updates and links to digital storytelling-related stuff that we come across.

Also this week we opened ticket sales with a killer early bird price of $15 instead of $25. A choice of lunch from a 4-item menu (with vegetarian and vegan options, of course) is included with the price of the ticket. Frankly, it’s a ridiculously good deal.

It’s been great working with our hosts and sponsors, and of course our fellow organizers @kaishinchu and @john_wellwood. Everyone has made it so easy to bring the big pieces into place.

Interested in attending? Do it early and save a sweet ten bucks! Read more at digitalstorytellingunconference.org or go straight to the ticket stand. See you July 7!

TIOS Trends and Next Steps

hello@denimandsteel.com — Tue, 15 May 2012 00:00:00 -0700

With media coverage tapering off, we’re excited to see a steady trickle of comments coming in from bus stops around the region. With about three weeks behind us, it seems like a good time to check in with what we’re seeing in trends and to talk a little about next steps for the service.

Trends

Topics

We see a lot of comments about bus service. There are stops that see chronically late busses and in general, wishes for more coverage for certain lines. It’s not hard to believe that given a chance, people ask for more of a constrained resource, so that in itself isn’t so surprising.

The second most common need expressed is for garbage cans at stops that don’t have any, and less often but still common complaints about litter at stops. People like things a bit tidy, and we can’t blame them for that either.

Beyond that the trends get more diverse. We’re happy to say that people are in small doses reaching out to each other, offering advice, saying they saw a cute person, and even asking if anyone else is around at the stop to make a wait a bit less lonely. Others are pointing out their favourite nearby businesses or waiting spots, and we’ve even seen some small local businesses invite riders to take a few steps and visit them. We think that’s great, and any business near a bus stop is more than welcome to make friendly offers to riders on the stops near them.

Places

As you can see on the map, most comments come from inside Vancouver proper. We hope that our stickering efforts bring in more voices from the more outlying areas, as they often have longer wait times an can tune us into what’s going on in those often-overlooked spots.

Tenor

We continue to see very few problems with vulgarity and spam. We don’t mind the swears, but have been relieved to find only two comments that we felt compelled to hide out of hundreds. People complain a bit about other riders but the majority are friendly and cheerful, and enthusiastic about the neighbourhoods they post from.

Devices

We’re mostly seeing iPhones, which is not a big surprise, but also a lot of iPads which is surprising as the experience on the iPad is a bit broken. After that we see a handful of different Android devices from Samsung and HTC, and a surprising number of visits from Sony Ericsson devices which we had kind of written off.

We still haven’t shut out desktop browsers and find mobile traffic is trending to overtake desktop. Aside from quirks we didn’t bother to fix on desktop browsers, we hope that means the service is proving more useful at the stop, as designed (whew!). That’s a big signal for us and aside from the kinds of comments a big validator of what we’ve done so far.

Next Steps

There have been some interesting and thoughtful feature requests, and we are listening to them but being careful about how we evolve the service.

We think a key part in the positive reception is the focus on revealing the otherwise hidden knowledge that people have about the areas they use around stops, and in framing the service as a gift to Vancouver. We want to stay close to that mission, so the features most on our minds are those that build in that direction rather than trying to layer utilities that already exist by other means. In other words, we want to make changes, but primarily don’t want to break what has been good so far.

In the next few weeks we’ll have a release that fixes a few bugs and tries to round out further the feeling of a community around our transit stops.

We continue to hope that people in other cities will grab the open-source code and adapt it for their own region, and are happy to talk to anyone interested in doing so. We can’t promise help in every case, but we have open minds and easy to reach inboxes.

Stickers Again!

We’ll be putting up more stickers as we have time to, and really appreciate that people have been asking for sticker packs to decorate their own local stops. Scott in Point Grey and Rachael around the Commercial Drive area have been especially generous with their time and effort, and we want to note our gratitude here. If you want to get some stickers to put up, just drop us a line.

Keeping On

We’ll do some monthly posts for the next while to recap what’s happening in the service and to make new features known, but will start posting notable comments with links to the stops via our @thisisourstop Twitter account. Follow us there to tune into the dispatches from around our region that make us smile.

This Is Our Stop on CBC

hello@denimandsteel.com — Mon, 07 May 2012 00:00:00 -0700

The media interest for what people are doing on This Is Our Stop has been great, but the best experience so far was a visit from CBC Vancouver’s Bob Nixon and his cameraman Rob last week. We had slated just a half hour for the interview but it turned into more than an hour of easy conversation and sharing not only TIOS but our whole company ethos and how we like to work.

Last night the piece aired, and we’re really pleased with how perfectly Bob framed the story and tapped into the best aspects of the project. If you didn’t see it on broadcast, you can watch the embedded video here. Thanks again Bob and Rob for a fun interview and for telling our story so well.

Week One for This Is Our Stop

hello@denimandsteel.com — Wed, 02 May 2012 00:00:00 -0700

Launches rarely go this well. It’s been an amazing week with a lot to share.

Reactions

Overall, This Is Our Stop has been well received. We’ve had lots of enthusiastic responses on Twitter, and an exciting amount of interest from both local and national press. Coverage started with Dan Misener’s Globe and Mail Technology article, looking at TIOS as a niche social network.

That led to a short but really great piece by Stephen Hui at the Georgia Straight, followed by Open File. Then CBC Radio’s Early Edition got in touch and we did an interview that aired Monday, as did a print and online interview with 24 Hours Vancouver. Most recently Bob at Vancouver Is Awesome wrote a post that put special focus on the stickers.

That exposure was a big boost for what happened next. Tylor put it best in a tweet: Watching people breath life into something we’ve been working so hard on, it’s great.

It really is. The people using the app seem to get it, and they seem into it. Despite having no identity requirements, only one comment out of over 300 had to be hidden, and that was for some pointless obscenity. A few local businesses have posted polite invitations to visit at stops near them, which is great when they are local to the stop.

Performance

Technically the node.js implementation has been running beautifully. We had started on Heroku to get our prototype running quickly, but moved off mid-development to make use of native WebSockets. Despite healthy traffic and posting in the past few days we’ve yet to see capacity go above 10% in use with just a 256MB cloud server from Rackspace. This has allowed us to keep operational costs very low for now, and for a good part of the foreseeable future.

As we’ve watched comments come in, we often follow them to the individual stop page and check them out in context. That practice has uncovered lots of little bugs that we’ve been able to fix in between visits from the same person, which is really fun to do. By simply following usage we’ve been able to find the edges of the system in ways that a full QA program might not, and that’s been a great validator for a lightweight, bastardized agile approach.

We’re aware of a few bugs and will get those fixed as we sort out the next best move, and after we keep our promises to clients so we can do other trivial things like pay rent and eat.

Desktop Access

The nature of how news spreads meant that a lot of people had their first exposure to TIOS on a desktop browser. That’s too bad in a lot of ways, as we make no provisions for desktop or ipad form factors at this point. We talked about softly blocking desktop access, but didn’t get around to it before things took off, and we decided to leave it as is to see if anything bad happened.

It’s been alright, but it’s not optimal, so we’ll be making some changes that deter (but don’t block) access by desktop browsers, encouraging people to use the app in-situ, outside at bus stops, where it’s made to be used.

For now if you go to our rough desktop landing page at thisisourstop.com/desktop, you’ll see a live version of the map at the top of the page, which shows the locations of all posts since the service launched. Some neat patterns are emerging, reminiscent of Eric Fischer’s beautiful map of paths through Vancouver.

MyStop.to

What was really unexpected was seeing the launch of mystop.to, a Toronto-focussed remake of This Is Our Stop’s core concepts in a PHP app. The speed that this was rolled out was probably the most startling, and that the project used the concepts and a bunch of markup, but not the underlying code. It’s all cool, just different from how open source projects usually go.

We haven’t had a chance to chat with the folks behind MyStop, but hope to soon. It’s clearly different, and the tenor diverged sharply when we noticed ads. We wish the best for the project, and hope the heart of mystop.to stays close to tapping into the communal aspect of bus stops.

What’s Next

When we launched we decided to step back and not get directly involved in postings too much. Instead we post when disposed to as part of our commutes, or when there are direct questions about TIOS that should be answered.

We’re especially avoiding much thinking about new features or integration with other services. Instead we want to give this new thing time to grow as it is, and then decide on some next steps. So while feedback has been great, the thing that will help right now is simply more use. If you want to help at all and you’re in Vancouver, just use it, and let us know how it’s going from time to time. And of course, tell your friends.

But if you want to help even more, there’s one big thing you can do: Stickers! We’re going to be putting more up in the coming weeks, but could use a hand. If you’re up for that, email us to coordinate picking up or getting stickers sent to you.

Best of TIOS

Finally, we had to pull out some posts that caught our eye and spurred conversation in the past week. Some are funny, some common sense, and some are really touching. We hope you like them, too.

I watched my neighbourhood grow up around this stop. It used to be trees and a four way stop, then a high school came, and then one summer, I watched the last of the trees turn into a starbucks. 55926

It drives me nuts all the people who smoke at the Coquitlam bus loop. There are many no smoking signs but no enforcement. –Greg Moore 53730

A really nice guy invited me to stand under his umbrella at this stop yesterday. made the rainy wait much nicer. 56477

If you just missed your bus, wander down to Macdonald and scope out the free stuff on the NW corner.. The free corner! 50392

Need more frequent service till eleven, some time after long wait, has to wait for another one. Because there is not enough space for all..:( 61590

Needs a garbage can! Litter all up on mah neighbahood 50746

Is there anywhere to walk to for lunch round here? I’m stuck in BCIT CARI just after EA on the right 51548

Watch out for curb puddle. You will get soaked by traffic hitting the puddle if you wait under the shelter in the rain 51362

This bus stop should leave @ 5:00 AM. Monday - Friday. 6:00 AM Saturdays & 7:00 AM on Sundays. Last bus should leave after midnight with the connections with the last Canada Line & SkyTrain. 59273

Hey the FedEx truck is in the bus stop space again! –TheTodd 59760

The bus shelter has a leak making one side of it useless and a large puddles forms in front of the stop causing passengers to have to stand way back 53294

I love my bus 57892

You get to stare ironically at the Mercedes dealership here 50327

Look to the person to your left. Now look to the person to your right. Now look at yourself. Two of those three people are hipsters. If you think it’s not you, then you’re a hipster. 52101

“I can’t see you but I know you’re there.” What movie is that from? Anybody? 58327

This street is so nice with Flowering trees and sunset in the background 58704

Spent so much of my teenage years waiting at this bus stop… 53193

My mornings are haunted by you!! 50309

Across the street from my apartment. If you’re waiting here, I can see you from my balcony. (Lookin’ good. How’s it goin’? How ya doin’?) 50883

Thank you, you beautiful people writing these things. You’ve done more for this app than we ever could alone, and we’ll do all we can to make a good conversation space for people who love transit.

Browser Wink

hello@denimandsteel.com — Mon, 30 Apr 2012 00:00:00 -0700

How it Works

It’s a pretty bare-bones approach, but it works well in our experience. Follow these steps to get busy.

Download the code and put it on your server. Craft a link that includes your email address. Add your logo to your install directory as logo.png (200x200px) and edit wink.php to link it to your website. Great, now you’ve branded it your way. Keep going.
When clients see a problem you can’t, stop tearing your hair out. Instead, send a link to your Browser Wink. Ask the client to just click the link and then click Send Browser Details.
The recipient clicks the button. They can preview what the service sends.
Wink sends everything it can find out about the browser and its environment straight to your inbox. A sample of the dump is shown below.
Go get ‘em; start hunting for clues from a clearer picture of the browser that’s giving you trouble. And be happy that you saved your client the discomfort of hunting down unfamiliar information that they don’t care about anyway. Good luck.

Why We Did It

It’s frustrating enough for a client to see something broken in their browser, and then to hear a developer say they can’t see it in theirs. The usual response is to drag the client through finding their browser version, OS version, screen resolution, javascript, and so on. It’s painful for everyone and eats a lot of time.

We set out to make something that would get us a deeper technical perspective on the problem while returning the client to familiar, comfortable territory. Browser Wink does that in a dead-simple interaction that any client can understand: they click a link, and then click Send Browser Details.

You Can Use This

Wink is open source under the MIT license, so you’re free to take it and build on it. You can put your own branding in to build that connection with your customers, and hopefully it makes debugging those weird cross-browser problems a little easier.

Update Darryl Pogue has made a Wink Rails gem that you can embed into your application. Sweet.

Output Sample

So what exactly do you get back about someone’s browser? The following sample tells all about Todd’s current installation of Safari.

Introducing Browser Wink

hello@denimandsteel.com — Mon, 30 Apr 2012 00:00:00 -0700

April has been a big month for us. At the start of it we decided to make our theme for the month ‘Finish’. We had some lingering side projects started before getting very busy with client work, but their unfinished, or at least unpublished states were bothering us. So we made a big push to first get Beardspotter out, followed by This Is Our Stop (both to great response, but especially TIOS). And now we have a third side project to share: Browser Wink.

Wink is a simple, open-source tool for web developers built to save them time and to spare their clients the painful exercise of providing browser details during debugging. We built this in an afternoon and the first time we used it we likely saved ourselves a half hour and our client a number of tedious emails or phone calls.

If you ever have the problem of a client saying they see something broken when it looks just fine to you, use Browser Wink to close that issue faster. We also wrote up a case study with a few more details, but what you really want to do is to see it in action and then to download the code and make it yours, too.

That’s it for April, and for side-project launches for now (To-do: a better name than side-project for these things).

Update: Boris suggested that we call them inventions. Now, why didn’t we think of that?

Digital Storytelling Unconference Date and Venue

hello@denimandsteel.com — Fri, 27 Apr 2012 00:00:00 -0700

Thanks to everyone who expressed interest in the Digital Storytelling Unconference. After exploring some options we were connected with Minna and Jay at The Network Hub, and they’ve graciously offered to be our venue sponsor with their beautiful New Westminster location.

With a location set we can’t make any more excuses: it’s happening, and the date is July 7.

Some Vancouverites might tremble at the idea of something out of town, but rest assured it’s not a hard trip to make. Located at the beautiful waterfront setting of the River Market, the Network Hub space is right across the street from Skytrain. Sure you’ll need a 2-zone ticket but think of the adventure.

More details will unfold quickly, and we’ll post them here as well as on the event wiki, and we’ll have ticket sales and an event website up soon. Pricing will be $15 early bird and $20 after that and at the door, provided we still have space (we’re aiming for about 60 people, maybe more.)

What we still need: a food and/or drink sponsor, a few more volunteer commitments for helping out the day-of (please add yourself to the wiki if you can help out). Up for that? Please get in touch by dropping a line to hello@denimandsteel.com

Introducing This Is Our Stop

hello@denimandsteel.com — Thu, 26 Apr 2012 00:00:00 -0700

Another week, another release of a side project. Where Beardspotter was a just for fun kind of thing, we’re especially excited to share This Is Our Stop, a mobile web app that creates social networks around individual bus stops in Vancouver.

This project brings together so much of what we’re interested in: web, social, mobile, physical-digital connections, and how open data makes new things possible. The project has already caught some attention, notably by Dan Misener writing in the Globe & Mail. Though it’s described as a startup, we want to emphasize that this is a side-project and not an official new business. We like doing lots of things, but we’re not ready to make that jump quite yet.

We owe special acknowledgement to Karen Quinn Fung who planted the seed for the original idea. And to Sam Dal Monte who partnered with us to contribute the visual design, and also brought insights into making the interaction design better. We also want to thank Translink for opening up the data for their bus stops and schedules, and to note that the project is not affiliated or endorsed in any way by Translink.

In Vancouver with a smartphone? Point it at thisisourstop.com and plug in the 5-digit stop number, then have some fun. Like our other side projects, it’s open source so we’d love it if others forked it and took it in new directions.

There’s much more detail in the case study found in our Work section.

This is Our Stop

hello@denimandsteel.com — Thu, 26 Apr 2012 00:00:00 -0700

Try It

Got a smartphone? If you’re in Vancouver and surrounding area covered by Translink, head out to a bus stop and look for the 5-digit number on it. Point your browser at http://thisisourstop.com and enter that bus stop number, and instantly be able to talk about that stop and what’s around it.

The Idea

Bus stops are anchor points for the urban experience. They’re kind of neat when you think about them: stand at one and a giant machine will stop and give you a lift to almost any part of the city.

If the people who used a bus stop got together and talked about it, what would they say? Would they point out problems? Share tips on what the surrounding area offers? Suggest improvements or talk about the weather? Maybe all of that and more. Maybe something completely different. We’re curious to find out.

The Approach

We settled on a simple writing wall for bus stops that includes some information utility, to be accessed through smartphone browsers.

On manually entering a stop number (which is turning out to be faster than a fancy-pants geo-location lookup or trying to search street addresses), we pull up basic information about the stop: cross street, routes that stop here and possibly the time of the next scheduled bus. We’ll also show a map of the local area and provide tap-throughs to Google Maps and to the official source of information for that stop via Translink’s mobile website.

With that model prototyped we found that we were not compelled to use the app very much, so we added the next scheduled time for each bus at that stop. That one change, adding utility, made it feel more natural to use at any given time when out and about.

Paired with information utility is a conversation space. Visitors can write messages up to 200 characters and attach any of four categories via friendly icons. Those categories are largely there to suggest themes that keep things light: weather, things to look for, suggestions and a kind of open category for just saying something.

We also put a premium on visual design to help make an inviting and positive space. We partnered with Sam Dal Monte to provide visual design. We’re excited to be working with Sam after admiring his independent work in rethinking transit signage in Vancouver, and his contributions made a big difference.

Sam approached the interface starting with content, and by content we mean typefaces. He researched the history of transit typefaces in Vancouver and incorporated that into his shortlist. In both the logotype and the content we tried to balance transit history with what works well on a mobile device.

From there Sam built out a visual language and style that transformed the prototype and helped us refine the interactions. We couldn’t be happier with how his work plugged into and advanced the vision.

In the background were many hours of discussing just how much we wanted to push against the norms of social networks. We ended up questioning online identity models, permanence and aggregation.

Impermanence

Since city life changes daily, readers will only see posts from the last few days. In the background we’ll retain the full history of posted comments (except abusive ones) and make those available by API for those wanting to do a deep dive on a specific stop. Posts can be given an up or down vote, or flagged for abuse if necessary. We think this model keeps the expectations at a good level, and prompts for less self-conscious participation.

Identity Lite

The last thing we wanted to do was create the impression of yet another social network to join, so we tossed out the idea of user accounts or unique identities. People can add a name to their posts, but someone else might use the same name. Very few sidewalk chalk artists sign their work, and we wanted this to have that same feeling of transience and low-commitment. You don’t sign your name or show ID to use a bus stop, which is part of its democratizing feel. We wanted to mirror that access in the app.

One thing people often ask when we talk about the project is Won’t people use this for dating?

To be honest, we’d take it as a mark of success if people did try and use it for missed connections. But more seriously, we know that any read-write space can invite unwanted behaviour. To manage that we’ve worked out a way to blacklist a device for a period time, since we don’t have a regular account to remove. Our approach here emphasizes forgiveness rather than total banishment as the tool for steering bad behaviour into good.

Be Open

We talked a lot about the need to bring this to a diverse audience rather than just those interested in new social technologies. To do that we’ll be putting some stickers with the URL on bus stop poles in selected spots. The hope is that this approach will bring a more diverse community from the start, rather than trying to build out from an early-adopting tech crowd.

We were thoughtful about the name, searching for something inviting and community-oriented. This Is Our Stop puts the focus on the shared ownership and investment inherent in public infrastructure.

We’re also making the code for the project open source under the MIT license. Our version works for Translink stops in and around Vancouver BC, but there is little stopping anyone from setting up their own instance by using data from their own transit service. In essence, if that municipality provides data to Google Transit, the same data should be available and work with This is Our Stop.

So our hope is that people in other municipalities will fork it and experiment with making their own bus stops more social.

Under the Hood

Technologically, this is of course a web application that aims for speed and smooth interaction. We built on Node.js to explore the real-time possibilities of a conversation space spread out across thousands of points, and are pleased with how that turned out. If you’re looking at the comments on a stop you’ll see new comments pop up without refreshing, and in the background we have a page that lets us see comments from across the region.

Were a transit authority to take an interest in the platform, they could easily turn it into a real-time customer service channel that keeps conversations about problems tied to the location they happen at, rather than aggregated into a big river of stuff.

Where We’re At

It’s an amazing project to work on, inspiring and challenging us in all the right ways. Once again we hit the intersection of web, mobile, social and physical world tie-ins that are our sweet spot, and even if it goes nowhere this project is a point of pride for us, and it’s connected us with a first-rate visual designer as well as people interested in transit.

It’s as good as it’s going to be without people using it, so after a few months in a quiet open beta we’re going public. Happily, a conversation with Dan Misener about Menuito led to a more involved talk about This Is Our Stop, and that led to his article in the Globe & Mail

We got a lot of great press from local and national media in the first couple weeks after launch. Locally, The Georgia Straight, 24 Hours, Vancouver is Awesome, CBC Radio and TV all ran stories and interviews. Nationally, the Canadian Press ran an article that got picked up by a number of outlets across the country. We’re hoping that press translates into interest from other cities in taking the model and the code and making their own open conversation spaces.

If you’d like some help or are interested in learning more about the project or working with us, just say hello@denimandsteel.com.

Forum Wrapup - Emily Smith

hello@denimandsteel.com — Thu, 26 Apr 2012 00:00:00 -0700

Last night we opened the doors to old and new friends once again for another Forum.

Emily Smith took the speaker’s chair and talked about how she got to know other crafters and makers of interesting things in Vancouver, starting from the popular Vancouver Hack Space. With lots of photos and anecdotes, she showed us how the spirit of making things often comes out of an unmet need, an unsolved problem or just a desire to understand how things work by putting them together and getting your hands dirty.

Emily has not only been making her own creations, including some knitted works coloured with dyes made from invasive flowers removed from Stanley Park this year (which we saw, and they look amazing), but has been spurring makers and crafters around Vancouver to come together more. There are already numerous small groups but many of them struggle for some kind of viable funding or exposure, and pulling them together has been making that community much stronger.

The discussion that came out of Emily’s talk ranged from bringing maker philosophy into the classroom to dispute resolution in collective groups. We shared stories about companies benefitting by adopting innovations that makers hack into their products to the philosophy behind it all, which looks at the world as inherently changeable.

We also talked a lot about how community forms, and Emily had some real-world wisdom to share about testing ideas when they are small and following those that get the best response. The work she’s done has really paid off. The Vancouver Mini Maker Faire that she helped bring into being saw 3,000 people in its first run. This year it’s coming back with a much bigger space at the PNE on June 23-24.

Thanks Emily and thanks to everyone for coming out and joining in the conversation. The next Forum date and speaker haven’t been set yet, but we’ll make an announcement soon, and will be setting up a newsletter that makes it easier to know when these things are going down.

About Forum

Forum is our speaker series where small groups get together to hear an interesting speaker and to converse rather than just listen. Events are capped at 10 people and happen in our comfortable studio space with good food and drink. The format emphasizes interaction with speakers and a focus on topics from outside our normal tech-filled lives. To learn more or to inquire about becoming a sponsor, contact hello@denimandsteel.com.

Introducing Beardspotter

hello@denimandsteel.com — Wed, 18 Apr 2012 00:00:00 -0700

We’re pleased to release a fun little mobile web app side project. It’s called Beardspotter, and while it’s just a toy it also embodies some neat-o problems that we enjoyed solving. Like all of our favourite projects, Beardspotter brings together social, mobile and some connection to the physical world through the web.

Got a smartphone? Point it at beardspotter.com and have some fun with it. The project is open source, so if you like what you see you can use it for yourself or fork and run with it in new directions.

There’s much more detail in the case study found in our Work section. Enjoy, and report those beards!

Beardspotter

hello@denimandsteel.com — Wed, 18 Apr 2012 00:00:00 -0700

Try It

Got a smartphone (ideally an iPhone)? Go to beardspotter.com and give it a try. Add it to your home screen for quick access and get a slick little icon for no extra charge.

No beards in sight? You can take a look at the Sightings page at http://beardspotter.com/sighting. If you visit on a non-touch device, just use your left and right arrow keys to move between reports.

The Idea

The vision was pretty simple: a beard-counting mobile web app. The mockup and the prototype happened at the same time that afternoon, and while we were goofing off at first we started seeing some interesting technical and design challenges to explore. In the following days we worked at it a bit more and eventually made it an ongoing side project.

On the interface design side, we were looking for a way to tally different beards easily and enjoyably, while keeping error rates low. Most mobile tallying apps we looked at only let you count one or two items, with one outlier letting you count up to four. We thought we could do better. After all, there are more than four types of interesting beards.

The early designs tested well so we started to push the responsiveness, wondering how close we could come to the feel of a native app. That theme kept running through the project and became the underlying focus of the experiment.

The Approach

The interaction model we settled on provided for counting up to nine items on one screen. Getting the tap-target areas to the right size and getting the add/reset actions feeling right turned out to be the easy part.

What was difficult was the page that confirmed the submission of a report. That page was easy to make, but it felt like the experience dropped off too quickly, that there was something more needed. We decided to re-frame that page to show recent reports from anywhere on Earth, adding social and geographic dimensions but without overloading the simple UI. Although it sounds easy to pull off, it presented some new challenges.

We realized pretty quickly that plotting each report on a live map would be too slow. Instead, we used a little mathemagic to position the marker onto a static map image rather than looking up a map position each time. A little CSS magic adds the pulse effect to make the individual spots easier to notice at a glance, and gives it a feeling of being more active.

The interface to step through beard reports was harder than expected in both design and building. We tried a vertical scrolling list, but it was choppy and cluttered. A horizontal carousel approach was better but not perfect. We went from talking at length about where to put back and forward controls, but eventually landed on a swipe-based mechanism that moves so naturally and smoothly you’d almost believe it’s a native app.

We also found another use for our lightweight approach to identity in casual social apps, opting to just save names on the client-side and to forego accounts and passwords. We can do those, but we don’t assume we have to everywhere.

What’s the Point?

Fun, practice, and continuing to work in the area we love most: where the web, mobile, social and connections to the physical world all meet. Projects like this are our exercise: we do them because they expand capability.

The quality we chased the most in this project is a key hurdle for mobile web apps: speed. Many web businesses and developers are reporting significant impact from even small improvements in speed. Getting a web app close to the responsiveness of a native app is not only a mark of pride, it helps make web apps a more serious contender for businesses looking to deliver a great mobile experience.

Go For It

Like the interaction pattern or that sweet scrolling on the Worldwide Beards page? Feel like using some of the code for a project you’ve got in mind? We hear you.

That’s why Beardspotter is open source under the MIT license. Fork it. Have fun with it.

Want us to make something cool for you? Just say hello.

Next Forum - Emily Smith

hello@denimandsteel.com — Thu, 12 Apr 2012 00:00:00 -0700

Makers have always existed, but the wonder of what they do is hard to detect in a sea of mass produced products. Maybe that’s why they’ve been growing their communities: finding each other to inspire, be inspired, and to share the fruits of their ingenuity.

Emily Smith has been at the centre of Vancouver’s own growing Maker community as founder of Maker Foundation and Director of Vancouver Mini Maker Faire. She’ll join us to share her experience in helping bring like-minded people together, and about some of the incredible things that people are making in their homes and workshops.

We hope you’ll join us on April 25. Space is limited, so you’ll want to register today.

About Forum

Hello I'm Angela

hello@denimandsteel.com — Mon, 09 Apr 2012 00:00:00 -0700

One week ago today I came across this retweet from Roland Tanglao. Right away I thought to myself - I wonder if I’m up for this?

A little history: New city, new adventures. I moved to Vancouver two years ago to pursue my interest in coffee culture. It wasn’t so much an interest in coffee as it was what I thought a step in the right direction as a designer. Generally, most of the designers I meet were baristas before they made it in design: I figured I could give it a try.

Vancouver has great weather and awesome coffee. I had my first coffee experience the day before my interview with JJ Bean! Fast forward: I met Roland at JJ Bean Woodwards last year while working for the cafe. We would often discuss favourite iPhone photography apps, and he’d show me the latest and greatest on the many gadgets strung about his neck. When I left JJ to pursue the field of design I added as many of my coffee-loving friends to the various social media networks we have become accustomed to.

I decided to investigate the Denim and Steel folks and the internship they were tweeting about. I liked how they sounded from their site and based on that hoped I might fit in. I wrote them right away and awaited a reply. Much to my surprise it came that very same day, that was last Monday evening.

After meeting Tylor and Todd for a lovely chat over coffee on Friday morning, thanks to social media I was accepted as their intern (paid intern). I’m currently sitting at the same table as Tylor and Todd, I’m quite nervous and very excited to be learning again.

Let’s get into it!

Admin Lite

hello@denimandsteel.com — Fri, 06 Apr 2012 00:00:00 -0700

When building new systems, some kind of administrative interface is almost always necessary. They’re funny beasts in the software making process, ranging from almost forgotten in the excitement of building the customer-facing experience, or over-designed to the point of being an entire toolbox when all you need is a screwdriver.

Admin interfaces can be challenging: the people using them have a very different perspective from their customers. If you think about the back of house in a restaurant with cooks and kitchen equipment and how different that is from the dining experience, you have a sense of the gap between the customer and the admin perspective in software. It’s a real need, but can quickly turn into project quicksand.

At the heart of the problem is that we never really understand what problems will happen until the product is launched and live and in your customer’s hands. In other words you can build defences in all the wrong places, spending budget and adding code complexity that delivers little value.

We’ve developed two principles to keep ourselves and clients from getting lost in unnecessary administrative design and coding, which we’ve come to call the Admin Lite approach.

1. Start with None

We start by assuming that there will be no admin interface, even when we know there will be. We see what problems we can solve without building specific interfaces, either through good interaction design or clever coding for background handling.

Eventually we find a case that requires administrative intervention and tackle that problem, but we keep our effort minimal because of the second principle.

2. Solve Only Existing Problems

This principle requires courage from the client and agility from us: we see what problems come out of actual use, and then make something to solve them. Optimism and pessimism, the twin trouble-makers of admin interface design, can’t mislead us at that point because we can see the problem as it is rather than as it might be.

Of course, there are some good administrative practices that are tried and true in years of software design. We recognize those and accommodate with the first principle, but through the second we ensure a clear connection between what is needed and what is built. The result is higher value to clients and their customers, less code complexity and leaner interfaces that get the job done.

Call For Interest - Digital Storytelling Unconference

hello@denimandsteel.com — Tue, 03 Apr 2012 00:00:00 -0700

At our January forum, John Wellwood talked about the potential for digital storytelling. Afterwards, a small working group formed from attendees gathered every two weeks to discuss possible ways to explore the emerging blend of digital media and storytelling practice.

With ourselves, Kaishin Chu and John from Echo Memoirs, the discussions have been fruitful. But to turn those discussions into something more we’ve realized the interest needs a wider space and more fertile ground to grow.

Wondering about the best way to bring what we’ve learned so far to others, and to hear what they had to say, we realized the ideal format already existed: the venerable unconference format.

A quick web search shows we’re not the first to think about this, but it would be a first for Vancouver and a first for a focus on how digital tools and culture intersect with storytelling. Rather than a place to tell stories, this is more about bringing together people from what John calls ‘hard culture/soft culture’ (digital and analog) to see how traditional storytelling practice can inform digital tool-making, and what emerging opportunities digital tools offer storytellers.

We’re thinking about a June or July date, but pulling it together by then is no small task. So at this point we’re putting the word out to find out if there’s interest in attending, presenting or organizing, and to go from there if there’s enough heat to build a fire around this topic.

If you’re interested in attending, presenting at, or even helping organize a digital storytelling unconference, please get in touch through our Twitter handle, or email us at hello@denimandsteel.com.

Forum Wrapup - David Ramslie and the Greening of Vancouver

hello@denimandsteel.com — Thu, 15 Mar 2012 00:00:00 -0700

With seemingly endless bad news about federal environmental policy in Canada, a brilliantly optimistic perspective was not what we expected from our March Forum speaker David Ramslie. But optimism, backed up with wide-ranging statistics, deep knowledge and engaging anecdotes are exactly what he delivered.

As the Senior Sustainability Programs Manager for the City of Vancouver, David’s awareness must be broad. Food production, building codes, water use, transportation, cultural activities and more intersect with each other in complex and often unexpected ways, making his job one of managing the changes necessary to live in what he calls the Post-Copenhagen world.

What defines that world, he notes, is not the failure of national governments that so much media attention focused on, but the way that the mayors of 300+ cities came together and left with the motivation and ideas to make significant changes at the local level.

When it comes to dealing with climate change, the rule seems that the more local the responsibility, the higher the capacity and will to act. We learned that Vancouver is already a global leader in sustainability, having exceeded the Kyoto targets while growing our economy. That success has driven the ambitious Greenest City program, which lays out targets for 2020 and 2050 that impact all aspects of city life. We found a lot to like in the care taken to balance and integrate those changes so they work together rather than as silo policy changes.

David wasn’t shy about calling some of those targets audacious. But he also noted that the infrastructure changes the program will bring by 2020 will pay a kind of compounding interest in change, and make the incredible targets set for 2050 much easier to achieve.

Daily life makes it hard to see and believe that real and positive changes are happening, and it made us especially proud to live where we do. Where many see uncertainty and doom in our near future, David says that the future has never looked brighter for Vancouver. We’re very grateful for the time and energy David brought to Forum, and for attendees staying almost an hour after the talk to continue the discussion.

About Forum

Forum is our speaker series that features guest speakers and small group interaction with focus on topics from outside our normal tech-filled lives. Learn more about the events or contact us to inquire about becoming a sponsor.

On Meetings

hello@denimandsteel.com — Fri, 09 Mar 2012 00:00:00 -0800

Every so often a blog post about how poorly meetings function circulates and generates a bit of heat. Maybe you’ve seen them. They often have titles like Meetings are Broken or Kill All Meetings or We Never Have Meetings and We're Productive to Cosmic Proportions Because Of It And You Should Too.

Funny thing, not all meetings feel like meetings, and they work pretty well. They also come in various formats and sizes. Stopping by someone’s desk to talk about something? That’s a meeting. Doing a quick chat over IM? That’s a meeting. Standing at the whiteboard to work out a problem? You better believe that’s a meeting, friend.

But we all know that when people gather at a table to talk in a more traditional meeting format, there’s the potential to get lost in the weeds and accomplish nothing. But there’s also the potential to get a shared understanding more efficiently than any phone call, IM or project management tool could come close to.

The difference between agonizing time-waster and a kick-ass huddle is one of competency, of knowing how to wield the format like a tool. By now you can tell that we get a fair bit out of meetings, so here are all our secret techniques, in one convenient place but in no particular order.

Own the Meeting You Call

If you set it up, you are responsible for the success of that meeting. Be prepared and be present.

Facilitate

Every meeting needs a facilitator. Facilitation is not about being a dictator of discussion, but a traffic cop keeping the flow moving. Facilitators don’t have to be conductors, but can just echo back what’s heard and move the group through the agenda while making sure everyone has their chance to speak. The meeting owner is usually the facilitator, but not always. There’s a skill in facilitation so pick the best person for the job if it’s not you.

Plan with Flexibility

That’s right, an agenda, the thing that says what the meeting is for, who is invited, who is required, when, where and what will be accomplished. But instead of topics, list the goals, the things you want to get done. Each item should be something that the group can decide to act on, delegate or dismiss.

Record

Someone has to be writing down what’s happening. It can be on a whiteboard or a project management tool or just notes that get sent around after, but without a record the important stuff can slip away. Don’t let your meetings leak value. Pro tip: if you’re the facilitator, try not to be the recorder.

Time x People = Money

Next time you’re in a meeting, count the number of people there and estimate how much they cost per hour and the number of hours you meet for. Multiply those numbers and see how much money you burned. If your meeting isn’t generating value that justifies that cost, you’ve invited too many people or you’re not running the meeting tightly enough.

The Start is the Start

Start the meeting on the minute. Close the door if you have one and if someone comes in late, stop talking until they are seated. Do not offer to recap, but do so if asked. The message will be clear for next time: be on time or be left behind.

Cap the Small Talk

If the meeting starts with chitchat about everyone’s day or last night’s hockey game, it’s already in trouble. Starting the meeting on topic sets the right tone that everyone is here to work.

Demand Presence

Laptop open? Cellphone in hand? Doing a little multi-tasking? Please leave and come back when you are ready to be there. People are terrible multitaskers, and trying to stay on top of multiple things only allows part of what you bring to the table to be used. What’s more, tolerating split attention sends the message that everyone else can multitask at the table. No wonder people think meetings suck if they only spend a fraction of their attention making a contribution.

Focal Point

Is everyone sitting at a table looking at each other? Bad idea. Have some representation of the work you’re there to talk about present. It can be on a screen, printed and laid out on the table or hung on the wall, or written out on a whiteboard. It can be screenshots, wireframes, topics, test results, and the list goes on. The point is that you have something for people to focus on that isn’t each other. Direct their energy to what you want to make happen and watch them dig in to do the job they were hired to do. This technique works like magic and doesn’t require additional effort during a meeting unless the discussion starts to wander.

A lot of this might sound like a heavy hand, but it’s not about turning every technique up to 11. Start small and build a culture of effective meetings. Not every meeting is necessary, but when done right they are great value generators.

If you really want to make meetings work, I can’t suggest a better book than - wait for it - How to Make Meetings Work. I first read it years ago and have bought several copies for colleagues. It’s the source of some of the gold you just enjoyed above, and has a lot about how to handle the um, stronger personalities that can throw a gathering off track.

Next Forum - David Ramslie

hello@denimandsteel.com — Tue, 07 Feb 2012 00:00:00 -0800

You might not see them in your day to day life yet, but big changes are afoot towards a more sustainable Vancouver. At our March 14 Forum, we’ll have the chance to hear from and talk with one of the people helping to lay the foundation for a greener Vancouver.

David Ramslie is the Senior Sustainability Programs Manager at the City of Vancouver. In that role he educates and enlightens people in Vancouver and other cities about our Greenest City program, challenges we collectively face and the kinds of changes we can look forward to.

David’s work intersects almost every aspect of city life: how our buildings are built, how we get around, and how we share resources. This Forum is a rare opportunity to talk with someone whose work will change an entire city across decades, with the complexity and contention that entails. And, if there’s any doubt about a fellow from City Hall being able to hold a room, David’s Pecha Kucha talk is online for your viewing. Give it a watch and you’ll see why we’re excited to welcome David.

We hope you’ll join us. Space is limited, so if you’re interested you’ll want to register today.

About Forum

Forum 2 Wrapup - The Art of Storytelling

hello@denimandsteel.com — Thu, 12 Jan 2012 00:00:00 -0800

John Wellwood of Echo Memoirs took the speaker’s chair last night at our second Forum, and took us on a trip through the world of storytelling.

Starting with a gallop through the forms that storytelling has taken through history, John looked at how the pre-copyright practices of oral tradition, where story elements were borrowed, modified, mixed and matched have come back to us with the digital tools so widely available. Today’s remixer is yesteryear’s creative orator.

John also touched on the way that stories are a deeply human trait, as natural and automatic in our daily lives as language itself. They encode knowledge and pass it along, maybe from one week to the next, maybe across generations and millennia.

Sharing moments from his own life, John showed a fascinating visualization technique he had been experimenting with years ago. Printed out on sheets of paper attached into a seven-foot long timeline, he’s developed a visual language for key events and people, and their relationship to the overall life story. This visualization makes Facebook’s Timeline look simplistic, and it would be interesting to see if it could form the basis for an interactive storytelling tool.

His talk got minds buzzing, and attendee (and former Forum speaker) Monique Sherrett somehow turned out a great blog post about storytelling for organizations over night. That, or she gets up way earlier than we do. It’s worth a read, and captures some of the interesting hooks from John’s talk.

As the discussion moved closer to our current time, John talked more about the potential for storytelling in the Internet, which ‘has the potential to act as all media at the same time’. Rounding out the session, he made a call for interest in forming an ad-hoc Digital Storytelling Lab to meet every few months, which Echo Memoirs has offered to sponsor. There’s no agenda to start, and the first step is to gather people who see potential in sharing ideas and experience and seeing what can come of it.

Nothing ventured, nothing gained, so Tylor and I are on board to bring what we can to John’s initiative. If you’re interested in joining, get in touch with John at john@echomemoirs.com and let him know.

To those who attended last night, thank you for coming. We’re always ready to hear feedback by email below or on Twitter to @denimandsteel. We haven’t set a speaker or date for the next Forum, but we’re on the case.

About Forum

Whiskers

hello@denimandsteel.com — Wed, 04 Jan 2012 00:00:00 -0800

For some background on where Whiskers came from and the part we played, give the launch blog post a read. If you prefer learning from the code-side-out, start at the GitHub repo.

Whiskers presented two interesting problems to solve: create an interface that makes posting unique content to Facebook and Twitter efficient, and package it so anyone who can set up self-hosted WordPress can run their own Whiskers.

The Design

We set out to provide a posting hub for the most common content types: status updates, photos, locations and links. The interface had to make it easy to tailor a posted item for every network it’s aimed at, posing a pretty cool challenge. To take the design as widely as we could, we decided to find something that would translate well across desktop, iPhone and iPad.

We envisioned a core posting box that first detected what kind of post you were making, showing or hiding various metadata fields as needed. The services one could post to changed with the content being posted, and to make them all fit we stacked them as discrete modules.

We also looked for ways to make that local copy of posted social media content more valuable. We envisioned a a life stream page that displays from the Whiskers database. It’s the opposite of how life streams originally worked, where content was pulled in from various sites, instead we’re showing what was pushed out. The life stream would use pretty basic output so that it could be styled to fit into an existing self-hosted site.

The Tech

Our choices here were aimed at getting broad coverage in both compatible hosting and hackability. We started with good ol’ PHP, built on CodeIgniter to make building on the starter project and some additional security easier. The data is housed in a SQLite database to ensure portability and easy setup. We had help in the open source API libraries for Twitter and Facebook (official). Looking over the list it’s cool to think of how much stuff open source stuff can work so well together.

The Future

You’ll notice that we mention a lot of things that didn’t get built. The nature of the project was to think big and start small, and to show what we were thinking about the design documents are included in the repo. Whiskers at launch is the starter that Larry hopes will give some momentum to others who like using social media, but need it to work better for them and arne’t afraid to get their hands dirty.

What form should Whiskers take? A module or plugin for blogging platforms? A stand-alone self-hosted app? A hosted service that acts as a gateway to the social media universe that makes you the first owner of your content? That’s up to the world for now. Whiskers is free, open source under the MIT license, and ready to hack on. We’re proud to have helped Larry make that happen.

Urban Stream

hello@denimandsteel.com — Wed, 04 Jan 2012 00:00:00 -0800

Discovery

When Nick approached us, his mind was on Urban Stream’s need of an online home. But during Discovery a different picture emerged and we saw a way to give Urban Stream much more than just a website.

As we learned about Nick’s vision we explored ways for information from the growing systems to inform businesses and households making use of his food. We also learned that in early days Nick and his business partner, Wes, would be visiting various pilot project sites to monitor and collect data critical to later stages. We could see the business has a lot of data floating around at different places, and needed a way to catch it.

Design

Our design phase tackled the problem from two sides with a close eye on the budget. First, a treatment for a minimal but friendly brochure website, and focussed the bulk of our effort on a custom data logging web application tailored for the smartphones that Nick and his team use.

The Urban Stream Info Hub (or ‘Hub’), is designed to capture and distribute updates on recent activities and measurements. We spent a lot of effort understanding and documenting the myriad data and tasks that the Hub would need to capture. We wireframed enough to feel good about a general interface framework, then mapped out some detailed forms before starting to build.

Knowing that Nick and his team will be collecting data in varied weather conditions and with their minds on tending to the growing systems, we strived to make interaction as straightforward as printed forms in a notebook. With our graphic design partner, Overmind Productions, we arrived at a simple, high-contrast look with oversized controls for easier tapping and an obvious flow.

As with every project, the final product is a little different from the wireframes. We always learn while we build, and incorporate what we learn as we go so the design is refined along the way.

Since Urban Stream and the Hub are both new, they’ll evolve together. To help that we built a feedback form into every Hub interface so that Nick and his team can tell us from the field what needs to be improved.

Build & Launch

The brochure website came together quickly, built with GitHub Pages/Jekyll and Dropbox. We took this approach so that we could deliver some basic CMS capabilities to Nick, who wanted the ability to update text and is comfortable with Markdown, with Dropbox taking care of the file synchronization to the server. While we had to do some education, we don’t think it’s much more than would be needed with a full CMS.

Once the website’s graphic designer supplied the Photoshop comp, we were able to build the brochure site and populate all content, complete with testing, in under a day. If you ever wanted a success story for taking a simple approach and having your content ready ahead of time, this is one to bookmark.

Next we turned to getting the Hub up and running. We had two big concerns on this side: speed and internet connectivity. The web app had to feel very responsive and solid; a data tool for a physical business. Urban Stream sites are scattered, some at the outskirts of the city in places with no WiFi and spotty cell service.

To address speed, we built the app as a Single Page Application using CouchDB and Backbone.js. CouchDB is a fast NoSQL database, which allowed us to deploy updates with a single command (including Javascript, CSS, and images, bundled as a CouchApp) and Backbone.js helped structure the app and make the app responsive by managing the interface and underlying data.

To address both problems we built the app as a single dynamic page, leaning heavily on caching and HTML5 local storage. This approach makes the Hub feel closer to a native app, but at a fraction of the cost. It also makes data exchange as small as possible so that small drops in connectivity are less likely to interrupt use of the Hub.

Outcomes

In addition to the brochure site they set out to get, Nick and Wes now have a data collection and sharing web app to coordinate their business and record important data.

The technical and design architecture of the Info Hub can grow with Urban Stream without having to re-make any of the difficult stuff. Entire new forms will typically take a day to implement, keeping the tool nimble and relevant to the business. We’re proud of the design and technology that we developed for Urban Stream, but just as proud to be involved with an innovative business dedicated to sustainable, healthy and local food to feed hungry cities.

Next Forum - The Art of Storytelling

hello@denimandsteel.com — Tue, 03 Jan 2012 00:00:00 -0800

If you’ve been reading in the realms of UX and product design, web design or branding lately, you’ve likely noticed storytelling and narrative rising as a rediscovered resource. In a world of soundbites and blipvertisements, we seemed to lose sight of the way stories hold together and set the course for how we live our lives. And now we’re keen to get it back.

It’s heartening to see managers and designers of all kinds embracing the human-scale art of storytelling in their work. Looking past the immediate interaction or the single sale or impression is a sure way to build better, deliver more value and win all around.

So we’re very excited about our next Forum, coming January 11. Our speaker is John Wellwood, who not only tells the stories of people, families and companies for a living, he also helps them find the story they never knew they lived. His methods blend intuition, principles of narrative and a unique way of visualizing life stories that brings out their essence for the telling.

If you’re interested in narrative as a tool in your work, John’s talk is not to be missed. Register today and we’ll save a seat for you.

About Forum

Menuito

hello@denimandsteel.com — Sun, 01 Jan 2012 00:00:00 -0800

The Problem

The rise of the iPhone and other smartphones with robust browsers have put new demands on old websites. Restaurant websites, traditionally feature Flash, heavy graphics, music, PDF menus and a lack of well-organized information. It’s a deadly mix for a mobile user experience, which is all about making a fast assessment of what a business offers and making a decision to go or not.

Knowing it will be some time before most restaurants redo their websites according to modern standards, we set out to make a minimal but flexible solution. The basic requirements were to provide diners with enough information on any phone and to keep things easy for a restaurant to keep its info relevant, without having to call a web developer just to update the essentials.

We also considered the design of Menuito as a business. As a side project, we wanted something that we could maintain while keeping our regular jobs at the time. If we decided to discontinue Menuito, a basic requirement would be that no customers using it would lose out on their investment. These constraints, as much as how we help bridge restaurants and diners on mobile, informed our decisions at almost every step.

The Design

At the core of our design was the intention to make restaurant mobile sites that communicate what diners really need to know when they’re on the go. We made an early decision to lock down the order of information and how it’s presented.

We also decided to avoid making a user interface for customizing the look of the mobile site. Instead, all manipulation of typeface, colour, even adding a logo, would be handled through HTML and CSS, meaning the person making those changes needed to know what they were doing. We took this step to fulfill a basic rule for the project: make the restaurant look good.

The early concept for a Menuito mobile site took a fairly simple approach.

As we got into the details more, the design evolved. The key challenge was to make the information structure simple for diners, but flexible enough to handle the variety of ways that restaurants work. The most tricky areas were in handling menus, getting the display of operating hours right, and after launch a way to handle multiple locations and phone numbers.

It also took a number of tries to get the right feel for the administrative interface. Without resorting to common CMS vocabulary or concepts, the interface communicates directly and in the language of a restaurant. We sought to make the manager’s interface feel like a piece of industrial kitchen equipment: solid, big buttons and clear presentation of what’s going on.

Along with a simple interface we wanted to show how restauranteurs how visitor stats could provide insight into their customers. With a few sparklines we show daily and overall traffic, and break down the interest in the different menus.

Late in development we were playing with controlling graphics by moving a phone, and came up with a simple game that we eventually embedded as an easter egg in Menuito. Turned on as an option, the game is triggered by shaking a phone while looking at the mobile website.

It’s a moment of surprise and delight, but also let us explore and push into a new area without hijacking the whole project. To try it yourself, point your smartphone (iPhone preferred) to http://demo.menuito.com and give it four or five shakes. Then start tilting and have a little fun.

The Technology

Keep it simple: that was probably the most important rule we had. We chose PHP because most web hosts were likely to support it, and opted to build without a database. Doing that kept the technical requirements down, but also forced us to think at a more essential level.

Writing an installer, including a self-updating module, presented a number of challenges but it’s always the most work to make features that make people’s use of a product problem-free. Installation happens by FTP, and in some circumstances tweaking some folder permissions, but in general takes about 10 minutes to get set up with most web hosts.

We also spent a lot of time on getting the theme architecture right, so that other web designers with HTML and CSS skills could make changes to our stock themes or design their own.

To test that we hired two designers and asked them to teach themselves how to build a theme we designed in Photoshop. It took them each an hour to figure out what was happening, and an hour to code the new theme once they did. It’s a low investment for a web designer, and we’ve made that learning curve easier with some good documentation, so that they can use Menuito to add value to their current restaurant customers.

Outcomes

We launched Menuito and have a handful of customers who give us top marks for their mobile sites (the first two are pictured below). We have plans to generalize the technology beyond restaurants, and to bring on a proper sales process so that we can build it out even more and help out more people who want to get into mobile, but can’t afford a full website redo.

Forum One with Monique (Trottier) Sherrett

hello@denimandsteel.com — Mon, 05 Dec 2011 00:00:00 -0800

Last Friday we held the first event of our Forum speaker series, and couldn’t be happier with how it went off. With a mix of familiar and new faces gathered, we ate, drank and got in touch with our sense of smell with a highly interactive talk by Monique (Trottier) Sherrett.

Monique opened by describing some lesser-known aspects of our sense of smell, such as its physiological relationship to memory, and taught us the how to properly take in a scent. She then produced an array of scent strips for everyone to sample and to test their own abilities to identify odours that we had encountered before but sometimes had a hard time identifying.

A lively discussion grew out of Monique’s talk that took us further inside the fragrance industry and even to the origins of the ingredients used in common perfumes and colognes.

Last Friday was exactly what we’d hoped for: insight and inspiration from a subject beyond our daily routines. At the suggestion of one person who couldn’t attend, we considered recording the event to share after, but decided not to in order to keep our own focus on being present. For now, we’re going to follow that idea to see where it takes us.

Coming Up

Next time we’ll feature professional storyteller John Wellwood. His talk will be of special interest to UX designers who are discovering the role of storytelling in design, and it will be a unique chance to learn this skill from a pro.

Of special note is that shuffling schedules brought Monique’s and John’s talks only a week apart, and we’ve decided to re-schedule John’s to January 11, a Wednesday. Please join us.

The Charm of Path

hello@denimandsteel.com — Sun, 04 Dec 2011 00:00:00 -0800

I’m being charmed by the second incarnation of Path, an iOS and Android app that I’d describe as a mix of elements from Twitter, Facebook, Foursquare, iTunes and Instagram. Moments of charm are important for experience designers to observe closely, so as much as I’m enjoying the experience I’m also taking a critical eye and learning what I can.

When Path launched last year, it seemed the right thing at the right time. Facebook was in the midst of yet another privacy dust up, and Path arrived with Facebook talent but a model emphasizing close-knit ties and easy to understand privacy. While generally well-received, uptake and continued use were muted. And time went on.

Then last week Path v2 launched. The update has been praised for a beautiful aesthetic design and some novel interactions and data display. I’m finding more than just another app to check out in Path, and wanted to share what I’ve found during this little honeymoon.

The interface is warm, textured and inviting, and features are revealed with care not only to keep the focus on the content, but also to keep the experience from being too quick to demand learning from someone new to it. iOS conventions are followed for the most part, but with some extras.

Feature disclosure is well-paced and their revelations are jazzed up a bit to reward the exploration. The most talked about of these delightful touches is the prominent red plus icon, the central call to action, which spins out six smaller buttons for selecting post categories. Give a novel UI feature a weekend, and it will be reproduced entirely in CSS 3 as open-source code. Path’s designers should be flattered.

Contacts and primary navigation are reached via conventional top bar buttons, but the return trip to the central screen happens by way of a horizontal swipe on the lingering strip of that central screen.

That overlapping panel approach was pioneered by the Twitter iPad app, and is extended by Path to allow reaching secondary areas (Contacts and Primary Navigation) with a swipe on the central page, but only after those areas have been accessed by button. I'm unsure if this is by intent, but it's an interesting experiment to provision an advanced navigation method only after it's accessed by conventional means.

That observation turned out to be false, it’s just a bit delicate on detecting the swipe. After another week of use I’ve gotten the hang of it.

While I like the blend of familiar and unfamiliar navigation, it’s a tricky balance that Path is trying for and I’m unsure if it’ll sustain as more people get into the app. What’s most important is that the unconventional navigations are properly situated for more daring or advanced uses, and the conventional means are still front and centre.

Features

Where Path 1 focussed on sharing life moments with photos, Path 2 expands the palette to music you’re listening to, locations you visit, free form text posts and its most novel innovation that we’ll talk about later.

Photos have been built out to include filters, which don’t do much for me beyond black and white, but are sensible concessions to the meteoric rise of Instagram. It’s frustrating to a filter-curmudgeon like myself that Path defaults to one of these photographic auto-tune settings for photos taken by the app, with no respect for the last filter used. I hope that’s corrected in an update because for now it’s taxing my experience using the app to take any picture.

The location check-ins and free form text posts, which can be combined with any other type of post, begin to eat from the plate of specialized apps for Twitter and Foursquare but don’t add much beyond being able to identify friends with you. Music posts from friends begin to produce a built-in recommendation service, from which samples can be heard and a link (undoubtedly hooked up to an affiliate program) to buy the song is close at hand, but not pushy.

I don’t know of a social app that provides for sharing more types of content other than Facebook, but Path doesn’t let that coverage create a feeling of sprawl.

Like Facebook, where some of Path’s core team came from, Path has a strong and unconcealed interest in personal storytelling through mobile devices and digital media.

But they diverge sharply over how big your network can be, and over how exposed you should be. Path has a hard limit of 150 reciprocal contacts (meaning that both parties must agree before the connection is made, unlike Twitter where following can happen in one direction), but that wall is not airtight:

Path posts are shared to outside services via generated web pages. Those pages use randomized URLs and I believe are only created for shared items, but they are out on the web and open to search engine indexing.
Comments can be read by friends of friends who interact with the same post. This is a good discovery mechanism but feels a bit exposed in an otherwise intimate setting. I wouldn’t be surprised if Path eventually changed that functionality, or provided an option to keep comments strictly among friends.
Friends lists are visible to friends, and friends in common are visible to non-friends.
While not exactly porosity, I found it interesting that Path shows who visits your timeline. It’s nice to know who your stalkers are, but I wonder about the thinking behind this design choice, particularly if there’s some real world analog they were trying to capture.

While none of these are particularly bad in themselves, Path doesn’t make it obvious which threads they’re using to pull a network together travel outside of the circle of friends. And if Path wants to truly create a space for more intimate contact and sharing, making the boundaries clear will be important.

In general, for people not on your friends list, your Path posts can only be seen if you post them to other services like Foursquare or Twitter. Rather than trying to construct an outward-facing destination, they leave that to other services focus inward. That focus, along with the 150 friends cap helps Path feel like a safer place to be social. If Facebook feels like a city and twitter a busy square, Path has found a new scale of neighbourhood, and it’s a scale I really like.

Storytelling

Where some apps lend themselves to storytelling without explicit features or nomenclature to support it, Path’s mixed media approach presents a nice opportunity to make a story of daily life through selected moments. As it turns out, posts in Path are called moments.

Scrolling through moments, you’re followed by an animated clock moving its hands to show when each post happened. It’s one of those sweet little interaction moments that softens the feel of hard data and adds a more human-scale perspective. Threads re-emerge as new comments are made, but the higher order elements of storytelling like themes and arcs are absent.

Those are hard things to pull off, but they’re important in how we tell our own stories. It would be interesting to see ways for users to augment the story all those moments tell, to connect the dots in ways a database can’t perceive.

That One Special Thing

Here we get to my favourite feature of Path, for both novelty and clever psychology.

The last type of post that can be made is to gesture when you go to sleep and when you wake up. Going to sleep gives a gentle animation that turns the screen into a timer and the current moon phase. Waking up makes a note of how long you slept and a report on the current weather. Both moments are added to your timeline for friends to see.

On the third day I used Path I found this from the night before.

There’s a little feeling of communion with my friends in Path on seeing that. I know they sleep, but knowing we were sleeping at the same time is a warm bit of unintentional contact, like when you discover otherwise unknown commonalities of place or time with others.

The sleep/wake moments are a light form of gamification. The impulse it speaks to is our inclination towards completeness, in this case having sleep-wake pairs in your activity stream. The weather reports and lighthearted comments from the system (the only place the system comments on your behaviour), constitute a little reward. The challenge is to be consistent in building sleep-wake pairs, so you try to remember to log sleep and wake moments in Path. From that it becomes routine and positions Path at significant milestones in your day. The day that Path would love for you to share. On Path.

Novel, and clever, indeed.

How Far Will Charm Get You?

Where Path v1 was interesting in the ways it bucked social media, especially Facebook’s, approach of maximizing content creation and exposure, Path 2 retains most of that intimacy and becomes a lot more fun and interesting.

Twitter killer? FourSquare spoiler? Facebook challenger? Nope. But I do think it has found a new niche in a scale that feels like a neighbourhood.

Knowing that less can be more, Path could end up becoming a player by skimming activity from a number of dominant social platforms. Where incumbents are doing something poorly, Path can sneak in to become the preferred posting interface without pretensions of toppling a leader.

But I don’t think that Path will go mainstream, at least not in it’s current form. It feels very complete, whole yet ready to grow. But it also feels a bit too clever, a bit too pretty to be a mainstream thing. Indeed, Path might be looking to build itself on not being mainstream, just as neighbourhoods can form identity around being distinctive within a greater whole.

Not being mainstream doesn’t mean it’s not viable. Small hooks to monetization, like the iTunes links, can bring diversified revenue and lessen the pressure to live on ads, though ads do seem inevitable. Once again I find myself falling for a social experience and wondering when ads will start making it suck. Once again I find myself wishing I could pay for safe sharing that’s well-designed and has no ads.

It’s rare to find an app with beautiful visual design, clever and useful interactions and a value proposition come together so well. I find it unlikely that Path will go mainstream, but maybe it doesn’t need to. For now, I’m enjoying my time a design achievement that stands out as the best I saw in 2011.

Introducing Forum

hello@denimandsteel.com — Tue, 22 Nov 2011 00:00:00 -0800

Distraction is usually just a click away. Hit up Twitter or some aggregator and you can fall down a rabbit hole of amusement. That’s great, but what about the stories that don’t make it onto the web? And are comments, +1s, Likes and RTs really a conversation? We think there’s more.

So in the spirit of keeping things interesting and opening our doors to our peers, we’re kicking off an experiment called Forum. A small-scale speaker series that will run every few weeks, the intention is to connect with ideas from outside the tech world, to keep our minds fresh, to see old friends and makes some new ones.

We’re inviting you to come in from the cold winter weather, enjoy some adult refreshment in an open and friendly space, and to learn something new. Read the details at the Forum page, and hopefully we’ll see you there.

The Network Nature of the Occupy Movement

hello@denimandsteel.com — Mon, 21 Nov 2011 00:00:00 -0800

You might have seen shocking video of a UC Davis police officer pepper-spraying a group of sitting protesters that went viral over the weekend. It’s hard to watch in parts, but one thing that jumped out to me was the sheer number of cameras in use at the most tense moments of the confrontation. From DSLRs to every manner of mobile phone, hundreds of cameras were turned onto the officers as a collective, unblinking eye witness.

It got me thinking about the other types of technology that the Occupy movement are putting to use, and I found a handful of articles talking about this very topic.

Mashable’s post talks about wifi hotspots set up at protest sites, an invention of the Free Network Foundation which has spec’d the components for these hotspots for just shy of $2100 retail. Using a mesh network structure, these hotspots can join up with others like them or run independently, making them neatly scalable. The Foundation has the grand ambition to build these access points across the United States. But what’s even more interesting is their articulation of a technology stack that goes all the way into modifying Linux kernels to provide information networks that embrace freedom of Access, Transmission, Storage, Authentication and Consignment.

Other types of technology are in play as well, from bicycle-powered generators to lightweight blankets to more familiar tools like cellphones. Still other innovations don’t use technology at all, but instead use human-scale hacks like the human microphone to propagate speeches through a crowd despite bans on bullhorns and speakers.

The Starfish and the Spider by Ori Brafman and Rod Beckstrom Wikipedia describes the phenomenon of starfish organizations, named after the ability of a starfish to grow a new body from a severed arm. They assert that decentralized and seemingly leaderless organizations spread from ideas and blueprints rather than authority, and that this network model is especially resilient. The starfish model and the theme of the network is at the heart of Occupy and the tools it’s using to make itself known. They’re building a kind of order out of low-complexity and low-cost nodes that don’t depend on any one vendor or even any one tool. They assemble the means to create an order that can be re-built and re-created as needed from locally-available resources.

We live in times that are difficult to understand, but that also breed innovations and a desire to connect that seems unstoppable. Whatever we might think of the Occupy movement, it’s impossible to deny the ingenuity of its members and that it truly is a product of a networked age.

Vancouver Votes

hello@denimandsteel.com — Thu, 17 Nov 2011 00:00:00 -0800

We’re pretty excited about the upcoming municipal election and wanted to create something to share that with others.

Above is a map we created that shows the polling stations for this Saturday as well as the turnout from the last election. Red districts are below average and green are above.

The map was created using freely available data from the City of Vancouver and open source tools (LibreOffice, QuantumGIS, TileMill) and was hosted on Mapbox (update: now replaced with a static image).

Please vote this November 19, 2011!

Open Data Day - What I'll Be Working On

hello@denimandsteel.com — Wed, 16 Nov 2011 00:00:00 -0800

Open Data Day was a highlight for me last year, there was a lot of great energy and it was fun to see projects come together in such a short time. It was good to connect with people working on open data in Vancouver and I even contributed a blog post delving into the City of Vancouver’s Business Licence data.

This year I’m going to be working on a small application that has a focus on local transit. Todd and I have been playing around with the idea of a social web app, in the spirit of Karen Quinn Fung’s Adopt-A-Stop, that focuses on commenting at bus stops and using the GTFS feed provided by Translink to include timely stop info. We think that, in their own way, bus stops are a hitching post or hub in our city and adding a simple social layer for bored travellers could be pretty interesting.

Our goal is to get something that is lightweight, looks good, has a small campaign around it, and can be easily setup so other cities can host their own copy.

To get involved this December 3rd, check out the Open Data Day website and the Wiki. Also be sure to check out the Open Food Hack Day sprint being hosted by our friends at Foodtree. Excited to see what might happen this year.

Trick or Treat

hello@denimandsteel.com — Mon, 14 Nov 2011 00:00:00 -0800

A few weeks ago, Bing Thom Architects started a small mapping experiment to get a rough sense of the number of trick or treaters in Vancouver this year. The setup was simple: encourage people to tweet @BTArchitects or message their Facebook page with the number of visitors and the nearest cross street. They also started a hashtag for others to follow along.

In all, they received 16 responses from a variety of neighbourhoods and mapped the data using Google Fusion Tables. They also posted an excellent writeup where they discussed the results.

Watching the experiment was a lot of fun and we wanted to riff on the data a little more, above is a map created in TileMill and hosted on Mapbox (update: this is an image now) to try and take the project a little further. We added markers that vary in size by the number of trick or treaters, tooltips that contain people’s responses, and put everything on a simple background so they stand out.

Unfortunately the responses were few, but we’re excited to see what might happen next year.

From Daydream to Reality

hello@denimandsteel.com — Thu, 10 Nov 2011 00:00:00 -0800

Just the other day the web was treated to A Brief Rant on the Future of Interaction Design, in which Bret Victor examines recent videos about near-future interactive products. To put it bluntly, he finds their range of interactive possibilities wanting, and follows with an exploration of how much potential there is to explore.

This kind of stuff is inspiring: people share and re-share it with excitement. Those are great days, when a bit of the dust of the daily grind falls from our eyes. Look at what might be. We look at each other, nod knowingly and feel good.

Then we turn back to what we were doing just before. Work’s gotta get done; bills gotta get paid. Just minutes ago we were ready to start a revolution. Minutes later we’re back to wondering how to get that thing to do that thing. Cashflow, whispers some deep part of your brain. Hard to argue with that. Before long the future is forgotten again. And we’re back doing what we always do.

Obviously, nobody intends for things to go that way. Lately here we’ve been talking about this very thing: how to realize some of those really interesting, inspiring ideas, while keeping ourselves fed. We think forming habits around that goal is key, and have come up with a few that we’ll be working on:

Make room for experiments. This is old advice, but it’s a lesson so often told that we’d be fools to ignore it.
Give clients a wider, more daring range of possibilities. Let them surprise and challenge us.
Think outside the screen on every project. Always ask how we can work with the physical world as well.
Strive to connect and draw from other fields. Multidisciplinary is at the heart of how we want to work.

There are likely many ways to keep the day-to-day details from grinding down the excitement of new ideas. Are you striking that balance? How are you doing it? You can comment with a one-click tweet below.

Hello, World

hello@denimandsteel.com — Mon, 07 Nov 2011 00:00:00 -0800

A blog is born. Not just any blog, but a rather lean blog. As with our website, we went minimal, without a fancy CMS. The reason is simple, and speaks to a big part of why we started Denim & Steel.

Blogs these days come with lots of infrastructure. Managed permalinks, comments, themes, text editors, you name it. All sorts of things that have been stacked up on the idea of a blog since Moveable Type kicked off the revolution. We admire that legacy, we salute it and we enjoy it every day we find something interesting that someone out there has written and shared.

But we’re looking to build new things, without assumptions of what must be. This morning I shook my head as I read about the Voyager space probes and the fact that they’ve explored the gas giant planets of our solar system with computers running 4k of memory. 4k. It reminded me that humanity went to the moon with a computer using only 13k. To the moon, on 13k. In that spirit, our blog does just 4 things: an index page, single post pages, generates a short link for sharing and pulls in tweets about each post, should tweets occur.

Honest, to the point and without a lot of fanfare. That’s the Denim & Steel blog, named Blog, and it’s a cornerstone of the philosophy that we’re gradually getting words around. But for now there are other things to do, and more words to come.