Last week, a website project I managed won an unexpected national award (we didn’t even enter it into the contest!) and I wanted to share the great news! I know that many of you are familiar with the video blogs I do for fun– but by day I’m a web consultant at Digital Evolution Group. We’re a 30′ish person e-consultancy in which I lead and manage the strategy, development, creative design and deployment of Projects (largely socially website focused).

A few months ago, we were tasked to redesign the corporate website for Entertainment Properties Trust (EPR). They are a publicly traded REIT and is the largest owner of entertainment related real estate in North America, owning megaplex movie theater properties, entertainment retail centers and other specialty properties in the US and Canada. Their portfolio has over 7.1 million square feet of properties and over $1.4 billion of assets. Translation? They’re a pretty darn-big-deal. Chances are if you have ever been to an AMC, you walked on property they own. Specifically here in Kansas City, they own the AMC 20 in Leawood, AMC 30 in Olathe and Snow Creek.

Anyways- I’ll jump to the good news. The website was awarded second place (silver) by the National Association of Real Estate Investment Trusts (NAREIT). One of the more exciting parts is that all REITs and publicly traded real estate companies were included in the competition. The “best website” category was the 1 of 3 captions they honored. Furthermore, we didn’t even enter it into the contest! NAREIT discovered it on their own!

For this project- it was a bit of a challenge. Think about it- how do you make a Real Estate company compelling? Buildings and land isn’t necessarily sexy stuff. We first set out with some ambitious Project objectives. Then we took careful time following our persona methodology and getting that right. One thing I’d like to note, we mapped out the expectations and context of visit to the website between a retail investor and an institutional investors or analyst. This uncovered some gaps of resources that needed to be present on the website, as well as influenced the naming convention of sections and pages of the website. These are two of our primary personas visiting the website, and while there are overlapping needs- there’s also clear differences in what they expect to find. One final note about the process, the entire Project team made sure the creative execution captured the personality of the brand that is greatly influenced by the leadership team. Anyone who has come in contact with the gentleman who run this company know it’s an experience in and of itself (meaning, in a great way).

Check out the website and judge for yourself. Be sure to check out the interactive flash properties map. I was pretty pleased and proud of the output. We’ve got some work to do to make it even better- but it’s a great start.

P.S. for what it’s worth, the 1st place winner Avalon Bay and 3rd place winner Post Properties aren’t even CLOSE to the quality execution of www.eprkc.com but that’s just my opinion.
–

I wanted to pass along the good word about a great book called Web Form Design. If you’re designing a website, good form design is essential. The book is over 200 pages- however, I wanted to share the “CliffsNotes” lesson in regards to alignment of text labels for a website form. This is the fast and furious version I put together (below), but go buy the book if you want the longer explanations and research/data behind the tips (i’m just trying to save you some time).

Label alignment is vital to form design and there are basic rules on when to use top-, right-, or left-aligned labels for input fields.

TOP ALIGNED
Use this method if you want to reduce form completion time for users. This design is quick and easiest for users to complete because the labels are close in proximity to the fields themselves. Users will quickly scan to see see the only direction their eye has to move to complete the form (down). The book goes into in-depth eye studies about top-aligned design- which prove it’s consistently the fastest type of layout / design to have users complete a form. Again, since it’s all compacted together, this makes it easy for users to see a clear path to completion.

RIGHT ALIGNED
This method is good users and the minimal vertical screen real-estate used. This method still allows for fast completion time, but not as fast as Top-Aligned.

LEFT ALIGNED
If you’ve got a form that you really want people to take special care and time in what data they are entering, Left-Aligned is the way to go. The amount of area the eye has to travel from the label on the left to the field on the right- this is the reason for this being the slowest of the options. However, if you have several ‘optional fields’ or ‘preference’ dialogs this is the best method to choose. Again, if you’re asking for specific uncommon data input (address information for example is NOT an uncommon data request).

As a consultant at the web development Digital Evolution Group, I’m fortunate enough to lead some pretty exciting Projects I wanted to share an excerpt from a recent abstraction I put together with my team regarding the identification of persona to guide the design of a website (below). If you use demographics or target audiences to design a website — you are likely to find yourself short changing or leaving your visitors with an unfulfilled experience when they visit your site. By identifying persona you are able to take it a step further by understanding needs and context of the users visit. I should also note, persona is only one component of several steps that makeup our methodology of designing a website, it is vital to the process (You’re also free to download this whitepaper if you’d like).

A persona incorporates the demographic and psychographic attributes of a type of website end-user (“target audience”), as well as that end-user type’s context of visit, expectations, and business situation.

Every successful web project prioritizes the end-user experience above all else. As such, you must design the website from the end-user’s perspective. Therefore, it is important to understand the demographics, psychographics, emotional/practical needs, and expectations of the end-users for which the project is intended (collectively, the “personas”, a more expansive term than “target audiences”). In this way, features and content can be designed that meets the personas’ needs and achieves the project’s strategic objectives.

• + demographic info
  + psychographic info
  + context of visit
  + expectations
  equals= PERSONA

You might think of it this way:

Imagine you are a 24-year old Caucasian male who has just landed at an airport. You have been on the plane for three hours, and need to find the quickest method of getting downtown. You take an escalator down to the main platform where you are presented with three signs: Trains, Tickets, Toilets. In this case, the set of tasks or expectations you have when you get the airport have been addressed. Based on the design of the airport, the expectations you had when leaving the airplane have been met.

However, meeting baseline expectations is only the beginning. The quality and cleanliness of the bathroom, the clarity of the train maps and the length of the line to the ticket counter is also important. Each feature must be simple and effective to leave a positive impression.

In this example, the demographics of a white 24-year-old male are certainly nice to have, but not wholly sufficient to design the layout of the entire airport. The above scenario could also be valid for a 24 year old female. This single visitor type does not provide enough information regarding the aggregate number of tasks and expectations that need to be considered during a visit to the airport.

Demographics are certainly vital in regards to task execution. For example, if the architect knows both males and females may potentially visit the airport, the term “Toilets” will allow the visitor(s) to find the restrooms. However, additional directions to two different restrooms will eventually be needed. “Trains” will allow most users to find the train platform, but once there, the destination for each user will be different.
–