Mark Cunningham is a New York based interior designer who has worked on a wide range of residential and commercial buildings. He has been written up in Vogue and the New York Times Magazine, and has been included on the yearly list of America’s top designers by Elle Decor and Architectural Digest. For his site, I wanted to create an immersive visual presentation of his work that encouraged users to dive in and explore the different projects.
In my initial conversation with Mark, I asked him to identify a list of words to describe the site he wanted to have. We narrowed the list down to three finalists that would serve as a starting point for the design:
Clean - Mark’s personal style is simple and precise. As a reflection of him, the site should be too.
Innovative - We looked at many sites of other interior designers and they often felt repetetive. It was important that Mark’s site be distinct.
Editorial - Mark wanted the site to have the feel of a magazine spread.
My next step was to examine Mark's existing site. The first thing I noticed was that navigation was laborious. It took three clicks to go from the homepage to a project page, viewing a second project took two more clicks. The old site architecture looked like this:
I wanted to remove as much friction from the process as possible, so I simplified the site architecture to every page is reachable witha single click. The new architecture looked like this:
To make this possible, I would need a more robust navigation menu that allowed users to jump directly between project pages. Creating this in a way that did not overwhelm Mrk's imagery or detract from the overall site experience was one of the main design challenges of the project.
My first solution was to create a single work page that hosted every image and allowed users to switch between projects with a sub-navigation menu of project links. This was done using the Isoptope Javascript plugin, which hides and shows different sets of images without the page having to reload. I liked the seamless viewing experience it created and the fact that the sub navigation menu presented all the options upfront to the user, leaving no opportunity for confusion.
However, Mark preferred the navigation menu I made for the mobile site.
He liked the hamburger menu functionality and how the images stood on their own without the the sub-navigation menu text distracting.
On desktop, I recreated this experience with a dropdown menu that was triggered by hovering over "Work" in the main navigation menu. Each project was now broken out as its own page.
To create the editorial feel Mark identified, I organized the images into a grid - similar to how a magazine might be laid out. I wanted the images to be arranged in a manner that drew the eye down the page, presenting the project as if the user were on a walking tour of the house.
We selected over 200 images to use on the site and they came in all different shapes and sizes. To fit them into a grid that would scale correctly with the page, I formatted their shapes into standard ratios for portrait and landscape orientations. I then created three different types of row layouts they could be placed into.
Images with the same orientation could be placed side by side.
Images with different orientations could be placed next to each other with a ratio of 2:1.
For special images we wanted to highlight, we made them full width.
At a mobile size, the site uses responsive design to shift each image to 100% width in a single column.
Lite.fm was my final project for the Javascript course I took at General Assembly. The site is comprised on a single playlist of YouTube videos (each intended to be a song) that is generated through a form located at the top of the page. Any user can add a song to the playlist by pasting a YouTube link into the form. When the form is submitted, the site calls the YouTube API to retrieve the video information, stores it in Firebase, and adds the video to the top of the page.
The concept was inspired by the way that my friends and I share music over email. I have discovered a lot of great music through them, but the links are scattered across emails and become lost. With lite.fm, my goal was to collect music in a centralized place to form a continuous listening experience and make the catalog more explorable.
As a next step, I am adding upvoting and sorting functionality so that users can access the most popular songs. I am also working on a Chrome extension that allows the user to add a songs directly from a YouTube page.
Odyssee is a world composed entirely of gifs that the user must navigate. The site architectures is a 10 x 10 grid of "slides," each of which is composed of a full screen gif, a set of navigation controls and often some other kind of elements. Certain slides contain puzzles the user has to solve to continue. The goal is to make it to the end of the path.
The New York law firm Sullivan Cromwell LLC has a network of blogs on its site that cover different legal topics. This was a design project (they wanted the programming to be handled by their in house team) for their tax law blog - Tax Law Today.
The firm wanted to evolve the site's look and improve the overall user experience. At the start of the project, I spoke with representatives from their Marketing department. We identified these goals for the project, as well as certain limitations.
While they wanted to give the page a cleaner, modern design, there were certain restrictions on design elements because they were standard across their blog network. The color scheme, typeface, header image and certain page elements had to remain in place.
The way to improve the site most significantly was to improve its page layout and create an information hierarchy to guide the user. The blog consisted of two types of posts: long form pieces written by the firm’s lawyers, and daily roundups of news links from other sites. The long form pieces represented the blog’s core content, but they were quickly buried on the blogroll by the news posts. News posts were added daily, while long form pieces only once or twice a week. The previews of the two post types had the same visual format, so there was little to distinguish them from each other. Their was also an About section that described the tax blog pinned to the top of the blog roll that pushed content below the fold of the page. As a result, the core content of the site was hard to find.
To clarify the user experience, I broke these content types out into separate sections. The main blogroll was reserved for the long form pieces and daily news posts were moved to the right rail. The current day's links were shown in a list, with a link to an archive page. The About section was moved to its own page.
Sullivan Cromwell's motto is “Quietly confident.” My goal was to communicate that with a professional design and an efficient user experience. The site is still being developed by Sullivan Cromwell's team, they are planning to launch in summer 2018.
JZ Banking Services is a private equity group based in the Netherlands. They needed a company website, and wanted it built on Wordpress so that they would have the ability to made content edits. They wanted a modern look and feel that still maintained the level of professionalism that you would expect as a finance company.
Sam Dakota is a New York based artist. For his portfolio site we wanted to create a design that complemented his artistic style and a user experience that made it fun to look through his work. He created a custom wallpaper pattern to serve as a background and I used the localScroll Javascript plugin to create a navigation system that lets users seamless toggle between projects (this is something I later explored in more depth with Odyssee).