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.
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.
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.
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.
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:
To learn more about our potential users’ habits and behaviors, I created a user research survey using Google Forms to learn, mainly:
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:
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).
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.
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.
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:
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.
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).
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).
To wrap up my research, I used the MoSCow method to prioritize the features and content for our MVP.
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.
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.
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.
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.
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.
I transformed barebones sketches into a clickable prototype through rounds of exploring visual design, conducting usability testing, and iterating on user feedback.
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.
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:
Read my write-up about the test results (9 minute read).
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:
Read my write-up about our second round of test results (4 minute read).
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.