Website Home Page Redesign - Lincoln Media Design · The redesign will incorporate: •...

Website Home Page Redesign

Enstrom Helicopter Corporation www.enstromhelicopter.com Julie Muenster November 2014

Website Home Page Redesign: Enstrom Helicopter Corporation 1

http://www.enstromhelicopter.com/

Executive Summary The Enstrom Helicopter Corporation website needs to be updated to meet the expectations of today’s web users. This report provides support for the home page redesign proposal.

Topics and action plans included in this proposal include:

• Home page layout: o Consider user conventions o Clearly identify site with logo and tagline changes o Add search function o Move links o Enlarge navigation bar o Add photos to news stories o Expand footer

• Visual style and graphics: o Change graphic to photo of product o Lighten color scheme o Change heading style o Use white space to define areas

• Navigation and site structure: o Reorganize content o Change tabs on navigation bar o Change buttons/links to match user categories

• Readability and content: o Change headings from blue and all caps o Main copy is black on white o Use blue text only for links o Write concisely o State what the company does o Start conversations with users o Consider users’ F-shaped reading pattern

Enstrom can distinguish itself from other helicopter manufacturers by building its website around the website user.

Background The Enstrom Helicopter Corporation updated its website a few years ago. The company hired a professional design firm and was pleased with the improvement. Enstrom’s marketing department believes the website needs to be updated again to improve design and usability.

Web design evolves, and the company’s designer has not kept pace with trends. Users come with expectations such as readability, scannability, and navigation that are not being adequately addressed by the current site. Social media, usability studies, content strategies, and inbound marketing statistics all provide data to inform sound design, and this data has changed since the last website update.

Purpose of the website The purpose of Enstrom’s website is to provide relevant information and excellent customer service. It is part of an overall marketing plan with the goal of expanding the company’s presence in the global helicopter market and increasing sales. A site that’s appealing, informative, and easy to navigate will support these goals.

Audience The primary website audience consists of potential customers who are seeking information and current customers in need of product, customer, or technical support. A secondary audience includes job seekers as well as Enstrom dealers and service centers who need information to support their customers through the buying process, parts ordering, and helicopter repair and maintenance. The site needs to provide clear navigation for the variety of visitor needs.

The website redesign anticipates user needs and expectations. It acknowledges that users come with questions and provides a platform to get the answers quickly and easily. A well-designed website leaves visitors with positive attitudes toward the company, which is important in the sales process.


Redesign Process In evaluating the website and determining updates, both the big picture and the details were considered.

Goals The redesign will incorporate: • Contemporary design. Create a light and lean look. • Layout conventions. Place page elements where users

expect to find them. • Unambiguous typography. Display clear hierarchy and

consistent text color. • User conversations. Anticipate visitor questions and

engage. • Clear navigation. Provide a clear path to the answers. • Content strategy. Write concise, relevant copy.

Needs The specific changes to the site that will meet these goals include:

• Lightening the color scheme and using white space to separate sections rather than lines and boxes

• Replacing graphics with photos; include photos with news stories

• Employing conventions in the home page layout, such as the logo at the top left and search at top right

• Using typography to establish text hierarchy, improve readability, and clearly distinguish links

• Creating links that address user questions • Reorganizing information to improve navigability • Adding social media links to encourage further

engagement and exploration • Clearly stating what the company does

Redesign Proposal This proposal addresses the issues of home page layout, visual style and graphics, navigation and site structure, and readability/content. It includes an analysis of the current site and suggestions for updating.

Home Page Layout Studies show that users expect to find particular elements in certain areas of a webpage, e.g., company logo in upper left corner. This data is incorporated into the new page layout (see also Appendix C, wireframes).

Identity Logo Current: The company logo is not prominent on the current page. It is small and located to the right of the navigation bar. It is also the wrong color, and therefore not in keeping with the company brand.

Proposed: On the proposed site, the company logo is the correct color and is clearly seen in the upper left corner.

Tagline Current: The tagline (mission statement) is underneath the main photo and, unlike all other text elements on the page, is outside of a box.

Proposed: The new design moves it above the navigation bar.

Search function Current: There is no search function.

Proposed: The new search box will be located at the upper right, where most users expect to find it.

Links to helicopter missions Current: At the top of the site, there are four links next to pictures helicopters. These gray buttons on placed on a gray background, design elements that are not used anywhere else on the page. Because of this distinction

Website Home Page Redesign: Enstrom Helicopter 3

and their location in an area that often contains advertising, visitors may assume this is advertising and ignore the links.

Proposed: In the new design, the topics of these links—missions—has been incorporated into the navigation bar. The top area has been replaced with a simple toolbar which contains only the search box and white space.

