Download - Herman Miller Website Redesign

1

Instructor Dan Klyn

Herman Miller, A Site Redesign (IA Strategy Report)

Fall 2008

Alina J. Johnson Chia‐Hui (Emily) Lin

SI 658, Information Architecture Anindita De

2

Table of Contents

I. Introduction ..........................................................................3 Statement of Strategic Goals .................................................3

II. Background Information ........................................................3

III. Research ...............................................................................4 Figure 1 .................................................................................4

IV. Methodology ........................................................................5

V. Findings.................................................................................5

VI. Conclusion ..........................................................................7

VII. References ............................................................................8

VIII. Appendix ..............................................................................Numbered 11 ‐ 26

3

Herman Miller

I. INTRODUCTION

erman Miller is the widely recognized leader in the design and manufacture of office, institutional, residential, home, and healthcare furniture.

For eighty five years, they have been recognized as a leader in various areas including art and design; inclusiveness and diversity; innovation;

the environment; and operational excellence, as demonstrated by the various awards and recognitions awarded through the years. In fall 2008,

graduate students at the University of Michigan School of Information were asked to provide suggestions for the upcoming redesign of the Herman

Miller website (http://www.hermanmiller.com), and to provide expert advice on Information Architecture aspects of the current site that could

incorporate company goals, as well as the newly identified six guideposts for the company as designed by “Hello”: simplification, storytelling, human

perspective, inspiration, thinking big, and being spirited [1] .

Statement of Strategic Goals:

his report will discuss the methodology, and findings discovered over the Fall 2008 semester (Sept. ‐ Dec. 2008) for the website of Herman Miller.

The focus of our report will be the use of the Architects and Designers portion of the global Herman Miller public website in which internal

Herman Miller employees use to interact with one another and the external customer; the context in which they use the site, as well as address

the content and structure of the site used to find, search, and retrieve information that is relevant and timely. In addition, the company is using Hello,

an interactive design agency to assist them with Guideposts, a method of further refining and defining the site to fully represent their brand. The

reputation of the Herman Miller brand is at stake, and we aim to redesign with that in mind.

II. BACKGROUND

Founded: 1923

NASDAQ Global Select Market Symbol: MLHR

Company World Headquarters: Herman Miller, Inc. 855 East Main Avenue Zeeland, MI 49464

Mission: Originally a manufacturer of traditional residential furniture, the company now considers its main goal of “creating great places to work”.

H

T

4

Today, they are a global office furniture company who design, manufacture, and distribute freestanding furniture, as well as office and healthcare

systems furniture, and they have offices in over forty countries. They operate via a global dealer network of various independent and

company‐owned businesses and are the second largest furniture company in the world [2].

Vision: “The future quality of human life is dependent on both economic vitality and a healthy, sustainable natural environment. We do not see these

goals as mutually exclusive, but inextricably linked.” To this end, the company is economically sustainable and socially and environmentally

responsible, recently listed as one of America's Safest Companies (ASC) in September 2008; “Corporation of the Year” by the Michigan Minority

Business Development Council in October 2008; and its fifth consecutive listing on the Dow Jones Sustainability World Index, a measure of

sustainability [3].

III. RESEARCH

ur overall strategy has been to focus upon a specific subset of the global Herman Miller website, rather than focus upon the website as a whole.

We narrowly tailored this goal based on three specific interviews conducted with various stakeholders in the redesign of the Herman Miller

website to allow them to complete their daily tasks and overall goals. Our strategic goals are to identify the users, context, and content that

will allow Herman Miller's internal and external customers, via Information Architecture, to find what they are looking for quickly. We do this by first

identifying the competitors and pouring through the interviews; in essence, gaining an understanding of strengths and weaknesses of the company.

O

5

Figure 1: Comparative performance chart of Herman Miller (MLHR)

he competitors were found using the Yahoo Finance tool (finance.yahoo.com) which allows one to compare the top two competitors in an

industry or sector , tools that can be used to benchmark a company's strengths that lead to a sustained competitive advantage and superior

profitability over the long term. For Herman Miller, the industry is Business Equipment, and the sector is Consumer Goods. As an eighty‐five

year old company, it has remained a leader among its competitors in terms of net income, and against the financial benchmarks of the S&P (GSPC),

Nasdaq (IXIC), and Dow Jones Average (DJI) over an eleven month period. As seen in the graphic above, Herman Miller is generally outper‐forming all

of these financial benchmarks and in terms of its main competitors, HNI and Steelcase, even as its employees remain below 6500, the lowest amount

among its competitors. HNI and Steelcase each have employees that number above 12,500. While only a snapshot in time, this chart (overall) can

be seen as a strength of Herman Miller, as brand reputation may translate into high earnings for this company. However, the company is currently

(November 2008) underperforming in terms of stock trade, demonstrating a weakness that can be addressed [4].

rom the first interview with Bryan Showers, a Herman Miller marketer, we gleaned that the current site does little to represent the brand of

Herman Miller as he states, “Our site is really a poor representation of our brand” [5]. In terms of competitiveness, both successful new product

launches and customer responsiveness lead to value creation. This can be achieved by the launch of a new website which allows internal and

external customers to find the information they want (viability) and need without burdening or otherwise thwarting the efforts of the user(s). This

can also address the weakness found in the financial analysis of the company by focusing upon a weakness that can be exploited through the use of the

T

F

6

website as a tool of competitive advantage.

orville and Rosenfeld define a website as a “complex, adaptive system with emergent qualities”. As such, our redesign will incorporate key

aspects of design principles that correspond with the needs and goals of the users. Therefore, the stakeholders include the interviewees,

the competitors, and the internal and external customers who visit the site. In terms of internal customers, we interviewed Erin Krauss, a

Herman Miller A&D sales representative. From this interview, we surmised that the Architects and Designers section of the website is not a good fit;

in other words, there was no interdependence among the users, the content, and the context. Specifically, she said that the search feature in the

Typicals Library “pulls up the same information over and over and there is no context”; in other words, it does not give one breadcrumbs or

background information from which to make sense of the retrieved results [6]. Also, from our interview with a Herman Miller dealer we found that

the current site is not much good to him. He told us that “I interface with HM products through Kiosk”, another website entirely that fits his needs

[7]. Due in part to specific elements such as the labeling, browse, search, and save features of the current site, it is very difficult to find features one is

looking for. We believe that there are five principles of design that we can use to further develop the idea of interdependence among the three

elements (user, context, and content) that will satisfy user needs, also serving as our methodology.

IV. METHODOLOGY

In order to accomplish our redesign goals by aligning the brand image representation as identified by Herman Miller marketer Bryan Showers, this

group reviewed three interviews (a Herman Miller marketer, a Herman Miller A&D sales representative, and a Herman Miller business dealer) to more

fully understand the current business via contextual inquiry, and then designed with business goals in mind. Incorporating the Guideposts and the

needs of the internal customers with an emphasis on the goals of the external customer will be key to our redesign suggestions and wireframe

mock‐ups.

V. FINDINGS

irst, we identified affordance as a key principle with which to incorporate our new redesign. Affordance can best be described by what it is not:

a design without affordance “will perform less efficiently and be more difficult to use”. Conversely, our redesign incorporates improvements,

redesigns, additions, search, and browse features that make the site perform more efficiently and easier to use for the customer, by saving time and

energy spent. In this way, the customer is less apt to leave the site due to frustration or confusion because easily grouped items are placed together

and information is easy to find. We did this in two ways. By enhancing the user experience by adding a sort feature within the browse function, and

M

F

7

by utilizing a slide‐in panel which shows the details of a design image, we make use of affordance.

econd, we identified chunking as another key principle that allows us to include the capacity of human memory. Noted Carnegie‐Mellon

cognitive psychologist J.R. Anderson tells us that “performance systematically deteriorates with delay” [8]. In other words, the more a user must

sift and sort through information to use a website, the more their use (of the site) will suffer. In fact, this may ultimately lead one to abandon

the website altogether. Web design must take into account the limitations of memory, and should thus, consider elements which reduce the memory

overload. As such, we designed the image libraries and visual tools with less elements, reducing the visual load to three elements each, placing like

items in the same area (i.e. chunking) and displaying only the most critical criteria in simple search mode. This allows a user to more easily find

elements “so that the information is easier to process and remember” [9]. This also allows for easier retention and retrieval of information from the

website, an added bonus for any user.

hird, hierarchy is one of the overarching principles of design that all good information architects use to design good websites. Organization via

hierarchy allows one to search, find, and retrieve information embedded in the website, therefore, we used hierarchical models. This made our

redesign effort more narrow and less broad, and more shallow and less deep. Overall, this makes the website less difficult to navigate, and

easier to find relevant information that was formerly nested within pages by using stair and tree hierarchies. By showing formerly hidden details via a

slide‐in panel and redesigning the architecture to separate distinct sets of information, we free the user from having to dig through textual elements of

the site, or sifting through narrow and deep hierarchies of information found in the former site.

ourth, redundancy is used throughout the redesign to allow the information within to be easily found in more than one way. For instance, when

a user is searching through the website, it may be easier to show the user an image rather than have one read through a lot of text. For this

reason, we make extensive use of graphics and labeling to allow a user to find key information at their fingertips. Specifically, we make use of

diverse redundancy, “the use of multiple elements of different types (e.g. use of text, audio, and video to present the same information)” [10]. In

this case, both text and graphics are used to allow easy findability on the redesigned website.

ifth, Lidwell et al tells us to “use constraints in design to simplify usability and minimize errors” [11]. Constraints are natural limitations

imposed upon the design to reduce or eliminate user error when navigating around the website. For this, we provided the user with condensed

specifications which allow a user to search within a predefined narrow area, as well as provide the user with limited graphical information to

process, we make use of constraints to afford the user a pleasant, enhanced experience.

S

T

F

F

8

VI. CONCLUSION

In all, we identified ten specific design changes to the current website that we feel can best distinguish the Herman Miller site from its competitors.

These modifications incorporate the interdependence among the users, context, and content in ways that make the website a success. Using

principles of design, guideposts, and information architecture approaches, we feel that our changes communicate ease of use and findability.

Redesign current architecture

separate images from tools

architecture placement at center of site

Increased graphical controls and decreased text

save users time and effort

increase size of buttons, making items easier to find for the user and more intuitive

Improved Labeling system

renaming an industry‐specific jargon term to one that all users can easily identify with

Browse with design‐aided functions

includes a sort feature to incorporate a critical planning tool

Show details

display formerly hidden image details such as pricing information

allow users to distinguish between seemingly identifical images

Condensed specifications

reduce text, and replace text with images

change layout to grid, improving readability

Improved Search

allows multiple criteria to be search simultaneously and for more precise retrieval

includes simple search feature for most critical areas of concern

mouse over effect to supplement new improved search

Enhanced user experience

use of subtle Flash animation to narrow search to specific criteria

9

use of AJAX to reduce the time taken for lengthy page reloads

Save

save and download at the same time

drag‐and‐drop feature (less clutter)

Quickshare and Online Planning

share designs with clients and colleagues

view blueprints online, saving time and to enhance communication with clients

10

VII. REFERENCES

[1] For A Better World Around You: Six Guideposts. 27 October 2008. Hello interactive design firm.

[2] http://www.hermanmiller.com Vision of website. Accessed 28 September 2008.

[3] http://www.hermanmiller.com/CDA/SSA/Awards/0,1582,a10‐c21,00.html

http://www.hermanmiller.com/CDA/SSA/News/Home/0,,a11‐c407,00.html Both

accessed 14 November 2008

[4] http://finance.yahoo.com Accessed 13 October 2008 and 22 November 2008

[5] Personal Interview by Klyn, D. for Showers, B. http://www.facebook.com/board.php?uid=21532572938 Posted online 24 September 2008.

Accessed 27 September 2008.

[6] Personal Interview by Johnson, A. for Klauss, E. Conducted 13 November 2008

[7] Personal Interview by Johnson, A. for Daugherty, D. Conducted 12 November 2008.

[8] Anderson, J.R. Cognitive Psychology and Its Implications. 6th Ed. Ch. 7, Human Memory: Retention and Retrieval. New York: Worth

Publishers, 206.

[9] Lidwell et al. (2003). Universal Principles of Design. Chunking. New York: Rockport Publishers, 30.

[10] Ibid. Redundancy, 166.

[11] Ibid. Constraints, 50.

11

VIII. APPENDIX

Herman Miller’s current web page New Design for Planning and Visualization “Landing Page”

What Herman Miller Doesn’t Do Well:

– Links to the key features are difficult for users to locate

– Labels are confusing – Too much text and reading

12

New Design

Reorganized Architecture

We seek to simplify the navigation by splitting the Visualization and Planning page into two sections: Image

Libraries and Visualization Tools. Instead of placing the navigation on the right side bar as the current

Herman Miller site does, we place them prominently at the center of the page to grab user attention.

Fewer Text. More Graphical Controls

Instead of textual links, graphical controls are extensively used as user interface elements in order to

minimize user effort associated with browsing large amounts of text and to spice up the user experience.

Button and icon sizes are increased to help users efficiently find the features they seek.

Improved Labeling System

Since “Typicals” is an industry jargon that refers to entire sets of furniture in a workstation, it often

confuses general users (and even Herman Miller employees). We suggest renaming “Typicals Library” to

“System Configuration” to make it clear what the library refers to.

13

Herman Miller’s current web page New Design: Planning and Visualization > System Configuration > Browse

Non Existent

What Herman Miller Doesn’t Do Well?

– Lacks a browse page – Pricing info is deeply nested – No sorting function – Unable to distinguish between

similar‐looking digital drawings

14

New Design

Implemented Browse Function

For designers who don’t have a specific search objective in mind, we provide the browse function upfront,

making it easy for them to discover what the Herman Miller has to offer.

Design‐aided sorting feature is also offered. For example, we make sorting by “configuration degree” and

“degree of enclosure” available because they are critical factors for searching for images.

Slide‐in Panel Providing On‐Screen Pricing Information and 3‐D View

By clicking the tiny “i” icon on each image, a panel will slide in and provide sufficient details right on the

screen:

– Users no longer need to page down and up to find the list price of items

– Users can immediately distinguish two images in 3‐D view.

* Look at the first two images on the wireframes: they are hard to distinguish in 2‐D view! So looking at a

3‐D view is a must‐do to find which image is of interest.

Users can also close this panel to browse more items on the screen. This closable panel design also

maintains a clean look and feel for the site.

Condensed and Re‐Structured Specifications

Original specifications are lengthy (over 500 words) and not well‐structured. We trim the texts of the

specifications down by 50% and position the texts in grid layout to improve readability.

Current Layout of Specifications

15

Herman Miller’s current web page New Design: Planning and Visualization > System Configuration > Search


– Can only search for two combined

parameters at most

– “Search by typical name” is impractical

16

New Design

More Effective and Powerful Search Function

Our new search function allows users to set multiple search criteria at once to retrieve more precise

images.

To avoid overloading users with too many search options, we only display the 4 most critical criteria in

Simple Search Mode. Advanced Search Mode is also provided, which allows users to search for up to 9

criteria.

We suggest dropping “Search for typical name” function on Herman Miller’s site. The reason is that all the

items are named by numbers, i.e. Abak00001, therefore this search is meaningless.

Make Search as a Fun Part of the User Experience

Users can adjust the left and right sliders to narrow down the search results. The search results will display

immediately via Flash to produce a quasi‐animation effect. The use of animation is subtle and will not

distract users’ attention while making it a unique way to enhance user experience.

Enhanced User Assistance ‐ Tooltip

To supplement the extensive use of graphical controls, we offer mouse‐over tooltips, such as the tooltip

attached to Work Station Size Slider “Drag the slider to select the work station size.”

17

Herman Miller’s current web page New Design: Planning and Visualization > System Configuration > Search Results


– Only one file can be downloaded at once

– Selected items are not saved for future

use

18

New Design

Save and Download Multiple Images At Once

We provide a save function that allows users to download all selected files at once. Currently, Herman

Miller and its competitors, Haworth and Steelcase, do not offer this Save functionality on their sites, either.

Drag‐and‐Drop to Save Files

When the users drag a file to the “Saved List” at the bottom of the screen, the List expands automatically to

accommodate the selected item and a thumb‐nail will appear on the list. This interactive design helps

create an immersive and dynamic user experience.

Quick Share and Online Planning

In addition to downloading items, users also can share saved items with their clients or colleagues. We

provide Permanent Link and Bookmark features to help users save their search results for future use. Also,

users can view their blue prints online using our online visualization tool without installing any software.

These features help speed up the design process and enhance external communications with clients.

19

Herman Miller’s current web page:


‐ The Z Viewer software that needs to be downloaded and installed

‐ individual product blueprints also need to be downloaded

‐ Lacks the ability to show products in a comparison mode

Non Existent

20

New Design

Currently, the site has a link to a software called Z Viewer that allows users to view the various

product designs in both 2D and 3D formats. The download and installation process of this software

is very cumbersome. Besides, in order to view the products on this viewer, one needs to

individually download the corresponding product set zip files, and then open the .zvw file with the

Z Viewer software.

Moreover, this software does not allow users to view products in a comparative mode, something

that we sure designers may want to be able to do.

In our new design, we propose that the Z Viewer be made into a web application, so that there is

no hassle of downloading and installing the software. Also, internet connections in this age have

become good enough to be able to support such an application. Besides, since this section is

geared towards architects and designers, we presume these professionals to have relatively

superior kind of internet connections. In this new design, we propose a way to show the items

from the ‘My Saved Items’ sections in a comparison mode, both in their 2D and 3D forms.

Choose from ‘My Saved Items’

Here, we list the products that the user has chosen to be contained in the ‘My Saved Items’ section.

Keeping the layout of the display area in mind, a maximum of four products from the ‘My Saved

Items’ can be viewed at a time, which can be chosen with the help of check boxes.

2This is to show that user may choose to view 2D and 3D versions of any one product at a time,

in more detail. This by selecting a product, and selecting the 2D/3D tabs, users can view the

corresponding information.

21

The same can be viewed as 3D as well.

Edit

Abak 0031: Vivo Interiors

With its precise, capable, and smart performance, Vivo interiors brings workspaces to life. Designed by Douglas Ball, its refined textures and details, exceptional fit, and versatile colors and materials make a crisp, clean appearance. It embodies Herman Miller's 40 years of learning and experience with systems furniture. And with its essential set of capabilities, Vivo takes the frame-and-tile concept to new levels of affordability.

Abak 0007

Abak 0031

Abak 0034

Abak 0007

Abak 0035

Abak 0035

Abak 0038

(Can select a maximum of 4 at a time)

My Saved Items

Annotations

3D Comparison View2D Comparison View 2D Individual View 3D Individual View

Abak 0031 Abak 0034

Product Order

22

Herman Millers’ current website:


‐ User needs to do too much back and forth

clicking between 2D and 3D tabs in

order to a good idea about the

correspondence between these two

views

‐ It is very difficult to choose individual items on the 2D view blueprint

‐ Text under Annotation is in editable mode

at all instances

AnnotationsEdit

Vivo Interiors


2D Individual View

Go to 3D View Page

1

2

3a

3b

Double click anywhere to see 3D view

1

3D Comparison View 3D Individual View3D Comparison View

Click to keep selected

Product Order

23

Mouse‐Over facilitates easy exploration

On mouse‐over on a selectable item, the item is highlighted on the blueprint and the corresponding 3D

image is displayed in the box on the right.

Along with this, on mouse‐over on a selectable item, a contextual label is displayed which says that in

order to keep the item selected (even after the mouse has moved away from the item), the item should be

clicked (once). We thought of this facility because the user might want to select more than one item at

time, to either see their 3D view or the product order page.

Reducing chances of erroneous modification

In the current design, the annotation section is editable upfront. This may lead to accidental

deletion/modification. Therefore, we suggest that this section be made editable only by clicking the Edit

link.

This should however not entail a page load since that is time consuming and frustrating. This transition

should be done with an advanced technology like AJAX.

Two alternate methods to view 3D

We have provided the user with two alternate methods to view the 3D version of items selected. One way

is to double‐click anywhere on the blueprint, which will take the user to the 3D Model tab automatically. In

most probability, a user when selecting an item (by single clicking on the item), will double click at the

24

same point to view the 3D version of the item. This reduces the need for the user to move the mouse

pointer to the 3D Model tab too often.

The second alternate method to view the 3D version of selected item is to click on the ‘Go to 3D view

page’ link. This will allow users to view only the last selected item in the 3D view (even if more than one

item have been selected).

Currently, it is very difficult to be able to pinpoint and select individual items on the blueprint. We suggest

that this be made extremely easy, or else the previous suggestions (especially 3a) would make the user’s

experience more cumbersome than trouble‐free.

25

Herman Miller’s current web page:


‐Navigation controls do not look like they

should be clicked

‐Again, user needs to do too much back and

forth clicking between 2D and 3D tabs

Vivo Interiors


Button

AnnotationsEdit

Button

Butto

n

ButtonReset

ButtonReset+ ButtonReset-

ButtonButton

Display All Display SelectedDouble click anywhere to see 3D view

2D Individual View 3D Individual View

2

1

3D Comparison View2D Comparison View Product Order

26

Intuitive navigation controls

In the present design, navigation controls are not very intuitive since the button looks very static and

‘non‐clickable’. Therefore we suggest that these control be made to look like they are to be clicked upon.

Also, in the present design there is no change in the state of the navigation control when a certain action is

performed on it (when the control is clicked). We have noticed that on slower computers, the actions

caused by these controls are not very apparent. Therefore, this is all the more reason to show the state

change of the controls such that the user is not left thinking that these controls do not work.

Therefore, we suggest that there be clear change in the control buttons during action states. For example

when a button is clicked, it should look like it has been pressed and later there should be a transition from

clicked state to released state.

Again, as suggested in the 2D view we, double clicking on the display area should take the user back to

the 2D viewing tab. We anticipate the user to do a lot of back and forth navigation between the 2D and 3D

views, therefore this feature would ease this navigation.