Shenphen Ling

Tibetan Buddhism for today's audience:
A modern platform to foster Buddhist learning and practice

SUMMARY

Shenphen Ling, a non-profit Dharma center, came to me to learn how it could refresh its brand identity and unearth exciting ways to deliver the spiritual development experience. We designed an entirely new platform using an education-first strategy that enables effortless access to resources surrounding Buddhism.

THE PROBLEM

When Shenphen Ling approached me in January 2017, I was intrigued. As a member, I knew the center had created a website soon after opening its doors in 2004 yet never promoted it. A second website launched in 2011 but remains unfinished. In recent years, Shenphen Ling has observed growing public interest in Buddhist practice and philosophy. To spread the Dharma to a new generation of learners, they needed to reboot their organizational platform - and that’s where I came in.

In Taiwan, Shenphen Ling’s principal center has built up a huge following of learners familiar with its resources and activities, aided by the country’s massive Buddhist network. In the US, Shenphen Ling has been a much smaller operation. With an existing cache of free resources and a revered spiritual teacher guiding their practice, Shenphen Ling wanted a website capable of reaching a larger American audience.

THE SOLUTION

Whether you approach Buddhism as an academic theory, a way of life, or the path to Enlightenment, the reinvented ShenphenLing.org enables you to choose how and what you want to learn about Buddhism in a modern interface that prevents decision overload. The redesign facilitates quick searching and comprehensive filtering, allowing visitors to view, download, or share content at their own convenience. While the focus remains on Dharma education, patrons can also learn about the center, request special services, and save events to personal calendars, all within one intuitive platform.

THE RESEARCH

Client Background


Shenphen Ling is a 501(c)(3) religious organization located in Saratoga, California. The organization was established in 2004 as the primary location for the Dharma center in the United States, with the principal center in Taiwan. Shenphen Ling operates under the spiritual leadership of Venerable Kushok Gemang Rinpoche.

Business Requirements


I put together a questionnaire and conducted interviews with primary stakeholders to elicit the business requirements. I distilled the responses and my notes into a Requirements Brief and summarized our project priorities:

  1. Business needs
    • Primary: Have an effective tool to educate and assist others
    • Secondary: Fund projects and products.
  2. Business goals
    • Primary: Draw traffic to the site.
    • Secondary: Build membership for events and services.
  3. Design principles
    • Visual consistency
    • Predictable architecture
    • No distractions
  4. Design goals
    • Organized → convey benefit
    • Comprehensive → convey trust

Research Survey


To learn more about our potential users’ habits and behaviors, I created a user research survey using Google Forms to learn, mainly:

  • What people’s primary interests are in learning Buddhism;
  • What activities associated with learning Buddhism are they most interested in; and
  • What people like or dislike about Buddhist organizations and websites they were familiar with; and
  • What people are most interested in when browsing websites of non-profit organizations.

I distributed my survey using personal networks and across social media. Responses were gathered from approximately 40 respondents from around the world. I identified key numbers and patterns from the data:

  • Responses regarding primary interests clustered around 3 themes: academic growth, emotional growth, and spiritual growth;
  • The vast majority prefer reading and are most interested in meditation and teachings;
  • Respondents liked organizations and websites that offered access to a lot of educational materials. They disliked outdated websites that made it hard to find information for different levels of knowledge; and
  • When browsing non-profit websites, respondents are most interested in learning about the organization, educational content, and programs.

I was starting to see that potential users mostly desired easy access to an assortment of educational content. See the full analysis provided to stakeholders (5 minute read).

Personas


Interviewing my target audience in-person and through email quickly developed into crafting personas. I decided on three primary personas reflecting the three primary interests of my survey respondents in learning Buddhism. These pointed me to our product’s main goal: to enable visitors to access free, high quality educational content about Buddhism.

Product Hypothesis


To ensure that our design would focus on the product instead of its features, I examined the problem that we were trying to address for our personas and drafted a product hypothesis to solidify our vision, strategy, and goal:

We believe that by creating a customizable library of free resources within one platform for our personas, we will draw traffic to Shenphen Ling’s new website. We will know this to be true when we receive data from Google Analytics showing at least 30% of visitors downloading, streaming, or requesting content on the site.

Competitive Analysis


To give stakeholders an overview of the competitive space, I selected five organizations out of those mentioned by survey respondents and applied four methods of competitive analysis:

  • I evaluated Shenphen Ling’s existing websites using a plus/delta model;
  • I performed a task analysis on how users would locate teachings on competitor sites;
  • I drew up inventory charts comparing features and content across different websites; and
  • I finished with a SWOT analysis to evaluate strengths and weaknesses associated with site layout, navigation, terminology, and marketing integration.

This revealed which areas were key for improving our product (visual design and content hierarchy) as well as which competitors possessed the strongest examples of navigability and findability. Contact me to see the full analysis provided to stakeholders.

Screenshots provided for discussion and analysis only. I do not own these images.

User Stories


I compiled a list of tasks that users would want to accomplish by using our product and should be able to accomplish based on the business requirements. This reminded us of our user goals when prioritizing the screens for our MVP. See the detailed user stories (1 minute read).

User Flows & Sitemap


Completed user stories were then turned into user flows to visualize how users would accomplish various tasks within our website. I then set up an open card sorting study in order to understand users’ mental models of information architecture. See the full study setup and analysis (4 minute read).

Using the results of my study, I put together our sitemap, experimenting with different taxonomies and page placements with Hick’s Law and the 3-click rule in the back of my mind, before settling on a final version. See how I documented my iterative process (4 minute read).

Feature Prioritization


To wrap up my research, I used the MoSCow method to prioritize the features and content for our MVP.

BRANDING

