Loft website screenshot
Loft website screenshot
Loft website screenshot


Loft LLC is a multi-disciplinary product design studio, based in Providence, RI,  that has worked on everything from mobile app design to Bose speakers.

In July 2018 Jeanette Numbers, Loft Co-Principal, let me know that Loft was going to be updating their website to coincide with a company mission rebranding and move to a bigger office.

Jeanette, Chandlyr, and I worked together to create a new site that sought to evolve Loft’s brand message while also making the site a more clear marketing platform for potential clients.

Chandlyr and I worked with a copywriter, Brook, to craft new messaging for the site as well as Rance Pritchard to develop a content delivery pipeline for new case studies.


UX / UI Designer, Webflow Developer


Jeanette Numbers, Chandlyr Jackson, Rance Pritchard, Brook


Summer 2018


Moodboards, Wireframes,   Responsive Website, CMS Planning


Some research content is designed for desktop viewing.

Design Duo

With over 30 years of experience between them, Jeanette Numbers and Gregor Mittersinker are a force to be reckoned with.

Loft is a collaboration born about 7 years ago that has continued to grow ever since. Going from 2 to over 10 employees and multiple office spaces gave Loft’s co-founders time to think and create a mission that has been refined and focused for where Loft is today.

Photo of the founders of Loft

Time for
an Update

Loft’s old site was a bold, colorful statement. The site had a few quicks like a hamburger menu on Desktop and an interesting scrolling intro.  We took the time to analyze the old site and pick out elements to improve and elements we wanted to keep. Loft wasn’t trying to pull a 180, but lean into a more refined less edgy branding scheme.

The old loft homepage

Old Homepage

Lofts old homepage was a bright and bold centerpiece with a 3 panel CMYK intro animation that cycled through Loft’s old brand messaging.

Pain points included the page being too long due to the intro animation and process info as well as users being confused as some projects in the grid were not able to be interacted with.

old loft website menu

To Hamburger
or not?

While hamburger menus are necessary evils on mobile sites due to smaller screen sizes; there is no reason to have one on desktop as they lead to less click-throughs.

Old Loft website project page

Project Pages

Loft’s old project pages were designed for easy entry for a CMS, or content management system. This made the layout feel very repetitive and the pictures felt disconnected from the story the words were trying to tell.

Redesign Goals

After analyzing the pain points, Chandlyr and I had a couple conversations with Jeanette and Gregor about the goals of the redesign. We found 3 main places that we could improve.

1.) Push the brand message forward. We would achieve this through visual updates and copy creation.

2.) Refine the UX.
We decided that updating the UX to match more modern sites made sense. The hamburger on desktop had to go.

3.)  Make it easy to maintain.
Creating a new project structure to allow other members of the design team to add new projects as they were finished was necessary to keep Loft’s content fresh.

the Mood

As art of our pre-design process we collected sites  to craft a user experience and visual design that stood up to Loft’s counterparts in the market.

Moodboard for loft website redesign

Design Concept

Our overarching design concepts were iterated through and narrowed down. We settled on a concept driven by two big ideas centered around case studies.

The first idea was to create a clean simple work grid that would be show up on the homepage as the most recent projects and the work page as a sortable list of case studies.

Our second idea was to focus on storytelling within the case studies. A new case study format was created. It left room for big sweeping “money-shots”, while allowing for smaller story shots to appear accompanied by text.

Gif of a grid based navigation for the new homepage
1. Project Grid Focused
Gif of a story-based case study for the new website
2. Case Study Storytelling


Creating simple wireframes during the process helped to nail down a concept we were all happy with. The initial wireframes included a video header that was later scrapped in favor of simple branding messages. Over 5 major iterations of wireframes were created with about 3 more rounds of tweaking font selection and placement.

Below you’ll find the some early wireframes and sketches along with the final wireframes used to create the production site.

Initial Sketches
& Wireframes

Doodles during meetings and initial wireframes are a great way to keep ideas fresh and flowing. Early sketches are the most fun as you can’t really mess them up!

Napkin sketch of first idea for website
Rough sketch of initial ideation
a few initial wireframes for the website.
a few initial wireframes for the website.

Final Wireframes
with Initial Copy

After creating the initial wireframes and iterating through spacing variations and content layout we decided to use our initial copy draft to create a final wireframe that was just missing the media content.

Grayscale design for the homepage
Grayscale design for the work page
Grayscale design for the about page
Grayscale design for the process page
Grayscale design for the case study pages

Brand &
Visual Design

Loft wasn’t looking to update their logo or other brand assets, but they were looking to update their brand messaging.

Logo & Typography

Loft’s traditional color scheme is CMYK Process colors with slight tweaks for better printability. For this project we selected pink as our highlighting color which allowed us to create a more minimal and clean layout and feel.

Loft selected two typefaces to help sell its new messaging while still trying to keep a bit of playfulness.

Logo breakdown and space guidelines
Color palette used for website redesign
Grayscale design for the process page

Final Site

The final site went through a few more tweaks to design and copy before being launched Fall 2018.


An invitation to look at the newest content.


All of Loft’s case studies and projects.


A little more info into Loft’s design process.


Insight into the awesome team that makes up Loft.

Case Study

The new case study storytelling layout.


Webflow was chosen as the development tool of choice. Webflow allowed us to easily mockup ideas and get them into something the whole team could test.  Webflow makes creating interactions pretty easy and allows for a full range of CSS transitions and Javascript animations. Webflow also made it super simple to create a fully responsive site that worked on desktop, tablet, and mobile devices.

webflow editor screenshot

CMS Template

Another reason we chose to use Webflow is the CMS templates that it allows you to set up. With our template created it is super easy for other designers to create assets for new case studies and upload them to the site.

Webflow CMS screenshot


I am happy with how the Loft site turned out. I think that another sprint is necessary to create some more micro interactions across the site. As it is live it feels a bit static and could use with more motion or interaction across the board.