Herman Miller Website Redesign
-
date post
17-Oct-2014 -
Category
Technology
-
view
5.809 -
download
1
Embed Size (px)
description
Transcript of 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
What Herman Miller Doesn’t Do Well:
– 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
What Herman Miller Doesn’t Do Well:
– 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:
What Herman Miller Doesn’t Do Well:
‐ 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:
What Herman Miller Doesn’t Do Well:
‐ 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
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.
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:
What Herman Miller Doesn’t Do Well:
‐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
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.
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.