 |
        |
|
 |
|
       |
|
UI design portfolio
This is a detailed portfolio listing with newer projects first. Other views: projects from the early days of the Web, some featured portfolio samples, and portfolio by category.
WorldPay – Full redesign, strategy, mentoring, UX design, process
Problem: WorldPay needed a new version of the Merchant Portal, reporting software they provide to users of their credit card processing services. They also wanted to learn about user-centered design.
Solution: I redesigned the application, starting with a new information archicture that made everything easier to find. We did customer research throughout the project, learning a lot about how people work. I helped WorldPay learn new techniques and develop a new product-design process.
Results:
Customers said they like the updated UI and the new features. Self-service features save the company money and allow users to work at their own pace.
Read more about this full-redesign project.
Mass. Department of Early Education and Care – Information architecture & site redesign
Problem: The Department of Early Education and Care (EEC) recognized that information was hard to find on their Web site.
Solution:
A very thorough review of 1000+ documents. We analyzed the structure of the site, how up-to-date each document is and how to restructure the site for improved usability. Personas and usability testing were important parts of the project. At the same time, the Commonwealth changed the design and implementation of mass.gov, the site for most government agencies.
Results:
A cleaner site with information that is easier to find. We also identified a number of changes that EEC can make in the future to improve usability further.
Read more about the this information architecture project.
Constant Contact – Customer research & design in an Agile environment
Problem: The User Experience team needed help interviewing customers to learn about their use of the company's products, and help with design for some new features.
Solution:
Together, we developed a customer visit program, including a survey, visit teams and an informal script for the interviews. The discussions were very informative and actually fun because of the variety of ways that people use the products.
Results:
A developing model of how customers use Constant Contact. This has long-term affects on product decisions and design, as well as short-term effects on persona development and design. We also worked on designs for new product features in their Agile environment. Later, they engaged us to run a usability study on an early prototype of some new features.
Read more about the this information architecture project and about the design work.
Carbonite – Online automated backup, design & usability studies
Problem: We've done a number of usability studies on product features and the corporate Web site. We also colalborated to design an important new feature: the process for restoring a customer's files from backup storage. The goal was to improve the user experience while reducing calls to customer support; they are related goals.
Solution:
An iterative process, showing prototypes first to team members, and then to customer service people because they know what users have problems with. Next was usability testing with actual and potential customers. Finally, we tested an alpha version of the software.
Results:
Usability testing turned up some really interesting results that the staff factored into the Agile development process. The new restore feature is live, and the staff expects it to meet the project goals.
Read more about this design project.
Belmont Public Schools – Course management/school-home communication
Problem: The schools used a Web application to allow teachers to communicate with families about class work, homework, the curriculum, and more. It was confusing and most teachers didn't use it.
Solution:
As an interested parent, I offered to help analyze the problem and propose solutions. I organized a focus group to see what active teachers liked and disliked about the system, and another group with students. We quickly realized that teachers were the primary persona because if they didn't use it, there was nothing for students to use.
Results:
Redesigning the new system would impose problems, especially when upgrades came in. We found another application that seemed better. I used the results of our user discussions and my own expert review to analyze the new system, and it was clearly worth pursuing. After field-testing the new program with a group of teachers, the Technology Director decided that to make the switch. We are continuing to work together during the transition period. Students say "it's easier to use" and teachers tel students "You can find that – it's on Edline."
Association for Computing Machinery (ACM)–Digital Library design & testing
Problem: ACM wanted feedback on new designs for the citation page, a page with quite a bit of information about each citation in the Digital Library (DL). See an example of the updated citation page.
Solution:
Iterative reviews of the new design, followed by a remote usability study with a special set of participants: people who really understand the DL and use all of the many features.
Results:
Verification of the new design concepts, changes based on feedback in the study and pages of user comments from the beta release. An analysis of the comments helped the ACM staff decide what other changes were necessary. Read more about this project.
Association for Computing Machinery (ACM)– acmqueue Web site
Problem: ACM was developing a new Web site for acmqueue, a magazine for practicing software engineers. They wanted feedback from real users about new features, their model of online publications and general usability.
Solution:
Working with a colleague, we did an expert review and developed a usability study after they made some changes. The plan included recruiting the right participants and devising a set of tasks and questionnaires for the study.
Results:
Problems ranged from simple (layout changes to make information easier to understand) to the more complex (simplifying complex features). We worked with ACM to redesign the home page and some important features on the site.
RSA, The Security Division of EMC – Usability studies of network security software
Among RSA's products are enVision and Event Explorer, which provide a platform for security and compliance analysis on computer networks.
Problem: The RSA team knew that watching real users would help them understand their usability problems and decide how to address them.
Solution:
The personas that we developed helped us design studies with the right participants. Observing them reassured us that the products address a very important need. We did find some usability problems, though. Even though they knew about some of the problems, watching customers experience the problems was valuable.
Results:
We held a series of review meetings for senior management, marketing, engineers, designers and others. They saw highlight videos of the studies and we discussed recommendations from the usability report. They learned about strengths and weaknesses of their products and developed a plan to address the issues in upcoming releases.
BuidingGreen & Taunton Press – GreenBuildingAdvisor.com
Problem: The publishers said that the key to green building is design. They wanted the new site's UI architecture to reflect that guideline.
Solution:
We customized the design process to their schedule and needs. A Group Design Workshop, persona development, customer interviews, card sorting for the main navigation and series of design sessions and ongoing prototypes led to a successful site architecture.
Results:
Requirements analysis and interviews showed that a planned feature was not appropriate, so we refined the concept.
See all projects for BuildingGreen.
Association for Computing Machinery (ACM)– Guided navigation in search
Problem: At the 10-year mark of its pioneering Digital Library, ACM wanted to update the search experience. Guided navigation displays search choices on the page, helping users refine a search. Contrast this with advanced search, which requires users to already have an understanding of the search space and its parameters.
Solution:
Through research into guided navigation, we developed a model that suited the needs of ACM members and other users. Revising personas helped us understand users and their needs. A round of usability testing helped refine both the design and the personas. See a live search result page with guided navigation assistance on the left side. Read more about designing guided navigation.
Results:
Guided navigation in the Digital Library improves the user experience. It turns out that some users did not notice the new feature, but it didn't get in their way. Users who did notice it found it very helpful. We concluded the project with a large Group Design Workshop to review our design and plan for the future. Participants included renowned researches from many of ACM's governing bodies.
In its press release, ACM said guided navigation helps not only to explore existing data but to discover unexpected information that goes beyond simple query results.
See all projects for ACM.
Forrester Research – Business research Web site
Forrester provides technology and market research to leading companies around the world. A recent site re-design provides customized views of the site based on a client's role.
Problem: Internal research teams
use a layout template to create these customized home pages. Distributing this responsibility provides
content that matches user needs better, but makes maintenance and usability more complicated.
Solution:
Working with Marketing and the individual research groups, I reviewed
the new site, designed, conducted and analyzed a usability study and
made strategic recommendations to make the process smoother.
Results:
A better understanding of user needs, a smoother processes for updating
and maintaining the site, and a better experience for Forrester's clients. Read more details and see a sample home page.
Allscripts – Electronic prescribing software
Allscripts developed eRx NOW™, an electronic prescribing (eRx) tool and released it through the National ePrescribing Patient Safety Initiative™ (NEPSI). It's simple, safe, secure and free.
Problem: Take a proof-of-concept prototype and turn it into a design for production software.
Solution: Expert review of the prototype, analysis of user and business needs, and attention to the major goals (e.g., make it easy to improve adoption rates).
Results: An application being used by physicians across the country. See eRx NOW in use on a variety of devices.
Association for Computing Machinery (ACM)– Large corporate Web site
Problem: acm.org needed a redesign. The goals were to improve the appearance, make navigation easier, incorporate new features and let all users know about the broad range of information that ACM offers.
Solution:
Continuing from a previous engagement, we created a project plan that included the necessary design steps and a usability study to test our design. We worked with a visual design firm to ensure that the final product met the needs of ACM, its members and prospective members. Read details of the project plan for the redesign of acm.org.
Results:
A new site that met ACM's needs and impressed the members in our study. See before and after screens.
See all projects for ACM.
Sermo – Usability studies of an online community for physicians
Sermo is developing a new idea, an online forum for physicians to share medical information as soon as questions arise.
Problem: They needed to know if the design suited the needs of all the users. Could physicians and business users find what they needed? Was the registration process convincing enough to encourage people to sign up? Were all of the features useful?
Solution: A series of usability studies covering all aspects of the site.
Results: Increased understanding of what users want from the site, and reactions to existing and proposed designs. Study results helped to refine personas (descriptions of users and usage), which will help in design and other tasks in the future.
BuildingGreen.com – Web site analysis and re-design
BuildingGreen.com provides independent information about green building products and techniques.
Problem: The existing site had problems with wordiness, navigation and visual design. In addition, they wanted to develop a better understanding of user needs and add tools to make using the information easier. As with many sites, the home page didn't tell the story well enough.
Solution:
Analysis of user needs, persona development, a Group Design Workshop, usability testing, iterative design and great visual design led to a great new site.
Results:
A site that meets user and business needs. Read more about the site design, including before and after pictures
Mitsubishi Electric Research Lab (MERL) – Speech & sound interpretation studies
Usability studies on prototypes that interpret speech and sound: find TV shows by speaking, detect highlights in TV sports programs and iPod voice control.
Problem:
MERL develops prototypes that they consider turning into products. They recognize the
importance of usability analysis in the early stages, and asked Interaction Design to design
and run usability studies to get early customer feedback.
Solution:
A series of usability studies with typical consumers.
Results:
A set of reports clearly outlining strengths and weaknesses in these systems, which MERL can
use in developing these early prototypes into products The first study showed how
users might want to use
a product differently than the designers intended.
A team member presented a paper on the TV program search system at the Advanced Visual Interfaces conference in May 2006. Read the research paper (PDF, 230.4 kb).
Thomson CompuMark – A suite of products for legal research
Products: PowerBuild & SAEGIS
Inbox (review trademark searches); Online
Ordering (self-service ordering of trademark and copyright searches); Global
Online Ordering (the next generation ordering product); and Watch
E-Services (online monitoring of trademarks).
Problems:
Address known usability concerns while adding new features. Do usability testing on new product
releases.
Solutions:
Project plan including user scenarios by expert review, usability testing and UI design.
Results:
New designs for each product: Online Ordering became a wizard
that serves customers and the company better than the previous system: helping
increase orders by 25%. PowerBuild has a new
more-competitive interface, tested with real users.
The
company recently announced enhancements to Watch E-Services.
Philips Lifeline – Medical alert management system
Our on-going process is the model for how to use UI design in product development. We work together to develop prototypes, use test them remotely with real users, revise the designs, possibly test again, and then the client writes the requirements for engineering.
CarePartnersConnect is an application to manage information about subscribers who have medical alarms in the home. Accuracy and quick access to data are critical here.
Problem: The
existing UI needed a new, professional design.
Solution: We
analyzed the existing UI and developed new design ideas. After reviewing them with the client,
we did remote usability testing with real users to check our ideas.
Results:
A better application with consistent links, one clear navigation structure, better colors and
graphics that support the information instead of fighting with it. Users like the UI and we
continue working on updates to the product.
SiteScape – UI design for Forum, a collaboration tool
Product: SiteScape Forum, a set of
Web-based collaboration tools
Problem: Forum needed
a visual refresh and improved usability. They wanted assistance integrating
Zon, a tool for conferencing, IM and other interactive features.
Solution: Interviews
with staff uncovered business requirements and UI problems. We worked on user scenarios
to understand how users work. We identified a new design model through a series
of Group design workshops, where they worked together on difficult
design issues. We presented these ideas at a user forum, where they were well received.
MoreMagic – Corporate Web site for a mobile commerce-enabling company
Product:
Corporate home page. The company makes software for mobile payment. It allows
consumers to use mobile phones to make purchases from movie tickets to ring tones and
parking fees.
Problem:
Their existing Web site didn't make the company or its products look
as mature as they really were. It also didn't tell the story of the products
well.
Solution:
I formed a design team to cover visual design
and Web content. We analyzed the company's needs and developed a site
that suites those needs.
Results:
A new Web site that tells their story very well.
Dictaphone – PowerScribe Workstation suite for physician dictation
Products:
PowerScribe
Workstation, a PC application for physicians to manage dictated
reports; GoMD, for the
iPAQ handheld version; and a microphone
for dictation and navigation.
Problem:
Knowing that doctors
want to spend time with patients, not computers, they contacted us
to develop these designs.
Solution:
I formed design teams for each part of the
work. We defined typical users and wrote
usage scenarios to understand who would use the product and how.
Next, we analyzed the product requirements with those needs in mind.
Results:
Successful products that are received well by users.
ACM – Expert product review & usability study of an online library
Product:
ACM Portal to Computing Literature. ACM has been publishing computer-related
research for
50+ years. The Portal provides searching and browsing through all of
ACM's publications, plus citations from other publishers.
Problem: ACM
knew the Portal had significant usability problems. The features and content were great, but users
had problems getting to the information.
Solution: Phase
one was an expert
product review to identify the biggest problems. ACM staff made significant
changes based on our recommendations. Next we did a usability
study to look for deeper problems. We finished with a survey, showing
that users were very happy. 
Download
the case study with more details
(PDF, 172 KB).
Results:
ACM told members that "the redesigned Portal offers improvements,
most notably in searching, but also in visual clarity, help text,
and relevant information on the main page ... " We
found that many usability test participants didn't even notice that
problems went away — now that the application works as users expect, the
UI is more invisible,
as it should be.
See before-and-after images of the ACM Portal.
See all work for ACM.
iQ NetSolutions – Redesign of a computer-telephony application suite
Product:
VistaPoint Integrated Call Manager, providing call control for users
and console operators. They can manage calls, create conference calls,
see other users' status.
Problem: The
company wanted an updated UI that met current design standards, that
was more consistent and that was easier to use.
Solution: After
analyzing the existing UI, we worked on nomenclature, screen layout,
icons, color, workflow, menu hierarchy
and more.
Results:
Just what they were looking for: a cleaner, easier to understand interface.
One
customer said, "It's
just a matter of dragging the call onto the right icon and letting go.
It's night and day. It is so much easier to use [than our old system]."
Rowe International – UI review of a music jukebox
Product:
A music jukebox that you would find in restaurants and bars
Problem: Rowe
wanted a review of their UI, to be sure it served their customers well.
Solution: An expert
product review.
Results:
A report containing many recommendations and design sketches.
NorthernLight.com – Redesign for search-site home page
Product:
NorthernLight.com search engine Web site.
Problem: NorthernLight.com
wanted a new home page for their search site. It hadn't been updated for awhile and no longer
told the story of the site well. They asked for suggestions from internal people, Interaction
Design and another firm.
Solution: I
analyzed the strengths and weaknesses of the existing page. While they had a variety of unique
features, they didn't describe them. It was hard for users to understand what made this site special.
I recommended pushing the special features to the top of the page, de-emphasizing features that
other search sites had. The new design also organized the page so similar features were together,
which explained them better. Examples of the major categories of search rounded out the page.
Results:
They made some changes, but were bought by another company and did not complete the implementation.
Pingtel: UI design for a voice-over-IP (VoIP) telephone
Product:
Pingtel's xpressa, a voice-over-IP telephone
Problem: Office
phones can be complex. This new company wanted their first product to be helpful, rather than
challenging. There are more interactions on a telephone than you'd guess, and they wanted help
designing it to be easily understood.
Solution: I
worked with Pingtel and their industrial designers to define the size and type of the screen (a
Palm display), the arrangement of buttons and the interactions for all of the features. We used
brainstorming sessions, prototyping and paper usability
tests.
Result: When
was the last time you transferred a call without saying, "In
case this doesn't work, here's the phone number ..."
See how the I-Design process worked to create this phone UI.
HomePortfolio.com – eCommerce site design and testing
Product:
HomePortfolio.com is a leading Internet destination for home-design products and information.
Problem: It
was initially a "divided" Web site: browsing, shopping and product research were each
in separate sub-sites. They needed a review of the site before launching
a new eCommerce feature.
Solution: After
a few months of consulting, they hired me as VP of Design. I formed
a design group, helped organize the development process, acted as the general user advocate and
developed new product ideas. I developed high-level designs including product search, advertising,
content pages and site re-designs, and worked with my staff on the implementation. We ran focus
groups to investigate new site features and had regular usability studies. I
analyzed site traffic to understand the results of our design work and understand how people
really used the site.
Results:
A successful and happy design group. A well-designed site with a clearer message. Consumers who
could do product research before going to the store. Satisfied business partners (manufacturers
and retailers) who had more-knowledgeable customers.
See examples of design, new-product development and user research.
Upromise.com – usability study of a registration process
Product:
The company offers tax-free college savings. Companies you buy from contribute a percentage of
the price to funds that members set up for children.
Problem: Upromise
wanted a usability study to learn how typical users react to their enrollment
process. How much information do they need? How quickly would they enroll?
Solution: I
worked with the Upromise staff to understand what parts of the site were involved, what their
goals were and what they thought were the problems and strengths. I worked on recruiting, designed
and ran the study, held a debriefing session with the observers, wrote a report and discussed
it with the client. Participants demonstrated a wide variety of reactions to the program and we
found a number of ways to improve the process.
Results: They've
made a number of good changes to the site.
See before and after pictures of the Web site.
America's Test Kitchen/Cook's Illustrated – Expert product review of cooking sites
Problem:
ATK was about to start its 2002 season on Public TV. They wanted to
be sure that all of their
media supported each other (the TV show and AmericasTestKitchen.com,
along with "Cook's
Illustrated" magazine and CooksIllustrated.com).
Solution: Rather
than spend time and money on a usability study, they asked me to do an Expert Review. I watched
a few episodes of the program to get a feel for how they communicate with viewers. I reviewed
the companion Web site and some similar ones, and then I shared my analysis with them.
Results: We
identified a number of ways to make the Web sites relate to each other
and to the TV show better.
I suggested that they promote books only with related recipes. They implemented
my suggestion to have a printer-friendly page for recipes. Our expectation
is increased user/viewer satisfaction as well as increased sales and
subscriptions.
See a sample of the printer-friendly page.
DirectHit.com – Usability testing and an Expert Product Review of a search site
Product
1: DirectHit.com (now part of AskJeeves.com) was rolling out a new UI, including a shopping page.
Problem: They
wanted to test user reactions to the new features and to understand how people view search.
Solution: After
a review of the literature on searching, I put together a usability study to observe how people
create search queries and analyze results. The outcome: People don't
understand how search works and they don't really care. That means that search sites need
special attention. I recommended ways to help people through the process without needing a lesson
in search theory.
Result: The
site now offers more advice about searching. Relevance ranking is now explained. The company's
message is explained more clearly.
See changes made to search-result pages.
DirectHit project #2: Review of self-service advertising auction pages.
Product:
Advertisers could bid on specific terms, and the three highest bidders' text ads would show on
the side of any page when those terms were searched for.
Problem: The
marketing department wanted to be sure that potential advertisers understood how to bid and pay
for advertisements.
Solution: I
did a quick walk through with staff members, pointing out areas of confusion that needed attention.
Result: A
clearer UI.
Interactions magazine: Writing about color in UI design
Article:
Exploring Color in Interface Design:
Problem: Explain
how to apply Josef Albers' color theory to UI design.
Solution: I
co-wrote an article for Interactions magazine (July/Aug 96, vol. III.4), on the use of
color in UI design: Exploring Color in Interface Design. Co-authors
were Debbie Falck (my visual-design partner) and Ati Gropius Johansen (daughter of Bauhaus founder
Walter Gropius). I also helped Ati teach a
tutorial on color at the CHI 96 conference.
Result: A
useful and fun article. It was fun because we had cut-out color samples to use in exercises.
Authoria – UI for a self-service HR information system
Product:
Authoria HR, a Web application for employees to look up policy information
Problem: Authoria
wanted a professionally-designed UI for their first self-service application.
Solution: We
did a lot of brainstorming about concepts, features and information presentation. I did three
rounds of usability testing, to be sure that we're getting it right. Rather than use the standard
organization, we developed one based on the users' model of the task rather than the experts'
understanding of it.
Result: An
application designed to fit user expectations.
This led to another engagement for a later version of the product.
Lotus Development Corporation – Calendar and Contact Management design
Product:
Lotus Organizer, version 5
Problem: The
team needed designs for new contact-management features.
Solution: I
collaborated with the development team to design contact management, LDAP, scheduling and other
features.
Result: Well-designed
new features, a
US patent, and Best PIM 1999 (PC World magazine) and comments like The
most notable new features assist you with contact management .... This is a huge improvement for
users who have long wanted a better way to tie their information together in Organizer."
(Windows magazine, 1 Nov. 1998.
See contact management samples, and an example of address parsing.
See all work for Lotus.
Boston.com– Expert Product Review of a magazine site about Boston
Product:
Boston.com, the Globe's online magazine about Boston
Problem: Analyze
the site in preparation for a site redesign
Solution: I
identified a number of ways to enhance readability and general usability.
Concord Communications– UI design for network management
Product:
Network Health, a network performance monitor
Problem: The
existing product had an out of date UI and was confusing.
Solution: Extensive
interviews with staff, analysis of background information and a review of the existing product,
plus brainstorming and group prototyping sessions helped define the requirements. Usability testing
confirmed the design and suggested areas for improvement.
Lotus Development Corporation – UI analysis and redesign for document management
Product:
Domino.Doc, the document-management system
Problem: The
existing UI was hard to use. Terminology was confusing, features were hidden and the design reflected
the architecture.
Solution: A
new design based on usability testing and expert review. Concept brainstorming meetings helped
decide how to present concepts to users. We did Group design workshops analyze the ideas and assumptions
of team members. A focus group of important customers gave gave excellent reviews and good feedback
with additional requirements.
See examples of the new document-management design.
See all work for Lotus.
Digital Equipment Corporation – UI design for printer management
Product:
Print Wizard, intranet printer management
Problem: The
team knew what features they wanted to provide, but didn't know how to design the product.
Solution: A
well-organized Web site providing easy access to important features. My team included a graphic
designer to work on color, layout and graphics, and a writer to create an index of the entire
application. I worked with the graphic designer to develop a visual-design language for product-status
icons.
See intranet design samples, and the visual language we created for icons.
Other clients – UI design, usability testing and expert product reviews
@stake
SmartRisk Analyzer: Expert review of product for finding software security
vulnerabilities.
Bank
Boston (now Fleet) and Viant Corporation: Online banking application product
review.
Banyan:
StreetTalk desktop UI design..
Cognos: Review
submissions in a Web site design competition.
Digital Equipment
Corporation: Redesign suite of tools for mobile users for consistency.
First Call
& Research Direct (Thomson Financial Services): Financial analysis tools design.
GTE Labs/Verizon:
eCommerce competitive analysis.
Open Market:
Usability testing and redesign for an early eCommerce order process.
Oracle Corporation:
Decision-making tool for supply-chain management.
Passkey: Design
ResDesk online hotel reservation system.
PriceWaterhouseCoopers:
Oversee the design of the BetterWeb site
Radnet: Design
a B2B portal system and an HTML
editor in a groupware development system.
Hammer and
Company: Information architecture for a Web site redesign.
Hyperwave:
Portal UI redesign.
Inso: Design
spelling and text-proofing tools for non-native English speakers.
Netscout:
Expert review for nGenius network performance management
Restrac: Usability
study of WebHire, an Intranet resume-tracking system.
Spyglass: Design
of Web browsers for new devices, including TV and small screens.
Trellix/Interland:
Redesign of parts of a Web-publishing application.
Vectis: Design
consultations on a handheld clinical information system for medical
offices.
Vista: Product
review for intranet applications for Babson College and MIT's Sloan School
© Copyright 1996-2013, Interaction Design, Inc.
Design consultancy: Information architecture, UI design, UI strategy & customer research
Boston, Massachusetts and beyond