Placester Marketing Website Redesign
Web Design (UI/UX) & Branding
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.
Product Page Redesign
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.
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
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.
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.
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.
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
Final Product Pages!
The product pages went live! Find them here:
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.
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!
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
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.
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
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/
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!