Enlightenment, Digital Style


Published on

Case study on a UX design project I completed for a client which helped demonstrate the importance of content in creating deep engagements on Web sites. Unfortunately Slideshare did something to the PDF when I uploaded it - if you'd like a copy, you can download it from my site at http://www.rachelmmurray.com/cs_bmcm_presentation.pdf

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

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Enlightenment, Digital Style

  1. 1. Enlightenment,digital style:case study ondesigning a newexperience forBlue MountainCenter forMeditationRachel M. Murraywww.rachelmmurray.comImage courtesy jessicacaterson
  2. 2. 1. BACKGROUNDImage courtesy Blue Mountain Center for Meditation
  3. 3. BackgroundA few words on the client, the project, and my roleto understand the context, and to betterunderstand the business, stakeholders and endusers. More detailed information is available ifyou’re interested.backgroundsituationapproachlessonslearnedsolution
  4. 4. Client backgroundProducts:-  meditation retreats, localmeetups, publishinghouse (works of EknathEaswaran, translator ofthe Bhagavad Gita –audio, books, videos etc.)with newsletters, quarterlyjournal, etc.-  Comprehensive EightPoint Plan for integratingmeditation into daily livesBlue Mountain Center for Meditation is a small non profitin Tomales, California (2 hours north of San Francisco)established in 1961 that offers meditation expertise andruns a publishing house, Nilgiri Presssituationapproachlessonslearnedsolutionbackground
  5. 5. (Image of the Center in the rolling hills of Northern California)Image courtesy Blue Mountain Center for Meditation
  6. 6. Project background–  Full Web siteredesign with botha strategy workstream (strategyand businessanalysis), and adesign work stream(informationarchitecture andinteraction design)–  Custom backend CMS, eCommerce and newsletterintegration with offsource development team–  The design needed to be brought up to modern designstandards – and also needed to be designed to be moreflexible (visually) and scalable (for content).situationapproachlessonslearnedsolutionbackground
  7. 7. My background and involvement•  Role: Business Analyst, Information Architect, Interaction Designerand de facto Project Manager•  6 month part time project in 2006 working closely with operationsand tech lead•  Took the project for a number of reasons:–  Users: not just a project designing an UI but also where I haddirect access to users and stakeholders–  Strategic/leadership: opportunity to propose the approach –so if I made the business case for doing business flows, we didthem. This allowed me to focus less on the deliverablesbusiness, and more into the solutions business – we’re here tosolve problems not just make design deliverables–  Holistic brand: client who had products and services outside oftech sector that were an integrated online/offline suite ofproducts - and were open to understanding how a digital userexperience can help evolve that brandsituationapproachlessonslearnedsolutionbackground
  9. 9. Challenges and opportunities•  Challenge:–  The client had contacted me to revise thestructure of their site•  Opportunity:–  The existing site structure revealed anopportunity to redesign the site using a fulluser experience perspective – not justimproving findability and navigation, butcreating an experience and improving theirbrand by highlight key differentiatedcontent and the center’s full line ofproducts. We had a chance to not justbuild a sitemap – but create anexperience.backgroundsituationapproachlessonslearnedsolution
  10. 10. 3. APPROACH AND ANALYSISImage courtesy Zach Hoeken
  11. 11. Approach and analysisApproach:•  Understand the needs:–  The business and users needs and current painpoints, and various metrics (what is success vs.failure, what metrics for business and for users)•  Create the solution to address the needs:–  Design artifacts that document the solution –and create additional artifacts wherenecessary to support those design artifacts(strategy etc.)–  Solutions that address the needs – andgenerate excitement for the client’s brand.backgroundapproachlessonslearnedsolutionsituation
  12. 12. Business and stakeholder needs - in generalIn general, I start with the business for a number of reasons:•  Consulting model:–  A client coming to myself or my employer with a product orproject that needs improvement is the basis of most externalconsulting – including this project•  Metrics start at the strategic level:–  Starting at a strategic level is where successful businesses live –where metrics (KPIs, sales goals, etc.) tend to live, and they areessential to a project’s success•  Context lives at a higher level:–  By starting with a 30,000 foot high level view, you understand theenvironment and context that a business lives and operates in -and additionally, the competitive landscape that companyoperates in•  Client viability:–  Opportunity to get a ‘feel’ for how the client understands design,and any potential obstacles that come because of notunderstanding design – and how I can proactively address themahead of timebackgroundapproachlessonslearnedsolutionsituation
  13. 13. Analysis of business and stakeholder needs•  Internal needs:–  Meetings with internal stakeholders (business units within BMCM –leadership, operations, publishing, tech) not only as a way to introducemyself and demystify what I did, but to learn what their needs were andto understand multiple business units–  Since small, financially solvent company and non-profit, the Board ofDirectors didn’t play as large a role in influencing success of the project.The key people to please were twofold: the client’s business units, theCenter’s founder’s wife, and the client’s end users–  Incorporated documents like their strategic plan, positioning paper,press coverage, Web analytics etc.–  Goal: focus on attracting new users and increased purchasing of NilgiriPress’ offerings, but also to have existing users spend longer time on thesite exploring (and purchasing) the products and services•  External influences:–  Quick competitive analysis of UX standards for competitors (see nextpage)backgroundapproachlessonslearnedsolutionsituation
  14. 14. Detail from competitive analysis ofmeditation centersThis image illustrated that the best of breed meditation centers recognized thatbetter user experiences meant more professional designs visually – and thatscalable best practices around Web Standards (XHTML and CSS) were becomingthe norm
  15. 15. Design decisions involving strategyand business analysis•  Purpose:–  Several layers of its business which needed to be tied into the success of the Webdesign project - strategic, operational as well as tactical issues within their fullproduct line–  The multiple facets of the clients business meant that there were multiplestakeholders, which meant having to balance everyones needs in the new Website.•  Solution:–  I created a spreadsheet (see next page) where strategic, organizational goals weretied to the Web sites user goals within ONE document - to ensure that the work Iwould be doing for the UI of the site could be tied directly to the strategic goals ofthe client, thus ensuring corporate buy in to my recommendations.–  I also analyzed of content creation and delivery across multiple organizationaldepartments, and how this affected Web site production–  The client was assured that the design I created was in alignment with theircorporate goals in mind, and that the work I was doing addressed the differentfacets of the business–  I created multiple documents that detailed a content strategy that allowedeveryone to note their needs within one document - so that everyone could literallybe on the same page when it came time to prioritizing the contentbackgroundapproachlessonslearnedsolutionsituation
  16. 16. Business Goals Spreadsheetbackgroundapproachlessonslearnedsolutionsituation
  17. 17. Design decisions involvingunderstanding the users•  Problem:–  Customers of the client came from a wide variety of experiences, andthe client didnt always know how customers became aware of theirbrand, or where new potential customers were.•  Solution:–  I created a user segmentation diagram (see next page) whichillustrated my analysis of potential users and their relationship to theclient and their products.–  I also used site analytics and interviews with existing customers todiscover what their needs where, how they were currently beingaddressed on the site (or not addressed), and how a new site couldhelp fulfill their needs.•  Result:–  The client had a document that helped them understand what theircustomers were looking for and how they could best address theseneeds on their new Web site. I demonstrated that I understood theiruser base - a key consideration of any client consultant engagement.backgroundapproachlessonslearnedsolutionsituation
  18. 18. User Segmentationbackgroundapproachlessonslearnedsolutionsituation
  19. 19. User needs•  Methodology:–  Spoke with 10 end users across the US by phone and in person–  Interviewed them on experiences with the Web site – features, frequency,how technology affects their meditation practice. Also addressed wholeBMCM brand – including purchasing items from the eCommerce sitepublishing house–  BMCM staff were also end users I spoke with (i.e. experiencedpractitioners of the Eight Point Plan)•  Findings:–  Basics:•  Key issues involved navigation and findability – addressed throughimproved IA–  Advanced:•  Brand relationship – address through improved interaction design–  Expertise: the site didn’t convey to new users the benefits of theBMCM brand, the breadth of their offerings – or why peopleloved the brand.–  Engagement: People didn’t see the value of incorporating a siteinto their meditation practice – an opportunity for a deeperexperience on the site was there.backgroundapproachlessonslearnedsolutionsituation
  20. 20. 4. SOLUTION AND RESULTSImage courtesy Petr Kosina
  21. 21. Solution•  Solution documented in sitemap andwireframes•  Design decisions I want to highlighttoday:–  Content: Role of leveraging client’s existingcontent and domain expertise – highlightingkey unique, differentiating content in thenew designs. We’ll see this in the sitemap–  Layout: Focus on designing engaging pagedesigns in addition to traditional page typesand home, level 1, 2 and 3. We’ll see this inthe wireframes.approachbackgroundlessonslearnedsolutionsituation
  22. 22. Original version (before I was involved)
  23. 23. Design decisions involvingcontent strategy and information architecture•  Problem:–  The existing site had plenty of great content, but finding it was aheadache, and frustration is never what you want users toexperience - especially on a meditation related Web site.•  Solution:–  Content strategy: I catalogued existing content and analyzed it,forming a content strategy that brought the clients Web site upto modern expectations of how to engage with content andidentifying gaps in content–  Branding: Emphasizing the main content buckets around thesubject matter (meditation), the domain expert (Easwaran) andthe community around both… and message that it’s not just theguy who translated a book in the 60s, but a visionary with ameditation discipline that works and is used today–  Sitemap detailed organizational taxonomy, including labeling,navigation, and content types. The sitemap also noted wherenew content creation was necessary, and advised where existingcontent needed to be revised.approachbackgroundlessonslearnedsolutionsituation
  24. 24. Sitemap
  25. 25. Expandingon thetraditionalsitemapCreating asitemap thathelped the clientunderstandcontent strategy –what kind ofcontent they had,and howintegrating it intothe page designshelped strengthentheir brandapproachbackgroundlessonslearnedsolutionsituation
  26. 26. Design decisions involvinginteraction design•  Problem:–  The site needed a modern layout of pages and visual design that delivered the rightinformation to its users and conveyed the passion and expertise the client had intheir business.•  Solution:–  I designed detailed wireframes detailing a complete redesign of sites structure (IA),page layout (visual and information design) and the functions and interactions onthose pages (interaction design). Wireframes were for main section headers, and afew sub pages–  Each contained notations on the business, creative and technical requirements ofthe page - basic elements of the page (including type of content, kind of item anddescription), as well as a legend, issues section, version control area, site flow andother important information for development•  Result:–  The client had wireframes that documented a more engaging user experience, andcould hand them to developers for final development. The wireframes weredetailed enough to understand without having to go to the costly process ofgraphic design and Web development revisions without the wireframe process.–  The wireframes also detailed how highlighting the center’s expertise would increasebrand loyalty – and create excitement even among the existing usersapproachbackgroundlessonslearnedsolutionsituation
  27. 27. Example of full sized wireframe,with annotations section
  28. 28. Highlight-ing what’snew,implement-inganalyticsPushing upkeypopularcontentright to theindexIntroducingstandardWebdesignpracticeslike heroimages
  29. 29. Yes, skeuo-morphism isproblematic –but the bookmetaphorbecause itworks in thiscase
  30. 30. Selling theidea of ablog layoutin 2006
  31. 31. Rather thanclicking acrossseparate pages,have the toolsand referencematerialsbecome onewith the maintopic
  32. 32. Integratingcontent frommultiplesources,including theeCom store
  33. 33. Standardizedformat about theproducts so thatit felt more likeAmazon and lesslike a randomincompletelibraryUse theoppor-tunity toupsell
  34. 34. Final product and results•  A full suite of clear, easy to understand user experiencedeliverables which allow the BMCM to develop a moreusable web site.•  All wireframes had annotations explaining the designdecisions, including the functions and interactions ofmy proposed designs. In this way, new team members(like developers who had no background or contextabout the project) could quickly get up to speed withthe project.•  The client had the tools they needed to develop theirsite, which was subsequently launched with a freshlyredesigned experience. The final visual look and feel ofthe redesign was different than I had proposed, butyou can view it live at easwaran.orgapproachbackgroundlessonslearnedsolutionsituation
  36. 36. Application of the Blue Mountain experienceto my work as a designer since the projectA lot has changed in design and technology since thatproject. The current focus on designing Web and mobileapplications tends to be on making the systems work, but thisproject was a hands on lesson on the role of content inmaking a user experience design successful. It’s not justcreating a new visual design of a layout – it’s diving deeperinto how users engage with the content, and how businessescan leverage that content to further the brand relationshipwith their customers – and to engage deeply with them.Designing for engagement isn’t just designing visually to pushpixels around – it’s understanding that users on a site interactwith that content, and we need to support those interactionsso that they can engage deeply with our client’s brands.approachbackgroundlessonslearnedsituationsolution
  37. 37. Example deliverable: user funnelOne way I’ve started to place an emphasis on making content work fordeeper engagement is by using a user funnel (see next page in detail)that helps illustrate how content is vital to moving users along the salesfunnel towards conversion – conversion in this case being deeper brandloyalty, renewed engagement, increased purchases, etc.
  38. 38. Everything is tiedback to metrics –what ismeaningful andinteresting tomeasure abouthow usersengage withcontent?How do clientssupport a user ona site at everystep of the salesfunnel? Is theconcept of alinear salesfunnel still valid?Company answersContent of interestthat demonstratesa company isinterested inengagementMetrics onengagementUser needsInvolving content
  39. 39. The futureContent will always be changing, as are the tools and methods we’ll accessthem. The question is how companies are preparing for the major disruptivetechnologies and trends that will shape not only content (and contentdistribution) but user experience design itself – trends like:•  Content itself: more than just audio, image and video, but contentecosystems, APIs, and what is content need to be considered. Is yourPinterest board something that can be shared? What about your list offavourites on Yelp, Foodspotting, or checkins on Foursquare? Contentcreation and curation will also shape how we will design•  The ‘how’ of content consumption: Ubiquitous computing/’Internet ofthings’/’Second screen’ and mobile devices•  The measurement of consumption: Data/’Big Data’, and role of analytics –and what happens when ubicomp combines with analytics, and how wemeasure engagement with all of these devices, and types of engagement(passive consumption vs. more active engagement via social andproduction of new content)•  The systems that support how we consume content: Integrating existinglegacy systems into our newer technologies (social networks, collaborativetechnologies and more)approachbackgroundlessonslearnedsituationsolution
  40. 40. This isn’t a case of the future not being widely distributed, or that ‘change iscoming down the pipeline’.This newer world of how we consume and create content is here – and willrapidly continue to advance at an accelerated pace. This will lead to morequestions than answers…
  41. 41. Are we as designers, knowledge workers and buildersready to design for those changes in how we experiencecontent?Are our end users asking for those deeper engagementexperiences, and if so, how do we fulfill their needs andexpectations?What can we do to prepare for all of these changes, howwe’ll live and how we’ll hopefully adapt to them?
  42. 42. Questions or comments?Rachel M. Murrayinfo@rachelmmurray.comImage courtesy zoetica