marketing.jpg

Placester Marketing Redesign

Artboard.png

Placester Marketing Website Redesign

Category:
Web Design (UI/UX) & Branding

Role
Web Designer

Duration of Project
Month of October, 2017

I was given the opportunity to redesign the marketing website's product pages and pricing page by the CEO/Co-founder, Matt Barba. The goal was to create a website design that incorporated Placester's brand image, since the last one was updated back in 2013. He wanted a fresh and new look, so I worked with him to execute that vision.

Jump to Product Page or Pricing Page


Product Page Redesign

Screen Shot 2017-10-17 at 9.33.43 AM.png

Original Design of Product Page

The last time this was updated was 2013, so Matt wanted a fresh new look. There wasn't much on this page and there was barely any designs or indication of Placester's brand.

 
IMG_1142.JPG

Initial Steps

This was my first time really touching branding, so one of the biggest challenges for me was getting over the "where do I even start?"

I did a ton of research and examined a lot of other company's marketing websites (Hubspot, Mail Chimp, Drift, etc) to understand how other companies incorporated their brands on their websites.

I started off generating some questions that would help guide me and listed out all the features needed for the product page
 

 
IMG_1147.JPG

Sketches

Placester's primary colors are blue and we brand ourselves with triangles, so I started off mocking up all possible designs I could think of that incorporated these elements in there. Another task was to redesign the webpage so it laid all the product features in a clean and readable way. 

 

Initial Designs

I played around with different triangle designs and layout designs. I added some triangle accents on the corners of the pictures, but after discussing with my team, we decided that the triangles didn't seem "on-brand." I then took it in a different direction and designed a big triangle background because I wanted the brand to really pop.

 
 Low fidelity mockups

Low fidelity mockups

 

The Turning Point

I really couldn't have done the work I did without the critique from both Matt and my UX team. They led me in a direction, but still wanted me to have all creative control over this project. I ended up moving forward with that big blue triangle background.

 
 I took the triangle background and just started to pick away at it- I wanted to create more white space and more of a "watermark" type of feel.  I chipped away the background and adjusted the triangles until it looked like what I had invisioned.

I took the triangle background and just started to pick away at it- I wanted to create more white space and more of a "watermark" type of feel.

I chipped away the background and adjusted the triangles until it looked like what I had invisioned.

 I then incorporated triangle bundles to follow the content on the webpage. I wanted the user to know they were on Placester's website no matter where they were on the webpage. (Note: content on these images are replacement text)

I then incorporated triangle bundles to follow the content on the webpage. I wanted the user to know they were on Placester's website no matter where they were on the webpage. (Note: content on these images are replacement text)

 

Final Touches

To bring out Placester's signature color, I added pops of blue to the triangle background and some same triangle accents to make it fun! Placester's brand is super colorful and eye catching (the office space is amazing), so I wanted the webpage to reflect that too

 
Screen Shot 2018-02-21 at 12.08.32 AM.png
 

Final Product Pages!

The product pages went live! Find them here:

https://placester.com/real-estate-idx-websites/

https://placester.com/real-estate-crm-email-marketing/

https://placester.com/real-estate-content/

Final thoughts:
Designing these product pages really taught me how to interpret a brand. It was my job to figure out what Placester's vibe was and reflect it back on their marketing website. The aesthetics were important for the product pages and I wanted the user to feel Placester's fun and "start-up culture-like" personality through my designs. This design was going to set the image for the pricing page and other future pages. Definitely a lot of challenges in the beginning, and I often found myself stuck. However, a big thing I learned was how to really take advantage of feedback and communication with my team. I couldn't have done it without the guidance but also the creative freedom my team gave me!

 

Pricing Page Redesign

The biggest challenge for the pricing page was not the background design, but the actual layout design for the content on the screen.
I applied the same triangle background I created for the product pages on the pricing page. I took out the little triangle accents to differentiate the pricing page from the rest of the product pages.

 
 
Screen Shot 2017-10-04 at 2.26.14 PM.png

Original Design of Pricing Page

Also outdated- no indication of brand. Just had pricing and features but nothing else, so it was missing a lot of important details. No guidance for the user. We wanted to fix this!

 
Pricing v1.png

Initial Design

The challenge to this project was designing a way to display both different pricing plans and the features without overcrowding the page.

I separated different prices using a diagonal line, and I created a table to lay out all the different kinds of features i the "add-ons" section- hoping that the checkered boxes made the features easy to read

 

Implementing Toggles

I found that the first layout above actually made the pricing harder to read and over crowded the "add-ons" features. I decided to use toggles to organize and separate the different prices. The toggles allowed the user to switch back and forth between the prices. I also implemented this in "Add-on" plans.

 
ezgif.com-video-to-gif.gif
ezgif.com-crop.gif
 

Feature Challenges

One thing I was playing around with was separating the features from the pricing. I wanted to see if doing this would allow the user to see the features more clearly. There were so many features under Nar, Agent, and Broker and many were repetitive. I wanted to display them in a way that showed them clearly without over crowding the page. After designing several iterations of feature displays, I decided that the best way was actually just to list out each feature under it's appropriate subscription type. The design was more straightforward than trying to separate pricing and features

 
 Three versions of feature layouts I created before deciding to change directions

Three versions of feature layouts I created before deciding to change directions

 

Final Designs

After I moved the features under it's appropriate subscription type, and used the term "Everything, PLUS" to avoid feature repetition. I changed the CTA buttons from blue to green in order to make the CTA buttons pop out to the user. After another few final touches the pricing page went live! 

Find it here (you can play with those cool toggles!) https://placester.com/pricing/

 

Final thoughts: 
Designing this pricing page was an extremely rewarding experience, where I was really able to dive in and tackle all these design challenges! This page was all about designing for the information rather than just focusing on the aesthetic design (like I did more for the product pages). For a pricing page especially, it's important that information is clear and the user knows what Placester has to offer. The use of toggles was a good way to organize and separate information so it wasn't too busy on the screen. I learned that CTA buttons should be front and center and also eye catching because that's what you want to draw the user to do. During this project, I was also the bridge of communication for the product, marketing, and sales team to ensure that all teams were at a cohesive agreement on the information laid out on the page. I got to experience marketing work, project management, and really learn communication skills in the workplace. Super challenging anf amazing experience!

Placester-Desktop-Pricing-FeatureEdit.png