Student Quarters Corporate Website Design

Work for hire for Student Quarters (SQ) by Lara Lee while employed at CSG Creative with permission for Lara Lee to display for self-promotion.

Background

Student Quarters (SQ) is a leading owner and operator of student housing across the United States. With a team composed of industry experts in student housing asset management, property operations, acquisitions, finance, and development, SQ delivers enriching experiences and exceptional results.

After a period of rapid growth, SQ  wanted to amp up their digital marketing strategy in 2021. While very active on social media, they needed a stronger online presence from their small, dated website. The new website required a new branded look, tons of new content, and an engaging user experience to attract prospective investors and future SQ hires alike—two very different target audiences.

We kicked-off the corporate website design creative process with an online prototype on a staging website. The new website uses WordPress and Elementor. I executed most of the website design of this particular job, while my supervisor tackled another big website concurrently. In the end, we tackled copywriting, scope creep, and made some amazing web design.

Client

Student Quarters

My Role

Digital Designer &
Front-End Web Developer

The Results

0
Total Webpages
0 %
More Site Visits
(1 month after launch)
0 %
More Site Visits
(1 month after launch)
0 %
More Users, Most of
Whom Are First-time & Overall More Engaged
(1 month after launch)

A Different Creative Process

The typical CSG Creative creative process for designing websites entails both InDesign and WordPress.

First, we lay out initial concepts in InDesign. They’re static, but accessible and easy for clients to share and comment on. Therefore, it’s very helpful to possess operational knowledge of the website’s platform’s technical capabilities to avoid presenting a design to the client that can’t be coded later. Afterwards, we move to a live prototype on a staging website. Now we design right in WordPress itself.

This time, however, we skipped static InDesign mock-ups and proceed directly to WordPress. As CSG Creative’s recent rebrand embraces digital strategy, we want to highlight our web design capabilities. Therefore, sharing live, interactive prototypes helps clients envision how their website will perform on mobile devices and interact with users.

*We don’t typically do wireframes at CSG Creative—lo-fidelity or otherwise—because our clients like to jump straight into visuals. Personally, I like wireframes! I find wireframes very helpful for nailing down layout and content strategy without getting distracted by details too early in the creative process. Check out the DEMA Show 2019 Website Reskin I did.

Initial Concepts for Their Corporate Website Design

The SQ corporate website was a blank slate—almost quite literally.

Firstly,

the new website represented a new direction. So, we wouldn’t be importing any content or looks from the old website.

Secondly,

the client’s existing brand guidelines were minimal and targeted a different target audience (i.e. student residents vs. prospective investors and SQ hires). So, we wouldn’t be referencing them.

Finally,

the client-supplied copy was minimal, if not non-existent in many content areas. So, we wouldn’t be limited to certain ways of laying out content.

Matt’s Design

My supervisor got a head-start of me and opted for a clean, geometric and minimalist web design.

First Comp—

Matt's first draft of SQ's corporate website design.

My Designs

I started next. Mine went a few directions, as the creative feedback I received was to design something “not like Matt’s”—but Matt and I have similar styles! I also applied some UI/UX copywriting tips I read into my design’s headlines and CTAs. The client really liked that!

First Comp—

My first draft of SQ's corporate website design.

First Comp with Edits—

After edits to the initial corporate website design homepage draft.

Ultimately, the client decided to combine our designs!

From Start to Finish:

Homepage

First Pitch—

After edits to the initial corporate website design homepage draft.

Work in Progress—

Homepage work-in-progress on the corporate website design.

Live—

Homepage website design screenshot.

Leadership Page

First Pitch—

Initial concept for the Leadership page.

Work in Progress—

Leadership work-in-progress on the corporate website design.

Live—

Final Leadership design.

Careers Page

First Pitch—

First comp of the SQ Careers page.

Work in Progress—

Careers work-in-progress on the corporate website design.

Live—

Final version.

Executing the Front-End Web Development:

Advanced Customization with
Non-Coding Page Builder, Elementor

