Redesigning the SmallBizContracting Homepage
Redesigning the SmallBizContracting Homepage
Join the DZone community and get the full member experience.Join For Free
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.
Setting Objectives for the New Site
- 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.
- 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?
- 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.
- To make the site usable on more devices. The original site did not scale to accommodate smaller screen sizes.
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.
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.
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.
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.
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 , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.