Avenue

Case Study | Website Design

TOOLS USED:  WORDPRESS, SKETCH, PHOTOSHOP, ILLUSTRATOR, PREMIERE PRO 

Avenue is a tech start-up that builds beautiful, lead-generating websites and manages targeted online advertising to help realtors grow their business. I spent 1.5+ years working as a designer on the Avenue Team. During this time, I completed a wide variety of design tasks including logo design & branding packages, real estate brochures, infographics, poster design, and social media digital assets—but my primary day-to-day task was to create and maintain websites for Avenue’s hundreds of realtor clients.

Challenge 1: The Template

For each new client, the design team would receive a WordPress template that was originally created by Avenue’s engineering team. Our task was then to add components and style the website into a fully functional, appealing portrayal of each Realtor’s offerings and personality. While this WordPress theme included all the tools and functionality needed for a real estate website, unfortunately some aspects of the template had begun to look dated, and didn’t have a lot of customization ability. 

This is the base template that I would receive for each new client.

Designers' Fix: Hacking the Template

To get around this, the design team learned how to alter the template using custom HTML and CSS. We built an entire library of easy-to-use code snippets that we could quickly implement and reuse in each new website. I enjoyed this aspect of work so much that I found myself researching and playing around with new CSS design ideas in my spare time. Using these custom codes allowed us to add more interactivity and a higher level of design to our sites, which also helped us avoid making hundreds of cookie-cutter realtor websites.

Each client has a unique personality and target audience. It was my job to visually portray this in a logical, functional, and beautiful way.

Challenge 2: The Timeline

To allow clients to enjoy Avenue’s services as quickly as possible (and boost Avenue’s MRR), the design team had a target turnaround time of only three hours per initial website design.

This was constantly a challenge. We had a lot to fit into three hours:

3

hrs

{

Read client brief  /  Quickly cruise the web for new inspiration  /  Gather appropriate photo assets  /  Create mock-up in Sketch  /  Create any required digital assets  /  Assemble website components in WordPress  /  Style components using combination of WordPress Customizer and CSS  /  Get team member to review  /  Send first sample  /  Hope client loves it
Because of this tight timeline, I learned to make smart decisions as quickly as possible. My ongoing goal was to try to think of ways to automate and streamline repetitive processes to increase our design team’s capacity as well as allow for more time to get creative with our designs.

How I helped streamline our processes:

    • Created template files for our Sketch and Illustrator assets
    • Developed scripts for our repetitive tasks using Mac’s Automator app
    • Helped create and manage a library of HTML & CSS code snippets using Notion
    • Created standardized file and folder structures for easy accessibility and duplication across the team
    • Created and maintained documentation outlining design processes for internal use within design team and across other teams
    • Organized and maintained digital asset library

This constant level of striving, streamlining, and experimenting made what could have become a repetitive, mundane day-to-day workflow remain fun and exciting.

View samples of my Avenue websites: