Before on top. After on bottom.
Alexandria Real Estate
Redesign concept for a company I admire, along with a Keynote Data Visualization sample
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
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
Information Presented in 10Q Report
Data Visualization: Before
Here is some information presented in a basic table format from an publicly available 10Q Report
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.
