Andrea J. Kendall's Portfolio

Andrea Kendall

Biography

Picture of Andrea Kendall
  • About Me
  • History

Guitar Center

eCommerce

Guitar Center shopping page example
  • Usability Analyst
  • Web & Mobile

RedSeal Solutions

B2B

Trading Manager login
  • UX Designer
  • Web

Sun Microsystems

Relationship Manager

Master Data Management Relationship Manager
  • UX Team Lead
  • Web & Desktop

Sun Microsystems

B2B

Business to  Business dashboard
  • UX Designer
  • Web & Desktop

Andrea Kendall

Biography

Summary

Creating things people want to use.

With over 10 years of Usability design and software development I have worked in a variety of roles with my passion being Usability Design.

This portfolio is a showcase of recent designs I have participated in and the role I played in creating them.

How to get more information

My love of art drew me to computer graphics programming and started my career. Then one day I read a book that would change the way I view everything, Donald Norman's Design of Everyday Things. It was then that my passion for creating usable interfaces was born.

My career began at IBM in Santa Monica where I implemented many a Graphics User Interface. IBM was a great place to work; lots of really smart, classy, people Best of all, we were inventing new things all the time. I also enjoyed being the president of the local IBM club where I was responsible for organizing events with over 3,000 attendees, such as family picnics and holiday parties.

After my days at IBM I moved to a small company, Software Technology Corporation (STC), with only sixty employees. I was fortunate enough to work on the design and implementation of the flagship product called DataGate. DataGate was responsible for the company growing to around 850 employees before going public as SeeBeyond. Finally SeeBeyond was bought and merged into Sun Microsystems.

At Sun I sought to learn even more about Human Computer Interaction (HCI) and sought out mentors in the XDesign group. Given my background in programming I found that I was able to help identify designs that could be implemented in a timely manner.

After Sun Microsystems, I worked as a contractor at Guitar Center where I improved their E-Commerce site by using the available analytics, documenting and improving the existing navigation flow, giving an expert review of their mobile application and working on wire frames on for improvements to their on-line E-Commerce site. Guitar Center was a blast to work at. Where else does a Usability Expert get to hear people jamming on Fridays? I left the assignment jazzed by the improvements that I made.

I am currently living in beautiful Oregon were I hope to continue to make products that customers want to use.

Old site needed a fresh look

My old portfolio site was created to mainly showcase examples of projects I have worked on. Thus not a lot of time was spent to give it a modern look.

This update replaces the clunkly old navigation with a more interactive model.

Here are some examples of what the old site looked like. The old site can be viewed at http://www.andreajkendall.com/indexOrg.html.

The home page

The site used a static linear navigation. Users had to scrool down the page to see all the projects that I had worked on.

Old portfolio using static linear navigation

The new site is more interactive and all the projects are viewable in the top fold.

An example page

The old site navigation used links to the various sections and “Back” and “Top” to allow navigation within the page and back to the home page

Example old page.  Lots of scrolling and sections not clearly separated.

The new site organizes each section into tabs for easy viewing

Implementation of this site

I used the following to implment this site:

Guitar Center

eCommerce

Work included an expert review of the mobile site, documenting and improving existing navigation flows, both CrazyEgg and IBM Unica NetInsight analytics, competitive research and mock ups.

Guitar Center had two existing E-commerce sites, one for the Web and one geared towards mobile users.

The Webpage

The web application had become hard to navigate, inconsistent and many customers did not complete their transactions.

It was decided to improve the navigation flow by first analyzing the existing flow, looking for patterns and issues. Once the navigation flow was captured recommendations were made for improving the flow. Additionally, the shopping cart and checkout process was identified as an area that needed redesign. I assisted with creating wireframe proposals of an updated shopping cart and check out experience. For the checkout I recommended a “progressive form”. With “progressive” form users filling each portion in sequence, but the entire information is readable and updatable.

The Mobile application

