Design

Getting Sass-y w/ Jordan Isip by Jordan Isip

i7c5m8hgjhgm.png
 We'll learn the basics about Sass functionality and then put it all together at the end to build this out.

We'll learn the basics about Sass functionality and then put it all together at the end to build this out.

Join me at the Society of Work co-working space in Chattanooga, TN on Thursday, Nov 20 for a #chadev talk called "Getting Sass-y" - how to take advantage of CSS pre-processors like Sass to stay sane while building out designs.

http://www.meetup.com/chadevs/events/216703892/

 

UPDATE: I put the live coding example on Codepen for those that want to continue playing around with the custom mixin we created for the closed text shadow shade: http://codepen.io/anon/pen/XJJqWj?editors=110

Even More Peaceful Productivity on Taco by Jordan Isip

 New "Focus Mode" feature on Taco that collapses 'For Later' tasks for even more peaceful productivity. Shown with (obviously) fake tasks.

New "Focus Mode" feature on Taco that collapses 'For Later' tasks for even more peaceful productivity. Shown with (obviously) fake tasks.

 

Taco (@tacoapp), a side project of mine with Troy Davis, is a productivity tool that aggregates tasks across multiple services, 'from Asana to Zendesk', to help people stay focused. We're currently in the process of dogfooding a new Chrome extension that brings up Taco every time you open a new tab. This has proved to be an extremely effective way for us to remain focused. Since hitting 'cmd+t' inherently shifts your context, it's way too easy to get distracted and fall into the rabbit holes of Hacker News/Reddit/Facebook or any other social time-consuming vices. With Taco instantly showing up when opening a new tab, it becomes a gentle reminder for my remaining Asana tasks and GitHub issues that I had set aside to work on for the day. This helps me keep my focus and continue plugging away.

One issue we quickly noticed, however, was that seeing all of our tasks each time we opened a new Chome tab was a bit, well...daunting. To remedy this, we decided just the short list of 'up next' tasks would be appropriate to reduce noise and stay within our mantra of 'peaceful productivity'. So after some quick design iterations, we came up we came up with what we've been calling 'focus mode' - a simple and minimal way to toggle the visibility of your 'for later' tasks. Either clicking on a toggler on the left side of the screen (shown in gif above) or by hitting the keyboard shortcut '\' (same shortcut that hides files drawer on GitHub's Atom editor). Also state is saved via cookie so if you collapse and refresh, it will still be collapsed. We're still making small tweaks but we'll be rolling this out to all of our Kickstarter backers soon!

Oh, and on mobile (or slim screens), we simply just hide the toggler via CSS Media Queries:

 
 
 

SEO Landing Pages on Taco by Jordan Isip

 

Taco is a side project I work on with Troy Davis that started as a solution to our own problems and later developed into a successful Kickstarter project. We are now in the final phases of our public release (sneak peak) and, in the midst of launching, we wanted to put in some thought for SEO marketing for some of that good ol' fashion search engine traffic.

Taco is a productivity tool that aggregates tasks across multiple services, 'from Asana to Zendesk', to help people stay focused. But since everyone have different needs and different workflows, this means we need to support lots of different services (we're up to over 30) and was the entire reason behind our Kickstarter campaign. However, as we scale up our number of services, it quickly becomes more difficult to target search engine traffic on our main marketing pages since page titles, imagery, illustrations, etc. become less focused on individual services. A quick look at Google Keyword Planner/Analysis tool reveal that people aren't searching for "aggregating task services on a single screen" (obviously), they are searching for a direct solution to their problem (again, obviously). Something like "Manage Basecamp with Asana" or "GitHub Issues and Trello Cards". Our attempt to help solve for this was pretty much SEO 101 (maybe 102?) - creating separate landing pages. We did this by reusing modules from our new front page (sneak peak) to create dynamically generated landing pages that targeted this search use case.  By passing in a combination of services in the URL (eg. https://tacoapp.com/manage/github-issues-and-trello-cards) it would result in examples shown and linked to above.  By creating this template, dumping our supported services list + associated example tasks for each service, and adding each link to a sitemap.xml, this produced over a couple hundred different landing pages for each possible service combination.

Implementation note: we also set up URLs so that service slugs only work when they are alphabetical to enforce canonical URLs, meaning /github-issues-and-trello-cards work while /trello-cards-and-github-issues won't.

We'll know more soon about how effective these landing pages are for us as we continue experimenting with this and similar variants the very near future.

More examples:

Follow Taco progress: @tacoapp

 

Taco on Kickstarter: "Basecamp to Zendesk, All Your Tasks in One Place" by Jordan Isip

I’ve been designing and prototyping a web application called ‘Taco' with Troy Davis for the past 23 months. Taco is a productivity tool that brings all of your existing tasks, from all of your existing task services, to one single place. It’s been bringing us peaceful productivity for the past couple years, and today, we are launching a Kickstarter to try to help others stay productive. If you use multiple task services, you should check it out.

Finished campaign at 209% funded with 194 backers!

Smart Google Calendar Textbox by Jordan Isip

Google Calendar continues to impress me. While creating a new event, adding the time w/ time zone in the event description field will save it in the time slot of your time zone (based off of your settings). Eg. “3:55PM EST” results in “12:55PM” on my PST time zone calendar.

Google understands the common confusion people have when scheduling events in different time zones and they provide a quiet solution for this. I imagine a common use case could be a user clicking on “2PM” to start creating an event, and then realizes halfway through entering the description that it’s actually 2PM EST. By being able to set the time via the textbox, this saves the user from having to close the new event modal, go back to the calendar view, click a different time slot, and re-enter description. Therefore, minimizing the amount of interactions that have to take place in order to schedule an event. These small details add up to help reduce user frustration while interacting with the app.

Although, one way Google could take this one step further would be to allow duration to be set by entering the end time as well as the start time. I would love to enter “[event description] 12:55PM EST - 4:55PM EST” after I had already opened the new event modal instead of having to go back to my mouse and drag the duration. Obviously I can edit the event after it’s been created or drag the duration before creating the event, however, that is often not my workflow.

The Importance of Microcopy by Jordan Isip

I spent a couple minutes wondering why someone had closed my Hockey Team’s Facebook group. It turns out that “Closed” actually means that only members of the group can only see posts. Makes me wonder why Facebook choose to use “Closed Group” over “Private Group”?

Joshua Porter has an excellent article on Writing Microcopy.

Update (5/25/12):

Looks like Facebook recently changed this copy to “Secret Group”: