Design Lessons Learned Example
February 27, 2010 1 Comment
One of our top posts so far this year is our post about design lessons learned in 2009. We provided suggestions that might help you successfully complete your design project along with examples of our work. The key tips we presented were as follows:
- Start from a creative brief
- Use multiple visuals
- Plan to start over at least once
At the end of the post, we showed a hint of a work in progress. We now can say the mock-ups were from our new product hinventory.com. You can learn more about our launch in the hinventory.com blog. We thought we’d go through the design steps in more detail to help illustrate the tips presented above.
hinventory.com started from a real need in my own life. I had previously gone through the painful process of cataloging everything I owned in excruciating detail. The process was time-consuming and I soon gave up maintaining the list as do most people. Late last year, I was thinking about the simplest way to get this done when it hit me that all I really wanted was take photos and mark the significant items in the photo.
First, we wrote some specs and did a creative brief to better define the product. I can honestly say I am addicted to the creative brief at this point. There’s nothing like collecting your thoughts to focus what you are trying to do. I may even start doing them for house projects or working in the garden! The graphic below is our proof of concept piece that went with the creative brief to help define the product.
Once we understood the direction, we set about developing the product. The first version was intended to be a working prototype or beta that we hoped to get some users testing. The interface is presented below. Feedback on the product confirmed the market opportunity. But…
… the interface faced some challenges. When developing functionality you sometimes make design compromises in the name of productivity you later regret. This interface looks like it belongs on the TV show Romper Room for those of you who remember that. The logo and banner are straight from a 3 year old’s bedroom. It doesn’t work, I know.
Lesson learned. Start over. Get some fresh eyes. Maybe hire a graphic artist. We did. We used one of our favorite artists in Costa Rica and she didn’t disappoint us.
The above interface is the one we selected over the examples in our lessons learned post. The interface is clean, intuitive and aesthetically pleasing. Putting the content inside boxes though can lead to problems later on. If I had to list a fourth lesson learned from last year, it would be to design for functional expansion and page growth. We did another round of mock-ups using less restrictions on the actual page content.
We selected number 3 as the final design and then moved on to the logo. Here are the samples we created before sending a few select ideas to our artist. Using multiple visuals proved key for illustrating to our artist what we liked and what we did not.
We ran into one final design issue during the course of development. Take a look at our iPhone application mock-up below and see if you notice the issue. We created the mock-up ourselves. We’re launching the app next month so keep your eyes and ears open.
Do you see the issue? The problem was the markers. They are barely visible. The same issue existed in the Web version, but we hadn’t noticed it as much until we saw the photos on the iPhone. Marking items is essential to both applications. We moved to a red marker inspired by what you see on a map. The final interface markers and all is displayed on our product page.
You can see the product yourself by signing up on hinventory.com and using the product. We hope you do.
Cheers.
