CATHERINE BOOKERBOOO KER

USER EXPERIENCE STRATEGIST

CATHERINELBOOKER @ YAHO O . COM CALUBO . COM 310 . 213 . 8218 Catherine Booker calubo.com User Experience and Product Strategist [email protected] Resume Highlights 310.213.8218

Lead UX Designer | iolo technologies 2.4 years

DEFINED, communicated, • Gauged usability and effectiveness of software, individual tools, (re)designed, and polished the UX and other forward-facing assets. and associated framework of the • Identified and/or anticipated product and site flaws while company’s flagship software, providing recommendations for improvement. upcoming products, and content. • Created flows, wireframes, prototypes, and visual design deliverables for multiple platforms.

DESIGNED end-to-end system • Compiled and translated research and resulting product architecture for next-gen cloud direction into easy-to-consume flow maps and documentation product, and facilitated internal (including site maps, wireframes, mockups, task scenarios) for shift from product-centric dissemination and department-specific implementation. consumer tactics to service- • Worked with stakeholders to define and refine product vision oriented enterprise solutions. and feature requirements for online service.

TRANSFORMED existing • Identified “low-hanging” opportunities across all departments for challenges into business quick turnaround and immediate results. opportunities by creating • Addressed misalignments between messaging and user seamless experiences to expectations in content and UI, while expanding on successful positively engage customers, approaches to increase effectiveness. minimize pain points, maximize • Developed and integrated “win-back” campaign strategies for revenue, and increase brand expired licenses and unhappy customers into product design(s). reputation and user retention. • Drafted customer purchase flow to increase interdepartmental communication and reveal touchpoints across the organization, as well as related audience perceptions and behavior.

Graphic Designer (UI + UX) | Laserfiche 8.6 years

ENGINEERING | 2004 - 2009 MARKETING | 2009-2013 Independently crafted overall creative vision, Overhauled, expanded, and connected internal graphics, and development direction. Unified user systems, web sites and industry positioning efforts experience of software suite to ease transition into to optimize employee efficiency, maximize ROI, ECM market via enhanced usability, functionality, and increase brand presence in ECM market. and modern presentation.

• Visually articulated architectural concepts, interaction models, design guidelines, usability concerns, content strategy, and UI solutions via site maps, flow diagrams, wireframes, and mock ups to ensure comprehensive end-to-end user experiences. • Provided creative and technical support for all departments via: information architecture; user experience, interface, interaction, and visual design; web development, design and maintenance; content strategy; and online campaign management.

Focus Tools Education

Research Concept + UI PC/Mac UCLA, 1999 Planning Visual Design Adobe CS Design, B.A. • Architecture Brand Development Axialis IconWorkshop • Content Product Strategy • Design

Full work history available on linkedin.com/in/calubo CASE STUDY › WEBSITE WEBINARLASERFICHE.COM SYSTEM REDESIGNUI

Corporate website redesigned to Google-based search bar added. Brand identity strongly Later suggestion to instead incorporate a new CMS-driven backend and integrated into design. modify and integrate product suite search tool into website to increase leads, site traff c, internal workfl ow demonstrate functionality was implemented in next redesign. eff ciency, name recognition and overall usability. Launched October 2009.

Tools

• Adobe Photoshop • Adobe Dreamweaver • Adobe Illustrator

RESEARCH Rotating banners highlighted current Roles and Contributions matters of importance. PLANNING AND ARCHITECTURE Research | Planning and Architecture | Concept/UI | Visual Design CONCEPT/UI Development | Implementation | Maintenance • Gathered data on user base, target audiences, relevant markets VISUAL DESIGN and competitors. Analyzed metrics and performance of past DEVELOPMENT online properties. Conducted asset assessment of available resources, including content, collateral, media. IMPLEMENTATION • Incorporated research results into wireframes and high-f delity MAINTENANCE paper prototypes of optimal site architecture, recommended features, and proposed design direction(s).

• Tighter, branded look and feel. Created graphics incorporating tighter look and feel—including icons, banners, and diagrams— Quick links redirected for page templates and legacy forms. visitors to webinars and other training events to support lead generation • Worked with technical team to establish site framework and Product offerings Industries at-a-glance Notable news and efforts. facilitate eff cient development process, thereby maintaining presented up front to directed visitors to events on home page focus and integrity of intended design. Designed, built, tested, clarify company purpose. resources targeting encouraged return visits market-specif c concerns. to the site. and deployed templates and assisted with troubleshooting, as well as overall system set up, search engine optimization, lead tracking, roll out, and ongoing maintenance.

©

Opposite page: Redesigned home page of corporate website. CASE STUDY › WEBSITE Challenges The purchase of a content management system (CMS) was made to end manual page updates and enable more effective site-wide management through a centralized web interface. Because the resources needed to implement and deploy the site were substantial, a full-time, multi-departmental LASERFICHE.COM REDESIGN web team was formed to address areas of particular concern:

CONTENT DESIGN

In observing how the company struggled to present audience-specif c Content issues coupled with unoptimized site design also heavily content while gathering data that would facilitate the sales process, inf uenced the eventual design direction: several factors inf uencing the overall effectiveness of its efforts emerged: • Several site redesigns left their mark in the form of • Asset review didn’t happen regularly, thus the majority of inconsistent page layout, confusing navigation, and broken live content was several years old—and irrelevant to target links or functionality, many of the latter uncovered by mistake. markets. White papers and other print collateral were posted One such example of the latter involved newsletters’ un/ regularly, but competed with old, hard-to-track versions subscribe links that could only be found through Google. referenced elsewhere on the site. Unfortunately, the request system didn’t successfully remove people from mailing lists—only a developer with access to the • On the other hand, diagrams, infographics, and videos were database and SQL could do it manually. never consistently posted online, if at all. Most of the time, they were placed in locations that didn’t fully exploit their • Newly added sections introduced best practices and potential value, especially when they could have been used design improvements—many recommended for immediate to support weak copy or illustrate abstract concepts more implementation—but incoporating changes across the board effectively than words alone. proved diff cult without a template system. Landing pages and their effectiveness were one such area negatively affected • Lastly, the overall lack of back-end support made asset by years of neglect, and random errors plagued the backend management diff cult. Servers were overrun with outdated, system. redundant artifacts in multiple locations, leading to situations

