Posted 01.16.2015

The Mistakes I Made in Building a Web App

A few years ago, I started been building a web app. I designed it. Coded it. It’s been a long process, mainly because it’s been just me, pushing pixels and stealing a line of code here, a line of code there. It was a long process because it included a lot of learning…the hard way. I’ve made a few (major) mistakes.


I didn’t show people early or often.

As a perfectionist, I’m very protective about my work. I don’t let people see what I’m working on until I’m ready. I want them to see the best version of what I have, best foot forward. –No need for them to give input on something that’s half baked.

The problem with that mentality, though, is I took the project down roads that I never should have gone down. I worked with blinders on. What I did made sense to me. I put my engineer hat on. I thought about the back end and the code and the logic and forgot about the people that would actually be using the system. When I finally did show people, they would (quickly) find problems.

“Why doesn’t it do this? What do I now?”

“Isn’t that obvious?”

“Well, no.”

I should have showed people early and often. I should have talked to the people that would be using the system and find out what they really needed instead of giving them what I thought they wanted.

Two of the best books out on interface design is Rocket Surgery Made Easy and Don’t Make Me Think, both by Steve Krug.


Rocket Surgery Made Easy by Steve Krug
Don't Make Me Think by Steve Krug

In Rocket Science Made Easy, he talks about corporations that will pay thousands of dollars to have experts analyze their sites. When, really, all you need is Joe Smoe end user. He’s your target audience anyway (not the expert). Simply watch Joe use your site. You’ll learn so much by simply paying attention to where he clicks. Where’s the first place he goes for information? Does he immediately know the purpose of your site? Does the navigation make sense? Joe’s not short on opinions, you just have to be willing to ask and be humble enough to hear what he has to say.


I never gave people a reason to need the system.

When we got ready to beta test, I was invited to a leadership meeting to introduce this new tool I had created. “Here it is! My web app will make your life so much easier. Look at this bell here and that whistle there. Isn’t this great? I’m doing you a favor.”

After that meeting, I kept hearing, “This is great. I’m sure it’s useful, but my pen and paper method worked just fine.”

Really?

I could dismiss it. They’re older. They just don’t understand technology. But, is that a fair assessment?

How does my web app make their life better? The administration understood. They knew it would dramatically cut down on data entry, emails, reminders, and processes. But, I failed to communicate that to Joe Smoe. There was disconnect between their need and my app.

So, how do I close that gap? You tell a story. A good story always has a problem. Then, it works toward a solution. My end user may not know what the problem is. I have to define that for them. Then, hopefully, my product, my web app is their solution. I need them to buy into the system, otherwise it will never get used. It will fail before it even has a chance.


I didn’t mimic a system they already knew.

After a month of testing, I had a beta user that believed in my product. He had a background in Internet Technology and was willing to sit down for coffee and walk through my app, discussing points for improvement.

One of the first things he did was pull out a folder with a print out. “This is the system we know. Flawed? Maybe, but we’re used to it.” Then, he pulled up my web application. The two looked nothing alike. — which is fine, except for one thing. It didn’t give my users a frame of reference. They needed something to go off.

Let’s look at Apple as an example of doing it right. Address Book in the OS Lion looked just like an address book I could pick up at Office Max.

Address Book on my Mac

Notepad on my iPad originally looked just a yellow legal pad.

Notepad on the iPad

Why? Because these are systems I’m familiar with. There’s something about translating the physical world to the digital that gives the user a sense of comfort. I know how it works in the physical world, therefore those metaphors must carry over.


These lessons are hard when you’ve put in time and energy. But, now I know.

What are some lessons you’ve learned the hard way in web development?



Posted 01.14.2015

Accounting for Freelancers (Part 2)

Tomorrow estimated taxes are due, so I thought it would be an opportune time to bring up accounting for freelancers. I wrote Part 1 a while back. There, I focused on the items that you need to keep track of for your annual reporting. In this post, I want to focus on the part of accounting that helps keep your business afloat: business opportunities, cash flow, etc.

As before, I have a spreadsheet (separate, though) that keeps track of all this information.


