Case Study: Upgrading a custom site to Sagittarius

As many of you know, we are nearing completion of our newest framework/design, code-named Sagittarius.

In fact, some of our elite / enterprise customers have already signed on to upgrade their existing custom/semi-custom sites to the new framework once it’s ready.

I for one am super excited to announce than Sagittarius is in it’s final phases of development and testing and currently undergoing enhancements for both ADA (American Disabilities Act) and WPO (Web Performance Optimization) < Google Page Speed for performance and SEO.

We are still several months away before we will be recommending installing your new Sagittarius site, but for those that already have made the commitment, especially if you have significant customizations you know you are going to want, or things (colours, branding, custom design elements) you will want integrated into Sagittarius, the time to start planning and documenting those things is now.

To help customers get organized and to showcase what that process “should” look like (and also to lead by example) we will be upgrading several of our own sites first, starting with my wife @Carly’s custom site https://www.carlycarey.com

And to make it both educational and fun, we’ve decided to showcase the whole process live here on the forums. This way you can see what an upgrade looks like, ask questions (learn what questions to ask) and really see how things are supposed to work when done in an organized and informed way. I hope that if you follow these same steps for your upgrade, you have an amazing result and are truly happy with the finished product.

To assist me with this project will be Carly’s origial designer @monicafrigon as well as our photographer/videographer Elianna Fajillan. I’ve asked them to join us here, so that we can do the whole thing right here on the forums: From communications, to mockups, to feedback, we’re going to do it all here. We’re also going to be publishing the “costs” of this project (tracking our time) which customers can then use to drive their decision making process. Please keep in mind though, all custom sites are unique as are customers, so while my costs will be true and accurate, your costs may vary slightly depending on your experience, communication style, clarity of communication, custom needs etc

It’s a new idea, and I hope it works lol, so in the spirit of innovation and a bit of interactive fun, let’s get started!

4 Likes

First up: Let’s gather the assets!

It’s important that we gather all the assets we’re going to need in order to plan out and execute a semi custom/custom design.

In our case, REW’s Branding agency and design team have already created significant assets to work with for Carly’s previous custom site. I’m going to ask Monica to present them here. These include:

  • Logo and Tagline: We have already developed a high end Logo and created a tagline.
  • Brand Standard/Guidelines: This is a visual document that showcases colours and typography etc
  • Photography/Videography: We need Ellianna to share with us the folder of 100% unique photos and videos we have created for Carly so we can review.

Once we have these assets posted and discuss them, we will move onto discussing the existing site and the things I really like and want to keep about it (in similar style, but adapted to custom fit Sagittarius of course) and anything we are missing, or have done that I don’t want to keep.

I should also probably ping @Aayaam on this thread too, since there will no doubt be some great user comments.

So let’s get started! Monica, can you please share the assets we’re working with?

2 Likes

Hi Morgan!

Currently, these are the assets we have for Carly. Having these files at the beginning of a project is especially helpful to serve as design inspiration and ensure a continuous brand experience.

PRIMARY ASSETS
Logo & Tagline – preferred format is SVG, AI or EPS

Style Guide

Mood Board

SECONDARY ASSETS
These are not as critical but can provide helpful design direction and can include anything from print assets like brochures and flyers to social media posts.

Business Card

Facebook Post

Listing Brochure

Listing Flyer

1 Like

Before starting on any design work, it’s important to get to know more about the project and your needs.

  1. What do you like about your current website?

  2. What are the pain points and areas for improvement that you want to address?

  3. When we move your site to Sagittarius, what do you want to keep? I would suggest starting with the home page, search page and communities pages.

  4. When analyzing your competitors’ sites, what do you like and not like about their websites?

  5. What are the goals you wish to accomplish with this project?

  6. Who will be bringing over the content to the new site?

Note: In cases where there isn’t a style guide to reference I will often ask clients to share examples of color schemes and/or designs that they like and dislike to serve as a starting point.

1 Like

Going to answer these post by post:

1: What do I like about the current website? Most things really, we love the current look and feel, the integration of the brand into the design, and several of the custom elements that we had created. There are a few things that I feel we have over customized though such as the nav and the about sections, which when we get to those sections, I’d like to keep more out of the box, and optimize better for mobile.

