Close
Overview
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.
Role
UX / UI Designer, Webflow Developer
Teammates
Jeanette Numbers, Chandlyr Jackson, Rance Pritchard, Brook
Duration
Summer 2018
Deliverables
Moodboards, Wireframes, Responsive Website, CMS Planning
**Note
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.
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.
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.
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.
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.
Setting
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.
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.
Wireframes
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!
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.
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.
Final Site
The final site went through a few more tweaks to design and copy before being launched Fall 2018.
Home
An invitation to look at the newest content.
Work
All of Loft’s case studies and projects.
Process
A little more info into Loft’s design process.
About
Insight into the awesome team that makes up Loft.
Case Study
The new case study storytelling layout.
Webflow
Development
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.
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.
Final
Thoughts
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.