NOTE

You can access my Google Spreadsheet here.

Any cells with a yellow background have formulas already set to calculate that value. —In other words, don’t edit!

If you have a Google account, you can go to File > Make a Copy and it will save a version that you can edit in your Google Drive.


Opportunities

In the “Opportunities” tab, I keep track of all the proposals that I’ve submitted and how much they’re worth. This gives me an idea of prospective projects and potential revenue sources. Once a project has been approved or rejected, I’ll remove the line item. When this sheet starts to get short, I know it’s time to put out feelers for additional work in order to maintain a healthy cash flow.



Work in Process

In the “Work in Progress” tab, I account for all the projects that have been approved. This sheet helps me start to think about projections. If I don’t take on another project and just finished the work that I’ve already agreed to do, I would make X.



Aging Summary

This tab keeps track of all the invoices that I’ve sent out. Then, when an invoice comes in, I’ll remove the line item. It also serves as a good reminder for any invoices that I need to follow up on.



Cash Flow, Profit and Loss, and Balance Sheet

In my mind, these 3 sheets are the hardest to understand. — and if I’m honest, I don’t do a good job of keeping these up to date.

There’s a lot of repeat information between these 3 sheets. They present a lot of the same data, just in a different format.


Cash Flow

As the name suggests, this document shows how cash flows through your company. It shows the amount you currently have, the amount you’ve received, and the amount going out. Out of the 3, this is my favorite, because it helps you see how long your company can go without any additional income.


Profit and Loss

This statement shows your overall profit and loss from month to month. Dumb answer? Keep reading.


What’s the difference between the two?

The Cash Flow document is a prediction that you can use to forecast your business while the Profit and Loss document is based on actual.

It seems like the two should be the same, but they’re not. A company can be profitable and still go bankrupt from cash flow problems. How so? If a company has to pay for materials in January, but they don’t get payments from their customers until June, they have to do something to survive January to June.

The reverse it also true. A company can have great cash flow but not be profitable. Amazon raised a ton of money selling stock in the mid-1990s. So much so that they had close to $2 Billion in the bank! But, every year, they spent more money than they made. Their yearly profit was negative, but they were able to tap into their savings account to make up the difference.

NOTE

This article helped explain it to me. I kindly borrowed their examples.


If you take our new found knowledge and compare the two spreadsheets again, you’ll see that the Cash Flow document takes your opening cash into consideration, while the Profit and Loss document does not. It simply adds up each month’s “profit and loss.”


Balance Sheet

The balance sheet helps determine the total value for the business because it also includes a business’s liabilities, assets, and equities. Items are listed in the order of liquidity: cash, short term investments, accounts receivable, etc. (Reference)


To sum it up:

  • Cash Flow shows a company’s cash activities.
  • Profit and Loss shows how the assets are being used.
  • Balance Sheet shows the book value for a company.


Budget

This sheet keeps track of my budget. I have all my vendors and known bills marked on the left and the amounts on the right. Granted, it doesn’t take tax into consideration, but it does tell me how much I need to make each month in order to cover my expenses.



Quick Tips and Tricks


Use Software

I’ve always used a spreadsheet to track everything. I understand my spreadsheets. Things seem simpler this way. But, as I confessed, I don’t always do a good job of maintaining my profit and loss, balance sheet, and cash flow documents. So, I’ve started moving all of my expenses into FreeAgent. So far, it’s been great because it runs all those reports for you. You don’t necessarily have to go with FreeAgent, there are plenty of options out there. Quickbooks, Fresh Books, and Less Accounting seem to be the other 3 front runners. I went with FreeAgent because it seems to be the easiest for me to understand (plus they target creative agencies).


Accept payments online

I’m a little late to the game on this one. I’ve drug my feet and asked clients to be old fashioned: send checks. Most online gateway companies take 2.9% of your bottom line and I’d prefer to keep it to myself if I can help it.

I was talking to a fellow business owner and he shrugged it off, “I chalk it up to the cost of doing business.”

