Design Choices: Building a Better Home Page
I buy flowers and gifts for family and friends from an online retailer called Bloomex. I always start on their home page to try and locate an item within my price range. This task takes more time than it should because the site fails to address basic usability.
I continue to shop from them because their products and service are great but that is not reflected on the site.
Appearance can greatly influence perceptions, and we carry that mental model with us when sizing up a website” – Aaron Walters, lead UX Designer for Rocket Science Group
Improving the home page would be a good start so I decided to propose one possible solution. In this article I will explain my solution and hope to emphasize the importance of making design decisions using proven usability practices and design fundamentals. Lets not forget common sense.
Navigation
The primary navigation is disjointed and buried under the banner. It is most effective adjacent to the main content area. The option for policies is rarely a first choice for people so I grouped it with other like items in the footer. Help can be grouped with other support information (e.g. phone number) and specials can be expanded within the main content area.
A Google search of similar online stores shows common navigation choices for product categories are flowers and plants, and gift baskets. Providing links for about the company and contact information establishes credibility and trust with the company. These options combine to form a navigation that is easy and familiar for people.
Site Utilities and Support Information
It’s important to group like items together such as phone number, live support and help for people to see the similarities, and differences between items. People often lean on search to find what they are looking so I made it larger and relocated it to the top right. I placed the groups at the top of the page because they are often found there on many sites (e.g. eBay and Amazon). Familiarity is usability.
Content
The content does little to communicate the site’s purpose or summarize what the company does. The banner ad is a partial attempt to convey that but many people ignore ads or elements resembling an ad. Revealing a selection of gifts provides a good insight to their products. People will glance for keywords so I accommodate the behavior by providing emphasis on content such as the tag line, titles and links.
Hick’s law of design principle states that the time it takes to make a decision increases with the number of alternatives. By limiting the tasks to a handful of choices there is clear starting point for people.
Shipping, weekly specials and creating your own are ideal choices for valuable tasks on the home page. Bloomex attempts to highlight those choices throughout the site.
The footer can be utilized for additional content and content that doesn’t require prominence. Bloomex packs the footer with SEO content much of which can be accomplished with better content on pages such as meta information.
Design
Visual design influences usability.
It’s shown that beautiful design creates a positive response in the brain, which actually improves our cognitive abilities” – Donald Norman, cofounder of the Nielsen Norman Group
I started by refreshing the existing color palette to provide better contrast and elegance, combined with appropriate white space and borders establishes a harmonious theme.
The theme is not complete without typography. Though Verdana has stood the test of time we now have more options for legible and attractive fonts. I picked two contrasting fonts for emphasis between the tag line (Candara) and other text (Open Sans). Variations in other text can be accommodated by ten different options of Open Sans.
I added icons to create visual cues and enhance content presentation.
Images would have been an alternative. Instead I use them in the carousel, which is the replacement for the banner ad and revealing deeper richer content at a glance. I use a (960) grid to group the elements and widen the layout to complete the harmony.
What about Mobile?
To have a successful mobile site or app, the obvious guideline is to design for the small screen. Sadly, some don’t, and we still see users struggle to hit tiny areas that are much smaller than their fingers. The fat-finger syndrome will be with us for years to come. The second point is more conceptual — and harder for some people to accept: When you have a smaller screen, you must limit the number of features to those that matter the most for the mobile use case” – Jacob Nielson, usability expert.
I considered these and other mobile usability guidelines when I started to ensure my solution would be scalable for mobile devices. Mobile is no longer an after thought.
Closing Remarks
Before I started I thought about a realign instead of a redesign to fix the fundamental flaws but visual design was part of the issue. Using sound principles I looked at individual components and restructured for a better user experience. Its easy to leap to Photoshop first but that only provides a temporary solution.
About The Author
