Irvine Company

Office Properties

Goals

The Irvine Company is California’s premier real estate provider with a portfolio spanning retail properties, resorts, residential properties, commercial offices, and apartment communities. The office division, Irvine Companies Offices (ICO) creates workplace communities that inspire and innovate with more than 500 office properties spanning four California regions and Chicago. They needed a website to improve leasing growth completed in an accelerate timeframe for putting Adobe technology into market.

Target Audience

Irvine Company Office Properties targeted prospective tenants, current customers that lease office space, and commercial real estate brokers.

Challenges

The UX and design process was completed in an accelerated timeline. Page templates were completed in batched sets in an overlapping waterfall method.
Designs were initiated by another vendor.
The fully responsive site included features such as:
- Live inventory of all available office suites in the client portfolio
- Predictive search and guided search
- Multi-faceted search to allow prospects to customize their search criteria across square footage, building type, and space features
- Amenities map
- Dynamic maps to help users visualize search results of the properties
- PackageIt - a bookmarking feature that allowed prospects and leasing agents to build a collection of communities and suites/floorplans to share the online Package with colleagues/clients via a link, email, and in a clean printable version.

Execution

As the lead designer on the project, I was asked to work on-site at Irvine, California during the wireframing and design phase. Because of the aggressive timeline, I managed another designer to produce the deliverables. We divided the 24 page templates into 5 batches and they were delivered in an overlapping waterfall timeline.

24 Page Templates

Homepage - Guided Search Feature
Core Interior
Community Detail - For Prospective and Leasing Agents
Building Group Detail
Floorplan Detail
Community Detail - For Customers
PackageIt - Edit Mode, Preview, and Recipient View

Market
Our Thinking
Vibrant Workplace Communities
Promo/Marketing Variation 1
Promo/Marketing Variation 2
ReadyNow
New Development
Property Revitalization
Contact Us

Management Team
Sustainability
About Us
FAQs
News & Press
News Article
Elevate Blog
Blog Detail

Wireframes

I had inherited wireframes and designs from a previous vendor. When they could not meet the client’s business goals, I was tasked to reevaluate the work, make enhancements where necessary, and produce the remaining page templates for large and small viewports. I led working sessions with the client to do rapid low-fidelity wireframes in paper and whiteboard sketches, that were further refined and delivered to the client in Axure. Also, I had peer review cycles with the developers and a business analyst to document the technical requirements for the components and page templates.

Below are a few wireframes developed for this project.

Guided Search Feature on the Homepage

Promo/Marketing Variation 1

Community Details for Leasing Agents and Prospective Customers

New Development

Designs

Since the previous vendor had produced the design for the Homepage and Community Detail page, I needed to maintain the aesthetic throughout the remainder of the site. New components that I recommended and developed needed to carry the same visual language. Designs for the large and small viewports were created for all the page templates and a few medium viewport designs were made for selected pages.

Below are a few designs from this project.

Guided Search Feature on the Homepage

A multi-step interactive feature was created so the client can serve the relevant content based on the user. The client determined that the three target users were: future customers, brokers, and current customers. In the wireframing and visual prototypes, I showed the questions and selections for a future customer. They first needed to select a market and then a location based on the market. These were represented using visual tiles with the option of hover states serving additional information about the location. Next, the user entered the minimum and maximum square footage their business needed. If the person was unsure, the user then provided the number of employees they have currently and the projected amount in the next two years. This then provided the recommended square footage. Then the user selected one or more building types. In the final step, the user chose the timeframe in which their business was planning on moving. This served up a results page showing all the available properties based on their selections.