As an experiment, I offered the option to the client to pay online. As soon as the email hit my inbox saying, “The payment is complete. The money will be in your bank account shortly.” I was hooked! I didn’t have to wait for the check. I didn’t have to go to the Post Office. I didn’t have run by the bank. Count me in!


Set up automatic reminders

Even though I have the “Aging Summary” document, checking it and sending reminders to clients required extra work on my part.

I’ve dubbed 2015, the year of systems. Why do that, even simple work, when I can automate the process?

With FreeAgent, I can simply set up reminders to send to the client every couple of weeks. It’s been great. I don’t have to worry about it, plus I’ve gotten paid faster.



Do you have any tips and tricks that you’ve found in accounting?



Posted 01.12.2015

Designing before the Design Phase

When I was in college, I was told that one of the most healthy disciplines I could pick up was to sketch everything, first. Pen and paper are your friend. My professors would make us turn in our preliminary sketches to try to enforce this mentality. Even though, no one is forcing me to do that now, it’s still a good habit that I continue to practice.

Sketchbook


Visual Research

When I start each project, I start with visual research. I know this sounds like a fluff term, but it’s probably one of the most defining steps in the process. If I’m working on a piece for middle aged women, I’ll might pick up Real Simple, O, Vogue, and Martha Stewart magazines. These are things that these women are paying attention to. Each of these magazines have spent millions of dollars in research to determine trends. Why not take cues from them in determining what’s popular?

Visual research doesn’t have to be all about the audience, though, it can also be about content. For example, if I’m working on a site that’s copy heavy, I might look at other sites (CNN.com and USAToday) that face the same “problem” and take notes on how they solve it. How many columns did they use? Do they show the full article? excerpts? or headlines?

I’ll take all the images that I find and post them on my wall in my office. This helps me think in a particular stylistic direction, as well as, make connections based on what I’ve seen.

Mood board of Inspiration

A secret about creativity:

“Creativity is just connecting things. When you ask creative people how they did something, they feel a little guilty because they didn’t really do it, they just saw something. It seemed obvious to them after a while. That’s because they were able to connect experiences they’ve had and synthesize new things. And the reason they were able to do that was that they’ve had more experiences or they have thought more about their experiences than other people.

“Unfortunately, that’s too rare a commodity. A lot of people in our industry haven’t had very diverse experiences. So they don’t have enough dots to connect, and they end up with very linear solutions without a broad perspective on the problem. The broader one’s understanding of the human experience, the better design we will have."

Steve Jobs

It’s true. I take screenshots all the time. I’ll take pictures on my phone when I’m out and about. I keep everything in my Evernote account. (I wrote a post about it, too.)

Evernote Screenshot


Create a Moodboard

With a few of my clients, I’ve started making mood boards. It’s essentially what I’ve done for myself in the visual research phase, so it’s just a matter of sharing what I’ve found with the client. I’ve found that a lot of times the design vocabulary I use is different than theirs. So, if we have actually images we can point to, it guarantees that we’re both talking about the same thing. By getting their feedback early on, it let’s me know if I'm moving in the right direction. Do they like large, bold typography? large header images? muted color palette?

mood-board

I submitted a mood board to a client a couple of months ago and they came back and said, “This looks great, but it’s not at all what we want.” I said, “Perfect! The mood board did exactly what it was supposed to. It prevented me from spending a bunch of time designing something that you didn’t want.” From there, the mood board was able to launc us into a healthy conversation about what they really did want.


Sketching Everything

I design everything in my moleskine first. I’ll write down all the elements that we already agreed need to be on a particular page. I’ll write down on all the main navigation items. I’ll sketch different layout ideas, getting everything out of my head and onto paper. I’ll draw design elements: chevrons, rules, squares. I’ll make notes about how things will work responsively or if I want a section to animate in. I’ll write out the good and the bad. –Even if I know an idea is bad ahead of time, I’ll still write it down just to get it out of my head. Then, mentally, I can move on to other, better ideas. I can process a concept so much faster on paper than I can on the computer.

Moleskine Sketches

Moleskine Sketches

All this happens before a pixel is created in Photoshop or a single line of code is written.


What are some things that you do to prepare or inform your designs?