The Devil Is In The Details
Milestone Mondays
Current Project : Bitter Renter
The no-nonsense guide for first-time renters in NYC.
Though I didn’t get to start building this past week I’m at least 95% done with the screens for the entire flow. What I want to share today is a few decisions and discoveries that stood out to me.
The Nav
Although I ended up with a version similar to what I designed on the first pass I tried exploring a few alternatives for the nav. This included both expanded and collapsed versions with icons, a hamburger and even introducing a back button. However, I dismissed the icons because it didn’t feel right this time around and came to the conclusion that the menu was too important to hide. I’m still working on potentially incorporating a back button but haven’t found the perfect spot yet.
I landed with a sidebar which now has a background color and integrates nicely with the content (as you’ll see later).
I also established an active state style. The dot (seen below) was actually as a result of an earlier nav style where each previously viewed page would appear with a line through it. The dot was initially used to differentiate the items and while I moved away from the idea, the dot stayed behind and I think I’m a little smitten by it (I know…I’m ridiculous).
The Layout
From the early days of design I thought a double column layout would work perfectly for this idea, so most of my iterations focused on exploring the look and feel. Here were a few:
The concept behind this layout was that the left side would contain supporting content for the right side which would contain actionable items.
Although a few of the latter pages display informative lists versus actionable items, for the sake of consistency I got a little creative. In the screen below, the left side serves as the expanded view of the right side (which, if you think about, is still “supporting content” ;).
The Map
Since I’m not much of a illustrator I was particularly proud of the detailed map I created for the neighborhoods screen. Even though I had a little help from a few found images of the boroughs I still had to outline every relevant neighborhood on the map. It was tedious but I knew I had to be this meticulous so I would have more control later in the code. I’m excited to play around with controlling elements in an svg through code.
Missed Content
Since this whole guide has been based off my own experience, I forgot about scenarios I never experienced like subletting or renting a room. Luckily, a friend brought this to my attention after giving me feedback on the design so I’ve added a screen to support that.
What do you think?
The design phase for this project is taking longer than expected but every other day I uncover a detail that I need to explore and attempt to perfect. I’m hoping Bitter Renter will be useful to a lot of first time renters in NYC so I’m doing my due diligence in this phase.
The goal for this coming week is to get feedback from some potential users and dive into some code!
Have fun creating,
– Kim
Kim is a chronic creator, designer and coder. Maker at @bybourn, curator of Hashtags Unplugged and creator behind foundermantras.com , sendthanks.to and hshtags.com.
