Design for America x Project Art of Learning
Design For America is a national organization that provides students with the resources, framework and experience to innovate meaningful solutions to the social challenges that affect students and their communities.
Project Art of Learning (PAOL) is a student-run 501(c)(3) nonprofit organization that provides free one-on-one online tutoring for students in grades K through 12. They strive to help students in need of continued education and tutoring and partner with organizations that reach out to low-income, immigrant, and refugee students.
Team
Riya Rao, Kiko Pan, Tracy Vu, Swati Menon, Ariana Talai
Role
User Researcher & UX Designer
Timeline
Jan 2024 - June 2024
Tools
Figma & Notion
Skills
User Research, User Experience Design
Role
As a User Researcher and UX Designer I worked with my team to understand the pain points of the original design and figure out what could be improved/changed in our prototypes through the user of research methods such as user interviews, surveys, affinity mapping, website auditing, and user journey maps. After completing our research, I aided my team by utilizing the data to inform the lo-fidelity, mid-fidelity, and finally hi-fidelity prototypes for our redesign. I mainly worked on the redesign for the Meet the Team and Student/Tutor Application pages and served as the lead researcher.
The Problem
Streamlining the Learning Hub: Improving Navigation and Design for Tutors and Students
How can we redesign a website that facilitates seamless navigation for both potential tutors and students, while addressing frustrations stemming from unclear navigation and design?
Objectives
💡 1
Redesign all pre-existing pages to optimize the user interface and overall experience
💡 2
Design and implement new website features (includes interactive map and curriculum page)
The Goal
Designing an Intuitive and Trustworthy Learning Platform
To create a website that seamlessly guides tutors and students through all features and opportunities, providing them with clear, concise information and an intuitive, visually appealing experience that builds trust and showcases the platform's value.
01
Research
☝️ Conducted a website audit, competitive analysis, and created user personas
✌️ Gathered insights from user interviews to inform the rest of our initial research
Website Audit
As a team we conducted a website audit on the preexisting PAOL website to identify the usability issues and to pinpoint places for improvement.
Key Takeaways
lots of white space
chunky text
unintuitive
lack of relevant information
bad navigation bar
Competitive Analysis
We looked into other tutoring non-profit organizations’ websites to gain insights on different aspects such as design elements, user experience, and content presentation. By assessing their strengths and weaknesses, we identified ways we could improve Project Art of Learning’s website.
Strengths
✅ tutor profiles
✅ testimonials
Weaknesses
❌ redundancy
❌ overall UX (unintuitive)
User Surveys & Interviews
To gather information about users’ overall experiences using the PAOL website and identify users’ pain points, we sent out a survey and collected 16 responses. The survey included questions about users’ experience with finding the applications, the team page, the mission, and the navigation bar. It also contained questions to rate various aspects of the website.
Results
SWOT Analysis - We used the data collected from the survey to further analyze the strengths and weaknesses
User Personas and Journey Maps
Tutor
Student
Takeaways
Users could easily find the different subjects being taught
There was a lack of information about how and why students should apply to become a tutor or get tutored
Affinity Mapping
Pain Points
The website lacks visual appeal and consistent performance across mobile devices
Users were frustrated with the lack of clear navigation options to find important information
Users were overwhelmed with excessive information that wasn’t relevant
Information Architecture
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. This resulted in a more organized and easier to navigate website for the user.
02
Lo-Fidelity Prototyping
Home Page
Curriculum Page
Become A Student/Tutor
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. With these two new pages containing information on the expectations and benefits of applying as well as embedding the application on these pages, this allows users to have a much better understanding of the opportunities the nonprofit offers and provides users an easier way of accessing and filling out the application.
Lofi User Testing
1️⃣ Our lo-fi prototype scored an average of 1.8 for ease of navigability, with 1 being easy and 5 being difficult
2️⃣ Users had an average of 4.2 level of satisfaction with the website’s navigation, with 1 being not satisfied and 5 being satisfied
03
Mid-Fidelity Prototyping
Home Page
Curriculum Page
Student Page
Midfi User Testing
1️⃣ Users evaluated their experience performing the tasks on a scale of 1-5 with 1 being very easy and 5 being very hard.
2️⃣ Some suggestions included: adding an application button into the navigation bar, FAQ and Contact Us as pages on the nav bar, and the PAOL logo leading back to the home page.
04
Style Guide
We developed a comprehensive style guide to apply to our final screens. We made sure that the colors and font choices stayed true to the organizations previously established branding.
05
Final Screens
Home Page
Major Changes
Navigation bar
Logo Placement
Instead of having the logo take up the entire landing page of the home screen, we condensed it to a smaller text and added it onto the navigation bar.
To add more visuals we included a photo from their in-person tutoring session
On the home page, we also feature the organization’s about us and mission.
The original design incorporated text-heavy content, so we condensed the information while keeping the key points.
The white text on a purple background was hard to read so we got rid of the purple boxes and had the text on the white background.
We used more numbers to showcase the impact they have on communities rather than long texts.
We also incorporated an interactive map. When clicking on a pin, it will show you the branch name and the contact information for the corresponding branch.
Tutor and Student Applications
Major Changes
There was no previous student or tutor page.
Applications before were linked to an external Google form.
Added information about what it means to be a student or tutor.
Embedded a form onto the page itself.
Meet the Team Page
Major Changes
Condensed text
On hover, the card will flip and show a brief description of the team members.
Incorporated all team members including tutors and alumni all on one page.
More visually appealing
FAQ Page
Major Changes
There was no previous FAQ page.
We added a FAQ page to answer popular questions regarding tutors and students.
On click, the section will drop down with the answer below.
Curriculum Page
Major Changes
Carousel feature where users can slide through the subjects.
Condensed text for each subject; more visually appealing.
Added images to each subject to enhance visual appeal
Puerto Rican Branch Page
Major Changes
Reduced the colors on the page.
Created a carousel for the images.
Made the call to action clearer.
Partners and Sponsors Page
Major Changes
Replaced the descriptions accompanying each partner with a “Learn More” button
Removed the scrolling element from the page by condensing all the partners to be visible at the same time
Testimonials Page
Major Changes
Created a more visually appealing page
Incorporated more of the nonprofit’s visual brand image to bring about a more cohesive identity to the nonprofit
Contact Page
Major Changes
Cleaner user interface
Added an image to enhance the visual appeal of the page
Added links to social media
06
Wrapping it Up
Key Takeaways
👉 We learned wireframing and prototyping as a new skill set through hands-on experience during the project.
👉 Constant communication is crucial for aligning the team and ensuring that everyone remains on the same page throughout the project.
👉 Not all requests can be fulfilled, but through transparent communication, the team explored viable alternatives within our capabilities to still provide value to the project.
Reflection
Overall, I had an amazing experience redesigning the student/tutor, the team page, and assisting my team with the rest of the pages. I was also able to fully comprehend the research process that goes behind user centered design. I will be applying the skills I’ve learned to future projects. While I learned lessons in the process of creating valuable solutions to user-related problems, I also honed my time management and communication skills learning to talk to the team, our client, and our mentor to receive feedback and ensure I was taking necessary steps each week to complete deliverables.
Thank you to:
UCSD Design for America TBD Coordinators for giving me to the opportunity to work with fellow creatives at UCSD and expand my design knowledge beyond the classroom.