Case Studies

BUNN

B2B and E-commerce Websites

ROLE

Information architect; digital strategist

CHALLENGE

BunnOMatic is a global manufacturer of commercial and home beverage machines, best known for restaurant coffeemakers. They have traditionally sold through a network of distributors and retailers, but recently began selling products direct to consumers online, while maintaining long-term successful relationships with its distributor network.

Because these are two separate product lines, the company wasn’t challenging its core distribution channel, but it was having some trouble getting traction with their consumer e-commerce. When it came time to redesign their sites, they wanted a recommendation on how to handle their split audiences. Should they have one site, for both the B2B and B2C channels? Two separate sites? Subsites? And whichever solution was chosen, what were the impacts on the navigation of products, content, and SEO?

SOLUTION

I began with research and understanding of this complex audience. Consumers of BUNN products had specific needs and expectations which differed greatly from their commercial customers. After research and persona development it became clear that BUNN should have two sites, one for each channel.  At this point, the challenge on the B2B side was organizing a huge product catalog and database of support documentation, while on the B2C side the site needed to move the user to conversion through a smooth, standard e-commerce experience.

Example of megamenu IA (screenshot)
It’s important for stakeholders to see exactly what will be in each menu before they approve the overall IA.

I developed detailed information architectures for both sites, using personas to prioritize informational needs, and developed a list of content and features to satisfy the needs of each user type.

customer_care_Based on an often-neglected persona—the “existing customer”—I also developed recommendations for a rich Support Center which would both support BUNN’s brand position and allow users to self-service up to a point, allowing BUNN to cut down somewhat on call center and support costs. This recommendation was only implemented partially, however, due to time constraints. (Its architecture is included here to demonstrate the concept.)

Bunn coffee information architecture
The information architecture for Bunn–at least on the top three levels–was best demonstrated with a map of the mega menus.

The IA was developed in Axure, with sitemap linked to partially prototyped pages and wireframe menus, and went through multiple careful revisions to ensure every page of product information and all ancillary content was accounted for. The IA served as a true blueprint of the site, going down to the deepest levels of content, and accounting for every section and piece of content required to satisfy user needs.

University of Massachusetts Memorial Health Care System

Role

Strategist, Researcher, Information Architect, UX Designer

Employee intranet

CHALLENGE

The University of Massachusetts Memorial Health Care System is a multi-hospital system and academic medical center serving Central Massachusetts. Its 13,000 employees relied on a ten-year-old Sharepoint installation—which had not been designed in any real way from inception—for all of their internal communications needs. In addition, a few recently acquired hospitals used completely separate intranet systems.

UMASS Memori pic3Initially, the client believed that a simple facelift or basic “redesign” and update of the existing intranet, “rolling in” the other hospital’s content, would be sufficient to make the system work. However, our extensive and deep research into the needs of stakeholders, employees, and patients revealed a much more complex picture. The situation as it stood prior to the research and blueprint project was highly risky—within a hospital, much less multiple hospitals, internal information and communication is absolutely key.

We needed to educate the executive leadership team about the ways that healthcare intranet systems could and should work, and show them the risks and liabilities that came from devaluing and deprioritizing the intranet system, and we needed to do this in a diplomatic but urgent way.

SOLUTION

post its on wallI began with research, both primary and secondary. In collaboration with the client, I scripted and led two days of employee focus groups and conducted around 15-20 interviews of individual stakeholders. We also developed a survey which went out to every employee in the system, and I analyzed and synthesized this data. I also reviewed and incorporated a number of technical, health-care specific, and best-practices reports and research studies, which I was able to use to support the primary research. We presented the research findings in a written document and in a PowerPoint presentation summary as our first phase.

Phase 2 consisted of our recommendations and a blueprint of a new intranet.

UMass Sitemap Example - ExplanationsDeliverables included a review and recommendation of various technological and content solutions, which was cross-referenced with the complete list of requirements for content and functionality we had developed from our research. We included specifics about the user experience and information structure of the site, content strategy, messaging and tone, and recommended metadata and relational database structures to support the content and personalization strategies. This phase was also delivered in a written report and a presentation to stakeholders and leadership.

UMMHC Workflow - Content ManagementAt the end of the project, UMass Memorial Health Care had re-allocated existing and future budgets in order to prioritize the intranet and meet the requirements and recommendations laid out in the blueprint. Executive level leadership understood and were persuaded of the urgency and importance of the project, and both our clients and other stakeholders in the Information Technology department were enthused to work together on a new system-wide intranet to be launched in phases over the next several years.

“Thank you so much for your work. It has spurred thoughtful and important discussions here and  is laying the groundwork for a 21st century intranet!” 

-Andrea Badrigian, Director of Communications, UMass Memorial Healthcare 

Baltimore Neighborhood Indicators Alliance

Website

ROLE:

Account and project manager, strategist, information architect, copywriting and content development

CHALLENGE:

BNIA Site Homepage WireframeThe Baltimore Neighborhood Indicators Alliance (BNIA) is a nonprofit that collects, analyzes, and distributes large amounts of data about Baltimore City. Their reports and data are used by the media, grant makers and foundations, application developers, and community leaders.

BNIA needed to make its data much more accessible and user-friendly on its website (as opposed to relying on the printed reports so much), increase user engagement with their key audience segments, provide guidance and assistance to users of the data, maintain the site simply and easily into the future, and do all this with a very small team and limited resources. In addition, as part of the University of Baltimore, they are required to harmonize their branding and look-and-feel with the established graphic identity of the university.

SOLUTION:

Example of a persona slide for a less-complicated site.
Example of a persona slide for a less-complicated site.

To help the group prioritize the site’s functions and requirements, I created user personas based on each major audience segment. I also considered the BNIA staff as “users” whose needs must be considered in the design, since they would be maintaining the site on a shoestring. By developing the IA in an interactive prototype form, with multiple annotations, I Ire able to show the clients how the site could be redeveloped in a CMS (WordPress), bringing the most timely and important information forward while maintaining the large archive of still-useful data further down in the hierarchy. This documentation was also used to communicate the exact parameters of the site to the development and production team, who are then able to build the site quickly and with few questions.

BNIA Data Visualization

ccsite-samples-BNIA map wireAround ten months after the site was launched, BNIA asked me to help them with a new map-based, real-time data visualization of their data. BNIA’s budget was limited, but they recognized the value of user experience design, so I worked with the team’s programmers, front-end coders, and DBAs to develop a “sketch” showing how an interactive map could work visually and interactively. The rough prototype can be seen here. [LINK]

“Thanks so much to Claire Carton for helping us ensure our website accurately and clearly conveys all of the information and data available at BNIA-JFI. She helped us understand how the website is an extension of the organization and how users can/should relate to the site.”

 -Seema Iyer, Associate Director, Jacob France Institute

DeVry University

Career Portal

ROLE:

Researcher, strategist, creative lead, information architect, copywriter

CHALLENGE

One of the oldest and best-regarded for-profit universities in the U.S., DeVry realized it needed to do more during the economic downturn to help its students find careers in their field after graduation.  Often, its students wouldn’t seek out career services until just before graduating, leaving little time to learn the basics of job hunting, resume writing, professional networking, interviewing, and so forth.
The University came to us with a brand framework (“Compass to my Career”). They had copious resources in multiple formats distributed at career services around the country and on different legacy web properties. Their student body was both online and in-person, and could be found worldwide. They asked for “blue sky” recommendations and ultimately, my recommendations were so compelling that they invested in the entire build.

SOLUTION

Devry Compass Screenshot
DeVry’s Compass to My Career – “Explore” section

The strategy for the Compass student portal was clear: it must be useful —meaning it shouldn’t try to replicate or replace existing social networking and utilities students were already using, and it must not add additional “overhead” to the students’ lives.

Instead, it needed to provide information tailored to the student’s needs: their geographic location; their major; and their year in school. And it must be engaging, since the tool would be voluntary to use, and and engaging this demographic is particularly challenging.

devry compass1For personalization, I suggested a low-impact, secure way to integrate with part of the student information management system, allowing us to deliver content based on their “stage” or year in college and major, as well as deliver map based content like “job fairs near me” and career events. For engagement and utility, I worked with their education and career services team to outline a variety of tests and quizzes; developed ways to frame and personalize content channels to the student’s interest; developed lists of external content resources which could be automatically fed into the portal, meaning site content would be fresh with low overhead internally; and a personalized career planner tool which students could use to track their progress, using some principles of gameification. In addition, we worked with third party career sites to deliver real-time internship and jobs listings, data and information about various careers (“hot” careers and geographies; salary tools; etc.)

Moodlerooms

Website

ROLE:

Researcher, content and brand strategist, information architect

CHALLENGE

Moodlerooms is an education technology company that helps teachers at all education levels manage their classrooms. Their flagship product, Joule, is an online learning management system hailed by educators and eventually purchased by Blackboard. At the time of the website project launch, Moodlerooms was struggling with their branding (Joule vs. Moodlerooms), communicating their identity as a fun but technologically sophisticated company, and with engaging their three primary audiences—driving conversion in the form of inquiries and demos.

SOLUTION

Moodlerooms home page 2
Moodlerooms home page, banner rotation

We gained a deep understanding of the audience through numerous interviews with  stakeholders and customers. Based on this understanding of users’ needs,  our strategy recommended that the site clearly separate Moodlerooms, the company, from Joule, the product, by treating Joule as a product with personality. Creatively we believed that “introducing” Joule to the audience upfront would help clarify the brand positioning of both the company and product.

We also developed an approach to content and site structure that would allow Moodlerooms to leverage their large support and documentation database. We mapped out a strategic content publishing workflow and implemented advanced search and tagging capabilities within the new website.

HOW Interactive Design Awards – 2013 Merit Award Winner – Moodlerooms

W3 Awards –  2013 Best in Show Computer/IT Software –Moodlerooms