It was decided to do an expert review of the existing mobile application. Over 100 problems were identified with solutions for solving the issue. The problems were categorized and a summary of the areas that would benefit most from a redesign were identified.

Web site Analytics

Analytics were reviewed and summarized in order to both identify the current behavior of customers and where they were exiting the flow. The large drop off of customers during the checkout process highlighted the need for a redesign of that feature.

Guitar Center's web E-Commerce site has a complex navigation. Here is the navigation flow diagram for the existing Wish List created using Omnigraffle.

Guitar Center is looking to improve it's Shopping Cart and Checkout. Here are some of the wire frames for the proposed look of the Shopping Cart and Checkout.

Adding an item to the Shopping Cart

Add product to shopping cart

Updated Shopping Cart

New look for shopping cart

Editing an item

A similar dialog is shown for adding an item from the Related Accessories or Similar Items.

Update item dialog

Checkout

The following "progressive checkout" has the advantage over traditional checkouts of showing all information on one page while allowing a customer to not be overwhelmed by the amount of information.

Checkout: Step 1 - Shipping

If a customer has already logged in then they would start on step 2, billing with most of the information pre-filled in. If a logged in customer did not have to change the shipping address or billing they would only need to supply their Credit Card ID.

Shipping

Checkout: Step 2 - Billing

Error Checking

Billing portion with errors clearly marked

Multi Pay

Multi pay

Checkout: Step 3 - Place Order

Place order

Checkout: Order Confirmation

Order confirmation looks like a bill

I performed an expert review of the Guitar Center mobile application: http://m.guitarcenter.com/and identified over one hundred usability issues.

Here are small samplings of some of the issues and required fixes.

Issue: Footer has duplicate search area

The duplicate search area blends in with the main information on the page.

Confusing redundant search area.

Example is with Find a Store, but all pages, except the home page, have this.

Recommendation

Either remove the duplicate control or place it in a red background so it looks like part of a consistent footer.

Issue: "Zip Code" in Zip Code field is not helpful


Help text for zip code is 'zip code'.

Recommendation

Either retrieve a default Zip Code from the phone’s GPS or leave blank.

Issue: Position of Coupon Code in the Shopping Cart

Placing the coupon code below the "Checkout" button does not allow for a logical navigation flow.

Poor placement of checkout button. Also size of text on other buttons is too large.

Recommendation

Here is redesign of the screen.

Checkout button moved to bottom and other buttons made smaller

Issue: “Find Friend’s Wish List” is missing information that is shown on the website

“My Account” > “My Wish List” > “Find a Friend’s Wish List” > “Wish List Result” > “Friend’s Wish List Items”

Should show friends name. Missing information: Desired, Received, Priority, Cost, Quanity to buy, and Add to Cart

Recommendation

  • Show missing information and add an easy to see “Add to Cart” button for each item
  • Change the title to “Friend’s Name’s Wish List"

Summaries of analytics from CrazyEgg. I loved CrazyEgg's Overlay and List features.

The following is a summary of all CrazyEgg reports. It represents the average values for of seven reports.

GC Home Page (7 reports)

Each report is based on 5000 visits with an average of 5 hours 27 minutes.

Average number of clicks: 5097 (about 1 click per person)

Heatmap

The usage did not change much over the five reports. The following areas were consistently the high use areas:

bullet
Keyword or item # search most used
bullet
Used gear was the most selected tab
bullet
Guitar was the most selected category
bullet
People look at the different top banners via the thumbnails
bullet
“On Sale” tab was the most selected from top picks, on sale, new arrivals, rebates
bullet
People scroll through the thumbnails on the carousel
bullet
Few people click on the information in the footer. Those that did mostly clicked on Careers

Scrollmap ( 2 reports)


bullet
Less than 50% of customers scroll past the fold (bottom of Top Picks tabs)
bullet
Less than 25% of customers scroll to the footer area

Confetti

The different categories of users (first visit or repeat) all tended to click in the same areas.

Referrer

