Redesign
Ve’ahavta

New Website Proposal with updated Information Architecture and UX Design 

ABOUT

In collaboration with Vea’havta , a Jewish humanitarian organization, this course project focuses on the Infomation Architecture and User Experience Redesign of the organization’s current website to improve the usability and to better promote its values to the public.

Collaborator: Harold Chiu, Yadi He, Sicong Liu, Yifan Wang, Yinglin Yang

My Role: Lead in visual design and prototyping, actively collaborated in usability testing, content analysis, IA schematic design, card sorting, and report drafting

Course Project – Information Architecture

Fall 2019, University of Toronto

Project Type: IA and UX Redesign

Project Duration: 10 Weeks

Tools: Figma, Adobe Photoshop, Illustrator

Skills: usability testing, content analysis, information architecture analysis and design, card sorting, wireframing, storyboarding, prototyping

CONTEXT

About Vea’havta

Ve’ahavta is a Jewish humanitarian organization located in the York region of Toronto. The organization aims to help those affected by poverty and homelessness through various programs and workshops , with the help of volunteers and donors.

PROBLEM OVERVIEW

Key Findings from Research

To understand the need of the organization and the usability of the current website, we conducted two parts of research for the context anaylsis: a series of interviews with managers of the organization and usability testing with proxy users.

Targeted Users

There are a total of four identical target user groups of the website: the clients, the volunteers, the donors, and the program purchasers, and not every user fit cleanly into one category. For instance, a donor may also volunteer during their free time. Each type of user visits the website for different reasons and their familiarity with the site is related to the frequency of their visits.

Client

Members of the community who are in need and would benefit from the services and programs that is offered

Volunteer

Individuals who wish to contribute to the organization by offering unpaid help to the organization

Donor

Individuals who wish to contribute to the organization by donating money or items to the organization 

Program Purchaser

Individuals who pay for programs for the benefit of others, e.g, companies paying on behalf of employees to enrol in Ve’ahavta programs

Goals

According to the director of communications from the organization, the website aims to serve one major goal: to increase engagement on more of Ve’ahavta’s targeted audiences. This can be further illustrated by the following two missions:

User-Oriented Navigation FlowIdeally, all contents on the website would be visible to every visitor, not in a closed audience-specific organization scheme, and organized in a user-centric way. 

Promotion of Vea’havta’s Value: The organization wishes the value and mission can be better promoted to audiences. For example, highlighted recent activities and news to broadcast the mission of the organization.

Usability Testing Findings

We recruited two proxy users to perform a series of 11 tasks, which were grouped into general tasks and user specific tasks based on our interview findings. The major findings from our test showed that information overload, redundancies, inconsistent labelling schemes and non-audience specific contents were prevalent in the website. See full usability testing report. 

Card Sorting

We redesigned the IA prior to constructing the card sorting based on our interpretations and the interview done with the organization. We added a new category for clients as “our services” and renamed several labels. 

We then recruited four participants, each from the different user group, with the help from the director of communications at Ve’ahavta. 

The card sorting test informed us about the labels that are creating confusion for the audiences.

Information Architecture Proposal

A final round of iteration was conducted on the Information Architecture schematic, based on the feedback from the card sorting test. We made the following two major changes:

Re-organize Clutters

To promote the mission of Vea’havta, we added a new tab named “Impact” to showcase all media and news related contents

h

Rename labels

Based on card sorting results, we renamed some labels to give users a clearer sense of the content 

UX Redesign

Design Updates

We then created a mid-fidelity wireframe for key webpages based on the new IA schematic we proposed. Our main goal in the UX redesign process is to create user-centric navigation experience. Therefore, we added categorical landing pages for each different user type, re-organzied the current contents and applied a simple visual language for easier browsing.

Homepage

We added the user-specific entrance for the four different type of audiences and re-organized the event bulletin into time-sensitive upcoming ones and featured ones.

Secondary Level Page – Community Events

Similar to homepage, the upcoming events are highlighted by their dates. For past events, a more unified visual language is used. A Bottom-Up IA link to other similar contents is also included for easier navigation.

Secondary Level Page – Long-term Adult Volunteer Programs

Text contents are re-organized into tabs so that users can easily scan through and get the informatino they want.

Content Page – MyToronto Contest

For content page with long text info, we added more visually expressive elements to keep user’s engaged. “Back to top” button is added for easier navigation.

Wireframe Storyboards

Based on the design rationales, we created four sets of storyboards featuring the tasks of the four identical user groups. The general flow would start from the homepage, then to the specific landing page, and finally the content page. 

Clickable Prototype in Figma

All

ConnectU

MedMo

Redesigning Vea’havta

Graphics

Wenzhao zhang, 2020