777 tower-los angeles

Case Overview

Reframing 777 Tower from a static property page into a guided leasing platform.

Instead of presenting the project as long paragraphs, this section breaks the context, business goal, and website problems into a more visual and interactive system.

The Company

777 Tower is a Class A office building in Downtown Los Angeles with over one million square feet of leasable workspace. Its digital presence needs to support both brand perception and practical leasing decisions.

The Goal

The redesign focuses on creating a responsive website that feels premium, easier to navigate, and more useful for prospective tenants comparing spaces, amenities, location, and leasing options.

The Challenge

The original experience felt information-heavy and passive. Visitors needed a clearer path from discovering the building to understanding value and taking action.

Client Commercial Real Estate

Timeline June 2025 — September 2025

Role UX / UI Design

Focus Leasing Experience

777 Tower Leasing Flow

Downtown Los Angeles Elevate Your Workspace Premium office space with a clearer path to leasing.

01 Explore

Building, gallery, location

02 Evaluate

Amenities, floor plans, value

03 Inquire

Contact leasing team

Navigation Clearer page structure

CTA System More direct leasing path

Responsive Desktop + mobile flow

Problem Signals

What needed to be redesigned?

Hover or click each card to see how the original website problem translates into a design opportunity.

→

Design Opportunity

Build a stronger first impression.

Reposition the website as a premium digital entry point that quickly communicates what 777 Tower offers and why it matters to potential tenants.

Research

Understanding what makes tenants move from browsing to inquiry.

Through user interviews and competitive analysis, the research focused on how prospective tenants evaluate office buildings online, what information they prioritize, and where the original experience created friction.

What were users trying to understand?

The research aimed to understand how users compare office buildings online and what information helps them feel ready to contact leasing.

What information do users look for first?

What creates uncertainty during exploration?

What would make users more likely to inquire?

Two methods shaped the redesign direction.

I combined competitive analysis with user interview insights to identify both market patterns and user-facing pain points.

Competitive analysis of nearby office building websites

User interviews around leasing expectations

Pattern mapping across clarity, navigation, and conversion

Clarity mattered more than visual volume.

Users were willing to explore visual content, but they expected the website to quickly answer location, availability, parking, amenities, and contact questions.

Location and convenience are early decision factors

Leasing details need to feel easy to access

A clear CTA path is necessary for conversion

Research Dashboard

Live Signals

Clarity & Usability Score

Existing site experience showed friction around navigation, leasing information, and conversion clarity.

68 / 100

Question 01 Where is the building located?

Question 02 What spaces are available?

Question 03 Is parking and access convenient?

Question 04 How do I contact leasing?

Insight Users scan for practical details first.

Friction Static content slowed decision-making.

Opportunity Guide users toward leasing inquiry.

Competitor Analysis

Turning the competitor image into an interactive signal map.

Instead of placing the analysis as a static image, this board lets visitors explore key market gaps and how they informed 777 Tower’s redesign opportunity.

777 Tower competitor analysis signal map

Competitor Signal

Functional information is useful, but not enough.

Competitors often provide practical leasing information, but many lack a stronger storytelling layer that helps the building feel premium, memorable, and conversion-focused.

User Expectations

What users needed before reaching out.

These expectations became the bridge between research and design decisions, helping the redesign focus less on decoration and more on leasing clarity.

Location & Convenience

Users wanted immediate clarity on where the building is, nearby transit, surrounding amenities, and daily convenience.

Design response: make location, neighborhood value, and accessibility easier to understand earlier in the journey.

Parking & Accessibility

Parking was a critical decision factor. If this information felt hidden, users became uncertain and less likely to continue.

Design response: surface parking and access details as decision-support content, not secondary information.

Clear Leasing Information

Users expected to quickly understand available spaces, layout, basic pricing indicators, and how to contact leasing.

Design response: create a clearer leasing pathway with stronger CTAs and less friction between browsing and inquiry.

Research Findings

Turning personas and storyboards into a clear research system.

Instead of showing all research images at once, this section lets viewers switch between persona boards and journey sketches while connecting each artifact to a specific leasing insight.

Persona Journey Lab

Current User Case

Maggie needs a more cohesive building experience.

Maggie explores the building for meetings and partnerships, focusing on amenities, visitor experience, and overall credibility. When information is scattered, it limits her ability to engage.

Maggie Persona Board

Persona Artifact Maggie Lindemann: Partnership Visitor

This persona highlights how a visitor or collaborator evaluates the building through credibility, amenities, access, and the quality of the overall experience.

01 / 04

Design Opportunities

From research signals to HMW directions.

Based on the research feedback and competitor landscape, I narrowed the redesign direction into three opportunity areas.

How might we support fast and confident leasing decisions?

Users wanted to quickly evaluate whether the building fits their needs before investing more time.

How might we make complex information clear and actionable?

Dense information created friction when users were trying to compare location, amenities, parking, and pricing.

How might we create a seamless path from exploration to inquiry?

The previous experience did not always make the next step obvious after users found useful information.

Addressing User Needs

Structuring the leasing journey before moving into wireframes.

After identifying user needs, I reorganized the site structure into clearer paths for prospective tenants and current tenants. The sitemap helped define the information architecture, while the low-fidelity wireframes translated that structure into a responsive page system.

IA Design Studio

Information Architecture

Separate user paths without disconnecting the experience.

The sitemap organizes prospective tenant needs, current tenant services, gallery content, and leasing actions into a clearer structure so users can move from exploration to inquiry more naturally.

Sitemap Structure

View in Figma

Sitemap Artifact A clearer structure for leasing decisions

The sitemap separates exploration, leasing inquiry, building information, and tenant services while keeping the overall experience connected.

