In this series of posts, I’m going to learn how to plan and build a shared economy web app. This is an opportunity to learn and document the process of wireframing, designing, and developing an application from nothing, which (crucially) is usable by real people. I’ll be drawing from Michael Hartl’s Ruby on Rails Tutorial to learn how to build the application. The idea that I’m going to be building out is simple. AirBnb lets you monetize your extra room, Uber lets you monetize your time and car, but what about that pool you have? Or your trampoline? Or your basketball net? So that’s it, a shared economy app for use of your extra amenities.
This post is dedicated to wireframing. In programming and in life, I’ve always found that coming up with a plan before doing something greatly increases the chances of success. When the luxury of a plan can be afforded, it’s advisable to indulge. In the case of building a web app with Rails, the plan should come in the form of a wireframe. A wireframe is a technical document which contains no color, font, or even layout decisions, but rather the structure of information and the architecture of how a user navigates an app.
In order to accomplish this, I purchased the Omni Group’s well-known and quite renowned OmniGraffle software. There were cheaper options out there, with the standard variant of OmniGraffle costing $99.99. Many people I trust use it and I enjoy high-quality Mac apps, so I took the plunge. You can likely accomplish this task with many other tools out there, free or otherwise, just search Google for “wire framing software” and do your research. Honestly, I find many things frustrating about OmniGraffle, but it’s treating me pretty well (I’ll perhaps write a review).
The next tool I’ll need to start wire framing is a good stencil (template) for OmniGraffle. To make my life easier in development, I’m going to use the Bootstrap front-end UI framework, so I found a stencil which has Bootstrap’s elements and grid. With these tools, you can drag-and-drop UI elements into you canvas to mock how your application will work. First, I created what my application will look like to the general public, for those customers who are seeking a pool (as opposed to listing one).
Here, I tried to come up with the absolute minimum number of pages for users to have the core experience of this app – going online, inputing what they want to do, finding results of people who are offering to share their stuff, and checking out on it. I also tried to structure the information in a way that would make designing the application easy, in the sense that I avoided forms and used pictures liberally. Also, note that I’ve made a number of simplifications for the sake of this demonstration, for instance real users would want to refine by their location, I feel it’s just more than I’d like to get into for this learning experience.
After I finished these wireframes I realized I was missing something crucial. Users could easily find something they want to do, but it was impossible for them to post something they wanted to do. In wireframing this, I kept in mind that this user will tolerate something that doesn’t look too pretty, as long as it was efficient at getting their item up on the service. Furthermore, they are going to want a way to tracking how much money they’ve made. This differs from the customer-facing wireframe because it will not make liberal use of pictures and might be quite form-heavy, considering it’s data input. Here’s what I came up with:
With a quick idea, a good wire framing app, and a couple sessions at a coffee shop, I have a plan to take to the terminal. In the next post, I’ll either design the application by giving it some nice fonts and colors, or I’ll just jump into development (depending on my mood and level of impatience).