Satipatthana Meditation Society of Canada

Satipatthana Meditation Society of Canada (SMSC) is a non-profit organization that provides education to anyone interested in exploring Satipatthana Vipassana meditation, which is also known as Insight Through Mindfulness meditation. The Society offers classes, sitting meditation, monthly residential retreats as the various formats of communication available to interested parties.  

  • Project
  • Website

  • Role
  • UI/UX Design
  • What I did
  • User Research
  • Information Architecture
  • Branding
  • Visual Design
  • Front End Development
  • Tools
  • Balsamiq
  • Sketch
  • Photoshop & Illustrator
  • Invision

Understanding the process

The current experience

People visited the SMSC website to register meditation classes and retreats, to gain information and insights related to Buddhism and to participate in Buddhist events. However, the current website has severe usability issues that make it challenging for users to achieve their goal quickly and effortlessly. Some of the major pinpoints are

Goal for current Redesign

After interviewing the SMSC board of directors to determine the goal of the redesign, I made sure I view the problem holistically and strived to achieve three different types of goals: usability, customization, aesthetics.

Redesign Process

Understanding User Need

I created a user persona to understand requirements and motivation for using the site. This helped me to organize the contents and pages and discard the pages that don’t meet users' need and goals.

Information Architecture

A lot of pages are redundant and are not properly organized on the current website, so I simplified and reorganized the navigation structure. I constructed a clear AI by removing the extra columns on the page layout and categorized the navigation based on hierarchy in order of importance. The new AI gives users the ability to find content intuitively and effortlessly.

Product Features and User Interfaces

Optimizing the registration process

In the current website, users can't register retreats online. Instead, they have to wait for the paper form that was emailed to them, and then they have to print it out, fill it up, scan it and email it back before they receive approval from SMSC. The whole process is inconvenient and time-consuming.

The paper form is long and there are multiple form fields. So, I organized the fields into different categories, split those fields into several shorter forms with each form on a separate web page. To make the form look sleek, clean and for ease of use, I created Inline form field labels. With the online form I created, users can register both classes and retreats easily and effortlessly and it will help boost the number of conversions.

Responsive drop-down navigation menu

I removed the repetitive navigation bars which exist on both sides of each page and chose the drop-down navigation menu as the main menu for the website in order to help users narrow down their choices as to where they want to navigate. The drop-down navigation bar is also mobile responsive.

Card Design

To help organize information in an easily digestible way, I decided to use card design for SMSC website. Since I have planned to code the website using Bootstrap framework which is popular for it’s responsive, flexible and fluid 12 column grid layout, card designs are the best fit for it.

Visual Design

Using minimalism to create an elegant and modern look, yet still maintaining the vibe of the ancient tradition, is the solution for my visual design decision since my client want to target a younger audience.

In terms of color, I picked the shades of saffron: saffron red and saffron orange. Saffron color palettes are common in oriental cultures and tradition, especially in Hinduism and Buddhism. In Buddhism, saffron means “color of illumination” and it symbolizes “the highest state of perfection.” Since SMSC offers both meditation classes and teaching of Theravada Buddhism, the color reflects the organization's belief and value.

Two different type fonts are used for the website. Sans serif typefaces are often used to signify something clean, minimal, or modern. So I selected Open Sans for paragraphs which cover large areas of the website. In contrast, Serif typeface fonts are used to illustrate establishment and tradition. Thus, I used Alegreya Sans mostly in the menu, headers, titles, and quotes not only to capture the attention of the users but also to represent the two-thousand-years old ancient tradition.

Giving the clients ability to manage the content

The current website does not allow volunteers and organizers with limited technical skills to update the content. The organization has a hard time to find someone who knows how to code and help them regularly update the site. With Wordpress CMS , anyone with limited technical skills can schedule different activities, create new events, and update information.

next project