01 / 02

Design Translation

From research needs to layout decisions.

The sitemap and low-fidelity wireframes helped turn user expectations into a more usable leasing experience before moving into high-fidelity UI.

Clarify the navigation system.

Core sections like Gallery, Homepage, About, Leasing, and Tenant services are structured around different user intents.

Prioritize leasing actions.

Inquiry, availability, floor plans, and contact moments are surfaced as key conversion paths instead of hidden secondary details.

Build responsive page patterns.

Low-fidelity wireframes define the hierarchy and content rhythm before applying visual styling and high-fidelity interactions.

Building the Website

Turning brand direction into a responsive digital system.

After defining the structure, I developed the visual system for 777 Tower through logo exploration, a clean professional color palette, and visual references before applying the system to final high-fidelity screens.

Design System Studio

Logo System

The identity starts from the building’s architectural form.

The logo exploration simplifies the tower’s cylindrical shape and grid-like facade into a minimal mark that feels architectural, clean, and recognizable.

Logo Direction

Brand Artifact Logo inspired by the tower’s architectural identity

The mark evolves from a simplified tower silhouette into a more refined visual identity that supports a premium commercial real estate experience.

01 / 03

High-Fidelity Build

Applying the system to the final website experience.

After separating the brand system from the final interface, the high-fidelity stage focuses only on how the redesigned 777 Tower website works visually and functionally across key leasing, gallery, about, and tenant moments.

High-Fidelity Screens

View Figma Prototype

Final UI Artifact High-fidelity screens applying the full product system

The final UI connects branding, navigation, leasing content, visual storytelling, and tenant-facing functionality into one cohesive responsive website experience.

04 / 04

01 / Visual Hierarchy Clearer content rhythm

Each page uses stronger spacing, CTA hierarchy, and modular content blocks so users can scan leasing information faster.

02 / Leasing Conversion More direct action paths

Availability, tours, contact moments, and floor-plan information are presented as visible decision points instead of hidden secondary content.

03 / Responsive System Consistent across key pages

The high-fidelity screens apply the same visual system across homepage, leasing, about, gallery, and tenant service flows.

Design Translation

From visual identity to interface execution.

Each artifact helped move the project from structure to final UI, making the website feel cleaner, more credible, and easier to use.

Translate architecture into brand identity.

The tower form, vertical lines, and minimal proportions informed a recognizable logo direction.

Create a structured visual system.

Blue accents guide attention toward key actions, while neutral tones create clarity and space.

Apply the system to high-fidelity screens.

The final screens connect branding, hierarchy, content structure, and leasing CTAs into one cohesive experience.

Prototyping & Testing

Testing the final experience through interactive user flows.

The prototype was structured around tenant mental models, helping users move from exploration to leasing inquiry with clearer navigation, transparent information, and stronger decision support.

Final Prototype Testing Window

View in Figma

Testing Focus Can users move from exploration to inquiry?

Use the prototype to test whether leasing information, building value, and CTA paths feel clear enough to support action.

Live
Test

Testing Goals

What the prototype needed to validate.

The final prototype was used to check whether the redesigned experience supported key user needs: clarity, confidence, and a smoother path toward action.

Navigation clarity

Users should quickly understand where to find leasing, building, gallery, and tenant information without scanning through scattered content.

Decision support

The experience should surface availability, amenities, parking, location, and contact details in moments where users need them most.

Conversion confidence

Users should feel ready to take the next step, whether that is scheduling a tour, contacting leasing, or submitting a tenant request.

Final Thought

Turning a static property site into a decision-support platform.

777 Tower already had a polished in-person experience, but that clarity was not fully translating online. This redesign focused on making information easier to find, easier to understand, and faster to act on.

What changed through the redesign?

The original experience felt more like a static brochure. Through research, sitemap restructuring, visual system development, and prototype testing, the website became a clearer digital extension of the building.

The final direction supports both prospective tenants and current tenants through clearer navigation, more visible action paths, and stronger leasing-focused content hierarchy.

Moving forward, the focus is no longer only presentation. It becomes about launch, optimization, and turning user engagement into measurable conversion.

Shift 01 Static listing to guided journey

Shift 02 Scattered info to clear structure

Shift 03 Browsing to inquiry-driven action

View Final Prototype Back to Testing

Outcome Dashboard

CSS Only

Clarity Structure Conversion Growth

Navigation

Leasing

Trust

Sitemap

Content

Flows

CTA

Inquiry

Action

Testing

Launch

Optimize

Outcome 01

Users can understand the site faster.

The redesign reduces information overload by making key sections, leasing details, and tenant tasks easier to scan and access.

Outcome 02

The experience feels more organized and intentional.

The sitemap and page hierarchy separate prospective tenant needs from current tenant tasks while keeping the overall platform cohesive.

Outcome 03

Key actions are easier to find and complete.

Leasing inquiries, tour scheduling, availability, contact, and tenant service actions are treated as primary pathways instead of hidden secondary content.

Outcome 04

The site can evolve beyond launch.

The final direction creates a stronger foundation for future testing, content updates, performance tracking, and conversion optimization.

Key Takeaways

What I learned from this project.

This project helped me connect visual design, information architecture, and UX strategy into one complete website experience.

Visual polish only works when structure is clear.

A premium website still needs simple navigation, clear hierarchy, and practical content organization to support user decisions.

Different users need different paths.

Prospective tenants and current tenants should feel connected to the same brand, but their tasks need to be separated clearly.

Good UX turns interest into action.

The strongest design opportunity was not just making the site look better, but helping users move from browsing to inquiry with confidence.

Turning a static property website into a conversion-driven leasing experience.