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.
In this freelance role I served as UX/UI designer & web developer. Responsibilities included competitor research, information architecture, visual design, and building the website.
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
DESIGN PROCESS
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:
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.
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:
What didn’t go well:
What can be improved:
MOCKUPS