One of the main areas that I am focusing on with the rewrite of Property Center is the user interface (UI).   My goal is to remove unnecessary complexity from the UI; not only making everyday tasks faster to accomplish but also reducing the learning curve for new users.  I’ve been using Balsamiq Mockups to quickly hash out ideas rather than spending valuable time doing it with html or some other slow process.

Updating the header

For example, I’ve been wanting to update the header to include a way for people to search and quickly get things done.

My first iteration looked like:

I still do like this layout because it puts everything in one row.  My main concern is that the drop downs would confuse people who are used to using links for user settings, logging out, etc.

With the next iteration, I moved search and quick actions to their own row:

I think this helps simplify the structure and it uses familiar links for user settings and logging in/out.

The last iteration improves on the previous by cleaning up some unnecessary labels, etc:

Overall, I think this is a good compromise of form and functionality.  It gives novice users a familiar experience with links for logging in/out as well as providing a more advanced UI for those who want to perform quick actions.

This post begins a series of posts describing the process I am going through to rewrite and modernize my online property management application.  The end result will be relaunching the project as a rebranded application.

What are the goals?

There are many areas that need improvement from their current state.  A few of those areas are:

• Database structure
• UI Design and User Experience (UX) optimizations
  • Menu placement
  • Easier CMS user experience
  • Better tenant login experience
  • Ensure a consistent UI and use AJAX/popup dialogs in a controlled manner
• Lacking features
  • Site search
  • Multiple payment processor options for tenant payment
  • REST based API
  • Data import/export
  • Postal mail options
  • Tenant credit screening
• Performance tweaking
• Strong documentation with page specific help
• Pricing – I have exciting plans for revamping the pricing model.

What is the plan to get this done?

Technically speaking, the site will be upgraded to use Asp.Net 4, MVC2, NHibernate 3.x, StructureMap 3.x, and jQuery 1.4 running on Windows Server 2008 and Sql Server 2008.  I’ll be using Ayende’s fantastic NHProf tool to validate my NHibernate usage.

The database updates are nearly finished.  These updates include adding logical delete and other audit trail enhancements, full text search, and quite a few structural improvements which should translate directly to application speed improvements.  While designing an app from the model layer first is ideal, sometimes it leaves many desirable areas of improvement with relational db design and performance.  Upgrading an app is a different beast than starting from scratch, and I felt that the best place to start was to get the db in order.

I’ll soon begin to mock up the new user interface (UI), using Balsamq Mockups.  I’ve written about using Balsamiq in the past and still feel that it is one of the quickest and easiest ways to create useful wireframes.  I’ll add additional posts describing how I use Balsamiq to illustrate/prototype the major portions of the application.