Kris Clay Studios Digital Experience

About the Project

When Kris Clay Studios approached me with the need for a website, fast, I was excited to take on the challenge of a speedy design and the creation of their brand. Since they had no existing website or logo, I was starting from scratch, with only the following instructions:

1. The website needed to contain a portfolio and list of services
2. The portfolio was to consist entirely of images and renders
3. The design needed to incorporate the color blue somehow

With only two weeks to create a website and matching business cards, I didn't have time to go through the full process of designing, getting feedback, and making everything pixel perfect - I needed to skip straight to the development step, providing a functional prototype alongside my first presentation of the design. Within two days, I had researched their competitors, and presented the following as a rough idea for a webpage, including a logo in the top left corner.

Clicking on the picture will open up a full-size version to view.



After setting up a meeting to review, and discovering the magic that can happen when clients listen to the advice their designers and developers have, the following things were decided:

1. Gold would be used instead of green, and the blue would be toned down into a more grey-blue tone. This was picked because these two colors are used the most often in their interior designs. The background would also change to a cream color, rather than grey. The color palette was chosen together during the meeting.
2. The image at the top of the page would be full-screen, to allow more visual space for clients to admire all parts of the design, and not just a slice of it.
3. The map functionality, while it was shelved for possible future implementations, would be cut due to the time constraints. It could be designed within a two week timeframe, but not developed with only one person working on the project.
4. In order to preserve their clients' privacy, logos would not be displayed along the bottom part of the webpage, or even at all.
   

With an established and approved color palette, I decided to jump to their business cards before going back to the website. While it was important to continue working on the website, I could work up until the end of the two week deadline on it if need be. The business cards had to be provided to the printer much quicker. My first version presented of the business cards was approved immediately upon presentation, with no changes.

Each business card can be clicked on to open up a gallery.



With the business cards sent safely off to the printer, I could now turn my attention for the week (and a couple days) I had left to finish up their website. Because there were so many steps taken both with designing the website and copywriting, I have split the below into two sections. The design and content were both approved with no changes except for fixing some minor typos.

Designing

When designing a website, typically I would take a templated approach, where each page "level" would have a design that could be applied to all other pages of its level. With such a small website though, at only four pages, I was able to provide a more unique style for each one and make sure all the information was represented on the page in the best way, rather than forcing it to fit into a style that was originally created for a different page.

By wrapper, I'm referring to the header, footer, and main navigation of the website - along with the fonts used. Sometimes I work on the wrapper after I've designed a page, and other times I'll work on it first. In this case, I set it up first, mainly because I knew it had to be plain. Since the main focus of this website was supposed to be images, I didn't want the details in those visuals getting lost with a convoluted wrapper on every page.

The header and footer themselves were designed on my first pass of the design, and contained the logo in the upper left hand corner for simple navigation back to the homepage and constant branding, and the footer would contain only their copyright and design credit. The menu would be in the upper right corner, but would need to be accessed via a click rather than laying every page out at the top. Because the website itself would bear resemblance to the front of their business cards, with its floral white background and accent colors, I thought it might be nice for the menu to resemble the back of the business card, with strong use of the gold, blue, and black.



In this case, I worked on the fonts as part of the logo and business card design, picking Josefin Sans for its crisp and thin uppercase text, and NTR for its rounded look to further drive the geometric feel of their brand.

It had already been decided that the homepage would load up to a full-screen image, allowing clients to see a full view of their designs. Because it's not advisable to give up that much real estate on a page to a single element, I decided a slider would be a better experience. By using a fully-automated slider, there was also the added benefit of motion. After much testing, the most visually-pleasing was a slow zoom in on the image for the full time it was on the screen, following with a fade transition to the next one. When mixed with text which dropped down in time with the fade, it created a very elegant look.

A good homepage isn't just images, though. You also need some text to grab search engines and provide an overview of your product, and it's also advisable to have a call to action of some sort in order to lead your clients to the next logical page, or to drive them to a revenue-generating section of the website. Aside from the copy, which I decided to put directly after the slider, I originally had the following portfolio preview in mind:



While my client liked the idea of showcasing their portfolio, they were not planning on doing any in-depth case studies, nor did they want the names attached to the images in such a way (hence why they are all labeled as such in the above screenshot). At this time, we decided that the portfolio would be split into various categories to accommodate the large number of images, and that the categories could be displaying in this manner on the homepage instead. Though we originally had four categories to match this design, we eventually ended up with five, and had to arrange it a little differently.

The below images depict the mobile and desktop views for this reimagined space.