Left: Original home page of corporate website before redesign. where newer content would be overwritten by old. • With no one championing the development of a positive site experience, the developers favored prioritizing back-end processing to the detriment of user-friendly design. In one In 2004, Laserf che rebranded itself to revive business and specif c case, this lead to the development of an intranet UI for event management that was challenging to use, especially increase brand recognition in the document management arena. in regards to data management (see Webinar Case Study). However, as the company evolved, its later redirection into the competitive enterprise content management (ECM) market required a polished, accurate representation of their philosophy evolution of: 1 2 3 and offerings through its corporate website. Industry section 3 Redesign introduced skim- Pages mable chunks to encourage To accomplish this, it would be necessary to transform what further reading, tabbed sections was then a static, online brochure into a dynamic, personalized to provide more in-depth informa- tion—including videos, diagrams, experience that completely integrated their Run Smarter® brand related reading—and links to events and other lead generating avenues and catered to site audience interests via targeted resources. supporting product research. Also required would be the development of a framework that Original pages displayed basic informa- supported the content creation process and tightly integrated 1 tion and did a good job of providing supplementary information, but usually lacked 2 Updates integrated prominent calls to action with existing backend systems to effectively manage lead- any call to action. and expanded upon related content offerings. generating elements. CASE STUDY (CONTINUED) LASERFICHE.COM REDESIGN

Challenges, continued solutions

With the purchase of a CMS, the promise of an online public portal that would connect with internal systems and raise operations to new levels of effciency became real. Results from competitive research, analytics, and interviews with stakeholders—including resellers, users, and employees—re- vealed site content, presentation, backend, and workfow required extensive reevaluation if the company wished to successfully shift to a new market. Wireframes and mockups illustrated proposed solutions for implementation, targeting key points that including the following:

BACKEND WORKFLOW Content Backend • Provide content that would accurately refect current product • Overhaul the system inside and out, thoroughly integrating it The company intranet, like the website, had been cobbled together One additional layer of diffculty involved the “analog” routine, or con- suite capabilities and service offerings, while demonstrating with the CMS—but one piece at a time to protect the existing over the years by a variety of developers and teams, each expansion built tent workfow, from creation to publication. The combination of aforemen- customer successes. infrastructure (until replaced). upon the last. The resulting backend was a complex, disjoined mess, and tioned patchwork insides and static outside limited content updates to hot patches created to solve increasingly escalating problems became the few technically-adept employees responsible for the site, turning the • Give content owners the ability to create, publish, and update • Build dynamic, lead-centric functionality into the website insuffcient, making it necessary to move forward with building a frame- goal of consistently providing fresh, syndicated content into a bottleneck when desired. while improving usability and effectiveness. work that could effectively handle growing infrastructure needs. However, within an increasingly overburdened marketing team. it required deciphering the “magic” keeping things together—an enormous • Develop global tracking capabilities with reporting tools undertaking that included the danger of bringing internal systems down • The integration of additional online satellite properties— Design to allow “single input, multiple options”: Gatekeeper forms if handled incorrectly. Most pain points directly impacted lead generation including a support, reseller, news, and various micro sites— discouraged discovery and follow through, so removing • Unify multiple online properties under a single umbrella to and follow up: into the main corporate site helped highlight customer repetitive form completion would simplify data input and facilitate management, standardize user experience and site successes and product news (thereby increasing site traffc), allow visitors to access all resources painlessly. An additional appearance, thereby strengthening core brand values in the • Updating the website historically involved jury-rigged but constant maintenance and manual updates became layer of information gathered from individual browsing process. solutions for unoptimized (mostly hand-coded) HTML pages. exhausting over time, and the group spent more time sessions would uncover potential customer interests and While these provided temporary relief, they didn’t address maintaining and updating the website than improving it. provide the basis for targeted recommendations when a lead • Restructure content architecture and navigation to refect long-term underlying problems. Over time, disparate efforts was established. culminated in excessive junk code, all on top of artifacts • One source of potential relief were the content providers visitors’ mental model(s) and provide a pleasantly productive site visit. This would be accomplished by ensuring a clear path leftover from previous CMS integration failures. themselves, but they were so removed from the publishing • Streamline registration process and optimize overall design, to desired information exists, and presenting opportunities process that they remained distant from the projects they beginning with webinars, to establish standard UI approach to encourage follow up via sales associate, product collateral, • No dynamic/personalized content for the website was ever requested, requiring constant pushing from Marketing to that could be applied to event/lead activity types and and/or event attendance. created because there was no backend functionality to invite active participation. minimize training. support it, let alone anyone who could fgure out how to do it. • While the site needed to quickly refect shifts in target • Place lead generating elements in more prominent and • The lack of a comprehensive interface for many backend markets, ideology, campaigns, etc., requests for customized relevant areas throughout website for maximum impact. intranet pages negatively affected the completion of landing pages and ongoing content changes pushed WORKFLOW important tasks, especially those related to lead management. the boundaries of what was possible, technically and • Create landing page templates to standardize dozens of • Minimize stress on web team by providing system to support Content input didn’t appear as expected on the live site, and pragmatically, as time spent creating landing pages for legacy forms and increase conversion rates. A stripped-down content generation and management process, empowering changes to scheduled events or enrollments had to be made individual campaigns competed with time spent on daily header would mirror the design of the rest of the website— departments to become responsible content owners and in the backend by developers. assigned tasks. minus active links in the navigation bar to maintain focus regulate important assets. on the presented offer—and greet visitors upon their arrival. • The lead generation process was spotty and unclear; After completing the form, they would be redirected to a • Encourage autonomy with integrated, DIY form library to management tools were non-existent. On many occasions, newly-designed thank you page that restored navigational independently create and oversee customized landing pages incoming leads were inexplicably marked as duplicates and links and presented related content that encouraged further when needed and track results. fltered out before they could be reviewed. Also, inhouse exploration on the site. platform updates would inadvertently break processing- related elements. Without notifcations, employees remained unaware of issues until studying lead logs in an attempt to discover why campaigns were underperforming. End results s

