Website Design Case Study
Nevermore Search Marketing Website Re-design
Case Study Executive Summary
Case Studies Website Design Case Study: Nevermore Search Marketing Website Re-design Case Study Executive Summary
The objective of this web design case study is to provide insight into how Digital Overcast approaches web design and the creative process involved in developing a website including:
- consulting
- market research
- creative
- design
- HTML /CSS coding
- browser compatibility testing
- project coordinating
- site launch
As with all custom website design projects I take on, the first and most important step begins with listening to the client. The majority of the time it's a one-way conversation while I take notes. As the conversation progresses they naturally begin to talk about what they're passionate about: the company, what they offer, and the customers they serve; all of which are critical components I need to know in the initial phase of the web design process. Clients often times provide little snippets of information during the conversation that I would not otherwise have found in conducting market research and are great sources of inspiration that directly influences the direction of my web design proposal.
In this case study we will be taking a look at Nevermore Search Marketing were the owner, Mike Wilton, already has a website, but wanted a more visually appealing design to not only represent his company online, but to also reflect the type of services his company offers and cater more to his target market.
Original Nevermore Homepage ScreenshotOriginal Nevermore homepage screenshotThe Challenge In the case of Nevermore Search Marketing, Mike wanted a new website design that really emphasized what set him apart from others in the industry. I hear personalization is where Google is taking search and clearly the direction I would have to take with re-designing the Nevermore website. During our initial meeting it was apparent that Mike's love for search engine marketing centered around a good challenge and being open minded in his approach. Even before the end of our conversation I had already envisioned how the website would look like. The depth of detail Mike provided was enough for me to get started in giving the site a makeover. There was only one special request: the homepage needed to have a 3 column layout.
An important element during the initial design phase was finalizing a color scheme. The combination of colors on a site can greatly influence navigation design, overall layout, and user experience. The decision for the color selection was based on the company name, company logo, and the existing color scheme on the old website. Final Colors: black white gray red (highlighting where / what you want the visitor to go / do)
The next element was establishing a theme. This plays a vital role because it creates brand identity with visitors coming to the site and may impact future marketing efforts in building brand awareness. The theme I came up with for the new website reinforced the Nevermore Logo. The background history for the name of the company and logo derived from one of Mike's favorite short stories by Edge Allen Poe, The Raven. In keeping with company tradition, black wings were used as the background for the site.
The Solution Pen and paper was used to create a basic wire frame mock up. This initial step provided a general idea of where everything would appear. After completing the visual aid Adobe Photoshop and Illustrator handled filling in all the details, photos, textures and color. Once this step was completed it was presented to Mike for feedback. The proposed design was approved with only one requested revision (reversing the colors for the company name and immediate background). The green light was given to start the next phase in converting the design to HTML/CSS.
New Nevermore Redesigned Homepage ScreenshotNew Nevermore homepage screenshotThe entire site is completely void of tables using only css for layout. Another advantage is the use of clean HTML code and picture file size reduction (jpg, png, gif) with some by as much as 90 percent without any visual loss in quality. This translates into a faster loading site and may influence rankings according to Google.
Once the PSD to HTML/CSS conversion was finished, the site was tested for compatibility across the top 5 internet browsers (Internet Explorer, Firefox, Chrome, Safari, and Opera), all of which the site passed.
The entire process (consultation/discussion, brainstorm/mock up/design, initial web design proposal/presentation/review/feedback, approval/conversion/ testing, and finalization/hand off) took less than one week spanning a period of only six days from start to finish.
