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…
1 week ago