Navigation Bar Current: The current site has a navigation bar in the banner box, on top of the large graphic. Both elements are dark and blend together. Hovering over each buttons reveals a drop-down menu.

Proposed: The new design enlarges the navigation bar and moves it above the photo. The typeface is enlarged and has been changed from all caps to initial caps. There are no drop-down menus, which create accessibility issues and do not work on mobile platforms.

Blog/News Section Current: The introduction to the news section is text-heavy and contains no photos.

Proposed: The new design incorporates thumbnails of three stories and a short intro to each one.

Footer Current: The footer contains gray links to Facebook and YouTube, the company name, a link to a sitemap, and a link to the site designer. Users must click on the Contact tab to find contact information.

Proposed: The footer is a dynamic part of the new page. It contains all company contact information and a link so the user does not have to look for a link to obtain it. Also, if a user prints a page from the site, the document will have all the contact information as well as the website URL. The footer also contains colorful, iconic links to all the company’s social media platforms. A dealer section with password protection is a new feature; a login box can be

found in the footer where it does not distract from the main content.

Visual Style and Graphics A website has only a few seconds to make a first impression, so the home page needs to accommodate the short attention spans of today’s web users. The current site is simple and uncluttered, and doesn’t overwhelm the visitor. However, there are other elements of the design that need improvement to make a good impression. (For a visual reference of the current home page and new mockup, see Appendix D.)

Photos Current: The home page has a banner unlike any other helicopter manufacturer’s website: It’s a view from inside the cabin. It is not clear at first glance that this is the cockpit of a helicopter, not an airplane. Text over the banner is in all caps and is arranged with clunky lines. In some browsers, this picture is animated—the cabin moves, and the scene changes from night to day. This detracts from the message the company should be sending with their visuals—that they make helicopters.

Proposed: The large photo on the new home page will be of the company product (helicopter) rather than a gimmicky graphic. The expanded news section will have thumbnails with each story—on the current home page, the user has to click the link to see the accompanying photo.

Color Scheme Current: The color scheme is black and blue—black background with blue text boxes (two different colors of blue). Boxes with text are rounded rectangles with thick, gray borders, and the lighter blue background has a subtle texture. All fonts are sans serif; headings are blue and in all caps.

The page is heavy—dark colors, bold fonts, and thick lines. “Heavy” is not a concept the company wants people to associate with its helicopters! Contemporary


websites have lighter colors and thinner fonts. Flat design has replaced texture.

Proposed: The new color scheme is white, gray, and blue—much lighter than the current scheme. The background is white, and graphic elements such as the logo and a background graphic incorporate blue. The blue background has a gradient but no texture. The navigation bar is dark gray and the buttons are light gray. The mission statement and headings are dark gray, providing subtle distinction from body text and giving the site a contemporary look. Links are in blue boxes.

For color-blind users, some of the photos may have colors that are difficult to distinguish. However, the site color scheme should not create any difficulties in navigation.

Text Current: Headings are distinct from body copy by size, color, capitalization, and boldness.

Proposed: On the new page, the distinctions are color, size, and typeface. Headings and categories in the navigation bar have been changed to first-letter capitalization.

White Space Both the current and the proposed home page are simple and uncluttered.

Current: The old page contains distinct boxes,

Proposed: The new page uses white space to separate many of the elements.

Navigation and Site Structure Current and proposed site structures can be found in Appendix B. Major proposed changes include:

Navigation Bar Current: The navigation bar contains six sections with drop-down menus—Home, About, Models, Support, News, and Contact.

Proposed: The navigation bar is still divided into six sections, but only Home and Models remain from the old configuration. New categories include Missions, Sales, Service (changed from Support), and Company. None have a drop-down menu.

Buttons/Links Current: Four buttons at the top of the page direct visitors to various mission configurations. There is a link to a dealer at the lower right. Links in the body copy (blue text) take users to turbine or piston pages.

Proposed: Buttons at the top are eliminated, and the links are incorporated under the Missions tab. The dealer link has been minimized and included along with three other buttons that represent the goals of various site visitors. These four buttons are located directly below the main body text to welcome site visitors and engage them in key conversations.

Description and rationale of the four buttons is as follows:

• Because a helicopter is a major purchase, potential customers do a lot of fact-finding on their own. These site visitors, such as Scott in Appendix A, can begin exploring the site by clicking Determine what model best meets your needs. Those closer to a purchasing decision can click Find the dealer nearest you.

• Current customers and dealers/service centers with questions can click Receive technical support.

• Job seekers such as Cody in Appendix A can click Check employment opportunities.

Site Structure Current and proposed site structure trees can be found in Appendix B.

Current: The site structure is simple and logical; however, the tabs do not address all the concerns of the visitor. For example, the News tab contains links to the company blog, links to organizations, and a link to YouTube. It is unlikely that a visitor will come to the site for the purpose


