DesignDriven NYC: designing processes that foster good behavior
Posted on January 15th, 2015
01/14/2015 @ WeWork, 69 Charlton St, NY
Four companies presented thoughts an effective #design of their #WebPages and communication with customers.
Matthew Tully @Harry’s (which does direct customer sales of shaving products) spoke about optimizing the design and efficiency of sending out email. In September 2014 Harry’s wanted to send an email to customers announcing the launch of aftershave and foaming gel products. They took this as an opportunity to streamline their email process in which creatives spent too much time doing copy editing and the entire process involved multiple group sessions (see http://hoveringartdirectors.tumblr.com/). Lessons learned when moving to the new system included:
- Design your system by looking at the full process then pick the steps to speed up. Look at previous emails and find patterns in both the format and process. e.g. full width pictures + text. When you find these common blocks, name them so it is easy to reference them both in discussion and within programs.
- Automate everything – Create tools to generate tags/items in html. Also write styles externally in Sass (a superset of CSS). Use Grunt and io to automate and compress images. Use Litmus to quickly verify that the email looks good in all devices.
- Review it live – Get test emails into the browser as soon as possible so everyone can look at it. Test in different devices (e.g. mobile); Simulate what customers will see.
These changes have many benefits. One of the most important was making it easier to A/B test. From these tests they determined the importance of the location of the subject line. Also that the slug line matters so recipients know that if they are not viewing images in the email, they should open a browser to see them.
Aneesh Bhoopathy @GetPointApp talked about their OnBoarding product which allows users to share and discuss web pages online using a chrome add-in. He also talked about the challenges creating a web site that would enable users to easily master setup. The current steps are
- Go to web site
- Once installed, the user gets an example which explains onboarding
- The side asks the user to login to either Facebook or Google+.
- Next it asks the user to invite others to join Point
- The site shows the hotkey for sending Point
- It asks the user to send a real page to Point.
Creating this sequence of steps required testing to better understand the barriers users face during setup. To do this they kept a full history in Sketch of all screens along with notes and feedback. As improvements are made, bottlenecks are identified and fixed. They concluded:
Reduce choices when possible so everyone gets the same page to practice on. Only show one simple way to do things initially.
Abe Geiger and Krissi Xenakis described how @ShakeLaw created a mobile app in which a user answers questions to quickly create standard legal agreements. It takes advantage of mobile technology to easily insert pictures/video in the document if needed. They talked about many of the design decisions including
- Structuring documents in plain English by removing legaleze boilerplate
- Present a list of questions to fill in the document details
- Use of a serif font to make the document easy to read, yet project a sense of importance
- Include a way to capture signatures to be included in the document
Scott Belsky @Adobe illustrated his thoughts on the future of creative careers by showing how these ideas were incorporated in the Behance web site.
Behance wanted to design a LinkedIn for the creative world: organize and connect those in the creative community. When creating the site they wanted to address the following social challenges to encourage innovation and the discovery of talented individuals:
- The “long tail” is backfiring – (the internet creates an infinite number of niches as there is something for everyone on the internet). However, innovation happens in the overlap of different communities/ideas. So the site was designed to foster views into other fields and encourage publication in fields other than one’s own narrow specialty.
- Have we empowered the masses without discernment? Popularity is important, but acceptance by key, knowledgeable individuals is also important. Therefore the site is based on both opinions of the group and opinions of a set of professional curators. Initially Behance invited 100 people with well-respected portfolios and Behance created the portfolios on the site. These continue to be the most seen as they are the most popular. This encourages others to use the site. Also credible curated comments elevate good work by unknowns.
- When attribution is not supported, opportunity is lost. They want to build a graph showing who created the fonts, the pictures, etc. (Pinterest is also doing this.) They eventually want to monitor who is using which tool when creating new content. He feels that good attribution fosters good work as discovery becomes more important than referral when identifying talent.