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.
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.
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 site used a static linear navigation. Users had to scrool down the page to see all the projects that I had worked on.
The new site is more interactive and all the projects are viewable in the top fold.
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
The new site organizes each section into tabs for easy viewing
I used the following to implment this site:
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 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.
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.
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.
A similar dialog is shown for adding an item from the Related Accessories or Similar Items.
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.
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.
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.
The duplicate search area blends in with the main information on the page.
Example is with Find a Store, but all pages, except the home page, have this.
Either remove the duplicate control or place it in a red background so it looks like part of a consistent footer.
Either retrieve a default Zip Code from the phone’s GPS or leave blank.
Placing the coupon code below the "Checkout" button does not allow for a logical navigation flow.
Here is redesign of the screen.
“My Account” > “My Wish List” > “Find a Friend’s Wish List” > “Wish List Result” > “Friend’s Wish List Items”
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.
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)
The usage did not change much over the five reports. The following areas were consistently the high use areas:
The different categories of users (first visit or repeat) all tended to click in the same areas.
Total average clicks: 5097
|Visitor||# Clicks (Average)||% Clicks (Average)|
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.
The three areas with the highest click rates remained consistent through all five tests. The following is the average of all the percentages.
|Area||% Clicks||% New Visitors||% Returning Visitors||% Top Referrers||% Top Search Terms|
|Keyword or Item #||16.86%||67.26%||32.7%||
14.64% guitar center
15.11% guitar center
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.
The three top areas that users clicked on did not change over the reports. The average number of clicks on these areas are:
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.
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.
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:
Responsible for the entire Trading Manager. Maintains everything.
Responsible for a specific Trading Partner and that Trading Partner's agreements. Also maintains protocols used by the Trading Partner.
Maintains the communities, companies and departments by defining the users associated with them.
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:
Looks at the bottom line of a business. Needs to examine Trading Manager entities but does not want to maintain them.
Executive users include:
Cares about making the system performant. Configures runtime information such as Protocols, Databases and Plug-ins.
A specific entity that participates in an agreement. Trading Partners send and receive Business to Business messages using specific Protocols.
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.
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.
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.
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.
Step 4 of 4 of the Create Agreement Wizard. Reuse makes the configuration easy.
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.
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:
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.
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.
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.
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.
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.
Uses computers a lot, but is not expected to be an expert user or programmer. Wants to get results quickly.
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.
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.
User can drill down from a graph to the messages that generated that graph.
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.
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).
Here the user has selected an ISA record.
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:
Showing all repetitions of the GS segment.