of reading press releases or going to YouTube. Also, the Technical Support page is shallow, with a long list of links.

Proposed:

• The buttons currently at the top of the page have been incorporated into the Missions section, and additional missions have been added.

• The Models section maintains its logical organization.

• A Sales section has been added and incorporates the dealer link currently found on the home page.

• The Support section has been renamed Service, and the Technical Support area has been reorganized. Rather than a long list of links that force the user to scroll, the content is divided into subsections.

• The News section has been eliminated. Links to news stories are on the home page. The YouTube link is now grouped with other social media links in the footer.

• Finally, the Company section includes the About us, History, Employment, and Contact sections that had previously been divided between About and Contact.

Readability and Content The current site incorporates good readability practices by using a limited number of sans serif fonts and having a clear hierarchy of text. Readability can be further increased through the following.

Hierarchy & Typefaces Current: All fonts are sans serif. Headings are in all caps, which is difficult to read.

Proposed: The mission statement, navigation bar, body copy, and footer are all sans serif (Alegreya Sans). Button text is Tahoma (also sans serif). Headings are in serif typeface Bitter to clearly distinguish them from text without having to change a number of attributes. Headings use down-style capitalization.

Figure-ground separation Current: The only area that has a problem with figure-ground is the banner—the text is on a busy background and the viewer is unable to distinguish which is more important.

Proposed: Strong figure-ground contrast is essential for readability. Body copy is black on white for superior clarity. The navigation bar is white text on a dark gray background. The mission statement and headings are dark gray. The news teasers are black on light blue—they are still legible, but have a lower contrast. This is a design choice based on these items being less important than the body copy to the left (black on white).

Links Current: Headings and in-text links are blue.

Proposed: Only text that is a link is blue.

Writing Style Current: The writing style of the main content is stereotypical marketing verbiage—flowery rather than concise. The content is nicely divided into short paragraphs, but several of these together give the impression of a large, dull, gray space.

Proposed: The redesign summarizes the most important information in two sentences rather than six.

Message Current: The content does not clearly tell visitors what this company does. The text mentions delivery of helicopters, but it is not clear that this is a helicopter manufacturing company. Text welcomes visitors to the page, but doesn’t direct them or anticipate their questions.

Proposed: The new body text clearly states, “We make helicopters” and includes what category of helicopters and how they are used.


Calls to Action Current: The only call to action is “Click here to find a dealer near you,” yet the percentage of visitors who come to the site to find a dealer is small.

Proposed: The new site has buttons that draw visitors into the site. The topics are based on audience categories. The calls to action all begin with verbs and are above the fold.

F-Shaped Reading Pattern Current: The F-shaped reading pattern suggests that users will go all the way across the screen only at the top. Since there are two rows of links across the top, a user could ignore the top one as advertising and focus on the navigation bar, or vice versa—see the mission links and miss the navigation bar underneath. The company logo is in the second row at the right and could easily be overlooked in any situation.

Proposed: The new site recognizes that webpage readers scan content in an F-pattern. The navigation bar is across the top, and important content and links are on the left side.

Competitor Sites Enstrom’s main competitors in the United States are Bell, Robinson, and Sikorsky (see Appendix E for screen shots of their home pages). The elements that all competitor sites and the Enstrom proposed home page have in common are:

• Company logo at top left • Search field at top right • Navigation bar across top

• Large photo/graphic in banner area • Links to news stories

The elements that distinguish Enstrom’s new home page are:

• A mission statement • Content that states this is a helicopter manufacturer • Text that summarizes what the company does • Buttons/links/calls to action based on user profiles • Company address and contact information in footer • Gamut of social media links in footer (Bell also has these)

Conclusion Enstrom Helicopter Corporation is a small manufacturing firm competing with big names in the helicopter industry. All of these manufacturers claim to make the best helicopters and provide the best customer service. For potential customers to make an informed decision, they must do their homework—and much of that research is done online. Therefore, it is critical that Enstrom have an exceptional forum for that research.

Websites in the industry—including Enstrom’s current site—exist to showcase their products. This is an example of outbound marketing, telling the consumer what the company feels the consumer needs to know. Enstrom can distinguish itself by building its website around the website user. Who visits the site? What expectations do they have? What information are they seeking? Can they find information easily? Are all their questions answered? How can they be effectively engaged?

A website that addresses all these questions, as outlined in this proposal, will make the Enstrom website the go-to place for helicopter information. This inbound marketing approach—drawing customers in—is key to success in today’s market.


Appendices

Appendix A: Personas & scenarios Website persona 1: Training School Owner

Scott owns Fly Right, a helicopter training school in Tennessee. He is a military vet, 38 years old, with a wife and two children. He works with Sam, another certified flight instructor, and has part-time office help. The company, in addition to being a helicopter school, offers aerial photography, helicopter tours, and power/pipeline surveying. Matt owns two helicopters and is considering adding a third as well as an additional pilot/maintenance staff member.

Scott’s top considerations in deciding on a helicopter purchase are: cost, product support, safety, and comfort.

Cost. Helicopters are a large overhead expense, both in acquisition and direct operating costs. Scott would like to keep costs in check to be more affordable to students.

Product Support. Scott needs a customer support system that minimizes maintenance time on the ground—ideally, parts are available and few are life-limited.

Safety. Helicopter flight training can be dangerous! Scott wants an aircraft that is solid, that can stand up to repeated use by inexperienced pilots who occasionally do unexpected things. He also wants a safe aircraft, one that has a good record and can perform (relatively) stress-free autorotations.

Comfort. Scott is occasionally asked, “Will your helicopter hold me?” He needs an aircraft that can accommodate large people comfortably and without restrictions—he prefers to not literally rub shoulders with his students. He also wants a cabin that’s roomy enough for aerial photography—to accommodate equipment and provide maneuverability. In addition, he needs seating to provide tour rides.


Scenario: Scott needs a helicopter that can do a variety of work, from helicopter flight training to aerial tours. Most of his tour customers are couples, and he would like to provide an experience they can share together (i.e. not have one person in front and the other in the back seat). Therefore, he is looking for a helicopter that seats three comfortably with excellent visibility for all passengers. He goes to www.enstromhelicopter.com to check the seating configurations of their helicopters.



Website persona 2: Helicopter Mechanic

Cody is a student at Fox Valley Technical College. He will graduate next semester with a certificate in Airframe and Powerplant Mechanics (A&P). Cody is 22 years old and has a girlfriend, Ashley, whom he met at school. He grew up near Seymour, Wisconsin, and loves hunting and fishing. He attended the University of Wisconsin-Green Bay for a year, but decided that a four-year college was not the right fit for him. Cody enjoys hands-on learning and worked at a manufacturing facility before deciding to pursue a certificate at a tech school.

Cody lives at home with his parent, about a 30-minute commute from school. He works part-time at a machine shop in Seymour, and is saving money for a nicer car. His school loans will be coming due soon.

Cody is very comfortable with technology. He has a smartphone and a laptop, and uses them to do research, make purchases, and organize his life.

Cody is beginning his job search. He would like to stay in the area for several reasons. One, his parents and siblings still live in northeast Wisconsin, as does his girlfriend’s family. Two, he enjoys the hunting and fishing opportunities in the area. And three, he loves the Green Bay Packers. He is looking for full-time work where he can put his education to good use, continue to gain expertise, and expand his skill set.

Scenario: Cody would like a full-time job lined up when he graduates next semester. He talked with a career counselor and updated his resume. He checks the school website regularly for job listings and attended a job fair. His focus is on northeast Wisconsin so he can stay close to family and recreational opportunities. One of his professors told him about Enstrom Helicopter Corporation, located just across the Wisconsin border in Menominee, Michigan. This is a 75-minute drive from his family home; he believes this commute is viable until he gets a place of his own. He is going to www.enstsromhelicopter.com to learn what positions are open and how to apply for a job.


http://www.enstsromhelicopter.com/

Appendix B: Before & after site structures

Current site structure of Enstrom Helicopter Corporation website


Proposed site structure of Enstrom Helicopter Corporation website


Appendix C: Before & after wireframes

Wireframe of current home page, Enstrom Helicopter Corporation


Wireframe of proposed home page, Enstrom Helicopter Corporation


Appendix D: Original home page www.enstromhelicopter.com



Proposed home page mockup


Appendix E: Competitor Sites

Pros: • Simple color scheme • Simple layout—nav bar, photo, news, links • Good photos; news stories well-defined • Available in three languages

Cons: • Where do I go? • Footer—small, white text on black is difficult to

read • Where is this company located? • No welcome text

Pros: • Pleasant blue & white color scheme • Nice gallery of photos • Nav bar with dropdown menus

Cons: • Where do I go? • What is all that white space at the bottom? • Links on left don’t make sense if I don’t

already know something about this company • News is buried in links • Where is this company located? • No welcome text

Pros: • Clickable silhouettes of various models • Beautiful helicopter graphics • Dramatic

Cons: • Dark • All white text on dark background is hard on

the eyes • Animation and audio start automatically • Where is this company located? • No welcome text • Lots of links: Tool bar, nav bar, boxes of links,

and footer • Who is the login for?


Website Home Page Redesign - Lincoln Media Design · The redesign will incorporate: •...

Documents

Transcript of Website Home Page Redesign - Lincoln Media Design · The redesign will incorporate: •...