While the main intention of the homepage was to drive people to the portfolio, I also included several buttons below these in case someone was looking for a different page. Since there were three buttons, I decided to use all three of the main colors, with a background and border on the main button in blue and black, switching over to being fully gold for the hover state.

Having a portfolio online was the main reason Kris Clay Studios wanted a website, so I already knew this was going to be the most important page. I also knew it was going to be extremely image-heavy, with over 100 images to be displayed on the page. As someone who was responsible for development as well, I have to confess my immediate concern was load time - after all, images can take up a lot of bandwidth.

In order to address that, the actual content on this page was kept to a minimum, simply showcasing all of the photos side by side in their respective categories. Each photo was resized to a specific thumbnail size, and exported with optimal web settings. The photos were also hooked up to a photo gallery that wouldn't load until activated, so while this does result in a bit of lag when clicking on a photo, the wait is not as long as it would be if all the galleries needed to load on page refresh. This was something both the client and I felt was a fair trade-off for the surprisingly speedy load time of the page itself.

In order not to detract from the photos, the style on them was very simple - a black underline to separate each one from the next photo, that would change to gold with a simple zoom effect on the photo when hovered over. The gallery was kept quite plain as well, sitting on top of a dark overlay and containing only buttons to press for left and right, along with the image number on the top. Captions were left off per client request.

While the design of the portfolio page was simple, and did not require much effort as the development needs drove the process in this case, I did decide that the header & hero of the page should match for all pages aside from the homepage. Thinking through how this would look on a mobile device, and taking into account that almost 60px at the top of the screen would be dedicated to the wrapper, I did not feel comfortable having the hero image be any taller than 200px. This would help keep relevant content above the fold, so it would be immediately obvious to anyone looking this wasn't quite the same as the homepage. However, in order to match the homepage, I did keep a single word over the image, which serves as the page header.

I'll admit, the services page was a bit of a challenge to design. The page was to consist of two lists - one of services, and the other of projects. As anyone who has worked in design long enough knows, there are only so many ways to make a list look exciting, esepcially if you're presenting two of them at the same time. Thankfully, because of the categories being used for the portfolio, I was able to make a similar style for the services, complete with gold underline, and alternating black and blue background colors. The height was left at a standard amount to accomodate up to two lines of text.

For the list of projects, there were no categories, but there were still enough clients that I did not feel a traditional, vertical list was the way to go. The goal is to have people see at a glance how many clients there have been and a few key ones, rather than simply seeing a long list and not bothering to really look at it. Keeping again with a standard height to allow for multiple lines, this time I went with custom bullet points rather than a background. These bullet points alternated between the three colors in varying patterns so none would be placed next to or above each other, and I went with five across for this list, rather than the four across used for the services. Because there were 16 services, it was easy to break them up by four. Though the 36 clients did not evenly fit across the rows, because the background was transparent, it is not as jarring to have an uneven number.

Out of all the pages, About Us ended up being the most straightforward. The page needed to consist of team photos and bios, contact information, and publications that Kris Clay Studios had been featured in. Since the other pages so far had been rather plain, with a pop-up in place for further information if needed, this was how this page was approached as well.

For the team photos and bios, I wanted to use a design that could grow as their team grew, consisting of only three people at the time of creating this design. In this case, that meant using square images that could easily be placed next to each other or drop down smoothly to another line, with each name displayed underneath them. This way, the text did not have to cover anyone's face, nor would users have to click on the photo to find out who it was of. The bio itself, though, was added to a pop-up upon click of the image, since there was a large different in the amount of text contained in each one. Because the team had done professional headshots, I was able to get those files from the photographer and pick the ones most complimentary to their website.

For the publications, while they were featured in a couple magazines, they had done a full-page spread that really highlighted their design choices and process. I wanted to give special consideration to this, highlighting it on their website as well. Instead of having a magazine cover link out, which is what I did for the other magazines, I embedded a PDF reader into the webpage to allow users to view the full-page spread easily.

The contact information was displayed at the bottom of the page under the assumption that people would mainly be finding the website from business cards, which according to analytics seems to have held true. As the business cards contained contact information alongside the website address, it wasn't as important for it to be front and center.

UX Writing

Since I knew very little about interior design when I started this project, and also was not familiar with the business itself, I did task the client with writing a few paragraphs on their company history and business objectives that I was able to cut content from for the website. They were also able to direct me to some print publications they had been featured in. Being able to take directly from these for the few paragraphs present on their website left me free to focus on the smaller parts of the copy - but also, some of the most important.

