Lehigh Office of International Affairs

This is Global Learning

Lehigh University Web Design on Desktop and Mobile

Quick Overview

The Background

While Lehigh University calls Pennsylvania home, their institution is a global powerhouse. For years, their Office of International Affairs provided one of the best international learning programs in the U.S., but struggled to reflect their impressive impact online. We wanted to help change that. We locked arms with our longtime partners at Lehigh University to design a new website that positioned their school as a choice destination for the best students around the world.



An intuitive website architecture that meets the school’s strategic direction

Design Boldly

An innovative interpretation of existing brand standards

Build to Last

A system for a seamless and sustainable delivery of front-end web development


Elevating the Digital Strategy

With a new institutional strategic plan in place and a convoluted existing site architecture, the outgoing web design needed to fundamentally change in order to serve its purpose as a recruiting tool for Lehigh University’s prestigious international learning program. Therefore, our digital strategy process started at the ground level and worked up toward a completely reimagined plan for Lehigh OIA’s website.

Outlining Lehigh OIA’s Goals

First, we clarified the goals. Then, we went to work: scrutinizing the existing brand identity, the industry, the competitors, and most importantly, the target audiences.

Simplicity Starts With a Sitemap

After a comprehensive digital content audit, we developed a new site architecture that simplified the UX design and made the most important content easily accessible for all users.

A Tailored Website Experience

Creating detailed user profiles became a necessary step to planning the reimagined site. These personas provided more detailed information about the target audience, what they cared most about, and how we should map and prioritize content.

Typography & Color

Lehigh University had a strong existing brand identity that served as a starting point for our web design exploration. We took the existing color palette and typography and pushed them into a bold new direction, reflecting the amazing experiences Lehigh’s students encounter in this international education program.Lehigh University Web Design Color Palette

Lehigh University Website Typography Montserrat Black

This bold font gives prominence to the site’s most important headlines.

Lehigh University Website Typography Merriweather Light

Serving as a compliment to the strong font used in headlines, this sophisticated, elegant type balances the overall design.

Lehigh University Website Typography Montserrat Light

This sans serif brings an air of modernity and cleanliness to the design, while serving as an exceptionally readable font for body copy and smaller text.


Higher Ed Web Design

Lehigh’s Office of International Affairs is a unique program, though still sits under the umbrella of a large, distinguished institution. Our challenge was clear—we needed to reflect their individual identity while staying true to the brand standards set forth in the overall Lehigh University brand guidelines. This required a little creative thinking and a lot of time dedicated to understanding what made this department so special.

Custom Iconography

We drew unique illustrations for the site to help elevate the user interface design while creating a functional system to quickly communicate information.

Sharing Stories From Around the Globe

Throughout our discovery, we learned of all the incredible stories from students who are part of this international program. We strategically designed space throughout the website to tell these stories—stories which bring the amazing experience of this program to life.

Higher Ed Web Design on Tablet

Seamless Web Development

For this project, we worked closely with Lehigh’s internal development team to ensure a smooth handoff of our front end design work. Using an interactive tool, we packaged all the necessary files, styles, animations, UI elements, and more. This collaborative process ensured the final build appeared as visually stunning as the design mockups themselves.

Mega Menu. Mega Efficient.

We proposed a full-width “mega menu” to consolidate and better organize the navigation system. As functional as it is beautiful, this element allowed us to improve the user experience and thus the overall effectiveness of the design as well.

Everybody here is very impressed by and pleased with the new website. It makes great use of our best assets—our photos and our stories.

More Like This

Digital Strategy // Web Design and Production Management // Custom Infographics

Push10 Arrow

UX Planning & Strategy // Web Design & Development

Push10 Arrow