Upon the release of phase one, the majority of functionality was completed for launch, while others were added in the months to follow. The de- Within the new framework, developers were able to begin developing customized integrations to further support event registration, processing and ployed CMS fnally allowed (with some limitations) departments to take ownership of their content, providing tools for content updates and comprehen- management, as well as miscellaneous campaign efforts. Dynamic functionality that had been missing now presented information deemed most relevant sive management of site data. Templates and modules provided visual consistency throughout the site, and together with centrally-located collateral/ to visitors’ search/site history, ensuring they got the most out of their session. Comprehensive tracking to help determine long term effcacy of campaigns graphic assets, updates became straightforward and effcient. was later added.

Almost all design recommendations proved to be accurate and effective in achieving the company’s goals. One side beneft was the eventual redirec- tion of the DIY forms library components into a new product, to be released Q4 2012, for the production of drag and drop, easy to create web forms.

Below: Mockups of the Solutions section were developed to determine the best strategy for integrating lead generating elements Below: A close up of sidebar designs revealed more obvious calls to action, client lists, with dynamically personalized content into the corporate website—the latter of which would be based on visitors’ browsing history. related case studies, videos, and links to other collateral as elements for consideration. CASE STUDY › WEBSITE WEBINAR SYSTEM UI

Google-based search bar Visual design mirrored helped locate relevant style of corporate site. information without wading through lists of sessions. The online webinar registration system of Laserf che.com—for both public and intranet sites—was redesigned as the f rst step toward friendlier, streamlined processing for the event management team.

All events accessible from standard sidebar. Tools

• Adobe Photoshop • Adobe Illustrator

Backend options added Roles and Contributions to interface so Research | Planning and Architecture | Concept/UI | Visual Design submitters can take advantage of available • Gathered data on system users, target audiences, relevant functionality. markets and competitors for both public and internal sites via online research, metrics and interviews. Conducted asset review of available resources, including content, collateral, media.

• Incorporated research results into wireframes and high-f delity paper prototypes indicating recommended architecture, features, and proposed design direction(s). To further aid infrastructure team, also indicated specif c ways to better incorporate usability Contextual help added and brand elements. to assist casual users. • Created and handed off mockups and graphics required for Webinars could be implementation. tagged with keywords for more controlled presentation/placement in event listings.

Opposite page: Webinar template creation and management page. CASE STUDY WEBINAR SYSTEM UI 1

The ongoing corporate site redesign became an opportunity to rework challenging aspects of the intranet after many years of neglect.

Created along the way to accommodate company expansion and growing infrastructure needs, basic functionality was present, but a more robust system was now required for employees to complete vital tasks with increased effciency and ease. However, as the 2 complex structure in place prevented it from being rebuilt all at once, online webinars were selected as the frst candidate for redesign. A vital source of leads, steps taken to improve webinar registration and management interfaces would eventually serve as the foundation for a much-needed unifed event management system.

Employee interviews and site usage statistics, combined with customer and market research, indicated areas of improvement and possible directions leading to increased success. Better ways to incorporate usability and brand consistency based on collected data—including feature enhancements and content presentation— 3 were illustrated through mockups and presented to company shareholders, users, and the development team for eventual implementation.

The proposed webinar restructuring addressed three elements:

1• The “inside” pages, the company’s intranet site (internal), 2• Laserfche.com, the corporate website (public), 3• Registration, in terms of overall process and form design(s) for both external and internal management. CASE STUDY (CONTINUED) WEBINAR SYSTEM UI

1 Intranet Challenges

CONTENT • Field labels, descriptions and titles were frequently peppered BACKEND Below: Original webinar session attendee page. with misspellings and grammar mistakes—sometimes • System was prone to technical issues, and updates were presenting inaccurate or misleading content alongside them. diffcult.

DESIGN • Input “interface” accommodated very basic use cases, so • All interfaces were “designed” by developers without existing framework couldn’t fully support desired functionality consideration for actual use, so while the heavily text-based on live site. UI was functional, non-technical employees found the system confusing and unwieldy. • Missing video recording and uploading capabilities needed to create pre-recorded library of content. • Missing search and flter functionality made it hard for employees to locate specifc webinars or related information, WORKFLOW with the most recent entries displayed by default. Additionally, • Webinar pages were accessible through the intranet, but people older ones disappeared after thirty days, but with no archive avoided using the unfriendly interface by tasking others with or way to refer to past events, it compounded employee setup and management, creating an invisible bottleneck within frustration. the process.

• Booking conficts occurred when employees didn’t consult the event calendar in Outlook. Unfortunately, the system couldn’t connect and use existing data to prevent scheduling issues.

• Changes sometimes required developer intervention, especially in the case of updating session details when a session had enrollees. CASE STUDY (CONTINUED) WEBINAR SYSTEM UI

Above: Redesigned section pages.