Since I was provided with six images to use on the homepage slider, I knew I wanted six words to accompany these images. I also knew I wanted words with at least two syllables, as I wanted to bring their "dots & boxes" branding into the homepage. I spoke with my client about what they wanted their clients to experience when seeing their designs for the first time, and learned they tried to design things people would remember, that were visually pleasing and ahead of their time. Like myself when designing websites, they went for function over form, but still wanted beautiful spaces that people just wanted to spend time in.

The first words and phrases that came to mind after hearing this and looking at their designs myself were rather basic - relaxing, pretty, well put-together, symmetrical, spacious, upscale, where I want my next vacation to be. This was an elegant brand that needed elegant words, and things like pretty just wouldn't do. I also needed to use words that wouldn't make people stop and think too hard, so symmetrical was out. Why don't we want them stopping, you might ask? Because we wanted people to get to the portfolio, not stop and try to watch all the homepage images go by.

When I'm coming up with a set of words to use, one of the things I make sure of is that they can all fit into a sentence in the same place and in the same way, so they all match. My phrase for this was "Kris Clay Studio's designs are _blank_". With a thesaurus in hand, I came up with the following:

1. Kris Clay Studio's designs are innovative. They are both delightful and unique.
2. Kris Clay Studio's designs are memorable. You will dwell on the space even after leaving.
3. Kris Clay Studio's designs are balanced. Each element of their design is in harmony.
4. Kris Clay Studio's designs are visionary. Their designs are ahead of their time.
5. Kris Clay Studio's designs are functional. No area of a room will go untouched.
6. Kris Clay Studio's designs are peaceful. Your worries will melt away in one of their spaces.

Only the focus word made it onto the homepage for each image, but the context and reasoning behind each choice was important to have available if the client asked for any changes to be made in verbiage. Thankfully, they loved it!

As mentioned in the designing portion of this case study, the portfolio contained so many images that it became necessary to split them up into several different categories, which ended up being hotel resorts & upscale apartments, golf clubs & courses, spas, and restaurants. Because we went with a single word on the homepage, the original goal was to stick with a single word to describe the categories as well. As a starting point, and to show the client what I meant by category names, I took the main navigation from my company at the time and moved it over to fit in similar areas - stay for hotel resorts & upscale apartments, play for golf clubs & courses, relax for spas, and dine for restaurants.

While both play and relax were approved as-is, the client wanted to change dine to wine & dine to better express the nature of the dining areas they designed. Stay was a bit more problematic. The client explained that the "apartments" designed were more like long-term hotel rooms, and not considered residential even if people did live there, so the word stay wasn't accurate enough.

In order to match a two-word combination so wine & dine wouldn't be the only one, I went back to my trusty thesaurus and picked out a set of words that might be able to be combined together both for visiting a location and staying there for a bit - lodge, dwell, reside, visit, and occupy were the main ones I found, but none of them really seemed to work together. Given that, and the abnormally high number of images in that area, I went back to the client and asked them if they would consider splitting up these sections. They decided to, based on the fact that staying at a hotel resort is experience on its own, and after a conversation we ended up with the following:

1. People can dwell in a comfortable environment.
2. People can play on the best golf courses.
3. People can relax in a rejuvenating space.
4. People can wine & dine among tasteful restaurant decor.
5. People can experience the finest in hospitality.

While only the category names themselves were used on the portfolio page, the rest of the verbiage was able to be used on the homepage, in the spot I had originally intended to be used for specific projects.

Because there were less services than portfolio images, it would have been possible to not use categories, but during a conversation with the client they expressed interest in being able to point people to various types of services they provide by the use of a category name. With a better handle on their process, and the list being provided to me, I was able to determine they researched every space and where it was located thoroughly before starting, they used design programs and specifications to present a visual representation of the space, they order everything needed to improve the space and implement it, and then they put some finishing touches on it. Using words that their target audience would understand and be impressed by, I came up with the following categories:

1. Your space will be researched to make sure your design fits with the surrounding area.
2. Your space will be visualized as a schematic design and render for your approval.
3. Your space will be transformed into the most elegant location you could have imagined.
4. Your space will be elevated by a careful selection of accessories and furniture.

This use of verbiage was also approved with no changes, and the services were split up appropriately to fit into each category by the client.

The original launch of the website in November 2017 was smooth, and the client is still using my original website design & ux writing to this day. Kris Clay Studios has since rebranded to Clay Prior Interiors, and when they did so I redesigned their logo and business cards, as well as provided other marketing materials for them. Those redesigns have not been included in this case study, as the only changes to their website were to switch out the existing logo, name, and associated meta-data.