Total average clicks: 5097

bullet
Direct / guitarcenter.com are the largest referrers with an average of 67.55%
bullet
Google.com was always second place with an average of 16.87%

Return Visitor

New verses Returning Visitors
Visitor # Clicks (Average) % Clicks (Average)
New 3445 67.6%
Returning 1651 32.4%

Assuming that these numbers are accurate (not a given), then it appears that most customers are new customers. Furthermore, it looks like only about 1/3rd of customers return to the site.

Also looking at the Confetti maps of the new and returning customers they both commonly interacted with the same parts of the home page.

Overlay

The three areas with the highest click rates remained consistent through all five tests. The following is the average of all the percentages.

Highest Percent Click Rates
Area % Clicks % New Visitors % Returning Visitors % Top Referrers % Top Search Terms
Keyword or Item # 16.86% 67.26% 32.7% 39.64% guitarcenter.com

27.99% Direct

16.26% google.com

78.1% None

14.64% guitar center

ImagebrowsenextPage right 10.41% 66.86% 33.2% 40.26% guitarcenter.com

27.67% Direct

16.71% google.com

78.1% None

15.11% guitar center

Guitar tab 7.26% 68.04% 31.8% 39.77% guitarcenter.com

27.49% Direct

16.71% google.com

77.61% None

15.54% guitar center

The data indicates that searching via a keyword/item # is the most common action. The next common actiion is to view the items in the Top Picks, On Sale, New Arrivals and Rebates tab area. The third common action is to select the Guitar tab directly.

The other thing of note is that most people navigate directly to the Guitar Center web site. Of those that use a search engine most enter the site via Goggle.

As for return visits, most people go directly to the site (note the % of users that did not use search terms). Of those that search for the site most look for “guitar center”. Looking at the top search term report shows that most of the search terms are variations on “guitar center” such as “guitarcenter”.

Customers don’t oten use the icons that allow them to view information created by Guitar Center for Facebook, Twitter, You Tube and the GC Blog. At most two people clicked on these icons on each report.

List (Both)

The three top areas that users clicked on did not change over the reports. The average number of clicks on these areas are:

bullet
Keyword or item #
  17.10%
bullet
imagebrowse nextPage right
  10.54%
bullet
Guitar
  7.36%

The only slightly surprising result here is that customers look at the products in the Top Picks, On Sale, New Arrivals and Rebate Tabs more than they directly click on the Guitar tab.

RedSeal Solutions

B2B

Designed screens for a Business to Business Trading Manager by interviewing domain experts. Mock-ups where accepted by RedSeal Solutions and reviewed by customers.

GWT-EXT 2.0.5 was selected to impliment the Trading Manager. I was very pleased with the choice of this widget set because the design did not have to radically change to fit the selected technology.

RedSeal Solutions needed to provide a rich Web based interface to allow users to maintain their Business to Business Trading Management data. This included the need to maintain an arbitrarily large number of Trading Partners and associated agreements, Communities and Protocols. Additionally, the Trading Manager needed to provide access to administrative task such as defining users and access roles.

The first version of the Trading Manager would be geared towards an Administrative user who had no access restrictions. Future versions would include views of the data to support a 'self serve' model. In the self serve model a user would only be able to update information for the Trading Partner that they where associated with. Additionally a user in 'self serve' mode would only be able to view the Trading Partners / Communities that they had an agreement with.

The look and feel needed to be able to be consistent with widgets that would be able to be implemented using GWT-Ext.

The most difficult part of designing a Trading Manager is providing support for complex Protocols such as AS2, X12, ebXML and HIPAA. The screens had to allow a user to quickly define the flow of information from one Trading Partner to another. The same screen needed to support concepts such as batching messages for delivery and selecting an associated protocol used to deliver the data (example: delivering an X12 message using AS2).

Actors where defined. Mock-ups where created as well as screen flows. All deliverables where both reviewed by domain experts in Business to Business and customers.