Below: New internal home page 1 Intranet Solutions design for webinars.

CONTENT BACKEND • Labels, descriptions, titles were rewritten and put through a • Functionality f nally supported search and topic f ltering, as review process. well as video uploading and viewing.

DESIGN • Built with .NET to ensure smoother development and maintenance process. • Section redesigned to be user friendly and self-explanatory enough to minimize training, with newly added pages • Recording and streaming capabilities were added to encourage accommodating long-missing functionality. presenters to proactively take control of content creation.

• Visual design f nally incorporated branding elements and mirrored the the corporate site’s look and feel. WORKFLOW • Error-catching functionality built into UI decreased scheduling • Templates and standard interface elements were created and conf icts and overall mistakes. built for reuse in other areas. • More robust functionality removed once-necessary technical presence from the process and gave schedulers more conf dence in taking control. CASE STUDY (CONTINUED) WEBINAR SYSTEM UI Below: Original webinar home page design.

2 Laserfiche.com Challenges 3

CONTENT BACKEND • Descriptions and titles were frequently peppered with • System was prone to technical issues, and many attendees 4 misspellings and grammar mistakes—sometimes presenting would call due to registration diffculties. inaccurate or misleading content alongside them. • Framework in place was incapable of handling streaming DESIGN media. • Webinar home page was an uninteresting, unsortable accordion list of session titles that forced visitors to go to individual WORKFLOW session pages to learn dates, times, and locations. • Content was written and posted by sales associates without review, so mistakes were caught only when content was live. 2 • Lack of search functionality made it hard to locate specifc However, once a session had attendees, changes would often webinars quickly. require developer intervention.

• The look was a hodgepodge of different page layouts that were • Due to incorrect mapping between intranet form felds and left over from earlier redesign attempts. output published on the live site, event details were displayed incorrectly, so employees resorted to creative methods that 1 • Visitors were confronted with a default registration form that input data based on what they wanted displayed online. had twelve required felds. No global login functionality meant attendees enrolling in multiple events had to complete the same form for each one.

• Attendees had one chance to attend the scheduled session or Challenges they missed out until the next available one, assuming they

returned to check for new listings regularly. Sessions were grouped by vertical market and displayed using an accordion-style listing. 1 However, sessions tended to be classifed incorrectly when they didn’t cleanly ft into a • Upcoming webinars were listed only in the Events section, so category, and thus were hard to fnd by interested parties. site visitors browsing the remainder of the website remained unaware of available, relevant sessions. This was a missed The lack of information presented to visitors upfront meant it required one click to expand 2 and view all sessions, as well as another to fnd scheduled dates, times, and other details for opportunity to leverage an effective “next step”, lead generation each individual item. tool.

The webinar section looked nothing like the rest of the site. The non-standard navigation 3 confused people when they visited other areas.

Despite being an important source of leads, webinars were relatively unpromoted on the 4 site. Banners promoting special presentations were occasionally added to drive traffc to the specifed sign up page. CASE STUDY (CONTINUED) WEBINAR SYSTEM UI

Below: Proposed home (left) and pre-recorded video (right) page designs.

2 Laserfiche.com Solutions

1 CONTENT BACKEND • Descriptions and titles were reworked by writers to be more • Implemented global login. 2 concise and interesting. • Rebuilt and tested framework to ensure stability across 3 • Images represented concepts and topics for discussion and multiple platforms, decreasing support calls overall. accompanied listed webinars. • Video functionality was implemented and gained more than DESIGN 30% of webinar traff c within the f rst three months. • Standardized look with new page templates that matched the rest of the site. WORKFLOW • Comprehensive user interface(s) accurately and seamlessly 4 • Form was shortened, using only mandatory components to published and assisted with event management on live site. streamline the registration process and buck the “one f rm f ts all” mentality. • Internal forms were reconf gured to more accurately ref ect data displayed on live site and remove confusion. • One-time login functionality made customization of the registration form based on visitors’ previous interactions possible, allowing them to enroll in multiple sessions, as well as download “locked” collateral, with ease.

• New search functionality helped visitors sort and locate sessions eff ciently.

• Recordings of past webinars opened doors to more sales by Home page Video Page making information consumption convenient and always While the default listing order still prioritized the most immediate sessions, search f lters Following the lead of the thank you pages that accompanied campaign landings, the media available. 1 made locating specif c events quicker. 4 viewing page listed a variety of resources related to webinar topics for later investigation. This was done to support the sales process by providing in-depth learning opportunities within an • Those who missed their scheduled event received an email A top-most “Featured” section occasionally highlighted special webinars the company wished already established context and assist potential buyers with their continued research. detailing future sessions or the availability of a recorded 2 to promote throughout the year. version. By clicking on a link, they could immediately sign up for a future session or view the recording (if available). Supplementary content was added to each webinar and indicated “content freshness” 3 and demand while encouraging action, including: labels highlighting “New” and ”Popular” • Relevant webinars were placed in product and service page webinars, ratings, formats, number of views, and seat availability. sidebars to increase awareness of supplementary content and turn passive absorption of data into active sales leads. CASE STUDY (CONTINUED) WEBINAR SYSTEM UI Option 1: Notif cation of future sessions

Your submission has been received. registration Challenges 3 An email will be sent to the email address provided when the next available session has been posted.

• The high number of required f elds in typical forms were a throwback to “old school” sales thinking, where a phone Session registration page, redesigned (below). Easier to read, visually cleaner and more attractive than the previous text-based version. Global number and physical address was prized more than an email login functionality paved the way to providing registration forms that presented multiple sign in address. However, sales managers found the distrust and options for active prospects and/or existing customers. general avoidance of phone calls by today’s potential cusomers challenging—and using the less invasive email format seemed Option 2: Sign up as a New User (Create an Account) more effective.

