New Website Proposal with updated Information Architecture and UX Design
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
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.
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.
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.
Members of the community who are in need and would benefit from the services and programs that is offered
Individuals who wish to contribute to the organization by offering unpaid help to the organization
Individuals who wish to contribute to the organization by donating money or items to the organization
Individuals who pay for programs for the benefit of others, e.g, companies paying on behalf of employees to enrol in Ve’ahavta programs
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 Flow: Ideally, 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.
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:
To promote the mission of Vea’havta, we added a new tab named “Impact” to showcase all media and news related contents
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.
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.
Clickable Prototype in Figma
Wenzhao zhang， 2020