Stakeholders desired a modern product but varied broadly in their examples of what they considered to be modern. To avoid an impasse, I conducted an exercise inspired by the Microsoft Desirability Toolkit. Out of a controlled vocabulary list, stakeholders selected five to six adjectives that they wanted users to use to describe our website, giving me more direction as I dived into developing a fresh brand identity.

Typography


Molengo’s lines for stems, ascenders, and descenders mirrored the fine lines of Shenphen Ling’s existing bodhi leaf icon. Large counters and ear shapes also mimicked the icon’s curves and flourishes. Its predictable portions indicate better readability, but a humanist aspect allows the type to feel more natural instead of overly perfect. For my paragraph text, I chose Lato for its harmony of warm semi-rounded details with a strong structure. Used in almost 8 million websites, Lato’s geometric qualities boost readability and its multiple styles can be used to achieve content hierarchy without losing consistency.

Logo


During interviews, stakeholders made clear that they did not want to rename the business or alter the existing bodhi leaf icon. Coined by the teacher, Shenphen Ling translated from Tibetan means, “a place of meaningful benefit to others.” The bodhi leaf icon was also drawn by the teacher and consists of a simple line drawing of a bodhi leaf with the Tibetan word Di, meaning “wisdom,” in its center.

My approach to designing the new logo was to keep it simple and versatile. I wanted to highlight the icon’s symmetry and mirror its aura of calm and trust. After experimenting with varying type sizes and positioning, we decided on a design with increased character tracking to imitate the spacing of veins on the leaf and stacked text placement to reflect the arrangement of the leaf and stem.

Color Palette


Stakeholders gave me the freedom to select colors outside of the traditional red and yellow associated with Tibetan Buddhism. To gather inspiration, I applied color psychology to our desired product reaction words, assembled a moodboard, and reviewed Shenphen Ling’s database of existing images. To avoid having our graphic elements compete with the vibrant photographs, we selected a palette of calm blues and greens with one eye-grabbing pop of bright orange as a tribute to Tibetan red and yellow. This color palette, along with our logo and typefaces, were then combined into a cohesive styleguide.

Brand Story


I crafted a short brand story as part of my presentation to stakeholders to showcase the new brand concept. Contact me to learn more about the story I wrote.

EXECUTION

I transformed barebones sketches into a clickable prototype through rounds of exploring visual design, conducting usability testing, and iterating on user feedback.

Balsamiq Sketches


To be able to share my mockups with remote stakeholders more efficiently, I used Balsamiq to sketch initial concepts. Reviewing our competitive analysis lead me to adapt a grid structure with responsive web design in mind. After a quick brainstorming session, I produced several variations for the landing page and layouts for two content pages to test the design’s versatility. Once stakeholders selected their favorite mockup, I moved into the next phase of concept development.

Low-Fidelity Wireframes


Turning to Sketch to create my wireframes, I drew inspiration from Pinterest and Amazon to use a card-based layout to take advantage of F-shaped viewing patterns. Regular check-ins with stakeholders challenged me to iterate on my design and add additional screens while being cautious of scope creep. Each feature had to be validated against core customer activity. See a breakdown of my design process (5 minute read).

I wanted to test flows related to the most common user goals (looking up a resource, contacting the center) and to the most important conversion goal for our MVP (requesting hard copies of books). I also wanted to see how users would navigate through the site’s structure for basic information. I created interactive wireframes using InVision, drafted a test script outline, then recruited original survey participants, random users on UserTesting.com, and stakeholders to perform tasks reflecting their usage patterns. Test feedback informed my top action items:

  • Minimize page scrolling by reducing image sizes through animations or adding navigational links on each screen;
  • Portray our business identity with clear images and copy to inform users who are unfamiliar with Dharma centers about Shenphen Ling’s purpose and value proposition; and
  • Use straightforward category labels so users don’t have to think.

Read my write-up about the test results (9 minute read).

High-Fidelity Prototype


To transform my wireframes into a high-fidelity prototype, I focused on building screens with visual balance, consistent navigation, and visible hierarchy. Taking adequate time for this process allowed me to uncover issues with color choices early on; launch a UsabilityHub preference test to validate font selection; run a click test to determine if changes to our library structure were on the right track; and refine elements through several design reviews. Take a closer look at how I built the prototype (5 minute read).

Photographs in prototype used for simulation and analysis only. I do not own these images.

With the clickable prototype and a revised discussion guide, I conducted a second round of user testing focused on utility and usability. I captured feedback in an affinity map to categorize observations, synthesized our insights, and identifed key changes to improve usability going forward:

  • Users needed more visual cues related to active tabs and links. Our next iteration should ensure that all navigation elements follow standard placement and filtering tools reside in consistent locations.
  • Users wanted more feedback during interactions with forms. We should clarify default donation amounts and consider options for users to keep a copy of donations.
  • Since users weren’t sure about the meaning of “Featured” and the phrasing of Service Request instructions, subsequent revisions should replace ambiguous copy with precise terms and phrases.

Read my write-up about our second round of test results (4 minute read).

KEY LEARNINGS

Users loved our fresh approach to a religious platform and were delighted by the cheerfulness and simplicity of our initial prototype. After 6 weeks of research, design, and testing, my collaboration with Shenphen Ling continues into the development stage as we work towards launching the current version of our prototype and observing Google Analytics for further improvements.

With more time, I would like to explore an alternative design to our information architecture - renaming "Learn Buddhism" and "Practice with Us" to "Our Resources" and "Our Practices" - and conduct A/B testing to gauge differences in performance.

This partnership has taught me the importance of documenting the design process in a manner that stakeholders can understand, as well as being open to new approaches for communicating with clients. I had a lot of fun running design reviews with stakeholders as usability tests, and I look forward to learning more with each design sprint.

CODING

Coming soon!