Shaare Tefila


Summary

I redesigned and developed a new website with a team for a nonprofit organization with a focus on user experience and ease of maintenance.

My Role

UX Designer
Website Researcher
UI Developer

Client

Shaare Tefila Congregation

Visit Website
multidevcice mockup of Shaare Tefila Website

Defining the Problem

Shaare Tefila is an egalitarian congregation affiliated with the Jewish Federation of Greater Washington. The current director of Education and Programming for Shaare Tefila inherited the site from the previous site manager and was having difficulty using WordPress to edit and update the site as needed.

Project Goals

Process

Research Methods

  • Stakeholder Meetings
  • Content Analysis
  • Card Sorting
  • Usability Testing
  • Information Architecture

First Steps

To get started on the redesign, we met with The Director of Programming to talk about the direction she wanted to take the website in. My team and I discussed questions that focused on the primary goals of the site, as well as the feel of the site. Through the project, the team leader kept in contact with the Director to inform her of changes and updates as they were happening.

Creating the Content Audit


Following the stakeholder meetings, my team conducted a content audit to understand what current issues the site has in regards to usability, findability, and accessibility.

The audit helped us determine where the main issues were focused and helped us create our redesign plan. We also communicated with the Director on updates that we found.

My team's content audit of Shaare Tefila's website
| Figure 1: My team's content audit of Shaare Tefila's website

From here, we completed a card sort using their current links to narrow down related content. The card sort took a look at the 44 different links that the site had before. By completing the card sort, it helped us categorize similar content to put on a page. It also allowed us to implement user focused design practices to increase ease of use.


The card sort informed us of important information structure changes to make. Our reworked information architecture restructured the initial wireframes to included relevant and related content on the same page, instead of having multiple pages for all of the content.

Iterative Development

Once we communicated with the Director on the new discoveries and understood the primary purpose of the website, we got to work creating low-fidelity wireframes that would show our idea without having to use up too many resources making the pages. The wireframes focused on creating an inviting page layout using the non profits primary colors for the color palette and using minimalist design to enhance the important pieces of the website.

Low-Fidelity wireframe of the membership page
| Figure 2: Low-Fidelity wireframe of the home page
Low-Fidelity wireframe of the membership page
| Figure 3: Low-Fidelity wireframe of the membership page

Final Design

Once we completed the wireframes, we held a meeting with the stakeholder to go over our progress. The Director and Shaare Tefila put a strong emphasis on having links near the top of the page that allows the user to quickly use links like Chaverweb Login and Streaming services. Our designs went through one iterations of development before we created the final design.

final design of Shaare Tefila's homepage
| Figure 7: final design of Shaare Tefila's homepage

Learnings

  1. Set Realistic Goals: This project was put on a strict deadline of around 3 months. My team and I had created a long list of objectives that was not feasible for the time frame allowed. This project has taught me about setting attainable goals that will help the users of the website.

  2. Diverge and Converge: During this project, my team had a very diverse set of skills. Throughout the process, we would split up tasks and complete the work, then come back together to discuss as a group. This project was very helpful for learning how to split the workload and also how to put the best member for the job on each task.

Next Project

Long's Propane Gas

Top