Portfolio of Usability & Other Consulting Work
Here is a collection of work projects that I have completed in recent years. The portfolio items can be filtered by industry. Click on any item to view a descriptive slide show about the project. In each slideshow, I provide an overview, highlight the main issues, as well as discuss some of the recommendations that I offered to the client.
-
John F. Kennedy Presidential Library & Museum: Resolute Desk Interactive Flash
-
BJ's Wholesale Club: Website Redesign
Slideshow Coming Soon! -
Sears: Website Redesign
-
Key Bank: Online Banking Center
-
IBM Interactive: Website Conceptual Design
-
IBM Professional Marketplace
-
IBM Virtual Tape Storage Management Console
-
Rachel Avalon: Holistic Nutrition Website Design & Development
-
Oregon Health & Sciences University: Prepared Caregiver Website
-
Schrödinger (Biotech Software Company): Homology Modeling Software Design
-
Whitepages.com: Website Redesign
-
Qualcomm: Patent Department Workflow Solution
-
Qualcomm: Automated Patent Numberer
-
Online Specification & Prototype Framework (Usability Web Application)
-
UBIX Multimedia Device
-
Microsoft: Content Syndication Research Project
-
Woodall's RV & Camping: Website Redesign
-
Spirit Media: Website Redesign
-
Medical Care Coporation: Online Alzheimer's Screening Test
Sears.com Sears hired our IBM team to redesign and implement a new online shopping experience on their website. They also wanted us to test prototypes of the new design with actual customers. Their goal was to modernize the online store and make it more functionally and technologically competitive with other major retail stores' websites.
Sears.com The company's business objectives were to make it easier for users to filter and narrow down products that they are searching for in order to increase customer satisfaction and boost online sales during the holiday season. They hoped to make the customer experience richer and more enjoyable by incorporating Web 2.0 technologies and providing more advanced search and filter tools. Furthermore, they wanted to make it easier for users to look up critical details about the products and compare them.
Sears.com During the design phase, we conducted multiple, iterative waves of testing, recruiting participants from inside the physical downtown Chicago store and on Craigslist. We had each of the users walk through multiple scenarios and then asked them follow-up questions in order to measure their subjective satisfaction.
Sears.com One surprising finding was that users often took a long time to even notice or pay attention to the left-hand facet filters. We determined that part of this was due to a lack of visual design emphasis on the filter side bar, but it was also due to users being overwhelmed by the number of controls presented all at once. We recommended some creative treatments in order to make the side bar stand out more. More importantly though, we suggested initially collapsing the filters in order to make them appear simpler and less cluttered so that the users wouldn't automatically ignore and gloss over this section of the page.
Sears.com The compare feature was not understood by many test participants. It was often unclear to users how to select items and generate a side-by-side comparison. This was especially an issue when users wanted to compare items that were listed across multiple search result pages. There was no way to easily deselect all items or view which items have been queued for comparison. We recommended the introduction of a container widget at the top of the page where users could view and manage the items that they want to compare.
Sears.com We discovered an interesting design predicament when deciding whether to disable (grey-out) or hide facet attributes when there are no longer items in the results list that contain this attribute (as a consequence of other facet attributes already selected). Users subjectively preferred that such attributes be hidden in order to de-clutter the interface but this created a larger business problem, especially when dealing with brands. If the attributes are hidden rather than disabled, users may believe that the store doesn't carry the brand at all and perhaps move onto a different site. We ultimately decided that disabling was the safer choice for the company.
Sears.com Although many users found the slider filters to be intuitive and relatively easy to use, some found these sliders tedious and unsatisfying. Part of the problem is that they required rather precise mouse movements when dragging them and they didn't provide real-time feedback of the value selected. Furthermore, users often preferred direct selection or clicks as opposed to holding down the mouse button and dragging. We recommended decreasing the sensitivity and granularity of the sliders and incorporating features to more effectively support direct selection. This included increasing the target click area and displaying roll-over values.
Sears.com We found that users did not like a lot of clutter in the pop-up quick views of products. The test participants did not appreciate having to scroll or click on tabs within the quick view. When the quick view contained this much content, they preferred to just go to the full product details page and take advantage of the greater screen real estate. In order for the quick view to be unique and valuable to users, we learned that it is very important to carefully prioritize product information and condense it down to only the most vital options and attributes. Any dense paragraphs of text should be reserved exclusively for the full product details page.
Sears.com One of our most valuable and surprising findings was that users repeatedly tried to use the quick views as a comparison tool. They became discouraged when they couldn't open multiple quick views at the same time or freely drag them around on the screen. The users strongly desired the flexibility to pop up quick views for several items (i.e. sweaters) at once and manually align them next to each other in order to compare the products visually. The technical feature compare table is still valuable to customers who are deciding on products such as cameras, but for clothing, users were much more excited about the quick view comparison method.
Key Bank Online Banking CenterIn anticipation of a major redesign, Key Bank asked us to comprehensively review their online banking center. This is an important and commonly used website for a large percentage of Key's customers.
Key Bank Online Banking CenterFirst we conducted some preliminary interviews with Key Bank executives in order to uncover the most important objectives of this online banking website. Our client's data and comments suggested that most of their customers were "transactors" who had the tendency to make short and purposeful visits to the site. Usually they have a specific transaction, account query, or change request that they need to perform. With this in mind, we determined that Key needed to quickly grab their customers' attention and cross-sell products in a helpful and unobtrusive manner. The navigation also needed to be optimized so that users could quickly access commonly performed tasks.
Key Bank Online Banking CenterWe found that the current navigation categories they were using were too general and few. Therefore, each category was filled with too many items and their placement sometimes felt arbitrary. A lot of trial and error was required to locate certain tasks/transactions. We also determined that some of the items packed into fly-out submenus were causing the overall navigation to seem overwhelming and unwieldily. We recommended that many of these items be consolidated and or provided progressively through secondary and tertiary navigations within the individual pages. Additionally, we found that breadcrumbs were being used inappropriately and ineffectively in this web application.
Key Bank Online Banking CenterSince we determined that most customers were "transactors" who engaged in tasks that were quick and directed, we recommended removing the heavy content links from the main navigation. These links were to pages that had investment research or online security material and promoted more of a non-linear, browsing behavior. Our idea was to entice customers who had some extra time and curiosity; those who didn't mind sticking around a little longer after finishing their immediate transactions. We therefore recommended that this browsing material be consolidated into specially designed centers and highlighted contextually through small "ads" on the various online Banking Center pages.
Key Bank Online Banking CenterThere was some confusing relationships between the Online Banking Center and the general Key Bank site. For example, it was not clear, initially, whether clicking on the Key Bank icon in the upper-lefthand corner would take the user to the Online Banking Center home page or the main Key Bank home page. We recommended that the site identity and its broader relationships be more carefully defined. We also felt that they needed to make the message/alert functionality more clear and its purpose more obvious. The current design seemed to make this feature confusing and ambiguous. We recommended ways in which this "message center" could be more effectively highlighted and portrayed.
Key Bank Online Banking CenterWe were concerned that the graphic design had the potential to detract from the credibility of the site. Too many colors were used and it was not clear what their meaning was. We recommended a more consistent theme based on the red colors that are part of Key Bank's branding. The fonts were also difficult to read and italics were inappropriately used. Finally, we suggested that verbose instructions at the top of each page were likely to be ineffective, that users would probably not read these paragraphs, and therefore these instructions just create more page clutter.
Key Bank Online Banking CenterWe provided a mockup of the general layout to illustrate all of our recommendations and demonstrate a cleaner, more effective interface with more intuitive navigation categories. We attempted to show how important features and upsell opportunities could be unobtrusively presented in a contextual manner so that they had a greater impact on customers. We also made sure that the most critical information was prioritized and visually stood out on the page. Finally, this mockup provided an example of how the graphic design could be improved and "modernized" in order to provide a more consistent brand identity and generate a more positive impression on users.
Key Bank Online Banking CenterWe did a lot of work to improve the Bill Pay user interface. The current design did not seem to integrate the various related functions very well and these Bill Pay tasks seemed to be unnecessarily isolated from each other. The flow of tasks was sometimes confusing and wizards were used, inappropriately spreading a simple task across numerous pages. This inefficient design had the potential to cause frustration with users and greatly increase the completion time of tasks. We made a number of recommendations and provided mockups to illustrate how they all fit together.
Key Bank Online Banking CenterFinally we looked at a number of competitors, both banks and credit unions to find out what sorts of features they were offering in their online Banking Center services. We provided examples of the most impressive ideas and suggested how they could specifically benefit Key customers and the bank's respective business goals.
IBM Interactive For many years, IBM has operated a network of "Innovation Centers" at key locations around the globe. These solution centers offer a unique think-tank environment where clients can collaboratively work with experts in user experience and the latest development technologies to plan, develop and launch next-generation business solutions. The stakeholders decided that we needed a more integrated, consistent brand to unify these centers and market our customer experience consulting services more effectively. Our ultimate goal was to compete more strongly against other design and interactive agencies. From this premise, IBM Interactive was born. As a member of this organization, I volunteered to come up with a UI design concept for the website homepage and Flash intro.
IBM Interactive We begin by combing through some of the proposed marketing materials and vision presentation slides in order to come up with some conceptual ideas that would fit well with the message that the stakeholders were trying to get across to our clients with this new brand. We sketched several alternatives on paper, attempting to portray the tight integration and collaboration of our various global centers, our geographically distributed professionals, and our mutually defined service offerings.
IBM Interactive We ultimately came up with a celestial, "one-universe" theme for the homepage. The site would initially show the Earth with an empty, starry sky above.
IBM Interactive I used storyboards to communicate the progression and sequence of animation events in the Flash intro. First, one firework launches from a center location on the global map (e.g. Boston). The firework explodes and as the sparks fall and settle, they morph into the name of one of IBM Interactive's capabilities, such as "Visioning". A large, purple star is left "burned" into the sky where the firework exploded.
IBM Interactive After the first two explosions, the rest of the fireworks launch at the same time, simultaneously forming the rest of the "constellation of capabilities". One final firework launches and the whole window flashes white, momentarily inverting the image colors, and then ultimately leaving behind a large, glowing, orange sun in the middle of the constellation of capabilities. At the same time, an "IBM INTERACTIVE" logo slowly fades into view and finally a thin orange line stretches horizontally across the sky, underneath the logo.
IBM Interactive In the final sequence, a list of Innovation Center locations scrolls up from the bottom left and finally the sun sends out an orange searchlight (movie-projection-style beam) that opens up and expands vertically into a long rectangular bubble on which all of the service offerings are listed in a hyperlinked menu. Rolling over a "capability star" triggers the appearance of pulsing sonar rings around the star, while the label enlarges and becomes orange-colored. Clicking on the star causes a purple searchlight beam to project from the star and expand into a bubble, revealing more information about that capability.
IBM Professional Marketplace The IBM Professional Marketplace is a web-based application designed to optimize the engagement staffing process and revolutionize IBM's deployment process. For this project, I was tasked with designing a user interface that allows resource deployment managers to track and modify availability dates, create assignments and reservations, and manage their employees' hours plans.
IBM Professional Marketplace IBM Professional Marketplace establishes a marketplace of supply and demand, which leads to faster, more efficient staffing decisions. Managers can gain access to real-time info on professionals, allowing them to make more efficient and strategic staffing decisions for projects worldwide.
IBM Professional Marketplace Professional Marketplace offers easy access to professional profile information such as CVs, functional skill assessments, engagement history, work preferences, and availability information. Users can take advantage of sophisticated search and guided navigation capabilities in order to get the info that they need to assign resources faster, provide opportunities to employees that match their career goals, and create increased value for clients.
IBM Professional Marketplace The My Professionals page allows Resource Deployment Managers (RDMs) to track the assignment and hours plan status of all the employees that they manage. Among other things, RDMs can monitor and modify availability dates, track who has submitted their hours plans, and watch for conflicts where professionals may be overcommitted.
IBM Professional Marketplace On the Manage Assignments & Reservations page, RDMs can manage their employees' existing assignments, create new assignments, review and approve submitted hours plans, and modify projected weekly billable hours for each assignment.
IBM Professional Marketplace RDM's can manage which employees receive hour plans, how the plans are delivered, and send reminders to those who still have outstanding plans.
IBM Professional Marketplace When employees have an outstanding hours plan to submit, they are greeted with this page as soon as they login to Professional Marketplace. The employees can input their projected weekly hours for the next 14 weeks, adjust assignment dates, add/delete vacations, and create new reservations. Once an employee submits an hours plan, the RDM must approve it.
IBM Professional Marketplace When I first joined the Professional Marketplace project, I was unsatisfied with the format and presentation of deliverables that past IAs had provided. In meetings, I heard the development and test teams frequently complaining that the discreet deliverables were confusing to track and difficult to utilize in tandem with each other. Unfortunately, I knew that the project couldn't afford to invest in a full-scale requirements definition tool such as iRise, Axure, or Blueprint for this product release. Therefore, I decided to come up with my own improved solution to integrate requirements and use cases with graphical wireframes in a more contextual and convenient manner.
IBM Professional Marketplace I ultimately developed a web-based, database-driven navigator where stakeholders, BAs, architects, developers, and testers could view the latest versions of all wireframes alongside a set of detailed UI specifications and dynamic links to associated use cases that have been posted on our wiki. This became a critical mechanism for the entire project team to keep in sync in terms of detailed UI-based requirements and it was a key tool for communication and understanding during all phases. The summary page above provides a list of links to all wireframes and related use cases (this relationship can be reversed as well). It also shows the current status of the page design and any special comments.
IBM Professional Marketplace Users can also visualize the pages graphically in the form of a navigation flow tree. This view shows which pages are entirely new, which ones are existing but require modification for the next release, and which ones have no significant changes. Users can click on any page icon or select a page from the drop-down in order to navigate to a particular wireframe.
IBM Professional Marketplace Here is an example of a wireframe inside my web app. A toolbar is still available at the top so that users can navigate to other wireframes or look up additional documentation related to this wireframe.
IBM Professional Marketplace When a wireframe is being viewed, a related use case or detailed use case can be launched from the navigator toolbar in a separate pop-up window. This allows developers and stakeholders to review the specification and associated use cases side-by-side with the graphical wireframe so that they can visually walk through the steps of each use case.
Virtual Tape Storage Management Console This product is an entirely new system that was built from the ground-up for enterprise-level customers who still require more availability and flexibility for their host applications than what the current virtual tape solutions can provide. IBM set out to construct a peer-to-peer tape library system like none that the industry has ever seen before, a system whose peer clusters can span across the entire globe, maintaining the highest amount of redundancy and security for our largest customers' data. My chief role in this project was lead GUI designer for the web-based management interface.
Virtual Tape Storage Management Console Learning about how this virtual tape system worked, and all of its numerous components, was in itself a very daunting task. Fortunately, the architects were extremely good at explaining the technical details and they were invaluable in enabling us to successfully provide UCD support for this product. The biggest challenge for our User Experience team was reconciling the numerous interfaces that users were required to use in order to configure, manage, and troubleshoot this system in its first release. Because of a very aggressive project schedule, the new management interface that I was designing would initially be required to work in concert with several other legacy interfaces in order to provide complete functionality.
Virtual Tape Storage Management Console The second big challenge with this project was the timing. As I was under tight schedules, specing out page designs, navigations, and system topologies, I was also involved in separate, ongoing strategy sessions and workgroups, working diligently to build a set of consistent user interface design guidelines. Our ultimate goal was to make all IBM system management interfaces, across the entire Systems & Technology Group, look and behave in a common manner. This means that I had to design to a moving target that changed on a weekly basis. This project certainly was a testament to the power and necessity of a carefully executed, flexible, and iterative GUI design process.
Virtual Tape Storage Management Console A third major challenge was the sheer complexity of a system that involves multiple servers, physical tape libraries, and disk storage subsystems in several distributed locations that may be thousands of miles apart from each other. All of these pieces must work together and constantly communicate with each other. Furthermore, when one piece of the system does go down, the system must be prepared to handle such an interruption as gracefully and efficiently as possible. For a usability professional, it was quite a daunting task to build a simple and elegant user experience around such a wild beast. How do our customers effectively monitor the system's performance and health? How do we guide them when something goes wrong? How do we make them feel secure that they will not lose data and help them quickly recover from disasters so that downtime is kept to a minimum? When faced with these questions, one often has to become very creative and open-minded in order to conjure up solutions for such difficult design problems.
Virtual Tape Storage Management Console This project taught me just how important it is, as a user experience expert, to effectively partner with all teams involved, including development, marketing, technical writers, and the product architects. There needs to be a constant flow of communication back and forth and mutual understanding of each others' primary goals and objectives, while at the same time keeping the user's needs clearly in the forefront. Designs must be flexible and all contingencies must be taken into account. Often it is smart to come up with several alternative designs if you anticipate push back from development. Sometimes the most ideal or obvious design from a customer advocacy standpoint is just simply not possible, especially in the first release of a major new product such as this. Therefore, compromises must be made, and once again, creativity and agility become necessary to solve design problems in the face of numerous technical and resource limitations.
Rachel Avalon's Holistic Nutrition Website Rachel Avalon started out as a reflexologist and a massage therapist. Over the years, however, she has also become a highly trained and qualified holistic nutritionist. Rachel runs her own practice in West Los Angeles where she has established quite a reputation and buzz, attracting a broad range of clientele, including some fairly prominent individuals. She recently decided that she wanted to change the primary focus of her practice from reflexology and massage to holistic nutrition, as she found this offering to be the most beneficial service to her clients and it was very satisfying, intriguing, and stimulating work for her. Rachel hired me to help her overhaul, rebrand, and expand her website in order to support her new holistic nutrition services.
Rachel Avalon's Holistic Nutrition Website Rachel and I started with low-fidelity, paper and pencil wireframes, using them to brainstorm about organization and layout of content. Rachel already had a basic graphic design scheme and color palette to work with from her previous reflexology- and massage-centric site but this old website design was framed inside a considerably small resolution box, which did not leave room for a lot of dynamic content or interaction. We spent a lot of time determining how to leverage many of these previous design elements and expand them into a larger, less constrained physical space, literally attempting to move outside of the box.
Rachel Avalon's Holistic Nutrition Website Rachel's old website design essentially accommodated just a single tier navigation. Secondary navigation existed only within the main content area and was frequently awkward or inefficient to browse through. Users were often required to read content serially and progress through almost a "slide-show" organization of content and could not easily jump directly to critical information such as rates for services. In order to support Rachel's dramatically expanded portfolio of services and website features, we quickly found it necessary to design a dedicated, two-tiered navigation system: a primary menu at the top and a secondary menu running down the left-hand side of the page.
Rachel Avalon's Holistic Nutrition Website As I designed and developed the website in more of a high-fidelity format, Rachel would often print out hard copies of various pages and manually mark them up with suggestions and changes, as well as new revelations and ideas. We quickly discovered that this system worked very well for both of us. Moreover, this project was a lot of fun because our creative and technical collaborations were engaging and flowed quite smoothly. There were occasionally times when we bantered over small, stylistic points or conceptual ideas, but we always felt comfortable communicating directly and honestly about what we each believed would provide the most effective message and best overall user experience.
Rachel Avalon's Holistic Nutrition Website The centerpiece of Rachel's new holistic nutrition practice is the Avalon Cleanse, a healthy and sober alternative to the numerous fad cleanses out there that make false promises and require extreme calorie restriction or other dangerous elements. The Avalon Cleanse is more about catalyzing long-term nutritional changes and transforming one's lifestyle to be consistently more healthy. Rachel wanted her new website to showcase the Avalon Cleanse and clearly illustrate what makes it unique and legitimate. We, therefore, devoted a whole primary navigation section to the cleanse, explaining why one should cleanse, what makes the Avalon Cleanse different, how it works, and how the sessions are organized. We did our best to organize the content in an engaging fashion, breaking up the text, using strategic graphics, and providing as many visual cues as possible to convey a clear and coherent message regarding what a cleanse should really be about.
Rachel Avalon's Holistic Nutrition Website Although Rachel was reengineering her practice to be centered around holistic nutrition, she still wanted to maintain the initial reflexology and massage offerings that she originally built her reputation around. Her business plan was to continue to provide these bodywork services in a secondary fashion that supported the overall theme of holistic nutrition and healthy living. She also had a number of auxiliary services that she had been offering informally to her long-term, regular clients for some time, such as workshops, lectures, event hosting, individual consultations, and various kitchen-based demonstrations. Rachel wanted to use this major rebranding effort as an opportunity to officially introduce these additional services on her website and begin selling them more broadly to the public.
Rachel Avalon's Holistic Nutrition Website Some time ago, Rachel started producing and hosting a series of short, light-hearted videos that she called "Holistic Secrets". She distributed these videos on YouTube and tried to generate viral buzz for them via word-of-mouth among clients and friends. The topics of these entertaining videos ranged from exposing the amount of sugar in popular sodas and energy drinks to celebrating Earth Day and cleaning your house with environmentally friendly, non-toxic products. I immediately saw the incredible marketing value in these Holistic Secrets videos and I firmly believed that her new website was the perfect platform to host and promote them in the from of video podcasts.
Rachel Avalon's Holistic Nutrition Website I taught Rachel all about the world of podcasting and showed her how the iTunes Store was beginning to make this distribution method more broadly accessible, viable, and popular to general (read "non-geek") internet and computer users. After setting up her podcast feed and submitting it to Apple, I also recommended to Rachel that she start a dedicated blog where she could strategically publish engaging, high-quality articles on various subjects related to holistic nutrition and the services that she offered. I suggested that she directly coordinate these articles with her periodic e-newsletter that she sends out in order to produce a seamless integrated marketing strategy. Like the podcasts, I built the blog right into her website, maintaining a consistent look and feel with the rest of the pages.
Rachel Avalon's Holistic Nutrition Website Rachel wanted to provide some exclusive content to paying clients who were actively using her services. She asked me to place this exclusive content behind a password-protected firewall. I ended up implementing a user account-based system on the website that allowed her to create individual accounts with unique usernames and passwords for each current client. Then, these individuals could simply log in with their credentials in order to view the protected pages.
Rachel Avalon's Holistic Nutrition Website In the past, Rachel manually maintained a newsletter contact list in Excel and would then copy and paste all of these email addresses each time she sent out her newsletter. To make this process more professional and efficient, I integrated an automated newsletter system into her new website so that visitors could directly sign up and subscribe to the newsletter and also unsubscribe whenever they liked without Rachel having to intervene each time. The system keeps track of the current subscriber list and allows her to easily broadcast her newsletter either to the entire audience or just a subset of subscribers.
Biotech Software Company An international software developer that specializes in applications for the biotechnology, pharmaceutical, and material science industries hired us to test the usability of one of their new products. The target audience of this new product was researchers at pharmaceutical companies. The software allows users to manipulate strings of enzymes and change molecules, eventually leading to the formulation of new effective drugs. We traveled to a number of different drug companies, and tested 12 users in all. We used a mobile usability media lab to record the users and their screen interactions for later analysis and review. Each user was given 13 realistic research tasks to complete, using a prototype of our client's software product.
Biotech Software Company We screened the subjects with pre-tests to make sure that they were accurately representative of the software product's target audience. We also administered post-tests at the end of each trial to obtain the subject's overall impressions and clarify incidents during the task completion portion of the testing.
Biotech Software Company We analyzed all the task data, looking at such variables as success rate and number of errors.
Biotech Software Company During our post-analysis, we identified the main product and user objectives that we found during our research and testing. We also grouped our subjects into 3 general user profiles, based on their shared behavioral characteristics and common needs.
Biotech Software Company Incorporating our findings from the usability testing and analysis, we offered visual design recommendations by mocking up a more simplified and effective interface design.
Patent Department Workflow Solution When the patent department acquired a document management system and a new docketing system, I designed this solution because there was still a large disconnect between the various components that were involved in the Patent Prosecution process. I created this high-level conceptual model to make it simple and easy to communicate my workflow proposal to the department's management.
Patent Department Workflow Solution The interface I proposed would wrap around Microsoft Word or a similar word processor application. It would allow legal assistants to quickly select appropriate form templates. When the form was saved, the file would automatically be named with the correct naming conventions and stored directly on the central server. A New Document wizard would also be available to users. After a form was selected, a pop-up box would appear and ask the user to input the relevant docket number and filing date. These pieces of information would be necessary for auto-population of fields and correct file naming.
Patent Department Workflow Solution When legal assistants want to make the completed form available to all others in the department, they would use the Publicize feature. This would transfer a copy of the form to the document management database.
Automated Patent Numberer In a patent department of a large company, the rules and conventions for naming patent applications can often become considerably complicated, especially for new legal assistants. There is certainly a lot of room for human error when it comes to identifying the correct name to use. Furthermore, there are also a number of manual operations or procedures that need to occur every time a new application is created, such as adding the new file information to the docketing system.
Automated Patent Numberer This application greatly simplified the process by automatically generating a new patent number for the attorney or paralegal. My application would query the database to find out what numbers have already been used and then create a new number based on the numerous business rules and conventions. Finally, it would register the new number in the database.
Online Specification and Prototype Framework User-centered design is inherently a very interactive, dynamic, and collaborative activity. Because of this, I have always believed that the design of a graphical user interface and the construction of a solid user experience cannot be adequately captured in a flat document, in the way that a product's functional specifications might be documented. As we all know, a picture is worth a thousand words, and a moving picture, well that is worth even more. An interface is designed to be interacted with. This means that it cannot be fully understood by simply reading about how it should look and interact. The developers and reviewers of a GUI design spec must take hold of the controls and try it for themselves. After understanding the customer's requirements, all development teams must be able to put themselves into the shoes of their customers and truly feel the pain points that a customer may later feel.
Online Specification and Prototype Framework With this philosophy in mind, I set out to create a new delivery system for GUI design specifications, a framework that actively facilitates the iterative and fluid user-centered design process. What I came up with was a web-based environment that combines traditional detailed specifications with interactive prototypes and fully takes advantage of the dynamically linked, hypertext model of the web. Instead of a never-ending, scrolling, flat document, I spread the page specifications across multiple HTML pages just like the implemented GUI itself and allowed these pages to be navigated in the exact same way that the interface would ultimately be navigated by the user. I used numerous screenshots that I took directly from my mocked-up prototypes to illustrate the layout and behavior in a page, rather than trying to explain such "moving pictures" in verbose, awkward paragraphs of text.
Online Specification and Prototype Framework In my system, a user can easily flip back and forth between prototype and detailed specification on any given page. This leads to faster and greater comprehension of the design, contextual insight into potential design improvements, and more accuracy in the communication of a design to development. It also means no more tedious searches or scrolling through Word documents that can sometimes be hundreds of pages long and force readers to reconstruct every step of the interaction in their heads as they read long, static descriptions of layout and behavior.
Online Specification and Prototype Framework By building this framework on the web, I was able to provide a server-based container for the specification where it is always clear what the latest version of a page is and iterative, historical versions can easily be compared to each other, all from the same convenient location. With this model, one never has to find, maintain, and navigate through multiple documents that are entirely separated and partitioned off from each other. The OSPF inherently maintains a consistent record of the design process and the many phases that a page design may have passed through in order to reach its current state.
Online Specification and Prototype Framework As this framework evolved, I found it necessary to not just version the specification as one whole single entity, as it became difficult to decide what changes warranted an entire new version and which changes were so minor that they could just be made on the current version, consequently flattening the trackable change history. I therefore, set it up so that each page in the interface has its own distinct versioning track. The navigation is now also versioned separately since this seemed to also require modifications quite often. In this new model, one page may have a few versions while another may have a dozen. Initially navigating to a page always brings up the latest version, but the user can than easily switch between any of the previous versions with the use of a simple drop-down combo box.
Online Specification and Prototype Framework I also found it important to track and record the collaboration involved throughout the design process and provide tools that allow all users of the online specification to communicate concerns, current status, and recommendations. I therefore incorporated a user forum directly into the framework. It is simple and easy to use. Each reader can register as a distinct user and make comments on any given page. Every page in the interface has its own dedicated forum. The best thing is that all conversation threads are persistently captured and available to everyone who uses the spec. In this way, redundant comments are minimized, people can argue and discuss different design alternatives, and all collaborations remain contextual. Later on, one only needs to look at the forum for a particular page in order to trace the discussion history and find out why certain design decisions were made.
Online Specification and Prototype Framework Finally, I have provided a summary table view of the pages, where the development team and others can, at a glance, see which pages belong to which testing increment, whether the page is still under construction, currently under review, or completed and approved to be coded. It also shows the last date that each page design was modified and provides another way to navigate to various pages without having to dig through the user navigation tree.
Online Specification and Prototype Framework I have received many favorable responses to this framework and people find it very accessible. Still, even with all the advantages of a dynamic, online specification/prototype, some reviewers still prefer or require a simple hardcopy. Sometimes they like to review it offline or mark up by hand. They may also need to use it for a presentation or keep it statically in a database for auditing purposes. In response to these findings, I am providing a mechanism on the summary view where one can select all or a subset of specification pages (which are spread out across multiple HTML pages in the web app) and consolidate them into one, unified PDF document. This can be done dynamically and on the fly. With this feature, one can same a few trees by only selecting the page specifications that are relevant to her needs, rather than having to print out the entire specification each time changes on certain pages occur.
UBIX Multimedia Device The hypothetical product we call the UBIX was the result of a design project that I and two colleagues put together. The UBIX is essentially a portable, networked multimedia device that makes it possible to access media of any type, in any setting. An obvious purpose of the device is to allow people to show movies and play music, using whatever presentation mediums they desire, regardless of their location. In our report, we offered detailed definitions of all functionalities, presented usage scenarios, and also provided an in-depth look at the technical components required to build such a device. We concluded by considering the organizational, economical, marketing, and legal frameworks that would be necessary in such a development project.
UBIX Multimedia Device This being a hypothetical design, we decided to liberally incorporate a number of cutting edge technologies, including fuel cell power, 3G cellular data network access, and OLED displays. The technologies we proposed in this project were projected to be available within a 3-year timeframe. Although our estimations for developing and marketing the device are quite optimistic, we still saw them as fairly realistic. We based our design on extensive qualitative research. We interviewed product managers as well as potential users of such a product. We also gathered a generous amount of data from online web forums where users discuss issues that they've had with similar multimedia players and propose new features or design modifications that they would like to see.
Microsoft Content Syndication Research Project The Microsoft.com team recruited us to conduct a consulting and research project. The goal of this project was to analyze the viability of content syndication as a tool for marketing and information dissemination over the internet. My specific team was in change of looking at the Business Decision Makers (BDMs) segment. We first performed a competitive analysis to find out how other large high-tech companies were utilizing content syndication. We also conducted interviews with a number of BDMs in a variety of different companies and firms. Finally, we explored the strategic use of blogs and newsletters, and also considered techniques for leveraging electronic communities as a marketing and communication channel.
Microsoft Content Syndication Research Project Our research findings allowed us to come up with a number of recommendations for our client. We suggested that the best way to syndicate content was to focus on creating a solid value network, using specialized web forums, blogs, and newsletters. We emphasized the importance of providing relevant and valuable information that is specifically tailored to the target audience. We also discussed ways to monitor and improve customer perception by participating regularly in various electronic communities. Finally, we offered ideas for leveraging consultant partnerships and laid out economical, efficient techniques for reaching isolated niche markets.
Online Alzheimer's Screening Test This medical company recruited our management consulting team to help them expand their business to the internet. Leveraging a newly acquired website, they planned to distribute and sell a medical screening test to assess memory fitness and detect the potential onset of Alzheimer's Disease in elderly subjects. The man behind this test is a well-respected research doctor and his company's goal was to effectively market this test without negatively affecting his reputation. Ultimately, we identified a larger, more extensive opportunity for our client: the website could be utilized to educate the target audience and define a new medical norm for the general public to regularly take legitimate, secure online screening tests.
Online Alzheimer's Screening Test Taking advantage of Porter's Five Forces model, we performed an external framework-based analysis that included market trends, consumer segmentation, target audience, and competitors. We offered recommendations in a broad range of areas, such as target audience communications, strategic partners, website user experience, revenue analysis, and success metrics. We also suggested a plan for long-term progress assessments and strategy adjustments.
Online Alzheimer's Screening Test I acted as project manager for our management consulting team, utilizing Microsoft Project to continuously track our progress.
Online Alzheimer's Screening Test We gathered relevant data to use in our analysis by utilizing tools such as quantitative surveys and extensive qualitative interviews, as well as an experimental email marketing matrix.
Online Alzheimer's Screening Test Clearly, for this internet business expansion to be successful, the entire user experience needed to be as positive and simple as possible. We also had to assure that all user interactions were appropriately inline with our client's business objectives and the users' personal objectives. With this in mind, I performed usability evaluations and provided graphical reports on the current website, the companion newsletter, and the screening test product interface itself. I based my issues, findings, and recommendations in these evaluations on usability best practices, acquired knowledge of the client's goals, and data from our surveys and interviews.
John F. Kennedy Presidential Library & Museum I was very fortunate to get the opportunity to work on this IBM Interactive grant project for the John F. Kennedy Presidential Library and Museum in Boston, MA. The purpose of this non-profit institution is "to advance the study and understanding of President Kennedy's life and career and the times in which he lived; and to promote a greater appreciation of America's political and cultural heritage, the process of governing, and the importance of public service." Specifically our team was asked to collaborate with the directors and other top staff to create an educational, interactive web experience that enables and encourages citizens to explore the historical records and artifacts from this important and turbulent time in American history through which President Kennedy led our country. My role was Interactive Designer and Information Architect. It was my job to produce creative concepts for each object in the interface that visitors could interact with and design an immersive, captivating user experience.
John F. Kennedy Presidential Library & Museum The JFK Library has a wonderful archive of video and audio clips, scanned documents, photographs, and images of various artifacts from the Kennedy era. While it is exciting that they now have a large percentage of this content online, it is unfortunately difficult to browse for and there currently isn't much of an interactive context for this content. At this point it is really just a basic search engine, so visitors have to know specifically what they are looking for. Sometimes the content is organized into galleries or collections which is helpful but visitors still would need to explicitly search for these artifact groupings.
John F. Kennedy Presidential Library & Museum After a long, collaborative brainstorming session, we settled upon a desktop metaphor. Inspired by J.K. Rowlings website (the author of the Harry Potter series) and a promotional website for a video game called "The Dead Mountaineer Hotel", among others, we decided to center our interactive web experience around the Resolute desk inside the Oval Office. Visitors would be able to click on various objects that sit on the desk in order to bring them to life. Through these objects, they can contextually and playfully explore relevant archive content from the Library.
John F. Kennedy Presidential Library & Museum We started off with a photograph of the Resolute desk that was taken during Kennedy's time in the White House. Through the magic of Photoshop, our amazing graphic designer managed to "clear" off the desk in the photo so that we could introduce only items that we wanted visitors to be able to interact with. This was based on a prioritized list of content and themes of the Kennedy presidency that the Library wanted to highlight and showcase.
John F. Kennedy Presidential Library & Museum After deciding what objects we would place on the desk, we begin drawing paper sketches to determine how these objects should be physically laid out. From that point, I started to come up with a thematic and interactive concept for each object. We skteched out some initial drawings as we determined how each object might "come alive" once it was clicked on. The general idea is that each object would zoom up and morph into a rich, interactive scene in which users can explore and observe embedded JFK Library content, including audio, video, photographs, and scanned documents. The next several slides show examples of how I conceptualized some of these desk objects.
John F. Kennedy Presidential Library & Museum The Green Phone is used to present the many phone conversations that JFK had recorded during his presidency with various leaders and advisors. The buttons are reserved for featured recordings and the directory contains a comprehensive list of all phone recordings so that users can "dial" them and listen.
John F. Kennedy Presidential Library & Museum The Secret Taping System Button resides in front and just underneath the middle drawer of the desk. Clicking on the button causes a bank vault (safe) door to zoom into view. The vault door opens to reveal 5 shelves of audio reels and a reel-to-reel player consistent with that period (e.g. The Akai 4000 DS which came out in 1962). Each shelf represents one major theme of JFK's presidential term. These 5 themes include the Cuban Missle Crisis, the Test Ban Treaty, Vietnam, Civil Rights, and Space Exploration. Clicking on a tape reel on one of the shelves causes it to slide off the shelf, load onto the reel-to-reel player and begin playing. A description of the selected recording is displayed on a faded, yellowing piece of typewriter paper that pops up.
John F. Kennedy Presidential Library & Museum The Coconut represents JFK's heroic PT-109 war story. When the coconut is clicked on, it zooms up from the desk and suddenly visitors are transported to an isolated island with a view of the sea and palm trees. The backdrop scene is first revealed in black and white and then bursts into color as ocean sounds start playing. A coconut materializes and falls from the top of the palm tree, striking an old radio, resting at the foot of the tree. This jars the radio on and causes it to start playing either the U.S. Navy Theme Song or Jimmy Dean's "PT-109" song from 1962, where he patriotically recounts the fateful story and JFK's brave actions. Meanwhile, a projection beam shoots out from the fallen coconut, which has now "magically" transformed into the coconut that sat on JFK's desk. The projection beam displays a slideshow of photos (with text descriptions), ordered to pictorially tell the PT-109 story, as the music continues to play.
John F. Kennedy Presidential Library & Museum The Scrimshaw (whale's tooth) represents JFK's love of the sea and sailing. The purpose of this object is to showcase many different collections of artifacts that demonstrate JFK's intimate relationship with maritime activities from boyhood through adulthood. The scrimshaw zoom ups from the desk and morphs into a rolled-up, ancient map of Cape Cod. The map unrolls and reveals a number of different "destinations" that each represent a different artifact collection. JFK's remarks at the Australian Ambassador's dinner during the America Cup Races in September 1962 begin to play in the background. A model of JFK's Victura sailboat materializes on the map, docked at the U.S.S. Constitution location. When a user clicks on a map "destination" (red x), the sailboat model travels to that spot, revealing the artifact collection at that location. The user can then browse through the collection and view descriptions of each artifact.
John F. Kennedy Presidential Library & Museum I quickly realized that static wireframes and storyboards were not rich enough deliverables to fully and accurately communicate my interactive concepts for each object. Therefore, I decided to create rough-draft, animated movies to show how each desk object scene should ultimately be realized. After that, our graphic designer added her creative visual treatments to my concepts. Using my movies and her polished images, our Flash developer then developed the actual Flash component that would be integrated into the JFK Library website. My animated movies for all 12 interactive objects that I designed scenes for can be viewed here: