HTML5 Zone is brought to you in partnership with:

Fascinated by the "craft" of software development, Eric Pugh has been healthily involved in the open source world as a developer, comitter, and user for the past five years. He is a member of the Apache Software Foundation, and lately has been mulling over how we move from read/write web to the read/write/share web. In biotech, financial services and defence IT, he has helped European and American companies develop coherent strategies for embracing open source software. As a speaker has has advocated the advantages of Agile practices in software development. Eric became involved in Solr when he submitted the patch SOLR-284 for Parsing Rich Document types such as PDF and MS Office formats that became the single most popular patch as measured by votes! The patch was subsequently cleaned up and enhanced by three other individuals, demonstrating the power of the Free/Open Source Model to build great code collaboratively. SOLR-284 was eventually refactored into Solr Cell as part of Solr version 1.4 Eric co-authored "Solr 1.4 Enterprise Search Server", the first book on Solr. he blogs at http://www.opensourceconnections.com/blog/. Eric is a DZone MVB and is not an employee of DZone and has posted 8 posts at DZone. You can read more from them at their website. View Full User Profile

Redesigning the SmallBizContracting Homepage

03.19.2013
| 1362 views |
  • submit to reddit

OSC came to me with an interesting task: To do a quick refresh of SmallBizContracting.com. The first thing that I did was to visit the site so that I could find out what it was about. What I discovered was that figuring out exactly what the site was and how it could benefit me wasn’t all that easy. In fact I was confused by the homepage because even though it provided a lot of information it never explicitly said that the site is a searchable database of businesses. The primary heading told me that I could “Quickly and easily find small businesses” but the only search box seemed like an afterthought and was tucked away in the navbar. Without exploring beyond the homepage I could mistakenly assume that this is an informational site about contracting. These initial misconceptions helped to shape my main objectives for the redesign.

enter image description here

Setting Objectives for the New Site

  1. To quickly explain the content of the site up front (a huge database of companies indexed by their business classifications and NAICS codes). This information is especially important for first-time visitors.
  2. To make the benefits of SmallBizContracting.com immediately apparent (easily finding contractors to partner with). In other words: Why should they use this site instead of something else?
  3. To direct the user to take the correct initial action (searching to find a specific contracting lead). This helps to ensure that the first business listings a user sees are related to their interests.
  4. To make the site usable on more devices. The original site did not scale to accommodate smaller screen sizes.

enter image description here

Content is King

While reworking the homepage content my goal was to quickly explain the site and then guide the user to the search bar. Accurately defining the site up front is important so that users know what to search for. Instead of using vague terminology, I cut straight to the details:

Easily search over 140,000 small businesses, categorized by NAICS codes and disadvantage classifications.

That heading quickly sums up the site, and gives users a clear frame of reference for interacting with the rest of the content.

Next I restructured the supporting content and broke it into small chunks so that the whole page is much easier to scan. In the new design there is still some explanatory text below the search bar but it feels minimal compared to the old content. For people who would rather browse through the site I added links to the business classifications on the homepage. This makes the classifications much more functional, and because they are in a list it is easier to get a quick overview at a glance.

Putting the search bar in the center of the page makes it unmissable. One subtle design change is that the new search box is automatically selected when you arrive on the homepage. This further emphasizes it, and because it is selected you can easily type in keywords without having to click it.

enter image description here

Responsive Design

During the last few years mobile web browsing has skyrocketed, making it important for sites to work across many device types. The original site was fixed-width which means that the content did not reflow for small screens. By using Bootstrap responsive I was able to set up some good defaults for resizing elements and made sure that the content would adapt to mobile devices.

enter image description here

The new mobile site (left) is a huge improvement over the old layout.

The Little Details

Adding variation in the fonts, and contrasting colors made everything more readable. Color is a great way to position a product and to make it unique. The old color palette was stark and made the site feel a little overbearing, so to add contrast I used colors that were more vibrant. Color was also used to de-emphasize the navigation bar and bring more attention to the content and headings. In place of the large illustrations from the previous design I created some custom icons to break up the page and highlight key concepts. The new icons don’t overpower the page, and they serve as visual markers for some of the supporting information.

enter image description here

My goal for the icons was to keep them simple and unobtrusive while still reinforcing the three main points of the site: contracting leads, targeted results, and small businesses.

In Closing

Overall this redesign improves SmallBizContracting.com’s position as a great resource for finding contracting partners. The new design has a clear focus and the content is easier to understand. Hopefully this glimpse into some of the thoughts behind the redesign shows the important role that content plays in a project.

Go check out the new site, and let us know what you think. http://smallbizcontracting.com/




Published at DZone with permission of Eric Pugh, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)