Blog #2: Creating Wire-frames For The Dating App…

By

Just spending some time listening to music this evening and decided it would be fun to write a “quick/short”  blog on what I have been spending a majority of my time doing.  I have been working on wire-frames for the dating site, and studying my ass off by listening to podcasts and audio books regarding business and marketing.  Creating the wire-frames for an app or website you’re going to pay a developer to build is typically something the developers do, however, I am on a budget and needed to cut some costs.  For those of you that have no clue what a wire-frame is, basically they are super simple blueprints that developers use to create give them a guide when creating apps, websites, and computer programs.  Please see the example below for a visual reference…

34-sketched-ui-wireframe1-500x362

There are several ways that I know of to create them.  the simplest and often easiest is to literally draw them out on paper or a white board.  My partner I did this for the first iteration of wire-frames over pizza and beer down the street from our house.  It took two trips to the pizza place to fully complete.  I’m not sure if that’s because we actually needed two weeks or we were having too much fun eating pizza, drinking beer, and discussing some of our funnier memories regarding the dating world.

Once we had our paper versions, we used one piece of paper for each screen we want to develop, we began converting the physical pages into an online based digital version.  We’re using a site called: MockFlow.com.  It’s free, but for both of us to work on the same project with specific functionalities, we needed the paid version.  It only costs $15 per month and is well worth it in my humble opinion.  After about a month and a half we finished around 90% of this process, which was roughly 2 weeks ago.  We met once a week in the evening for a few hours each time we met to get where we are, but this could have been easily accomplished in 1-2 solid work days spread out between the two of us.  Creating the wire-frames ourselves has taught us some interesting and beneficial things we didn’t expect to learn!

  1. It’s a highly rewarding process mentally and emotionally.  We have gotten more passionate about our product and more understanding of our products industry.
  2. All the studying of business and marketing has allowed us to conceptualize what the end user may be looking for.  This has shown greatly in the wire-frame designs.
  3. We have seen how the app will function and things we wouldn’t have caught, understood, or even thought to think of if we had a developer create them.
    1. As a result we have a much deeper understanding of what functionalities we really want in the app at a very early stage which will save both time and money in the long run by keeping development changes to a minimum.
  4. To build further on the last point, this allows you to cut the fat.  What I mean by this is; once you’re done with the wire-frames you can go back through them and begin trimming unnecessary buttons, pages, etc.  We did this once already, and now I am doing it a final time to really polish them up.

Why I am making a second round of changes to “polish” things…
This is not something developers do, usually this is the designers job.  Sticking with the “cutting costs” mantra, and hoping to learn more about our product and industry, this seems like a good and fairly fun idea.  Also, I want to test a few different ideas I have and this is the best way to get a visualization of how they might work and look.

A Final Note: I am listening to music as I make the second round of updates and polishes to the wire-frames, it’s been quite helpful.  Music is a major motivator in everything I do.  I often find myself extremely motivated to pursue something if the music I am listening to is uplifting or complimentary to my current mood or the moment I feel I am in.  Song of the evening so far: Everybody Wants To Rule The World.  Every time I hear this song I want to kick some serious butt at whatever it is I am pouring myself into.
-Thomas

Advertisements