Since we could build this website from the ground up—I do love blank slates!—my supervisor (the Director of Digital) and I determined to use the non-coding page builder, Elementor, and its light-weight WordPress theme, “Hello,” to start this corporate website design. Elementor has a wonderful drag-and-drop user interface that’s friendly to web developers and casual users alike. Additional tabs provide access to even greater customization. Furthermore, Elementor allows web developers to customize objects with a Custom CSS field. It even honors copy-paste HTML tags into regular widget settings.

I used Elementor to add:

Motion effects

Vertical parallax on page scroll.

Hover effects

2-D Flip Card hover effect.

Animations

Counter widgets animate the statistics.

Broken Grid Positioning

Broken grid positioning on the staff bios..

More Advanced Customization
with Good ‘Ol Hand-Coding

To achieve a unique look for SQ’s corporate website design, I pushed WordPress + Elementor even further with old-fashioned hand-coding. Since Elementor allows users to target elements with custom CSS, I could easily modify widgets to taste. I mostly coded HTML and CSS. I didn’t need any vanilla JS (though I’ve done that before, like this show/hide interactive content.)

I modified, for example:

Properties Flip Cards*

Property hover effects

Zoom on images when hovering over them.

Instagram widget button styles*

Properties filter & new label*

*Hover to compare to before states!

Learning New Tools on the Job:

Custom, Branded Google My Maps

One of SQ’s biggest highlights for the website is their many properties. Indeed, a large portfolio helps distinguish SQ from their competitors! Consequently, a map indicating SQ property locations became  prominent.

SQ’s old website also featured a Google Maps widgetHowever, the client didn’t have access to their old website to import it on the new website, so I must make one.

I read about custom maps using Google My Maps (not to be confused Google Maps, which is apparently a different product) on Pinterest and decided this was a good time to try!

First, my CSG Accounts rep for SQ was able to gather their property data into a clean Excel spreadsheet. Then, I removed extra columns I didn’t want to import into the custom map, logged into Google My Maps, created a new map, and imported the CSV into a new layer. Now I had my location markers. Next, I needed to brand it for SQ. I created a new icon in Illustrator using the symbol from SQ’s own logo. Then I uploaded my custom PNG icon and watched the map populate with SQ branding.

Animated SVG with Elementor & Lottie

This Investors page represents the only and best webpage that appeals to SQ’s target audience of student housing investors. Therefore, I wanted this minimal page to really pop with catching graphics.

I thought the shorter Investors webpage was the perfect opportunity to add a small animation.

The client had a PowerPoint deck using the three icons right. The client had requested copy and icons from an investors PowerPoint deck my agency was making for them. Then, the PPT and website would be consistent with each other.

Original icons from the Investor Desk PPT.

I decided to pull an additional icon that looked like it might’ve belonged to the same set stylistically that would symbolize a benefit of investing with SQ: an arrow hitting a target sign. I further added a slideshow of various SQ properties to tie the theme together. Finally, I animated the icon.

Now, I’ve animated a lot in After Effects before.

However, After Effects doesn’t export HTML5 animations or even SVGs. I read about Elementor introducing Lottie animation support in an earlier newsletter and decided to research what it took to make my own Lottie.

I read up and applied what I learned: I made my own Lottie animation using After Effects and a new plugin, Bodymovin. This is a nice tool to add to my web design and development toolbox!

Final & Live Corporate Website Design

Homepage of the SQ corporate website design.
Investors webpage mock-up on a laptop.
Properties landing page design mocked-up on a laptop.
A multi-layered parallax collage breaks apart when users scroll down the Open Positions page.
“…They are so excited and you’ve done a great job with this totally fresh and new site presence for the brand.”
The letter P.
Paige Cardwell
President, CSG Creative
“Despite challenges with copy and set-up, our amazing team persevered. The end result is a ‘phenomenal,’ ‘absolutely stunning!’ new site that the client not only loves but will help them demonstrate their strong position in the student housing market. Nice job, Matt and Lara, for makin’ it happen!”
The letter M.
Michelle Lee
Multichannel Marketing Specialist, CSG Creative