General Assembly Program Page

Every program page needs special attention, so I was thrilled to have been given the challenge of re-designing The Jewish Federation's (JFNA) program page. This new UX/UI design would be used for all other event and conference sites under the JFNA umbrella. 

UI/UX: Champa Lo

Creative Director: Mooki Saltzman

Program_Page_01.jpg
HR_line.png

The original design

OLD_GA_Program.jpg

Lo-fi Wireframes

Sometimes you gotta go back to the pencil + paper, even for web. I like to sketch out my ideas and cut and paste options before heading to the computer. For something as intricate as a conference program, this step could not be skipped.

Lo-fi.png
 
Hi-fi_2.png

Hi-fi Wireframes

Next step was making it digital and user testing with INVISION.

 

Post User Testing

User testing helps me make the best design decisions. Hearing what people have to say and how they interact with the design helped informed much of the design, as you'll clearly see from the first round of hi-fi wireframes. 

Post user testing.png
 
HR_line.png

The Design

We wanted to make the information as clear as possible, so we choose a simple color palette and minimal design. 

Full_program_1.gif
 
Day-Navigation.gif

Program Navigation

User can navigate the program by choosing a date or user can continue scrolling and the day will automatically change.

 

Modal

Modals were utilized to show the user more detail about each session without the user leaving the program page. 

Modal-pop-up_IMAC.gif
 

Filter

For the first time, we added a filter option and tags to help them see which topic related to them. When a filter is applied, the tag is highlighted by being filled in versus outlined and the other tags get a lowered opacity.  

REFINE-Filter.gif
 

Mobile

Breakouts-modal_Mobile_2.gif
Refine-modal_Mobile-_1.gif
 

*All these animations were sent over to the developer to avoid any mis-communication on the site animations