LessTimeSpent Design ProcessAugust 4th 2009

When Allan first approached me about the possibility of doing some work for LessEverything, I immediately accepted his offer. I’ve followed Less for a while now, and I was thrilled to get to work with one of the top Ruby on Rails shops in the country. My first task was a total redesign of the LessTimeSpent website. The old website was an extremely simple one page design made for the unpaid beta version of the app. It provides the user with a glimpse at the app, but there is not a sufficient display of what the application does or how it is valuable to the user.  A more robust website was needed for the release of the paid app.

oldlts

Like every other project, I started out sketching on my trusted Moleskine.  While sketching I tried to keep in mind two main things: show the user the value they gain by using the application, and display the main features of the app.  Clear signup/tour buttons were also a necessity.  I also came up with the idea of having a tiny widget of sorts, with sliders to show how much money could be lost every year as a result of under billing.  My sketches were traditional layouts for a web app, and my first draft was good, though both Allan and I thought there was a better way to showcase the value and features of the app.

sketch1

sketch2

newdesign

I decided to go back to sketching to try and come up with a more unique layout that only showed, in the best manner possible, the elements that were needed to accomplish the goals.  With my first iterations, I had stuck with tradition, and while this isn’t always bad, I learned that different layouts can offer a better way to accomplish your goals. Once my second sketch was finish, I knew I had nailed it.  Thinking a bit outside the box allowed me to come up with a really solid solution.

This layout is simple, and formed in such a way to clearly showcase the main features of the app: projects, reports, and users; the blurb beneath the logo quickly relates the value the app provides.  There aren’t any elements that are out of place or unneeded.  We decided to keep the money lost widget, and incorporate that and some other secondary elements into a footer.

newdesignfinal

Overall, the process went really well.  Allan was clear in what he wanted, and kept the goals and requirements simple, so that I had the freedom to explore various options.  If I had the option to do this again, the process could have been improved by starting with more simple and goal oriented designs, rather than trying to fit the goals into the mold of traditional web app layouts. Start to finish the project took 4 days.  Both Allan and I were extremely satisfied with the final design, and I was thankful to get to work with Allan and LessEverything, and look forward to working with them in the future.


You can see the new site live at http://lesstimespent.com/

Categories: Design Process , Web Design | Comments: 3 Comments

© Copyright 2009 Josh Puckett, 55Eleven.com. This site validates and looks beautiful too!