Think Say Do - Web Applications, User Experience

Building A Web App From Scratch: Day 1

I’ve been building web applications since 1996. Today, fourteen years later, I’m creating another web app, from the ground up, posting daily step-by-step how it’s done as I work. I’ll be developing a web app to easily handle group t-shirt orders for a screen printing company here in Indianapolis, near Fishers.

In June 2009, The Art Press approached Think Say Do about designing and developing a group t-shirt ordering system. We had worked together closely in the past on many web projects, but this was something bigger and bolder — a project that could revolutionize the screen printing world. Jared Ingold, founder and president, had a grand vision for the web application. It needed to allow people to easily order shirts for an organizational event, while making the process of fulfilling the orders easy for the organization itself.

Enter MyShirtSize.com. In the late summer of 2009, after sketching (with pen and paper) our ideas, we built a prototype using FormStack and called it MyShirtSize.com. We wanted to prove that the idea, even in its basic form, was a viable idea capable of getting a return on the investment. And FormStack allowed us to prototype for $60 a month. Every big idea should begin with a prototype, especially when it’s that affordable.

After nearly a year of monitoring the progress, we found that the idea worked, but needed some tweaking and streamlining to really see it move. So, in late June 2010 we began talking about an official project, a ground-up rewrite, from scratch, using a new cloud-based web application framework developed in-house at Think Say Do.

Last week we nailed down the business goals, the data goals, and the costs. We sat down at El Bodegon in Fishers and wrote out everything in a huge list - every field we thought we should capture, every feature we thought we should have, everything. Then I returned to the office and built a Mind Map of our conversation, and the web app itself.

The mind map was then turned into a text-based outline that I used to create user experience flow charts of the entire app. User experience flow charts are different than functional flow charts. UX flow charts include the feelings of the user, potential ways they might be using the app, and other doodles to add life to the chart. It’s about people’s experience using the app for the first time or the fiftieth time. Functional charts include things like database actions, Yes/No actions, etc… nice for programmers, but not great for getting a vision for the entire experience.

From there, I started sketching user interfaces with my Prismacolor art markers and my large paper tablet. It smells a little funny, but the results are priceless. I find that drawing on paper, away from my computer, helps me think of new approaches to interface design problems. As you see the app progress in the days ahead, I’ll point out some of the ideas that started as sketches in this stage.

I took the sketches and hung them around my office on the walls and bookcases using Alvin Professional Drafting Dots (amazing tool for hanging temporary sketches). These will become my design inspiration and master guide as I begin developing the API (application programming interface) tomorrow, along with the UI (user interface) framework.

More to come tomorrow afternoon…

Website for Ingold Sound Systems, LLC

A few months ago Ernie Ingold, founder and expert sound engineer at Ingold Sound Systems in Shelby, Ohio, contacted me for assistance with designing and developing a new website. Late last week, after a month of working on the project, we launched the new site.

Check Out IngoldSoundSystems.com

One of the things I am passionate about is accessibility. All of my sites allow a visitor to turn off style sheets to view and navigate the site without images or styling. And because search engines such as Google also like sites without images and style, we’ve found that it helps a lot with SEO (and thereby sales leads).

This site is also built on top of a nice little in-house PHP framework (or toolkit), so it’s easy to manage and flexible to add new features down the road.

The Secret to A Maintainable, Growing Site!

Everyone wants a successful web site or web project. Success can of course be defined in so many ways. It is subjective at times. But, there are certainly objective measures of success too.

One aspect of a successful project is maintainability. Maintainability is the ability to update and grow a project long after it completes. It’s the hundreds of changes made after a site goes live. It’s the years of service a solid site gives it’s patron. Businesses benefit greatly from the low cost of ownership of a maintainable site. Web sites and applications continue to live, breath, and evolve long after a project finishes. As an example, I still make regular updates to a major site I wrote over seven years ago. In fact, I just spoke with the IT director today about adding some major new functionality… to seven year old code!

Over the years, I have tried many methods for writing web applications. From old “spaghetti” code (a mess to maintain over the long-run), to basic OOP, to MVC (like Ruby on Rails), to event-driven programming (like Visual Basic). In fact, I enjoy researching and reading about different programming methodologies. But, at the end of the day it is about being able to maintain and grow a site for years to come.

Maintainability is especially important for small, one-man shops and small non-profits and businesses. Here is the secret to great maintainability: a short development stack.

What do I mean by that? Years ago, growing up in a town village of about 150 people in rural Illinois, we used to go to the local bar/coffee house. I remember as a kid being asked if I wanted a short-stack or a tall-stack of pancakes. Of course, the tall stack looked tempting with all those layers of syrup, but ultimately the small stack proved to be the best option for a growing boy.

The same applies to you if you are a small business, non-profit, or one-man shop. You want the shortest stack possible on your web site. By that I mean, you want the fewest layers of code you can have that makes sense. Each layer of code adds more complexity and distances the developer from what is really going on.

For example, on most web sites you have these layers:

1. Web Browser (Safari, Firefox, Chrome, Internet Explorer, etc.)
2. HTML/CSS
3. HTML/CSS Framework (Custom, Blueprint, etc.)
4. Javascript
5. Javascript Library (jQuery, RightJS, Mootools, etc.)
6. Web Server (Apache, IIS)
7. Programming Environment (PHP, Java, Ruby, ColdFusion, etc.)
8. Programming Libraries
9. Web Application Framework (Zend, Ruby on Rails, WordPress, etc.)
10. Web Application (WordPress, Expression Engine, etc.)
11. Custom Code

See that tall stack? And it can be far taller too! So, when you are evaluating options, look at the complexity and depth of your stack … the shorter the better usually. You can more readily track down bugs, add new features, and adapt to changes. It allows you to work like the Internet with agility, moving at the speed of modern business. And, it keeps your sanity. Maintainability is key to a successful long-term project.