This is a summary of the actors we identified. The real actors had names and much more detailed descriptions.

Administrator

Responsible for a portion of the Trading Manager. This user maintains the portion of the Trading Manager for which they are responsible including associated runtime task.

Administrator users include:

  • Suite Administrator

    Responsible for the entire Trading Manager. Maintains everything.

  • Trading Partner Administrator

    Responsible for a specific Trading Partner and that Trading Partner's agreements. Also maintains protocols used by the Trading Partner.

  • Community Administrator

    Maintains the communities, companies and departments by defining the users associated with them.

EDI Administrator

Responsible for a portion of the Trading Manager. This user maintains a portion of the Trading Manager but does not configure any information associated with runtime task.

EDI Administrator users include:

  • EDI Administrator
  • Trading Partner EDI Administrator
  • Community EDI Administrator
  • Protocol EDI Administrator
Executive

Looks at the bottom line of a business. Needs to examine Trading Manager entities but does not want to maintain them.

Executive users include:

  • Executive
  • Trading Partner Executive
  • Community Executive
Suite Tuner

Cares about making the system performant. Configures runtime information such as Protocols, Databases and Plug-ins.

Trading Partner

A specific entity that participates in an agreement. Trading Partners send and receive Business to Business messages using specific Protocols.

Permissions

The following are taken from the RedSeal Solutions Walkthrough. I would like to thank RedSeal Solutions for permission to show the screens as a part of my portfolio. RedSeal Solutions maintains all rights to these designs as indicated by the copywriter statement on the images of the slides.

Contacts for a Partner

The Trading Partners shown are the user's favorite Trading Partners. This allows a user to select from a large list of Trading Partners and easily find the information they are looking for.

Screen design for contacts for partners

Managing Agreements

Coming up with a screen for the Agreements was the most interesting design problem. For the most part it was expected that users would work from templates. However, the GUI needed to be able to support creating complex Transactions from the GUI. To easy the set up needed users can copy a properties from a section of the properties. This allows a user to copy common settings like FTP settings for each Transaction.

Screen design for managing agreements

Create Agreements Wizard

Another way to create an Agreement is to use a Wizard. The following shows steps 3 and 4 of the Wizard.

Notice that the help text was also included to show the style and wording of the help for each step.

Optionally define Transport details


Create Agreement Wizard step three of four. Optional transport details.

Define Transactions

Step 4 of 4 of the Create Agreement Wizard. Reuse makes the configuration easy.

Create Agreement Wizard step four of four. Define transactions.

The following show part of the Screen Flow diagrams created as part of the deliverable. Icons from the mock-ups where used to indicate the functions selected by the user.

Diagram of the Trading Partner navigation

Sun Microsystems

Relationship Manager

Led the creation of requirements for the Multi Domain Manager by working with management and other stakeholders. The requirements were driven by several rounds of mock-ups I created. The mock-ups were key in understanding the required functionality of the application and focusing the development efforts.

The application was an Open Source application allowing us to get rapid feedback from our user community.

Sun's existing Master Data Management application could merge records with mistakes, such as misspelled names, and figure out the real data. The next step was to enhance the application by allowing users to define connections between these records in different 'domains' or groupings, such as a company domain and a patient domain.

Distinct connections would need to be supported. For the first release we concentrated on:

  • Many to many Relationships between two different domains
  • Hierarchies of records in a single domain

Administrator

Defines connections between domains and the associated attributes of that connection.

A sophisticated user with years of computer experience. The user primarily uses the web portion of the GUI to make quick updates and maintain existing connections.

Data Manager

Examines and maintains connections. Once a template for a connection has been defined this user can examine and maintain the records in a connection.

User is comfortable with computers including using trees for navigation.

Visualiing relationships to a single record was the most difficult challenge. The user also needed to reassign records in a relationship and drill down from child records.

This screen shows the relationships and details about the records in a relationship. Prior to this screen the user would have selected the record of interest. A user can view details about the records in a relationship and view/update relationship attributes from this screen.

