Transportation
Alternatives.
What are we investigating?
Transportation Alternatives (TA) is a non-profit organization based in New York City that promotes walking, biking, public transit, and street safety.
Our group helps redesign the website to increase user engagement and usability and build it on squarespace..
Team
Jiae Oh
Eva Chen
Daniel Meagher
Marc Molta
My Role
User Research
Information Architecture
Wireframe
User Testing
Project Management
Website Build
Time
Sep 2022 - Mar 2023
1. RESEARCH
We want to encourage members/volunteers and optimize donation flow and information architecture.
Client’s goals
A client meeting is facilitated to identify stakeholders’ goals and agenda.
The website analysis the client provided helps understand user behavior on a large scale.
Volunteers, members, and donators.
Target users
An ecosystem map is generated to capture critical roles influencing the user, organization, and service environment.
Instead of the primary participants, other relationships and flows include pedestrians and neighbors concerned about street safety, cyclists seeking out protected bike lanes, activists taking action for street safety, victims seeking help or confronting traffic violence, etc.
Current websites’ IA, contents, and Visual & Interaction design.
Technical analysis
We reviewed 34 top-level navigation page and their associated sub-navigational pages and created the technical analysis to get a comprehensive insight into the existing Transportation Alternatives web presence.
On the left is the example of the homepage.
Then we conducted moderated interviews and usability testing.
User research
4 participants: TA’s Members / Volunteers
2 participants: Non-members / volunteers who were bikers and or had an interest in what TA advocates for
“Joining a particular committee can be challenging and is not straightforward. ”
Participants are willing to be more involved in TA, especially for the projects in their neighborhood.
Design Direction
01
Convert TA’s impact and mission
02
Encourage users to get involved in.
02
03
As a resource platform
Streamline the donate/become a member process.
02
04
Convert TA’s impact and mission.
Recommendation 1
Engaging and eye-catching visuals
Pain Points
On the homepage, there is only one CTA, and users have to scroll down to find it out, which wastes the opportunity to engage users.
“
Take Action CTA is all the way down the homepage.
Solution
Transfer the background image to a gif that better expresses TA’s mission and engages users.
Resize the banner to indicate the users to scroll down.
Providing users with a clear understanding of TA
With clear and compelling calls to action, it helps users understand the services and resources provided by Transportation Alternatives and the website's main features.
Our Works
Our Impact
Numbers can provide a visual representation of Transportation Alternatives' achievements
Where We Work
Transportation Alternatives works across all five boroughs, users can directly go to their borough.
Engage users through storytelling
Pain points
The content is information-overload and the paragraphs contain a large number of internal links, which negatively affects the reading flow and user experience.
Transportation Alternatives has a rich history and remains a vibrant organization to this day. To highlight this sense of history and guide readers through it in an interactive way, we propose using a timeline on the "Our Story" page.
Solution
Encourage users to get involved in.
Recommendation 2
Streamline the user flow of campaigns and boroughs.
Pain Points
Our campaigns (Citywide Campaigns section)
On the landing page of the Campaign, the content of citywide campaigns are being obscured by a specific borough section that contains numerous buttons, resulting in users hardly ever scrolling down.
Our campaigns (Specific Borough Campaigns section)
> Specific Committee
When clicking on " Manhattan (campaign)" the user is redirected to the "Manhattan Committee" page where they need to scroll down to see the content of the campaigns. This causes confusion and inconvenience for users.
Committees > Specific committee
The "Specific Committee" page only contains an introduction to the campaigns, and users need to scroll down a lot to find related committee content such as leadership and history.
Solution
Our campaigns (Citywide Campaigns Section)
> Citywide Campaigns page
Following standard logic, we prioritize the "Citywide campaigns" by showcasing the "Featured campaigns" on the landing page. Users can also view all citywide campaigns by clicking on a "View all" button that takes them to a separate page. .
Our campaigns (Specific Borough Campaigns section)
> Specific Campaign page
Users can view a featured campaign from each borough on the landing page and have the option to click through to a separate page for each borough’s campaigns.
Committees / Homepage / Navigation > Specific committee
The "Specific Committee" page only contains an introduction to the campaigns, and users need to scroll down a lot to find related committee content such as leadership and history.
Redesign the landing page of campaigns and specific borough’s page.
Our Campaigns
The new webpage strikes a balance between conveying information and a clean design, allowing users to browse through the content effortlessly or navigate to pages that are of particular interest to them.
Local Committee
We emphasized the concept of community through group photos, introductions of its events, activities, and requirement for new members (No experience needed!) .
We also reorganized our social media links , and made the monthly meetings more prominent.
As a resource hub.
Recommendation 3
Resource Hub
TTransportation Alternatives offers a variety of resources including reports, press releases, and biking resources, but many users were not aware of their existence. To address this, we created a resource hub that includes quick links to these resources, allowing users to access them directly from the homepage.
Streamline the donate
/become a member process
Recommendation 4
Donate
For the donation process, we have improved the differentiation between one-time and monthly donations and have increased users' willingness to donate by adding information about donation usage, past achievements, success stories, and user quotes. Additionally, we have provided more ways to give.
Membership
For the membership process, we have improved the differentiation between monthly and annual memberships and have added visual cues to guide users on how to upgrade from one plan to another. By emphasizing the benefits of membership, we have increased users' willingness to become members.
Website Build
Team
Eva Chen
Daniel Meagher
My Role
Design Lead
Project Management
Design System
key pages created
40
blog pages migrated
32
300+
hours per designer
Design System
We first created a design file in Figma, and when using it in Squarespace, the basic settings such as formatting, fonts, and colors can be easily transferred.
Final deliverable
To make it easier for users to regularly update content and follow our design rules, we provided 15 pages of guidelines and reusable sections in addition to the website itself.
Squarespace Website
(Desktop + mobile)
Design Guidelines
Components Archive
Next Step
Communicating with stakeholders to understand any challenges that staff may face in regularly maintaining the website is an important step in ensuring the website's ongoing success. By observing their daily operations, we can identify any issues that may arise and develop strategies to address them.
Conduct user testing and gather feedback to identify areas for improvement and ensure that the website is meeting the needs of its users.