Alexandria Real Estate

Redesign concept for a company I admire, along with a Keynote Data Visualization sample

Image alt tag
Alexandria Real Estate

Before on top. After on bottom.

Modernizing UI and Design Patterns: Nav & Banner Area

Overall the website is a bit outdated. The page body floats over top of a large background image/texture.

There are two different overlays on top of an image which produces a crowded feeling and increases the cognitive load.

There is no focal point or call to action.

Improvements

  • Full width, centered design setting up for a responsive mobile option.

  • Better contrast for Accessibility and readability.

  • Cohesive navigation that removes redundancies

  • Call to action button

  • Cleaner text layouts

Alexandria Real Estate

Before on top. After on bottom.

Appearance Follows Behavior, Increasing Clarity, & Delightful Interaction

There was a lot of text on the page and mixture of both video and blog content.

Improvements

  • Appearance follows behavior with strategic use of layout and color to differentiate blog articles from video content.

  • Added a delightful interaction which flips the information card to show the blog summary and button. See the prototype below for interaction visualization.

  • Created more white space to reduce cognitive load and create a more appealing design.

Interactive Prototype

Here is the limited redesign of the homepage. It's best viewed on Desktop.

View the Prototype in Axure for interaction that's a bit smoother but you can also view below.

Make sure you hover over the 'Learn' section elements to see a delightful interaction. Also note that I added an example of a graph or chart type that could be added to show investors key information.

Data Visualization

Alexandria Real Estate

Information Presented in 10Q Report

Data Visualization: Before

Here is some information presented in a basic table format from an publicly available 10Q Report

Alexandria Real Estate

Data Visualization: After

Here's how I would visualize the information in a more compelling way. Check out the Keynote presentation below to see it animated in stages to support a presentation of this information.

Keynote Presentation Sample

Here are a few slides of a presentation to show how I would begin to animate and design a Keynote presentation for Investors that would highlight key information from a Q10 Report.

Alexandria Real Estate