• A long form penalized people interested in registering for more than one event because they had to f ll out the form repeatedly.

This encouraged shortcuts to f lling out the form, leading to inconsistent data entry and the creation of multiple user accounts for a single individual. Many were even marked “duplicate” by the system and completely dropped from the sales cycle, unbeknownst to account managers.

registration Solutions

• The form was shortened based on the information people would be most comfortable giving. This encouraged continued interaction with the site and a higher likelihood of accurate data, minimizing the possibility of lost leads.

• Global login kept user data persistent for each browsing Option 3: Sign in as a Returning User (Log in) Email: Reminder and System Check session and meant a customized form could be presented based on visitors’ previous interactions with the site. Three options were made available, where if a person was:

(1) logged in, the form was replaced with a session selector and a “Register Now” button. (2) never registered, the short form would be displayed with the option to create an account when f nished. (3) logged out, they could sign in and register with one click (as in the f rst option).

A fourth option was available for long-running webinars that had no sessions scheduled, where potential attendees could sign up to be notif ed when one was available. Left page: Notes for a redesigned Reseller Training registration form. Right page: Original Reseller Training registration form (public).

SKETCHBOOK REGIONAL TRAINING registration and reporting

One of several event types, Regional Training had issues similar to those of the webinar section. The regis- tration forms on the live site were confusing for some users and didn’t always collect the data the events team required to successfully complete their tasks.

Sketches of the original forms have notes detailing concerns, as well as potential solutions that would theo- retically handle the worst issues and support the implementation of missing features.

Internal VAR Training class creator form.

Below: Screenshot of User Training Scheduler form.

Overly spartan internal forms were diff cult to use—and with no way to edit information once submitted, the added challenge of f eld data not displaying as expected on the corporate website forced employees to construct creative workarounds.

The reporting interface successfully pulled data, but the width of the results page was almost four horizontal screens long, and the inability to sort or customize the display made it diff cult for users to constructively use the data.

Left page: Internal Training session setup form Right page: Internal Training session registration form Above: Regional Training reporting interface (internal). CASE STUDY › WEB APPLICATION AGENDA MANAGER 7.1

Overhauled failing, niche web-based workf ow product and revitalized customer

ITEM SUBMISSION PAGE, VERSION 6 VERSION PAGE, SUBMISSION ITEM interest with increased usability, f exibility, power, and visual appeal. Before Tools Hard to input and edit text in small, • Adobe Photoshop • walls and whiteboards unadjustable area. • Adobe Illustrator • digital recorder Restricted number of f elds and options.

Roles and Contributions Research | Planning and Architecture | Concept/UI | Visual Design

original • Gathered data on user base, target audiences, market and competition. Championed integration of basic user research and form usability methods into software design, as well as extensive wireframing/mockup system that remains an important part of Item Submission: Evolution ongoing product development. Customizable item • Incorporated research results into wireframes and high-f delity f elds mean perfect submission forms 24/7. paper prototypes of product interface to (1) spark discussion and encourage collaboration among team members, and (2) provide “visual specs” as a guide in establishing overall application framework for development. Produced multiple iterations of experimental interface approaches with regards to style, layout, imagery, colors, f ow, etc. to speed up testing and decision- making. after • Established user interface architecture and mapped page f ow to facilitate eff cient development process. Designed application look and feel. Created all image-based assets, including icons, ...On agenda publishing days, banners, and skin elements. Guided developers throughout process to maintain focus and integrity of intended product all [these tasks] involved up to design. eight staff members—but now, ITEM SUBMISSION PAGE, VERSION 7.1 VERSION PAGE, SUBMISSION ITEM one deputy city clerk can easily Larger text areas better accomodate do it all. typical length of documentation. City of Riverside, 2008 ““Document Management Goes Public” Fields allow submitters to indicate relevant approval routing based ” on type of item. CASE STUDY AGENDA MANAGER 7.1

Challenges: Version 7.0

Agenda Manager 7.0 remained as complex and diff cult to use as its predecessor. Presented as two separate web sites, the f rst acted as an admin- istrative portal to conf gure the software and set up meetings, while the second was a “preparer” interface for clerks to manage meeting agendas and associated items. Unfortunately, notable software issues usually aligned with the pain points that led clerks to look for help in the f rst place, and Agenda Manager 7.0 was less f nished product and more work in progress:

• In the administrative interface, only an admin-level user could create and automatically schedule new meetings by specifying the date, time, location, and Having recognized a need to help city people involved. However, separating this functionality from the secondary preparer 1 site inadvertently increased IT involvement, especially in cases where meetings were VERSION 6.0 VERSION Process: clerks—a small but powerful subset of cancelled or rescheduled, like holidays. Item Submission users in the company’s sizable government • The design for the preparer’s home interface was based on a generic model of market—streamline the creation and scheduling events—the monthly calendar—and made managing multiple meetings To add an agenda item to an upcoming diff cult since a user could only view details one meeting at a time. This also made meeting, a request is made via submission distribution process for meeting agendas tracking the status of items cumbersome, as there was no way to easily see if agenda form to a city clerk for review. If errors or items had carried over to the next meeting for additional discussion (a frequent incorrect documentation are found, it is and packets, Laserf che released the web- occurance). returned to the submitter for editing and 2 eventual resubmission. Otherwise, the based workf ow product Agenda Manager ...... REDESIGNING • While incorrect use of terminology made navigation confusing, the team’s insensitivity form is pushed ahead for approval to the 6.0 in March 2004. One year later, they to the clerks’ workf ow processes made successful feature implementation challenging, individuals determining the content of each creating issues where frequently used options were placed several clicks away or in meeting. released version 7.0. unrelated areas. Upon approval, the item is added to the However, as no research was performed at any point during the devel- • Submitting items to specif c meetings was straightforward unless something was agenda. If rejected, the submitter has the opment process, the initial release of 6.0 possessed numerous shortcom- rejected or needed to be edited for resubmission. The constant cycle of re/submission option of either resubmitting it to another ings and failed to successfully meet the needs of the average city clerk. in the real world was a large part of the process, but in actively looking for a solution meeting or dismissing it altogether. Once This, unfortunately, also inf uenced the following releases up through thorugh Agenda Manager they were still stuck with the same problem—just in a f nalized, the completed agenda is sent out 7.0 and the team’s unfamiliarity with its users, their environment, typical different package . and made available to meeting members tasks and overall routines continued to have no impact on the manage- 3

