Herman Miller Website Redesign


Published on

This is a graduate strategy report and deliverable for the course, Information Architecture, prepared for the Herman Miller client

Published in: Technology, Business
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Herman Miller Website Redesign

  1. 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  1
  2. 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  2
  3. 3. Herman Miller  I.    INTRODUCTION  H  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:  T  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”.    3
  4. 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  O  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.    4
  5. 5. Figure 1: Comparative performance chart of Herman Miller (MLHR)  T  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].  F  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  5
  6. 6. website as a tool of competitive advantage.  M  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    F  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  6
  7. 7. by utilizing a slide‐in panel which shows the details of a design image, we make use of affordance.  S  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.  T  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.  F  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.  F  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.    7
  8. 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  8
  9. 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                                9
  10. 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.    10
  11. 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          11
  12. 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.                          12
  13. 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            13
  14. 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    Current Layout of Specifications    – 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.              14
  15. 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              15
  16. 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.”                        16
  17. 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              17
  18. 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.                                18
  19. 19. Herman Miller’s current web page:  Non Existent      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                        19
  20. 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.    2 This 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.  20
  21. 21. The same can be viewed as 3D as well.            2D Comparison View 3D Comparison View 2D Individual View 3D Individual View Product Order     My Saved Items     Abak 0031   Abak 0034   Abak 0007   Abak 0035 Abak 0034   Abak 0031 Abak 0038   (Can select a maximum of 4 at a time)   Annotations   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 0035               21
  22. 22. Herman Millers’ current website:    3D Comparison View 3D Comparison View 2D Individual View 3D Individual View Product Order 3a Double click anywhere to see 3D view 1       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  3b Go to 3D View Page correspondence between these two  views  Annotations 1 Edit ‐ It is very difficult to choose individual  Click to keep selected Vivo Interiors 2 With its precise, capable, and smart performance, Vivo interiors items on the 2D view blueprint  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 ‐ Text under Annotation is in editable mode  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. at all instances                    22
  23. 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      23
  24. 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.                                                      24
  25. 25. Herman Miller’s current web page:    2D Comparison View 3D Comparison View 2D Individual View 3D Individual View Product Order Display All Display Selected   Double click anywhere to see 3D view 2   Button Button Button   What Herman Miller Doesn’t Do Well:  Button Button Button Reset ‐Navigation  controls  do  not  look  like  they  should be clicked  ‐Again, user needs to do too much back and  + Reset Button - Button Reset forth clicking between 2D and 3D tabs  1   Annotations   Vivo Interiors Edit 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.                   25
  26. 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.                            26
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.