Torah that takes you home.

As part of a rebrand led by HiPitched, I redesigned the Habayta website to improve site navigation, UX/UI patterns, and styling to align with the newly established strategy, values, and branding.

Context & Role

In this freelance role I served as UX/UI designer & web developer. Responsibilities included competitor research, information architecture, visual design, and building the website.

Design Problem

Redesign 350-page website with a clean, simplified design to improve navigation, UX/UI, and presentation of embedded media libraries (music, lectures, etc.). Ensure new website aligns with the newly established strategy, values, and branding.

Duration

4 months

Tools

  • Whimsical
  • Figma
  • Webflow

DESIGN PROCESS

Understand

  • Define Objective & Scope
  • Research

Ideate

  • Exploratory Sketching
  • Information Architecture

Design

  • Low, mid, and high-fidelity wireframes
  • Style Guide

Execute

  • Build in Webflow

UNDERSTAND

Define Objective & Scope

Habayta is a unique organization in the non-profit space providing music, lectures, experiences and more. The website needed to clearly organize each of their services and encourage donations.

Research

I researched websites with similar content and goals to understand their information architectures to ensure I organized the Habayta site in a familiar way for their users.

I also did research to understand the technical constraints I would run into during the development phase, such as:

  • Soundcloud embed options
  • Donation tool options

IDEATE

Initial Concepts

It was clear from the initial branding concepts provided to me that there would be a lot of shapes and colors as part of the brand elements. During the initial sketches, I wanted to make sure that these elements would shine through.


I started with Habayta’s most important pages. I worked closely with the client to ensure I was going to right direction during these early stages. It was decided that the homepage would feature an interesting animation incorporating the different parts of the logo.

Information Architecture

Based on my research and the requirements provided to me from the client, I created an information architecture outlining the major pages and their content to ensure the site met Habayta's goals and provided an excellent user experience.

DESIGN

Wireframes - Increasing Fidelity

I knew I would build the site in Webflow, which is desktop-first. So as both designer and developer, I chose to complete the UX/UI design of this project in desktop size.

  • Home Page
  • Music Page
  • About Page
Home Page
Music Page
About Page

Style Guide

I was provided a robust brand book which helped the design process to run smoothly. I translated the visual language into a website style guide to provide a consistent and intuitive user experience. I applied the style guide, content, and imagery to transition the mid fidelity designs to high-fidelity.

High-Fidelity Wireframes

Once the high-fidelity designs were finalized, I created tablet and mobile versions.

EXECUTE

When the high-fidelity designs were finalized, I began building the site in Webflow. During this stage there were some final tweaks in the design. I made sure that there were consistent micro interactions and movement throughout the site.


While building the site instead of taking a page by page approach I began with creating a style guide page and Webflow symbols of each repeating UI pattern. Then I built each page using the style guide pieces and symbols. This significantly sped up the creation of the website and allowed for changes later on to be very quick to implement.

Retrospective

What went well:

  • Finding inspiration and collaborating with the client to identify the website design direction
  • Translating the brand book into a style guide
  • Using Figma components and Webflow symbols to simplify the iteration process when changes were made to the design


What didn’t go well:

  • Preferably usability & A/B testing would have been executed, but they were removed from the scope due to budget constraints
  • Ideally image selections would be finalized during the design process so that preparing assets for development is as streamlined as possible


What can be improved:

  • Load times on some pages can be improved by taking a more curated approach to the large amount of embedded Youtube and Soundcloud content

MOCKUPS

0:00
0:00