Login

all posts tagged “design”

The Story of Building the New Common Craft

Posted by: leelefever on December 12, 2011- 10:24am

Categories: design, development, history, New Common Craft, story, website

A few months ago, we released a completely new and different Common Craft. This is the story of the big ideas that drove the change and getting the website designed and built.

App or Not?
 
In 2010, we wanted a Common Craft app that would put our video library in your pocket, any time you need it.  We had a version built, but something didn’t feel right.  We dropped it.  Soon after, I talked to a few people I respect in the mobile world, like Brian Fling at Pinch/Zoom and Brian Leroux at Nitobi who both said the same thing:  consider the potential to build a service that ensures that your videos can play on any platform and multiple devices. They suggested using the Web and commoncraft.com to make it happen vs. a dedicated app that would have limits.
 
It took a while to sink in, but they were right and we started to think about the potential of Common Craft as a video service that’s designed for using the videos anytime, anywhere.  
 
Business Case
 
Over the past year, we heard a common comment from licensing customers - they wanted a way to access all the videos and not just pick-and-choose, iTunes style.  This planted a seed - how can we give them everything?  What’s the business model? Is mobile part of it?
 
We needed a completely new service that offers our complete library of videos, all playable on mobile devices, websites, internal networks, etc.  It was clear that we needed a membership service.  Members would access all the videos in library form and have options for putting the videos to work in multiple contexts (in person, on website and mobile).  We wanted the membership service to be available via subscription and offer a “power tool” for using videos in education.
 
The basic idea had formed.
 
Platform
 
Common Craft has been on the Drupal platform since 2005.  Since one of the core features of Drupal is member management, we saw the potential to build onto our current Drupal site, which also provides a platform for e-commerce.
 
At the same time, we needed a video host.  We’d learned over time that making videos work is a specialty and not something we should try to do ourselves.  We needed a video partner that could ensure the videos play reliably on the Web and on mobile devices.  
 
We’ve been friends and business partners with Wistia for a couple of years and started discussing it with them and eyeing their API as a resource for hosting and sharing the videos.  Aside from technology, we’ve had consistently excellent experiences with Wistia and thought - this could work!
 
By now we had an idea and potential platforms.  We needed Web pros to help us figure out the best path forward.  Sachi and I are not developers.
 
People
 
Having a Drupal site for years, we knew that Seattle has an active Drupal community and I set out to find the right locals for the job.  I knew Gregory Heller was well connected in the Seattle Drupal community and contacted him directly. He wrote back with two names:  Josh Kopel and Jared Stoneberg.  I contacted them both and found that they have complementary skills and were in the process of becoming a team. They are now operating as Number 10 Web Company.
 
In what would become one of the most fortuitous turns in the project, these two were both available and very well equipped to complete the project.  Through a few meetings at Cafe Presse in Seattle, we had a dev team in place.  This was February of 2011.
 
Of course, development isn’t everything. We needed a designer and someone to help with information architecture (IA).  Findng an IA person was easy, as we’ve had a long relationship with the folks at Juxtaprose and knew Jay Fienberg could help us nail down the structure and organization of the site.  The developers recommended a designer named Dan Shafer to do the design. In addition, we talked to folks like Tony Wright, who could be an advisor, especially during the early stages.
 
So the idea, basic platform and team were now in place. Now what?
 
Project Definition
 
Sachi and I had a pretty clear idea of what we wanted, but how to get there was the challenge. Some of the biggest questions were policy related and included:
  • Will Common Craft videos still be available for free on the website?
  • What features will only be available to members?
  • Do different levels of membership come with different features?
  • What are the required features for the project?
  • How will pricing work?
Over a couple of months we had multiple face-to-face meetings and I personally created billions of lists of things that could be features or considerations.  Thankfully Jay was able to take it all in and create the IA doc that became the foundation of the service.  It allowed us to think about what was on every page and why. 
 
Integrations
 
The new Common Craft is a tightly integrated set of platforms.  Selecting the platforms and making sure they work was a big challenge and one that was accepted by Josh Kopel.  Through a lot of discussion and testing, we defined the major pieces and how they’d work together.
  • Website Front End:  Drupal 7
  • Website Back End: PHP/MySQL
  • Video API/Host: Wistia
  • ECommerce Front End:  Recurly
  • Merchant services: Authorize.net
  • Email services: Mail Chimp
  • SSL Security: Digicert
Things were coming together.  The major design decisions were made, the platforms were lined up and development was underway.
 
Design
 
Common Craft has a clear visual identity that’s based on our videos.  Our new site needed reflect these elements: White background, limited color, hand drawn images, etc. Dan was able to take these and create designs that work well. 
 
Mobile, Revisited
 
From the earliest discussions, we made mobile a priority.  The website and videos should look and play well on small screens.  Jared Stoneberg led the way in recommending responsive design as a way to handle small screens. The website is designed to rearrange itself based on the size of the screen, creating different, more appropriate experiences based on the screen size. This meant we didn’t need an app or a dedicated mobile site. It all made sense and became our mobile direction.
 
Content
 