Keep in mind, we don’t want to go anywhere near this custom this time around as we want to use more of the Sagittarius out of the box (so please don’t attempt to design a full “custom” site, we want this to clearly be Sagitarrius.

Here are some things I really like about the site:

High res photo selection: I love the photo choice. It’s professional, unique, somewhat feminine but also clearly an homage / reference to Nanaimo’s downtown CORE.

I like the full width communities CTA on home page as well as the contact CTA. I think the black and white version is classy, and shows off Carly’s smile. What I don’t like about the CTA though is the red contact Carly link, it doesn’t stand out well, and I think I would prefer a set of buttons for Text, Call, Email not sure, I just think the CTA portion could be improved.

1 Like

Thinks I like / dislike continued. I think the nav idea is REALLY creative, and I like the concept (where you mouse over nav links and get photos) but I don’t like the arrow that connects it to the main nav element, and I really don’t like the nav on mobile (I’m hoping we improve the mobile nav experience considerably with Sagitarrius) I’m thinking overlaying on the photo if we keep this element (which I’m not sure we’re keeping) would be cool bottom right to have a “Area Homes” CTA on top of the photo that links to a named anchor on that community page that jumps you right to the listings.

Again, I want it in the style of Sagitarrius, so we’d need to see if that could even work (I’m not 100% sold on this idea, and I think I probably want it just plain, since it’s more user friendly, but less “cool”) < Sometimes I feel like we go just a bit “too” far :slight_smile:

Vs

1 Like

Following…
Brilliant idea to do this in real life Morgan. Do you have a link for the DEV Sagittarius? I would love to get a feel of the master in Dev mode. I have a fantastic website but would like to be an early adopter. I think it goes very well with our brand. Congrats

Will be sharing that soon Andre, just need to finish the ADA and WPO before it’s ready for primetime. You will see screens here though :slight_smile:

Both a like and a dislike for me are the featured listings. What I “like” about them is the large photos (honestly, I’d like them to be a bit larger than on Sagittarius since our MLS has pretty good photos but what I don’t like is the part under the photos, way too much space taken up and I think it’s wasted. I like the space/formatting of Sagittarius featured listings much better. So if there is a way to keep the look of Sagittarius formatting, but with wider, larger photos (I get we’ll have to increase the margins) then I’ll be stoked.

VS (note much tighter spacing on Sagittarius)

3 Likes

On the search, Sagitarrius all the way. I far prefer the search options where you have ranges. Beds min to max, etc so we’re not keeping anything from the custom site on search.

VS

On the search, what will matter more is the orientation/priority of search options. We might re-order some things based on how people search here.

Side note on this, I think we should do some polling of locals (REW staff, and Nanaimo population) to find out what they find most useful / desireable in their search.

On the communities pages, there is really nothing I would like to keep. I feel like we didn’t really give them much love since we knew we’d be replacing this site. I do want a CTA to contact Carly as a snippet for all pages, but I really don’t like this one that is on there now. I think we can do better (again I would prefer high resolution, full-width deck vs this width)

This newer CTA is a good starting point, but let’s make this really pop! (also I don’t want the text to take up so much room, let’s move it over to the left a bit giving more space for the image on the right. Photo choice is key here to provide proper contrast for the text.

1 Like

Ok so let’s talk about communities pages for a second. I LOVE The communities pages on Sagittarius, but not as much when the side nav is turned on.

For SEO though, I want the side nav, so I’m thinking we do some sort of fly out (we need to check on ADA for this) so that I can click to open the side nav, but the default view is full width.

On the stats, I’m going to want to change the charts etc (I know I know, super custom) to colour match Carly’s brand. So we’ll use high contract reds, dark grays etc instead of the greens from the default.

But seriously, look at these communities, SICK!!

We’re going to need to get @Elianna over here to really scout out locations for these hero’s

These are the graphs I want to colour change.

Inline updating of snippets is one of my fav features, but I’m going to want to add more search and more sort options here.

This looks super nice, I’m hoping we provide this out of the box for all users to add inline images.

1 Like

Hey team!

I’d like to share some contact sheets from a couple of shoots I’ve worked on with Carly.

Contact sheets are positive prints containing thumbnail images of the photos taken from the shoot. It is an efficient way to scan through a series of images to pick out your favourites for print.

Here are some examples:

RE/MAX Europe - Mallorca

Inman Connect - Las Vegas

Real Estate Webmasters Town Hall - Nanaimo

And if you’re wondering what my video timeline looks like, here are a few screenshots of some of my recent projects with Carly:

These are awesome @Elianna, I’ll review these with Carly and help her pick shots for the new site. Thanks for that.

BTW, do you have video or contact sheets from Inman? @Elianna?

I sure do! Here are Carly’s shots from the Green Room at Inman Connect 2019.

And below is a sneak peek of what my timeline looks like:

Here is a mockup of the homepage using Carly’s colors. I’ve kept as close to the original template design only deviating in those elements that you wanted to keep from the existing site: Carly’s CTA. I will also be mocking up a version of the dropdown menu with the photo but as the more likely candidate is the default menu, I went with that for this mockup.

I think it looks really awesome!

A couple of notes:

Dark on dark: I am not sure I like that both featured listings and featured neighborhoods are stacked on each other. I like that they are both dark (they make the photos pop) but I think putting “Meet” Carly (white BG) in between them would look better.

On the white CTA (just like the lower one) - I think we should have 3 CTA’s Email, Call, Text, but I’d like the text to be the texting module, not her actual phone number so that it gets logged in the CRM via our texting integration and we can track it.

Also I think there should be another white deck between Neighborhoods and that bottom dark CTA. Perhaps a latest from her blog (I don’t think we mocked that up with @rchohan so perhaps you two can collaborate on that. Having a blog post snippet will be an important feature for some (note it must be a snippet that can be added to any page, not an element just of the homepage) we’ll want to set parameters in that snippet that allow us to select specific categories or posts to make the related blog posts more hyper relevant to the page it is on.

Thanks @Morgan! I think these are all great points that will improve the page. I’ll work with @rchohan and post updates here when they’re ready.