VERSION 7.1 VERSION and the public. After a meeting, the ment team, as any suggestions to gather data for product development • Routing features were unable to handle the variety of unique workf ows typical of this resolutions are added to the agenda and was deemed an “unnecessary waste of time.” market, so users were restrained to a generic way of working that couldn’t accomodate packaged with associated documentation their procedures. to be made ready for public distribution.

• Agendas couldn’t be formatted through the existing interface, and no method existed to export the meeting data or output the accompanying packet of supplementary documentation. This meant that while the information remained safely archived in a database, clerks still had to prepare a printed version—a step that regularly added up to several hundred pages to an agenda.

Considering the demands placed on this small but highly focused group of users, the situ- ation before the redesign came just short of apocalyptic: several accounts were lost because of the instability of the system, and the complexity of the interface made selling, training and usage diff cult. However, because of the strong need for a product that simplif ed a complex and regularly frustrating process for city clerks (and their incredible enthusiasm about the prospects of having a tool to do this), the third iteration, version 7.1, was slated for release in Above: Approval Routing evolution 2006. CASE STUDY (CONTINUED) AGENDA MANAGER 7.1

Goals solution: Version 7.1

Tasked with reskinning the interface of version 7.1 in late 2005 for a Armed with research and feedback gathered along the way, the interface had been reworked to better ref ect the meeting management environment, minor update, the potential of the product was enough that the current and the result was a product to which city clerks responded favorably: Agenda Manager 7.1 provided greater functionality and power relevant to their design was completely revisited with the intent to rebuild from the ground needs, as well as user-friendliness and f exibility not present in previous versions. In the end: up. While aware that improvements beyond the superf cial were necessary, no one knew where to begin. • The preparer and administrative sites were merged to centralize access—color-coded by function to distinguish between the two Based on initial research of the interface, customers, and market at halves of a now-tabbed interface. that time, successfully redeeming the failing product to increase interest, relevance and usefulness to its users required: • To balance numerous updates and feature additions, the interface design was based on unique user “roles” unearthed through • a design that accurately ref ected the “clerk culture” and agenda research: submitter, tracker, editor, approver, preparer and approval process through the language, structure, and features administrator. Users were assigned these specif c roles, or rights, presented. based on their responsibilities for an individual meeting and saw only what was needed to ensure they completed assigned tasks. • signif cantly decreased workloads and tools to centrally manage the vast amount of incoming paper, people and tasks from • Agenda Manager was restructured to better ref ect the general multiple sources. These sources (people) required the ability to task f ows present in each organization, while offering the ability create, submit, edit, resubmit, track and approve items through a to f ne-tune and more closely reconstruct existing processes. As a uniform, easy-to-use interface—without leaving their desks. result, the increased number of tasks completed through the new interface lightened the clerk’s workload signif cantly and shifted • a way to easily and eff ciently format agendas, as well as export the responsibility and initiative of preparing documentation onto the entire contents of the agenda packet as an easy-to-digest others. Agenda Manager is digital package to interested parties. First breakdown of tasks associated with roles to determine global navigation options ended up as... • Older features were redesigned to f t the new architecture and extremely f exible • a system that worked consistently and conf gured easily—7.0’s made easier to use. For example, instead of pressing an arrow “ and stability, fussy installation process and inf exible options made button to reorder agenda items one at a time, one could rearrange set up extremely diff cult. Additionally, the software didn’t Tabbed navigation with options for Preparer Mode (blue bar) multiple items at a time using drag and drop to place them in incredibly provide the options needed to recreate workf ows so customers appropriate sections. ended up with a replica that could only handle a small part of the whole. • Text, instructions and labels were rewritten and, for the f rst time, user-friendly. Tabbed navigation with options for Administrator Mode (yellow bar) contextual help was added to provide relevant and instantly accessible support when needed. We were up and running

• The ability to export agendas to Microsoft Word was added, in no time, and it’s made us City clerks handle a constant inf ux of information from a giving clerks the f exibility and power they wanted to format their so much more eff cient wide variety of non-uniform sources (internal and public), includ- documents, as was PDF output of the resulting agenda and packet than we ever were before. ing electronic and paper documents, email, faxes, reports, maps of supplemental documentation for printing, sending, and/or and photos. downloading. In some cases, this amounted to saving hundreds of printed pages per packet. In addition, they must meet strict deadlines geared toward Colleen McNicol, City Clerk producing an agenda outline with a supporting “packet” of docu- • Demoing had become incredibly straightforward and easy. Prior to City of Riverside, 2007 mentation that can not only span several hundred pages, but version 7.1, a salesperson had to spend several weeks preparing must be available to the public for consumption and archived for a presentation in advance. After the redesign, they were able ” for several years, as per government regulations. to input information in real time and demonstrate a prospective client’s actual workf ow in minutes. Time spent on set up and SideSi note training was also noticeably trimmed. CASE STUDY (CONTINUED) ADDITIONAL PROJECTS AGENDA MANAGER 7.1 SOFTWARE

