Department of Approvals

Reviving Windows Phone's Metro UI for an Engineering Firm

Department of Approvals is an engineering firm specializing in MEP Engineering and Energy Benchmarking services. They wanted a sleek, content-centric website on which to showcase the numerous projects they'd tackled across New York City—and in a specific style: that of Windows Phone's Metro UI system.

Branding

Design Brief

The responsive website had to combine static, brochure-type sections and an editable "projects" section. Similar to the original website, an announcement banner should sit at the top of the page.

Metro Design System

Typography

Color

The entire system would be in greyscale, except for the announcement banner. I toned down the Metro UI blue so that it would still pop without detracting from the landing page content.

Web Design

Animation

For an app-like experience, I implemented Metro UI's "flip" page transition between home page (the navigation menu) and subpage routes.

Within subpage routes, transitions should appear to be on the same surface: when users select different headers and subheaders, page content enters and exits the screen via a smooth "push" animation.

UI Elements

I chose a flipbook-like design for the image gallery component, and added a "mirror" effect to add depth to the project pages.

Other UI elements—buttons, text inputs, to multiselect inputs—also align with Metro UI.

Development

Technology Stack

I developed this website using Nuxt 3 and Tailwind CSS. For the backend, I used Google Firebase's Firestore, Authentication, and Storage. Having the entire backend on the cloud allowed for a seamless client handoff.

Highlighted Features

Page Animations

I used three Nuxt Layouts to coordinate page layout and transition animations. The first, default layout, was as a simple wrapper that contained the Navigation Bar and the Announcement bar. The second and third—the header and subheader layouts—updated based on the current route. In the example below, the opacity and position of the header (fire protection) and subheader (sprinkler) are handled within their layouts. A middleware function compares the to and from routes, and assigns a corresponding "flip" or "push" CSS animation.

Here's an example of the nested layouts for the path /services/fire-protection/sprinkler:

Here's a peek into the layout logic for the header layout.

<script setup lang="ts">
//layouts/header.vue
import { routes } from "/assets/routes.ts";
import { useWindowSize } from "@vueuse/core";
import { useElementSize } from "@vueuse/core";
const headers = ref(null);
const { width: windowW } = useWindowSize();
const { width: headersW } = useElementSize(headers);
const route = useRoute();
const page = route.path.split("/")[1];
const thisHeader = computed(() => {
  return qsDecode(route.path.split("/")[2]);
});
const thisIndex = computed(() => {
  return Array.from(Object.keys(routes[page])).indexOf(thisHeader.value);
});
const hasSubheader = function (route: string) {
  return routes[page][route][0] !== undefined;
};
const headerOffset = computed(() => {
  // retrieve header offset that shows the header option before and after the current/selected one.
  // using windowW (window width) and elementW (element width) for calculations
});
</script>
<template>
  <div class="w-screen overflow-y-auto" style="height: calc(100vh - 7.5rem)">
    <nav
      id="headers"
      v-if="header !== 'admin'"
      class="header flex whitespace-nowrap gap-6 mb-3 h-12 w-full overflow-y-visible [@media(max-width:767px)]:scrollbar-hide page-padding-x transition-all duration-300 ease"
      :style="`transform: translateX(${headerOffset});`"
    >
      <nuxt-link
        v-for="header in Array.from(Object.keys(routes[page]))"
        :key="header"
        :class="header === thisHeader ? 'opacity-100' : 'opacity-40'"
        :to="
          hasSubheader(header)
            ? `/${qsEncode(page)}/${qsEncode(header)}/${qsEncode(
                routes[page][header][0],
              )}`
            : `/${qsEncode(page)}/${qsEncode(header)}`
        "
        >{{ header }}
      </nuxt-link>
    </nav>
    <div id="header-slot" class="w-screen overflow-x-visible">
      <slot></slot>
    </div>
  </div>
</template>
<style>
.header-left-enter-active,
.header-right-enter-active,
.header-left-leave-active,
.header-right-leave-active {
  /* pageTransition animations (assigned if detected by middleware) */
}
</style>

Custom Content Management System (CMS)

Using the custom Content Management System, staff could easily create and edit projects.