Beth Sholom Mobile

THE DESIGNING OF: BETH SHOLOM CONGREGATION WEBSITE

Beth Sholom approached me asking for help re-designing and modernizing their congregation’s website in order to attract a younger membership base.

BEFORE THE RE-DESIGN

They had a few different problems that needed to be solved:

1) They weren’t able to update the site themselves and updating was very painful due to the outdated platform.

2) Over the years they added more and more content and the site became bloated, making navigation difficult to understand.

3) The design is very out dated with too much text, and too few images.

Beth Sholom Website - Before Re-design

 

GOALS

  • Create a wordpress website that is easy to update by an admin at Beth Sholom
  • Modernize the look and feel to appeal to a millenial audience
  • Clearly organize the information and provide an easy way to navigate
  • Inject visuals to help tell the story

 

SITE AUDIT

Beth Sholom had over 70 pages in their site map, many of which were out dated, un-necessary, or hard to reach. I printed out every page and made notes and cut broken or out dated pages. My next step was to use sticky notes to organize the content I saw into similar areas.

Bethsholom Site audit

 

 

SITE MAP 

Site map

 

COMPETITIVE ANALYSIS

I put together a deck of screenshots showing what other spiritual and religious websites were doing. I called out trends on visual styles, components, and organization of the site.

 

screen-shot-2016-10-31-at-6-47-11-pm

screen-shot-2016-10-31-at-6-46-59-pm screen-shot-2016-10-31-at-6-46-52-pm

 

WIREFRAMES

Beth SHolom low fidelity wires

 

My first pass was very low fidelity. I just wanted to make sure I thought about the type of content that would be on all the pages. I needed to give the developer a sense of how many different templates we had. I then took the low fidelity wires and fleshed them out so that the client could see with more detail what content was really going on each page.
Beth Sholom wires - medium fidelity

MOOD BOARD

Mood board - duotone dreams

 

 

 

 

DESIGN

design phase

 

 

 

 

ICONOGRAPHY

beth sholom icons

 

DESIGN COMPONENTS

bethsholom_styleguide1 bethsholom_styleguide2 bethsholom_styleguide3

 

After I created the style sheet and specs for the developer, my part was done. I helped test the site for bugs and gave feedback on edits. The site launched and they had another agency work with them on a brand re-design. It was a long process to get this whole site done, but I feel proud of what we accomplished.

No Comments

Post a Comment