Interest in the product soared upon release, and many of the listed im- provements were cited as reasons for the product’s increasing popularity. Quickly becoming central to government sales, Version 7.2 was released later during Q4 2006 with the expanded functionality that was requested and planned, but not implemented in time for 7.1. Additionally, the success of the project supported the adoption and application of research-based methodologies into the software development process for both existing and future products.

Left: Approval interface concepts leading up to version 7.1. Below: Final design for Approval interface.

City Council 9/17/2006 HIGHLIGHT › WEB APPLICATION

Top, from left to right: Setup Wizard, Filter Settings, Sender and Recipient Search, Individual Email pages EMAIL CAPTURE 1.0 Bottom: Admin Portal home

Roles and Contributions Research | Planning and Architecture | Concept/UI | Visual Design

Redesigned company’s f rst web-based email archiving product to simplify one of the most challenging aspects of records management.

• Performed competitive analysis, customer and market research to def ne user needs, technical requirements and establish design direction.

• Worked closely with overseas and internal development teams to reevaluate and redesign concept architecture, feature set, UI and look from the ground up to ensure usability, eff ciency and polish.

• Established user interface architecture and mapped page f ow to facilitate eff cient development process.

• Created all design deliverables and def ned all aspects of visual design using Adobe Photoshop and Adobe Illustrator. Established new visual standard via resulting design that the suite’s additional web products eventually followed. VERSION 4.0 VERSION This early version was created mostly for internal, read-only usage with limited functionality. HIGHLIGHT › Web Application Pictured: Document View, Version 4.0. WEBLINK 7 AND 8 plus Designer utility

Roles and Contributions

VERSION 5.1 VERSION Integrating the more advanced functionality found in the thick Research | Planning and Architecture | Concept/UI | Visual Design (web) client, this version began the move toward public, outward- facing usage. Public, web-based distribution portal reworked over several iterations to successfully Pictured: Document View, Version 5.1. and accurately ref ect actual customer usage and abilities. Streamlined, friendlier UIs allowed users to f nally capitalize on previously complex, intimidating (and therefore unused) features.

• Analyzed surveys, competitors, target audiences, and various markets. Gathered data and studied dozens of customer implementations to determine user needs for redesigns.

• Suggested and guided long-term product direction, changes, and enhancements based on research results, incorporating them into wireframes and high-f delity paper prototypes of product interface to provide “visual

specs” and establish overall framework for development. Produced multiple iterations of experimental interface 6.1 VERSION The option to customize the interface became formally available approaches with regards to style, layout, imagery, colors, f ow, etc. to speed up testing and decision-making. to customers, but a lack of familiarity with the HTML and CSS needed to sift through code and implement changes terrif ed enough people that few attempted it. The most adventurous • Established user interface architecture and mapped page f ow to facilitate eff cient development process. Created placed header logos, but the majority continued to present the all image-based assets, including icons, banners, and skin elements in Adobe Photoshop, Illustrator, and/or Axialis entire Weblink UI to users by default, despite the jarring transition IconWorkshop, and def ned all aspects of application’s interface and visual design. Guided developers throughout found in jumping from one site to another. development process to maintain focus and integrity of intended product design. Pictured: Document View, Version 6.1.

WebLink 7.1 was designed to be modular and allow for selective usage within an organization’s existing website(s). The full application window could still be presented whole to take

VERSION 7.1 VERSION advantage of its now neutral and unobtrusive styling. However, specif c functionality could now be integrated piecemeal Customer satisfaction throughout the site, with pre-built modules for search or f le browsing. However, some technical savvy was still required to “ went through the roof— handle more advanced work. Pictured: Document View, Version 7.1.

we started getting complimentary phone calls VERSION 8.0

instead of derogatory ones. In version 8, UIs were added to support appearance and module customization and minimize code editing, making integration as seamless as possible. This encouraged users to personalize the Tony Neumann, IT Director application—or its pieces—as desired. From “Foundational Compo-Net,” 2010 Pictured: WebLink Designer’s Theme dialog (left) and module ” builder (right), Version 8. HIGHLIGHT › Web Application HIGHLIGHT › Desktop Application WEB ACCESS 7 AND 8 WORKFLOW 8 plus “Light” mobile version plus Designer Module and Administrator Console

Roles and Contributions Roles and Contributions Research | Planning and Architecture | Concept/UI | Visual Design Research | Concept/UI | Visual Design Web Access Light (mobile) Retooled web version of thick client Transformed simplistic, underperforming to ref ect shift toward web and mobile product into user-friendly, feature-rich management platforms. Guaranteed the application and key selling point of usability of new mirrored functionality. newest suite release.

• Performed customer interviews, competitive analyses, and • Interviewed and studied dozens of customers and existing market research to determine upcoming trends and more installations while gathering sample f les, workf ows, and accurately def ne user needs, technical requirements and additional material collected over the years to clarify persistent design direction. issues and ongoing challenges. Set up collaboration sessions for product team with customers to facilitate deeper understanding 1 • Suggested architectural changes, enhancements and new of needs and desired functionality. features based on resulting information and created mockups to aid development and support exploration of possible • Reported f ndings and guided architectural changes, 2 Above: Initial notes and sketch of basic interface directions, with special attention to proposed design page f ow for proposed mobile direction, enhancements and new feature development. Product feature for mobile devices used in the f eld. prior to eventual development for 8.0. contributions include: mini navigational canvas map, user-friendly canvas behavior (like highlighting, associated detail displays, • Created foundational visual design for application UI. activity descriptions on the canvas and the ability to hide Below: Search Results (bottom left) and Document View (bottom right) screens unwanted information), and helpful error pane(s) for debugging from earlier builds. on the f y.

• Worked closely with development team from start to f nish to ensure usability, eff ciency and visual appeal.

