Enhancing User Experience

Being a self-employed web designer, I have to work on various aspects of a project along with Visual Design; namely, Information Architecture, User-experience design and Usability. More often I get projects where the requirement is more than just Visual Design and HTML/CSS. It feels good to solve problems than just adding color and pixels. Making things simpler, usable and easy is what I enjoy the most.

What is User-experience?

“User experience” encompasses all aspects of the end-user’s interaction with the company, its services, and its products. The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use. True user experience goes far beyond giving customers what they say they want, or providing checklist features. In order to achieve high-quality user experience in a company’s offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design.

[via Nielsen Norman Group]

Problem at hand

The challenge was to reduce the clutter, streamline the search process so that it makes more sense and users can easily complete the desired actions. The current design had some major complexity issues:

  1. Where to start: In the current design it was hard for the user to figure out the starting point. They were a bit confused whether
    1. to select the search provider,
    2. use drop-downs for search, or
    3. simply enter search keywords under “Open Search”

    referral-click_old_search-page

  2. What is next: It was hard for users to guess what will happen next after they pick a provider type from the left column.
  3. Lack of organization: The content pop-up was stuffed with information with the lack of any clear idea of call-to-action. The glossy buttons on right were actually tabs which no one can ever think of.

referral-click_popup-page

Solution offered

The main logic behind the solution I presented was offering user one step at a time. The revised design was focused at:

  1. providing clear path to move forward
  2. reducing the clutter
  3. more meaningful navigation
  4. easy to use more info pop-up box

Step-1: Take one at a time

On the very first screen a user is offered with an opened drop-down menu to select a provider type, no more clutter, just a simple and straight forward selection to make. “Filter by providers name, city…” at the bottom gives an idea to user about what’s coming next. Reference: The Apple Store’s Checkout Form Redesign

revised_referral-click_search-page

Step-2: Move forward step-by-step

After user has made his selection, a new set of drop-down appears. User is also given a second choice: “Find by name, group etc.”

revised_referral-click_search-page_4

Step-3: Clear Directions

Both the choices, “Filter by” and “Search by keyword”, are shown one at a time so as to avoid confusion. User can make his own selection to move forward.

revised_referral-click_search-page_3

Clean and organized

The pop-up screen is given special care because this is what user comes for: Doctor’s information. Proper tabs are provided and number of tabs are reduced offering only the most necessary tabs. Rest of the information was revised and adjusted for the best possible visibility.

revised_referral-click_popup-page

Client was happy and quite satisfied with the solution, so was I. Revised design meets client’s requirements and offers nice user-experience for the intended audience which is always my first preference. Looking forward to more opportunities like this.

4 Comments

Add your comment


  • # James Duncombe
    says on June 16

    Hi,

    This was an awesome post! I enjoy reading your posts on redesigns/realigns. They’re always really informative.

    Thanks,

    James


  • # Claudio Meirana
    says on June 18

    Very good redesign, simple and clean as I like, congrats 😀
    Unfortunately not all the clients appreciate this clean approach 🙁


  • # Raghav
    says on July 07

    Nice and clean design.


  • # Orth Otic
    says on October 11

    Agreed Claudio. They want to clutter up their message, slow down their page loads (and pay me more) when simple does the job as good or better.