~Collin Schneider
Founder / Systems Designer
Think Say Do, LLC
P: 317-489-9184

Thirteen Years In The Internet Industry

This year I am celebrating 13 years in the Internet Industry. I can hardly believe that I’ve been building online experiences for 13 years! So much has changed since 1996… the “information superhighway” was young and untested. In fact, most businesses that I dealt with back then saw no real value in the Internet. It was a toy. Kind of like blogs were a few years ago, or twitter was a few months ago. Now everyone’s onboard, and there seems to be this frenzy to find the next big thing — to spot business value in the “toys” before anyone else does.

After 13 years of writing code, I often find myself burned out. I find it especially difficult to write one more line of code when I realize that 99% of what I wrote 13 years ago doesn’t exist anymore. The Internet is such a fleeting, instantaneous place. One millisecond you’re hot, and the next you’re not. So, to encourage myself and to celebrate, here are a few of my favorite, worthwhile projects from the past thirteen years and the lessons I learned from each:

• United Way’s ENCompass Project (1998-2001)
  Designed to house information on all Northwestern Illinois non-profits to provide a unified service experience for constituents. The system was originally a joint project with Orlando, Florida-based Human Resource Technologies and Northwestern, Illinois-based InterClay Software (my employer at the time). Lesson learned: non-profit projects are rewarding when people work together to build something great
   
• Milio’s Sandwiches (2000-Current)
  Designed to provide online sandwich orders. Yes, we took online sandwich orders in 2000. In 2008, Milio’s did nearly $1 million in online orders despite the fact that there are no Internet connections in-store. This was a joint project between Rippe-Keane Marketing and e-Media Resources. Lesson learned: there are always solutions, even to the most challenging problems
   
• OshKosh B’Gosh E-Commerce Site & Corporate Intranet (2000-2005)
  Designed to offer all of the famous OshKosh kids clothing online. The project was a huge success from a design standpoint, but the web application platform based on IBM WebSphere failed. I worked for e-Media Resources & The Gunter Agency at the time. We were in charge of the online experience — the design side of things. Lesson learned: design is always worth the investment. design is not just graphic designers. it’s for every project stakeholder - managers, developers, CEOs, customer service reps, etc..
   
• Firestone Tires E-Learning (2007)
  Designed to offer all of the Firestone Tire Center employees comprehensive customer service training. This was an e-Media Resources / Gunter Agency project. Lesson learned: take on projects that are new territory, learn constantly
• Sun Prairie Today Online Newspaper (2004-2008)
  Designed to allow journalists and the community at large in Sun Prairie, Wisconsin to post photos and stories easily. The site run by Paul & Teresa Bauman, was a huge success. Lesson learned: write amazing software designed for people instead of developers. even non-technical people can easily update a web site with only 20 minutes of training.
• BankingMyWay.com (2007)
  Designed to allow people to search for bank rates simply. The site was an e-Media Resources project. Lesson learned: teamwork is the more than the sum of it’s parts

Love what you do. Learn constantly. Give back. Here’s to another enjoyable and unforgettable Thirteen Years!

~ Collin Schneider, Founder / Systems Designer

A Quick List Of What We’ve Been Doing

For those of you not familiar with Think Say Do, LLC, here’s a quick list of what we’ve been working on in 2008 and early 2009:

• Training Application System for Associated Training Services
  Allows applicants to apply for classes online and apply for financial aid. Ties in tightly with legacy applications in MS SQL Server. Applicants can save their progress and return later for status updates. This project was in partnership with e-Media Resources, LLC.
   
• Customer Information Management System & Visual Query Builder
  for Chamberlain Research
  Allows potential research participants to sign up online and fill in extensive background data. They can opt into and out of research panels. The system also includes a sophisticated Visual Query Builder for Chamberlain Research staff members to build participant lists in real-time. I’ll post more on this project in the future. This project was in partnership with e-Media Resources, LLC.
   
• Online Donation System for The Wesleyan Church World Headquarters
  (See earlier post for details about this project.)
  
  
  
• Inventory Management System for Peterson Machinery
  Prior to our involvement, customers were waiting several minutes to view a massive list of inventory on their browser screens. We reviewed the process and rewrote the entire system to allow searching and browsing. In addition we developed a back office management piece to allow staff to manage their complete inventory, including location information, as inventory is spread across several states. The site was a big success and has streamlined inventory management. As a final piece, we added a dynamic email quote builder to automatically create machinery quotes based off inventory data.
   
• A Bride’s Choice Florist, An award-winning wedding florist in Indianapolis
  Although we don’t often do web site designs, we took on this project for enjoyment. The site is built on a custom Content Management System (CMS) that allows staff to make content updates themselves. We also did some SEO work to assist with search engine ranking.
  
  
• Real-Time Sales Quotes iPhone Web Application for The Art Press
  The web application allows staff to generate real-time t-shirt order quotes for clients. Sales staff just visit the web application, add the job requirements, and they can get a real-time cost complete with material costs, labor costs, and delivery fees. The application can also take completed quotes and send them directly to customers via the iPhone’s email software.
   
• Custom Artist Stores for Vardagen Brands
  Vardagen prints private-label shirts for bands, artists, and small independent lifestyle brands. As part of the deal, artist get their own private-label store through Vardagen where they can sell their shirts to fans. Totally sweet gig. Vardagen fulfills the order and the artists get a generous cut of the proceeds. Think Say Do wrote the custom code for Shopify to allow per-artist private-label stores. Check Vardagen out!

We’ve been doing even more than that, but I wanted to list the major projects. If we can assist you in any way, let us know! Call us at 317-489-9184

~ Collin Schneider, Founder / Systems Designer

User Experience Week 2008 Videos