In relaunching Common Craft, Sachi and I thought about all the ways we could extend the value of our content. We’re big believers in the global potential of our videos, which work well with translated voice-overs. The videos travel well. So, we set out to make the new Common Craft more international, with over 30 videos with voice-overs in 8 languages.  This included professionally translated transcripts, titles, descriptions, etc. Soon, our library went from 40 videos to hundreds.  It was a major project just to get all the content completed and uploaded to the site.
 
Bringing It Together
 
We saw the first versions of the site in July of 2011.  Josh and Jared got everything humming along and Dan made everything look and work well.  The biggest challenge was the home page, which took a lot of iteration.  Two things we felt were important, aside from the sales funnel, were the use of white space and "bigness" in the design. 
 
As with any project, there were roadblocks, but we were impressed at how Josh and Jared were able to overcome them.  Josh always had some way to make things work. 
 
Launch
 
We launched the new Common Craft on August 8th, 2011, about 6 months after our first discussions with Josh and Jared. After a few initial adjustments, things have gone smoothly and the service is working, both technically and a business.  We’re excited to have a growing membership from around the world.  
 
Sachi and I have gone through a number of big projects and found, whether it’s renovating a house or building a new website, the people matter most.  If we can create a good, honest working relationship, we can overcome almost anything.  We came out of this project with great relationships with our partners - something we cherish. 
 
The Future
 
The service is up, and it’s working. Now begins the long and constant search for improvement.  We’re set up for testing and measuring, and so begins our challenge: to use data to encourage membership and make both potential and current members’ lives easier.  
 
Epilogue:
What our partners are up to and how to contact them:
  • Josh Kopel and Jared Stoneberg now run a company that specializes in Drupal development. It’s called Number 10 Web Company, based in Seattle.  
  • Jay Fienberg and Anastasia Fuller run Juxtaprose, which designs and develops websites.
  • Wistia is going strong and becoming a standard for business video sharing.
  • Dan Shafer is a freelance designer and instructor at the Cornish Design School in Seattle.
  • Tony Wright recently started Tomo Labs and launched TouchBase, a calendar app for iOS

For more,

5 Ways the New CommonCraft.com Will Be Different

Posted by: leelefever on April 21, 2009- 5:00pm

Categories: business, design, language, thissite

We've re-thought our website from the ground up and soon you'll see the all the changes we're making.  For now though, I want to highlight a few things that make a big difference.

1. A Focus on the Business. This may be the best way to explain how the focus has changed:

  • The current Common Craft site says "WE HAVE A BLOG - and we sell videos"
  • The *new* Common Craft  site says "WE SELL VIDEOS - and we have a blog"

It's true - the new site is more closely aligned with the goal of finding, viewing, purchasing and downloading videos.

2. Simplified Video Organization. Our videos used to appear in two places, depending on their version: "free" or "presentation quality."  We've consolidated the display of videos one a single page. This means:

  • No More "Common Craft Store" - Instead of trying to attach a video store to the site, we're integrating the purchase experience into the pages where the videos appear.
  • No More "Common Craft Show"- The "Common Craft Show" was simply a way to organize the free versions of our videos.  Now higher-quality versions of the videos will appear in a single place on the site. 

3. Videos in 5 Languages

We're taking a big step to internationalize our videos.  For the first time, 10 of our videos (including the Social Media 9 Pack) will be available with voice-overs in 5 languages (English, French, German, [Brazilian] Portuguese and Spanish.)  These videos will be available for viewing, purchase and download.

Commoncraft.com by you.

4. Organization by Major Topics

Our video library will be organized into four major topics, which outline our direction in the future.  The topics are: Green, Money, Society and Technology.

Commoncraft.com by you.

5. Overall Look and Feel

Our goal was to make the site look and feel like our videos.  We've integrated our artwork, used a white background and tried to make the experience as focused as our videos.

CC shopping look

Of course there are many more changes, but I think these points capture some of the big ideas that drive the new design. More soon... 

What's Missing From This Sign at Airport Security?

Posted by: leelefever on December 7, 2008- 4:00pm

Categories: communication, design, offtopic, signs, travel

Me (to the friendly TSA ID checker):  Do I have to remove my laptop computer?

TSA Employee: Yes, you do.

Me: It's not listed on the sign

TSA Employee: Well, it's the most important thing to remove.

Me: But not important enough to be on the sign?

TSA: It's supposed to be on there, the people that printed it messed up (rolls eyes).

The TSA folks have hard jobs and I appreciate what they do. However, it doesn't exactly give me a safe feeling when the instructions for moving through the line efficiently are "messed up" and no on seems to care. 

Designing Common Craft T-Shirts on Pixish.com

Posted by: leelefever on August 20, 2008- 5:00pm

Categories: community, design, merch, store

As you may have seen, the Common Craft Store has a section for merchandise that is looking pretty minimal at the moment.  At the same time, we often get requests for t-shirts.  Hopefully, we're about to solve this problem.

We've created a new "assignment" on a website called Pixish. Using Pixish, we can describe an image we need and have a community of creative people submit their ideas.  The creator of the winning images win "rewards" - often money, links, etc.  

We're hoping to identify 2-3 images that we can put on t-shirts and other fun things that are offered in our store.  If you're creative and want to participate, please do.  The details are here.

We're offering $200US to the winners, plus some link-love from this blog.  The assignment ends on September 15th.

What would you like to see on a Common Craft t-shirt?

My Personal Life Stream on Tumblr

Posted by: leelefever on August 21, 2007- 5:00pm

Categories: blog, design, personal, simplicity

For a while now I've been fascinated by the idea of creating a single place (other than Facebook) that brings together all the things I do on the Web. That is why I created the zeitgeist page here on Common Craft - to have that single place to bring it together. At the same time, I've had a blog at leelefever.com that has become a pain to keep updated - I needed a replacement.

Recently I discovered Tumblr, which is a super-simple and lightweight way to have a blog with a minimum of effort.

Here's the deal. I blog here, I put photos on Flickr, I put videos on You Tube and updates Twitter, the list goes on. Anyway, Tumblr takes the RSS feeds from these sources and turns them into blog posts. This was a perfect replacement for my old blog - it is always updated.

Further, Tumblr makes it super-simple for me to add a new photo, video, quote, blog post, or whatever, via a handy-dandy bookmarklet. It's fast.

The Tumblr posts don't allow comments and there are only a handful of features, but they appear to be the right ones.

So, I've redirected leelefever.com to leelefever.tumblr.com - which will provide a constant flow of Lee-related bloggified fun from this point forward.

The New Common Craft

Posted by: leelefever on April 12, 2007- 5:00pm

Categories: design, feedback, thissite

After 3+ years, Common Craft has a new design and a new platform (Drupal) - Yay! We hope you like it, we sure do.

Please kick the tires and give it a test drive while it's still got that showroom sheen. I'm sure there are some kinks to work out of the system and we'd really appreciate it if you'd let us know so we can fix 'em. Just leave a comment below. Any feedback is welcome.

Over the next little while we'll be tweaking things and posting some content that will represent where Common Craft is headed. Until then, I hope we'll hear from you.

Blue Flavor is Open for Business

Posted by: leelefever on September 26, 2005- 5:00pm

Categories: business, design, friends, seattle

Congrats to my friends and fellow Seattle guys Blue Flavor for getting their new company off the ground. From their site:

We're four guys with a zeal for simple, clear and effective communication and creating lasting interactive experiences.

We’re big picture thinkers, Web and mobile architects, user advocates, writers, speakers and well-respected experts. We're also fairly regular folks who think technology should work for people, not the other way around.

 

Blue Flavor is: Brian Fling, D. Keith Robinson, Matt May, Nick Finck. See the bio page.

We're expecting big things! No pressure! I dig the little blue leaf icon.

Building a Project Vision by Understanding Users

Posted by: leelefever on March 9, 2004- 4:00pm

Categories: design, userresearch

Boxes and Arrows: Building a Vision of Design Success

Since I started to learn a little more about Contextual Inquiry/Ethonography, it seems like it is coming up every where.

Though this article does not mention the terms above, it describes the techniques as a viable way to build and promote a vision for a project.

I find it useful to use Peter Senge’s Five Why’s. This is a very simple technique in which you ask why, and when you get a response, you ask why again. It helps you move from specific issues to uncovering larger underlying problems.

For example, let’s say you are the head of user research:
Me: Why do you think we should do a redesign?
You: Because people can’t find anything.
Me: Why can’t they find anything?
You: The navigation isn’t intuitive.
Me: Why isn’t it intuitive?
You: We didn’t do any user research when we designed it, just usability after.
Me: Why is that?
You: Well, our budget was cut…
Me: Oh? (which is what I say when I’m tired of “why�?…)
You: Well, the company doesn’t seem to value getting user feedback.

From this short conversation, I’ve learned several things. The user researcher thinks findability is a key problem, and he thinks research would help, and he feels we don’t invest in it. I can return to any of the places where I asked way, and take a different branch to find out more.

 

As I write about this subject, I wonder if readers are asking themselves: What does this have to do with weblogs and online communities?

My answer is that business-based weblogs and online communities must fulfill a real need to be truly successful.

As I learn about contextual inquiry, I'm discovering a way to understand that need- a way to get to the real issue and problems that need to be solved. Otherwise design decisions may be driven by speculation and assumptions which may waste valuable time and money in the long run.

Good Experience.com Interview with Peter Coughlan, IDEO

Posted by: leelefever on September 14, 2003- 5:00pm

Categories: business, design

This interview with Peter Coughlan, by Mark Hurst of GoodExperience.com, provides a good look at the "broken" state of hospitals and how his company IDEO works with hospitals to improve.

Having a Masters in Health Administration, I hold this stuff close to heart. I think there are incredible opportunities to help hospitals improve and I like the way Peter describes their process.

Ordinarily the hospital spends a year or two in committee, create what they think is the perfect team process, and then goes out and tries it and fails. At IDEO we say, "fail early to succeed sooner." So after a half hour bringing into the field, we see how colleagues use it. Then we come back and revise it. So we get rapid prototyping in place. Previously it was death by committee.

Recent Post Topics

Subscribe with RSS