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.
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.
Digital Designer &
Front-End Web Developer
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.
The SQ corporate website was a blank slate—almost quite literally.
the new website represented a new direction. So, we wouldn’t be importing any content or looks from the old website.
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.
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.
My supervisor got a head-start of me and opted for a clean, geometric and minimalist web design.
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!
Ultimately, the client decided to combine our designs!
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:
Broken Grid Positioning
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
Instagram widget button styles*
Properties filter & new label*
*Hover to compare to before states!
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 widget. However, 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.
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.
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!