Rescuing and protecting at-risk animals in San Diego
.png)
UX Designer
8 Weeks
1 Project Manager
3 Designers
1 Web Builder
Visual Design
Interaction Design
User Research
Figma
Figjam
Canva
Google Forms
​
During the Spring Quarter of 2024, I had the opportunity to work with Project Art of Learning through Design for America (DFA), a student organization that teaches human-centered design skills to tackle social challenges. My team collaborated with the nonprofit to redesign their website, applying a user-centric approach to better meet the needs of their tutors, students, and supporters.
01
Understanding Our Audience
Our website aims to support tutors and students but currently struggles with navigation and clarity. Users have trouble distinguishing roles and finding services. How can we redesign the site to improve usability, including optimizing existing pages and adding features like an interactive map and curriculum page?
USER RESEARCH
-
The current website has a lot of white space, making it appear text-heavy and lacking in visual appeal.
-
The navigation bar is not intuitive, making it difficult for users to find the information they need.
I created a user persona to represent a typical student seeking tutoring services. With keeping this persona in mind throughout the redesign process, we can create a user-centered website that meets the needs of students seeking academic support.
​
-
Student Persona: A student who is looking for a tutoring platform that clearly displays the subjects they offer and the types of tutors they have, as well as a clear and easy way of scheduling tutoring sessions.
We conducted user interviews to understand how people interacted with the existing Project Art of Learning website. These insights helped us create an affinity map, organizing user feedback into categories. This process revealed our main areas of concern, guiding our redesign efforts to address key user needs and pain points.
BEFORE
The website’s structure and layout was not intuitive to use as many of the pages were not found under the tab it was expected to be under. This led to a cluttered and disorganized website structure, making it difficult to navigate and find information in a timely manner.
AFTER
We condensed and renamed the different pages of the website and recategorized the information contained on each of these pages based on what was most intuitive to the user.
02
Piecing it Together
HOW WE STARTED...
Testing was also conducted remotely with tutors over Zoom. I was able to observe participants’ interactions and had them “think aloud” as they navigated through a screen/prototype.
BEFORE
AFTER
BEFORE
AFTER
We rearranged the placement of the text, images, and buttons and reduced the amount of text in order to create a less cluttered home page that is more appealing/attractive to the eye.
We added a become a student/tutor page because the existing website did not have one, making it harder for prospective tutors and tutees to understand what it means to be a tutor/tutee and also made it less motivating for people to apply to these roles.
After each round of user testing, I analyzed the feedback to identify recurring patterns and critical issues. This iterative process allowed me to make targeted design improvements that directly addressed user pain points and enhanced overall usability.
​
Some Key Insights:
-
Some users found it difficult to locate general information about the organization.
-
Some users suggested that the Puerto Rican Branch and Ukraine Support sections could be better positioned.
-
Some users expected to see features like booking a tutor, FAQ section, or information about tutoring hours/locations.
03
Final Product!
​​​
I integrated an interactive map feature that enhances user experience by displaying the branch name and contact information whenever a pin is clicked.
_gif.gif)
I implemented a carousel feature allowing users to slide through subjects, with condensed text and images
We introduced a new FAQ page to address common questions about tutors and students, featuring a dropdown section that reveals answers when clicked.
Discovering New Skillls!
This project introduced me to wireframing and prototyping, where I gained hands-on experience. I not only learned new techniques but also expanded my creative toolkit with skills that will be invaluable in future endeavors.
The Value of Communication
I learned the importance of consistent communication, especially during times of inactivity and uneven task distribution. Keeping everyone aligned went beyond just sharing updates; it involved clarifying the vision and ensuring understanding.
Thank you!
Made it to the end? Dive into my next project to see more!
