At Webspec we’re constantly learning and refining our craft, but what does that actually entail? This was a burning question up until a couple of years ago; everyone was coming up with excellent ideas but no one was sharing them. We started to think of ways we could organize these ideas and get the entire team involved in the discussion. Each week I’m proud to facilitate an internal event we call Inspiration Wednesday (IW). Inspiration Wednesday is where Webspec discusses all things web in an effort to not only keep fresh, but also show employees what each department does when working on a site. It allows everyone participating to think on a high level about all the aspects that go into a successful web project. We’ve done content modeling, come up with marketing plans for existing clients, and dissected sites that “look nice”.
I’ve been the facilitator for Inspiration Wednesday for over a year and a half now. I’ve seen it move from our developer room to our larger collaboration space. I’ve seen us grow so much as a company that it went from a company wide meeting to a more flexible, voluntary, come if you have time, event. The form it takes most often is discussing sites that we find online that have an interesting concept or design. We go beyond the looks, discussing content strategy, SEO, and business goals, and we determine if the site is successful overall. Since I’ve been keeping track, we’ve looked at over 100 sites for Inspiration Wednesday discussions.
To show the reader an example of what we do during one of these sessions, I’ve decided to do a mini-IW in the form of a blog post. The reader, like the participating employees, will get to see the breadth of what we think about when creating a site for a client.
The Site
I chose to review the site www.bluhomes.com.
This site was found on a web design awards site. Webspec is unaffiliated with the company and does not intend to pursue them as a client. I chose this site because it caught my eye and I thought the product and concept, prefab homes, were interesting. Most of the sites we discuss during IW come from an awards site or a design blog. We often find that even though the site looks nice at first glance, it sacrifices quality content and user experience for visuals.
The Process
Because we often find these sites from a blog, we don’t always know a lot about the company. We start off by determining, from looking at the site only, who the company is, what they do, and where they’re located. It’s fairly surprising how often we find sites that don’t tell us about the company, or even about the product they make—a sign of poor content strategy.
Based on an initial skim of the site’s content, Blu Homes creates pre-fabricated homes out of California. Their homes look cool and feature indoor/outdoor living and modern finishes. That comes at a hefty price, with most models costing over a million dollars.
Next we have the developers take a quick look at the site to note any development details or considerations. From doing a quick scan I see that the site is in Drupal and utilizes responsive design techniques.
We then, using only what we see, identify the target audience of the site. I’d say that the buyers of one of these homes is a young family with high income. I also notice that the contact form targets the homebuyer, developer, and realtor. The focus is on the Bay Area, and keeping the homes in the Bay Area. The homebuyers are looking for indoor/outdoor living.
Reviewing the Design
As stated, many of the sites we review for IW come from design related blogs and therefore look nice. But a site can look great without having the right visuals for their audience or the wrong design direction for the product they’re making. The participants of IW will talk about how the use of design enhances or hinders the goals of the site. To review the site’s design I asked Steph Wharton, one of our graphic designers to review the site. I told her very little about the site and tasked her with giving a rundown with the audience in mind. She had the following to say:
Pros
- The site had a clean and simple look that matched their upper class audience.
- The overall design is very consistent. The whitespace, buttons, fonts, and image sizes are nice.
- The contact form is tailored to the three audiences (Homebuyer, Developer, Realtor) and displays different fields based on the audience member’s needs.
- The navigation is well-structured and the site overall is concise in the pages it utilizes.
- The images connect the product to their audience that is adventurous and loves the outdoors. Throughout the site, the images do a great job of telling the story and evoking emotion with the audience to drive sales and inquiries.
- The process page does a good job explaining what they do.
- The videos used show the interiors of the house, which is tailored to the visual user. The homebuyer can see what it’s like living in a Blu Home and feel like they’re walking through it on their own.
Cons
Steph also notes some problems with the site, which will be elaborated on later in this post.
- Blu relies too heavily on the use of sliders, especially in the Customization Gallery. When the user clicks on any of the “See X Examples” buttons, they are presented with a large slider that moves automatically, making it hard to focus on any of the examples.
- The homepage gives no information about what Blu does.
- While the navigation is simple, the use of the mega menu is unnecessary and may be confusing since it hides a lot of the pages.
A Quick Analysis of SEO
Focusing on a site’s search engine optimization is an important aspect of Webspec’s projects. As a result, during Inspiration Wednesday, we give a rundown of a site’s SEO viability. We often find that sites from design awards blogs often sacrifice SEO and content for a unique design. Anna Bellegante, a content and SEO strategist provided her quick analysis of the Blu site. She, like Steph, found both positives and negatives to the site. Here’s what she had to say:
Pros
- The site uses a clean and straightforward URL structure.
- Blu has invested in the complete use of HTTPS, even though they don’t collect any sensitive info (at least on this user facing site). Using HTTPS sitewide means that users and search engines will place more trust in the site.
- Google analytics is installed to help analyze usage of the site.
- All possible ways to access a page through the URL redirects to one single page. This includes HTTPS vs. HTTP and www. vs. non-www. structures.
Cons
Anna noted some of the same cons as Steph, many of which will be discussed later.
- New users won’t immediately know who Blu is or what they do without digging deeper into the site. The homepage doesn’t tell the user anything about what they do. This was echoed by Steph, and will be heavily discussed later.
- The homepage title tag, while custom and informative, is too long for search engines. The rest of the site lacks custom title tags. Title tags are important because they are one of the strongest factors when search engines serve content to users who are searching for a product or service similar to the one a given company offers.
- Some of the user flow is misleading. The “More Info” button leads the user to a contact form when they expect to learn more about the company and their services.
- Blu does not have a well defined heading structure to organize their content. An organized heading structure helps users find the content they want/need quickly and it also helps search engines understand the content on the page. [Anna notes search engines read all the H1s, all the H2s, and so on before they read the body text of a page.]
Mixed
- The site loads quickly, even with the use of a video on the homepage. However from a Google PageSpeed perspective there are still some optimizations that need to be made.
- All the images seem to have alt tags, which is ADA compliant and good for users who cannot see the images due to visual impairment or simple server connectivity issues. The alt tags, however, could be more concise and accurate for the individual images they are describing.
Breaking Down The Site
So far we’ve only been looking at the site from the surface level. A site can look good and have good SEO, but still fail to meet its goals. We spend the majority of the time focusing on the following topics. We analyze everything from content prioritization and word choice, to even questioning if a site is needed to get the audience to act.
It’s important that before we start breaking down the site, we identify the goals. That way all of our analysis is based on whether the site fulfills those goals. Because there’s no way to actually buy a house from the site, its main focus is to get the homebuyer/developer/realtor excited about the houses they offer and then to fill out the contact form for a consultation. That means every aspect of the site will need to get the user excited and lead them to the contact form.
Next, we focus on the content strategy of the site. Does the site do a good job of informing the user about the prefab homes and guide them through the process, getting them excited about the houses, ultimately leading them to contact Blu? When doing a full IW we prefer to look at the site as a whole, but for this mini-IW I’ll solely focus on the home page.
Hero
When the user first visits the home page they see the hero. We use the term “hero” to describe a large block of content with a heading and call to action buttons on top of an eye catching image or video background. This hero is “above the fold” meaning it’s what the user sees first before scrolling down the page.
The first thing the user notices is the video. The video is pretty, so the user may sit through and watch the whole thing, but they will probably scroll past it before it finishes. That means that the video has to quickly inform the user about what it is that Blu does. In this aspect the video is unsuccessful. I asked my co-workers, without mentioning what Blu does, to watch the video and to guess what the company makes. They said it’s for property development, apartment complex, resort, rental vacation homes, deck/patio builders, a Zillow-like home finding service, or an HVAC company that specializes on circulating fresh air. No one could tell, from the video, that Blu creates prefab homes.
Next the user would see the headings “Welcome Home, Let the Outdoors In.” These headings could be a slogan for a state travel agency, or a brand of four season porch. The calls to action “Visit Us” and “More Info” are reinforcing the goals of the site (finding out about homes and contacting them) but their context is lost in this hero. Who is the “Us” the button mentions? What is the user getting from “More Information?” The final two phrases in the hero “Healthy Living” and “Luxury Models” could be for a smoothie maker.
This hero is extremely ineffective due to one omission: nowhere does it mention what Blu Homes does. Nowhere does it state that they create prefab homes. If the sub heading was changed to “Prefabricated homes that let the outdoors in” the entire meaning and context of the hero shifts from patio builders to home builders. Now each element can reinforce the message, providing consistency and clarity to the hero.
Something that a co-worker brought up was that Blu may be intentionally avoiding using the word “prefabricated” in their marketing materials and their site. However, we find that the word is used in their title tags and that “modular” is present on the “Homes” page. So it seems that the absence of the word in the hero is due to poor strategy, not a conscious marketing decision.
View Model Homes
Moving down the page under the hero we see a callout to visit their model home. This is where the user finally may be able to deduce what Blu does and provides the user with a way to contact them, although I would still be confused at this point. There still isn’t any content about what Blu does so a lot of this messaging is lost due to lack of context. Why would a user want to visit the Breezehouse Model Home, Design Center & Factory?
Blu Events
Next the user is presented to a section dedicated to “blu Events”. What are these events and why would a user want to attend them? Events could mean a concert or festival. Because there’s a lack of context up to this point, and there’s still no content, this section seems out of place or misleading. The actual event listed, though, has a thoughtful title and description that will help the user understand what the events are for. The user is also presented with a large call to action to see all events. This call to action has more visual weight (and more visual importance) than other more important elements on the page, even though viewing events is not part of the goals stated above.
As of writing this article, clicking on the “See All Events” button doesn’t load in any additional events so it looks like it’s a neglected section to the user.
The Homes
Under the events is the list of home models. It’s the first bit of actual content on the page, and according to our goals, is the content that the user is most interested in. The problem here is that it’s presented so far down the page. Why does the user have to scroll so far down the page to see this information? The use of a slider (also called a carousel) isn’t the most ideal solution either. According to the Nielsen Norman Group the use of sliders causes a user to ignore the content. The article mentions a user can scroll past a slider without realizing there’s more content, or may not even care to interact with it. Blu is hiding the list of their house models behind the slider pattern, keeping the user from seeing them. The main call to action of this section, to “See All of Our Homes,” isn’t visible until the last slide, meaning it’s the thing users are least likely to see. However, the design does employ some tactics to make the slider more likely to have interaction. First, the photos of the homes are engaging and entice the user to look at them all. Second, the arrows are all pointing to the right and the slides are cut off, which signify to the user that there’s more content. We can’t make a final decision if this slider is successful without seeing actual usage numbers.
Quote
The quote from Forbes about Blu being like Apple is great and adds a lot of personality. It’s at the bottom of the site though. I can’t tell for sure if this content is relevant to the user, or if it makes the user excited about buying their homes, so its low priority placement on the site might be appropriate.
In General
The homepage lacks content or context. What’s really confusing to me about that is there’s a really informative “Our Process” page that gives the user a rundown of what Blu does. None of this information is present on the homepage and it’s not even linked in the content. The user would have no way of getting to this page without relying on the navigation.
Mobile
According to the Pew Research Center, 64% of US adults own a smartphone, with 15% of adults mainly relying on their phone to browse the web. I’d also reckon that Blu’s affluent audience has close to 100% smartphone usage. Note that while the article heavily discusses economic factors related to usage, these factors don’t apply to Blu’s audience. Over time, the percentage of people using their phones to browse will only increase.
During IW we pull up the site on our phones and display the mobile version on the screen to discuss the mobile experience. We still find sites that are unusable on mobile, yet look pretty on the desktop. These sites are losing a potentially important part of their audience.
Blu has a workable mobile presence on the surface level. If we dig deeper though, we see that the site has some major problems on smaller screens. The first problem relates to the use of a hamburger menu to hide its navigation. According to Nielsen Norman Group users, especially on mobile, will not use hamburger menus or they will only use them as a last resort. This means that in order for a site to be successful, the user must be able to transverse the site using links and cues in the content. If the site’s functions aren’t discoverable through content, the user may never see those pages. I’ve previously discussed how there is little content on the homepage that is relevant to the user or the site’s goals. This means that the mobile site suffers the most from a lack of content strategy. The mobile user has no way of knowing who Blu is, what they make, and why the user should buy a Blu prefab home.
Of significant note is the list of homes on mobile. I noted that was the content of main importance to the user. On mobile, it’s far down the page and the use of a carousel seals the deal on its ineffectiveness. According to the Nielsen Norman Group article on sliders, users on mobile will simple ignore content in a slider. That means the user will only see two homes that Blu makes before bouncing off of the site to look at its competitors.
And So Forth
During an actual Inspiration Wednesday, we’d go through the same process and ask the same questions for the rest of the site’s pages. By the end of a half hour we’ll have a complete analysis and audit of a site. We’ll take what we learn, discuss, and apply it to future client projects.
Caveat
Note that Webspec is only assuming information Blu based on what we find on the site. There are factors that we can’t account for, such as what if most of their business is done through referral? If that is the case, their site could only account for a small portion of their marketing efforts. The user already may know who Blu is and therefore doesn’t need to be informed what they do. That does not excuse the poor execution of what’s currently on the homepage, however.
Conclusion
Overall, while the site may look pretty, the Blu site, especially the homepage, lacks a proper content strategy. The homepage doesn’t help the user get informed about the company and is even impeding business goals. The home page lacks prioritization, relevant content, and has conflicting messaging about what Blu does. The lack of strategy affects other aspects of the site, including SEO.