• Created complete set of product logos, new Vista-style icons, and 3 graphics for next-generation Windows Workf ow Foundation- based desktop applications. Above: Workf ow interface displaying canvas (1), toolbox (2), and minimap (3).

Above: Web Access Document View interface. SEARCH RESULTS VIEW ADDITIONAL PROJECTS VISUAL DESIGN INCLUDING ICONOGRAPHY, ILLUSTRATION AND INFOGRAPHICS

Application icons for Workfl ow Designer (top) and Client Server (bottom) VISUAL DESIGN ICONOGRAPHY & ILLUSTRATION Form + function Concept | Production

Roles and Contributions • Created Windows XP and Windows Vista icons, additional (graphics-based) application components, and other Research | Concept | Production | Visual Design imagery in a variety of styles for use in desktop, web, and mobile software platforms, motion graphics, web sites, presentations, advertising, and printed collateral.

Modernized and polished appearance and “professionalism” of software and websites. • Conceptualized and produced f nal images and f les in required formats for specif c media. Modernized and polished appearance and “professionalism” of software and websites. • Conceptualized and created icons for Windows and Mac OSX—as well as other application-centric graphic components—across desktop, web, and mobile software platforms. Mainly used Adobe Photoshop, Adobe Illustrator, and Axialis IconWorkshop to output ICO, ICNS, CUR, AVI, PNG, • Formats include: ICO, CUR, AVI, PNG, JPG, GIF, TIFF JPG, GIF, BMP, and TIFF f les.

• Produced infographics, diagrams, non-application icons and other imagery in a variety of styles for motion graphics, web sites, presentations, advertising, and printed collateral.

Opposite page: Wizard sidebar image (far left), assorted toolbar (far middle) and career site icons (far right)

This page: Campus map for interactive Powerpoint presentation on Agile ECM for higher education (top right),

Assorted application icons (bottom right), and

High Roller logo for awards ceremony (bottom left) VISUAL DESIGN INFOGRAPHIC: ECM TO BPM

Monitoring Contract Case Management Management Human Capital Order Management COMPOSITE Management APPLICATIONS Modeling

Integration Enterprise Customer Resource Relationship Planning Management Legacy Packaged Automation Systems Custom Applications Applications

APPLICATIONS

WEB SERVICES

Application Database

Operating Enterprise System Storage EC M

before after VISUAL DESIGN Information ROLE-BASED PORTAL INFOGRAPHIC: LOB MODEL Worker ROLE-BASED PORTAL Create documents during the course of business activities

Activities are part of a larger process.

LOB APPLICATION 1

SYSTEMS STAFF

Controlled through business LOB People plug into process APPLICATION rules that invoke back-end LOB 2 through documents being applications through interfaces created or modified

LOB APPLICATION 3

Business rules are applied to the content of the documents to: extract, 0000003545 create or transfer to the next stage.

before after 3 NO ECM VISUAL DESIGN 1 NO ECM INFOGRAPHICS: FINANCE

Roles and Contributions Research | Concept | Visual Design

By accurately illustrating the pain points of the banking industry and broker dealers without resorting to bullet points, complex processes are condensed into easily- 4 ECM IN THE BACK OFFICE digestible visuals that also present the solutions available when using an ECM system.

Process Process Banking Independent broker dealers 1 2 3 4 5 2 WITH ECM 1. CURRENT PROCESS WITHOUT ECM | 100% Paper 3. CURRENT PROCESS WITHOUT ECM | 100% Paper Government regulations exascerbate issues related to paper- The bulk of time and money is spent on overnighting or heavy processes, like account creation and loan processing. faxing paperwork to and from off ces. As error checking is Tracking paperwork, ensuring information is correct, up-to- dependent on humans, things may still slip through despite date, and accessible when needed are challenges the banking multiple layers of checks. Stress is increased due to the industry currently faces, especially in light of recent scandals. limited time allotted to completing transactions. The limitations of physical paper include slowed processing, vulnerability to human error, and increased costs, especially in 4. ECM IN THE BACK/HOME OFFICE | 50% Paper 5 the case of mandated yearly audits. When documents end up The Back (home) off ce in this scenario has digitized their COMPLETE ECM COMPLETE in f ling cabinets, the f rst break in what could be a seamless process, but the bulk of expended effort (and majority of time process occurs. spent on handling paperwork) remains with broker dealers. Transactions are now handled through the management 2. FULLY DEPLOYED ECM SYSTEM | Paper free system and accessible outside the off ce to those connected. In place of f ling cabinets, a repository provides a centralized Some benef ts may trickle down to broker dealers, but paper collection and distribution center accessible through multiple still consumes enough time and money to negatively impact platforms. Digitized documentation minimizes errors and eff ciency and ROI. increases eff ciency: incorporating error checks to minimize time spent resubmitting paperwork, as well as removing the 5. FULLY DEPLOYED ECM SYSTEM | Paper free need to physically locate and mail paperwork, can reclaim Use of paper is minimal, and sharing the same backend system time and money lost otherwise. allows for seamless and quick transmission of information. Built-in error catching prevents documentation from being prematurely sent unless complete. System notif cations of transaction status become an option, and freed resources allows attention to be redirected to other tasks. This PDF is for the purpose of demonstrating skill and technique in user experience. You do not acquire ownership rights to any content, document or other materials viewed. All work within is conf dential, and subject to copyright with all rights reserved by respective clients and/or myself. Images may not be reproduced, copied, transmitted or manipulated without written permission.

©2012 Catherine Booker.

CATHERINE BOOKERBOOO KER

USER EXPERIENCE STRATEGIST

CATHERINELBOOKER @ YAHO O . COM CALUBO . COM 310 . 213 . 8218