Long Island Zoning Atlas 2.0
Long Island Zoning Atlas 2.0
Long Island Zoning Atlas 2.0
Redesign for a balance between professionalism and non-expert friendliness.
Redesign for a balance between professionalism and non-expert friendliness.
Redesign for a balance between professionalism and non-expert friendliness.
TIMELINE & CONTEXT
TIMELINE & CONTEXT
Mar - May 2024 (7 weeks)
Mar - May 2024 (7 weeks)
Client project for CUNY Mapping Service, Center for Urban Research
Client project for CUNY Mapping Service, Center for Urban Research
TEAM
TEAM
5 UX Designers:
Ivory Yicheng Zhao (Me)
Radhika Phansalkar
Manjot Kaur
Kacey Xu
Calvin Zhu
5 UX Designers:
Ivory Yicheng Zhao (Me)
Radhika Phansalkar
Manjot Kaur
Kacey Xu
Calvin Zhu
MY ROLE
MY ROLE
User Research
Desktop research
2 Rounds of moderated usability testing
UX/UI Design
User Research
Desktop research
2 Rounds of moderated usability testing
UX/UI Design
TOOLS
TOOLS
Figma
FigJam
Google Form
Figma
FigJam
Google Form
BACKGROUND
BACKGROUND
What is Long Island Zoning Atlas?
What is Long Island Zoning Atlas?
Long Island Zoning Atlas is an interactive map website that provides zoning patterns and detailed information on the legislation of residential housing options across Long Island, NY. CUNY Mapping Service has developed the map to visualize zoning data and facilitate related research projects and local business.
Long Island Zoning Atlas is an interactive map website that provides zoning patterns and detailed information on the legislation of residential housing options across Long Island, NY. CUNY Mapping Service has developed the map to visualize zoning data and facilitate related research projects and local business.
What is the client’s goal?
What is the client’s goal?
After its first launch in 2023, the CUNY Mapping Service planned to diversify the website’s core users and use cases. The goal is to improve the present of information, making it intuitive not only for audiences who actively conduct research on zoning/housing data, but also for those who are interested in learning about zoning information.
After its first launch in 2023, the CUNY Mapping Service planned to diversify the website’s core users and use cases. The goal is to improve the present of information, making it intuitive not only for audiences who actively conduct research on zoning/housing data, but also for those who are interested in learning about zoning information.
HIGHLIGHT
HIGHLIGHT
💭 Wait… How did we get here?
💭 Wait… How did we get here?
💭 Wait… How did we get here?
CURRENT DESIGN CRITIQUE
CURRENT DESIGN CRITIQUE
Unravel the pain point of current website.
Unravel the pain point of current website.
At the beginning, the whole team barely had previous experience with zoning map, neither did we know how a user could use it, and what it can be used for. Therefore, apart from reading through background document on different use cases to learn more about zoning, we did an internal evaluation of the current website to understand its scope, main features and potential core user flows.
At the beginning, the whole team barely had previous experience with zoning map, neither did we know how a user could use it, and what it can be used for. Therefore, apart from reading through background document on different use cases to learn more about zoning, we did an internal evaluation of the current website to understand its scope, main features and potential core user flows.
INITIAL FINDINGS
INITIAL FINDINGS
There are A LOT going on!
There are A LOT going on!
01
01
Too much text, too difficult to understand
Too much text, too difficult to understand
Need to rearrange and simplify the layout of pop-up windows, filters and the results.
The content is too descriptive for users to go through.
Use a lot of terminologies which needs explanation.
Need to rearrange and simplify the layout of pop-up windows, filters and the results.
The content is too descriptive for users to go through.
Use a lot of terminologies which needs explanation.
02
02
Unclear CTA
Unclear CTA
User don't know where to click and what to expect.
User don't know where to click and what to expect.
03
03
Nowhere to start searching
Nowhere to start searching
Many use cases start with the search bar, which isn’t highlighted.
Many use cases start with the search bar, which isn’t highlighted.
We also found a core user flow that summarizes how different sections of the website work together.
We also found a core user flow that summarizes how different sections of the website work together.
MODERATED USER TESTING
MODERATED USER TESTING
Are these problems just our hypothesis, or users also feel this way?
Are these problems just our hypothesis, or users also feel this way?
To understand what users actually think of the usability of Long Island Zoning Atlas, their behavior patterns and impressions of the website, we conducted a total of 15 moderated usability testings, 3 of which I led.
To understand what users actually think of the usability of Long Island Zoning Atlas, their behavior patterns and impressions of the website, we conducted a total of 15 moderated usability testings, 3 of which I led.
Define 2 types of main users.
Define 2 types of main users.
Our client’s goal are to evaluate the usability of the website of existing core users, such as researchers from the partner organizations, but also to improve the outreach of the map to attract casual users who are interested in zoning, such as housing advocates, journalists or students in related fields. Therefore, we defined two type of users in the usability testing to understand their attitudes and pain points toward the map: professional users and non-professional users.
Our client’s goal are to evaluate the usability of the website of existing core users, such as researchers from the partner organizations, but also to improve the outreach of the map to attract casual users who are interested in zoning, such as housing advocates, journalists or students in related fields. Therefore, we defined two type of users in the usability testing to understand their attitudes and pain points toward the map: professional users and non-professional users.
Usability testing participants after recruitment
Usability testing participants after recruitment
What we tested for?
What we tested for?
We had different research objectives and questions for the 2 types of users based on the client’s goal:
For professional users, we wanted to learn about their purpose of using the zoning map, and if they can effectively find the data they want.
For non-professional users, we were more curious about the overall learnability - if they can easily understand how to use the map, and if the information are useful to them.
For all of them, we asked follow-up questions to get qualitative data about their overall impression on the website.
We had different research objectives and questions for the 2 types of users based on the client’s goal:
For professional users, we wanted to learn about their purpose of using the zoning map, and if they can effectively find the data they want.
For non-professional users, we were more curious about the overall learnability - if they can easily understand how to use the map, and if the information are useful to them.
For all of them, we asked follow-up questions to get qualitative data about their overall impression on the website.
THE UNEXPECTED FINDING
THE UNEXPECTED FINDING
Professional users embrace the map, non-professionals left behind.
Professional users embrace the map, non-professionals left behind.
After usability testing, we received surprising results that the 2 types of users showed totally different attitude to the map. All professional participants held highly positive opinions, finding the information useful and easy to navigate. However, non-professionals found the map too complicated and overwhelming. They also brought up pain points towards different directions.
I worked with the team to ran an affinity map workshop. We brought all datas into categories and prioritized 3 main findings.
After usability testing, we received surprising results that the 2 types of users showed totally different attitude to the map. All professional participants held highly positive opinions, finding the information useful and easy to navigate. However, non-professionals found the map too complicated and overwhelming. They also brought up pain points towards different directions.
I worked with the team to ran an affinity map workshop. We brought all datas into categories and prioritized 3 main findings.
01
01
80% of users felt it was hard to discover the information they needed, with the majority being non-professionals.
80% of users felt it was hard to discover the information they needed, with the majority being non-professionals.
Map layers can be overwhelming, especially for non-professionals who need extra help understanding the technical terms.
Lack of visibility of applied filters.
After selecting an area, participants found it hard to read through the zoning information due to the compact layout.
Map layers can be overwhelming, especially for non-professionals who need extra help understanding the technical terms.
Lack of visibility of applied filters.
After selecting an area, participants found it hard to read through the zoning information due to the compact layout.
02
02
The lack of data credibility and the limited utilization hinders positive feedback from professional users.
The lack of data credibility and the limited utilization hinders positive feedback from professional users.
Insufficient visibility of the date and sources of the current data for trustworthiness of information.
Professional users found it difficult to locate the website's contact information, which they need to request additional content related to the data.
Professionals require the ability to download the map and data in various formats from the website or a trusted open-source platform, which is currently lacking in the design.
Insufficient visibility of the date and sources of the current data for trustworthiness of information.
Professional users found it difficult to locate the website's contact information, which they need to request additional content related to the data.
Professionals require the ability to download the map and data in various formats from the website or a trusted open-source platform, which is currently lacking in the design.
03
03
For all types of users, 92% closed the pop up immediately.
For all types of users, 92% closed the pop up immediately.
Users did not realize the pop-up guide was a part of the website and did not use it.
Users thought the contents in pop-up were text-heavy.
Without the reference of the map and its features, users found it difficult to understand the use cases on the pop-up guide.
Users did not realize the pop-up guide was a part of the website and did not use it.
Users thought the contents in pop-up were text-heavy.
Without the reference of the map and its features, users found it difficult to understand the use cases on the pop-up guide.
DESIGN OPPORTUNITY
DESIGN OPPORTUNITY
How might we balance the needs and make the map friendly to both professionals and non-professionals?
How might we balance the needs and make the map friendly to both professionals and non-professionals?
How might we balance the needs and make the map friendly to both professionals and non-professionals?
Based on the research findings, the team began to narrow down the scope of problems and created starting point of design decisions. Our North Star is to address the problems of both 2 types of targeting users, but still have specific design criteria for each type.
Based on the research findings, the team began to narrow down the scope of problems and created starting point of design decisions. Our North Star is to address the problems of both 2 types of targeting users, but still have specific design criteria for each type.
IDEATION
IDEATION
Scope down to 2 main pages.
Scope down to 2 main pages.
The team had a brainstorm session to figure out the scope of final design. Our redesign targets are the most problematic pages according to user research, which are the pop-up page and the main map page.
The team had a brainstorm session to figure out the scope of final design. Our redesign targets are the most problematic pages according to user research, which are the pop-up page and the main map page.
We decided to transfer pop-up to a brand new landing page that combines the branding of Long Island Zoning Atlas and give options for users to explore the map or view the tutorial.
We decided to transfer pop-up to a brand new landing page that combines the branding of Long Island Zoning Atlas and give options for users to explore the map or view the tutorial.
On the map page, we want to redesign the overall hierarchy to highlight the most important content for both professionals and non-professionals.
On the map page, we want to redesign the overall hierarchy to highlight the most important content for both professionals and non-professionals.
From the client meeting, we learnt that they already considered integrating AI technology into the map for better search experience. Based on this, we proposed a go-to AI chatbot that users can ask questions regarding map tutorials and explanation of terminologies. It also serves as a channel for collecting user feedback.
From the client meeting, we learnt that they already considered integrating AI technology into the map for better search experience. Based on this, we proposed a go-to AI chatbot that users can ask questions regarding map tutorials and explanation of terminologies. It also serves as a channel for collecting user feedback.
FINAL DESIGN
FINAL DESIGN
01
01
Add landing page for flexibility and credibility
Add landing page for flexibility and credibility
Provide options for users who want to explore the map directly or view instructions first with clear CTA.
Enhance data trustworthiness by highlighting collaborating organizations and testimonials.
Provide options for users who want to explore the map directly or view instructions first with clear CTA.
Enhance data trustworthiness by highlighting collaborating organizations and testimonials.
02
02
Optimize interactive map with clearly prioritized information
Optimize interactive map with clearly prioritized information
Introduce separate panels to define different purposes of the functions.
Help users capture key data using brief text prompts.
Improve learnability by aligning visual elements with user's mental model.
Introduce separate panels to define different purposes of the functions.
Help users capture key data using brief text prompts.
Improve learnability by aligning visual elements with user's mental model.
03
03
AI chatbot for efficient search and collecting feedback
AI chatbot for efficient search and collecting feedback
Handle common queries or tasks by presenting users with quick options.
Provide a channel for mutual communication between users and our client.
Handle common queries or tasks by presenting users with quick options.
Provide a channel for mutual communication between users and our client.
IMPACT
IMPACT
We received extremely positive feedback from both users and client.
We received extremely positive feedback from both users and client.
Following the redesign, we conducted a second round of usability testing with 5 previous participants to gather feedback. Fortunately, all 3 design recommendations received positive feedback, resulting in a user satisfaction rate of 4.8/5. Our findings and recommendations have received positive client responses and are currently being implemented.
Following the redesign, we conducted a second round of usability testing with 5 previous participants to gather feedback. Fortunately, all 3 design recommendations received positive feedback, resulting in a user satisfaction rate of 4.8/5. Our findings and recommendations have received positive client responses and are currently being implemented.
TAKEAWAYS
Align with the client’s goals, work beyond their expectations.
This is my first client project, and I learned the importance of maintaining alignment with the client's goals for project success. We conducted email check-ins and held in-person or online meetings with the client at each milestone, such as the research plan, research results, and design recommendations. This alignment facilitated timely feedback and ensured the relevance of our outcomes.
Additionally, it’s essential to deliver work that broadens the client's perspective. Designers should strive to exceed expectations and explore innovative ideas rather than solely meeting the client's immediate requirements.
It’s all about the scope.
As designers new to zoning maps, our team initially struggled with understanding specialized terminology and designing test plans for professional users. However, I realized that success depended on defining our scope. We didn't have to become zoning experts; instead, we focused on understanding user behavior patterns and map navigation. This insight emphasized the importance of clarifying the design scope to ensure it aligned with both the client's goals and the designers' expertise.
TAKEAWAYS
Align with the client’s goals, work beyond their expectations.
This is my first client project, and I learned the importance of maintaining alignment with the client's goals for project success. We conducted email check-ins and held in-person or online meetings with the client at each milestone, such as the research plan, research results, and design recommendations. This alignment facilitated timely feedback and ensured the relevance of our outcomes.
Additionally, it’s essential to deliver work that broadens the client's perspective. Designers should strive to exceed expectations and explore innovative ideas rather than solely meeting the client's immediate requirements.
It’s all about the scope.
As designers new to zoning maps, our team initially struggled with understanding specialized terminology and designing test plans for professional users. However, I realized that success depended on defining our scope. We didn't have to become zoning experts; instead, we focused on understanding user behavior patterns and map navigation. This insight emphasized the importance of clarifying the design scope to ensure it aligned with both the client's goals and the designers' expertise.
You may also be interested in…
You may also be interested in…