Maintain by record screen

The top portion of the screen uses a simplified brain map of the relationship model. The brain map both allows users to visualize the relationships and acts as a navigation tool.

Top of screen shows simplified brain map

After the mock-up was handed over to an artist the look and feel was updated as follows. I especially like the toggle button between the summary view and the details view.

Artist rendition of screen

The JavaScript client-side library, DoJo was used to implement the screens. I was pleased with the look and feel as well as with how smoothly the resizes worked.

Implimented screens matched design perfectly

Sun Microsystems

B2B

Worked with Sun's usability Xdesign team on the mock-up for an extendable Business to Business dashboard. I was responsible for portions of the mock-up including a way to show complex data structures such as AS2, X12, ebXML and HIPAA.

Sun's existing Business to Business application message tracking did not have a way to visualize messages. Additionally, most of our customers had expressed a desire to mine the message for business and Trading Partner data.

From customers we learned that they needed a dashboard that they could easily extend with their own screens. The customers expected that the application would ship with some dashboards for their typical users.

Business users
  • Dollars and cents — cut waste and increase profits.
  • Who is costing us more/less and why?

Uses computers a lot, but is not expected to be an expert user or programmer. Wants to get results quickly.

Operations users
  • Make sure the end-to-end system is up and running correctly.
  • View alerts about something that was expected to happen but did not. For example, "Purchase order 99587 has not finished processing".

A more expert user who also trouble shoots why the problems occurred. Needs to be able to drill-down to see causes of errors in the system.

Business-to-business centric users
  • Track transaction status for standard messages.
  • Drill down to lowest level of a message and show:
    • The Message Hierarchy.
    • Errors and Warnings in messages.
    • The actual data sent.
  • Resubmit messages back to the system after correcting errors.

Expected to have a deep knowledge of B2B messages and be comfortable with the raw message format. These customers are used to using computers but may not be computer experts.

Operations View

User can drill down from a graph to the messages that generated that graph.

Dashboard showing transition count bar graphs and tasks.

User clicks on errors portion of bar to see list of errors processed at 1:00 am. Because the user was on the Operations View tab the user also sees a list of tasks.

Drilled down to list of errors.  Screen has a breadcrumb to allow navigation back to the graph

Transaction View

Displays a message as sent / received by a Trading Partner.

The example used in the mock-up was of an AS2 message that contains an X12 message. This example was selected because it represents the most complex case that the application was expected to deal with.

Here the user has selected an 850 Purchase Order where the data was semantically wrong but the record was able to be processed. The messages and Acknowledgements (Acks) that flow through the system are clearly shown. Tool tips (not shown here) make sure that color is not the only distinction between normal messages and Acks.

Users could select portions of a message to view a &ldquot;dialog&rdquot;. The dialog shows the records that flow from one Trading Partner to another as a result of a record being sent / received. In the below example, an 850 was sent to Trading Partner 2. Trading Partner 2 sent back both a 997 (Ack) and an 855. When Trading Partner 1 received the 855, Trading Partner 1 sent back its own 997 (Ack).

Message view as tree; dialog showing flow of messages using arrows; details; history; and message content preview as plain text

Here the user has selected an ISA record.

Example of selection of an ISA record.  Diagram flow shows appropriate arrows.

The Paginated Tree (© 2009 All rights reserved) for complex messages

One of the most interesting problems that had to be solved was to design a way to show a complex message where each section of the message could have thousands of children.

The system had to stay responsive to the user so showing all the nodes at once would not be practical.

After doing research and not finding a paginated tree I came up with the following design:

  • Nodes show which repetition of the node is being shown.
  • Users can expand / collapse a node and use a paginated control to see children.
  • Users can switch to a view where each of the repetitions are also shown.

Tree with notation for repetitions, which can be expanded

Showing all repetitions of the GS segment.

Expanded to show repretions of first GS segment.  5 children are shown with the option to page to the next 2.