Case Studies:  1. Complex Medical Device UI  2. Mobile eCommerce Website   3. Large Information Website  4. Smart Energy Product Suite

Large Information Website

The Florida Bar has an enormous website which provides content and services to its members, those in the legal profession and the public. They hired Sage Research & Design to help improve the user experience of their website and help ensure that they were fully accessible to all users including mobile and disabled users.

 The Challenges

• Content additions had been made continuously for several years without detailed thought to site organization
• The website had many content managers distributed across multiple teams and organizations

What We Did

home

1.  User Research
An expert usability review and usability testing were both conducted on the web site to assess the current user experience.
Problems Discovered:

• A visually complex home page
• Site navigation was inconsistent and complex
• Page content was often dense and difficult to scan
• Visual design was inconsistent, outdated and dull

cards on a table

2. Card Sort Study

User research revealed that the site’s information architecture needed an overhaul to improve the site’s organization. We began this effort with a card sort study to determine how website users mentally organized the website’s content. Sixteen website users sorted existing and planned website content into categories.

ai

3.  Information Architecture

Based on the data collected from the card sorting study, the top three levels of the site’s hierarchy were developed. Here, the new website organization is shown as it will be seen in the left hand navigation bar, in horizontal fly-out menus and in a “Related Links” sidebar box found on each page.

template

4. Page Template Design

A series of templates were created for various page types found within the site to promote consistency across the site and control multiple content providers.  As an example, the content page template was created to be flexible yet solve UX issues found during our research phase.

• “On This Page” section allows users to quickly determine if they are on the right page
• “What Do You Want to Do?” boxes provide task based links
• “Related Links” box provides a method for jumping sideways in the hierarchy
• Clear grouping of page content
• Flexible areas for call-outs or announcements
• Ample room for ads

new_design

5. Visual Design, Branding & Style Guide

A new visual design was created that conveys a strong sense of professionalism and visual simplicity. The colors of the Florida state flag inspired the color palette selection and a new header was designed around the beautiful architecture of the Florida State Bar office building. Finally, a visual style guide was created to serve as a reference and guideline for all content providers.

The Results

• New site pages and content merges seamlessly into existing content thanks to the new templates and style guide.
• Users are able to find the information they need quickly and easily
• A satisfied client

“Your comprehensive site review and professional analysis, usability testing, navigation card sort, and design style guide set our redesign efforts on a clear course that helped us improve site usability. The detailed reports are full of examples, explanations and visual aides that continue to be a valuable reference as we continue our efforts to improve The Florida Bar website. We are happy to serve as a reference and to recommend Sage Research & Design as an excellent resource for improving usability.”

Francine Walker, Communications Director
Patricia Hohman, Website Content Manager
The Florida Bar

 

Case Studies:  1. Complex Medical Device UI  2. Mobile eCommerce Website   3. Large Information Website  4. Smart Energy Product Suite