Kellie Huang
The League of Amazing Programmers is a non-profit organization located in San Diego, California that teaches coding to kids and teens in 5th-12th grade. Their mission is to help children acquire the skills and education needed to be leaders in the digital age and contribute to the workforce of the 21st century. Our team designed a more user-friendly and visually unified website that will increase user’s trust to apply for their program.
My Role:
UX/UI Designer
Year:
2023
Tools:
Figma
Service Provided:
Product Design, Web UX/UI Design
Initial Findings: User Problems
🔍 There are many available coding programs for K-12 students. Thus, what makes the League of Amazing Programmers stand out from the others? The organization’s original website did not answer this question well as it lacked a clear structure throughout the website, including vague labels and the excessive use of buttons that led to the same page. This causes confusion and users becoming overwhelmed by the redundant information. The excessive steps to enroll into the program and their lack of visual identity led to users perceiving the website as a scam.
🔍 To gain deeper insights beyond our team's perspective, we aimed for accuracy and thoroughness when gathering user data. We opted for usability testing instead of surveys, as it allowed us to observe participants' continuous, engaged interaction with the website in real time. This method provided more detailed feedback on user behavior and navigation challenges. We conducted the tests with 4 participants (1 male, 3 female) aged 30 to 50, with varying levels of technological expertise. The testing, conducted via Zoom, revealed four key pain points in the website’s design and usability.
Therefore, How Might We Address Customer Trust Issues At The League Of Amazing Programmers By Reorganizing Website Information And Establishing A Consistent Visual Identity For An Improved Customer Experience?
We created a style guide that matched the stakeholder’s request of keeping their core brand color, orange, and implementing more “Pop hero” effects. We created a set of graphic elements, fonts, buttons, and color palette to improve the uniformity of the current website.
I worked on improving the overall user flow of the website. This included creating a new navigation system that is more simplified from the previous information architecture. With clear hierarchy and labelling, the website will be more organized and less confusing. Along with the content strategist, we worked on the wording of each page to ensure that all information were easier to understand.
After establishing our design system and updated information architecture, we began building lo-fi, mid-fi, and hi-fi prototypes. We made sure that our designs focused on three main points: ✅ Establishing Credibility: The Home Page of the website will be focused on building trust in the program through highlighting the organization’s awards. ✅ Creating a Connection: The website will include more real-life images that were taken from their classes instead of their previous vector illustrations to show that they are a reputable program. Student testimonials will also be more visually emphasized to prove the success stories from their program. ✅ Offering the Product: The programs will be divided into their own sub-pages so that users can more easily navigate through each program information. The current website has all the programs condensed into one, single page.
A Look Into Our Workspace, From Lo-fis, Components, and Site Maps!
Positive Feedback!
After finalizing the new designs and prototypes, we conducted a second round of user testing with the same participants from earlier in the design process. Our UX Researcher found that users reported a significant increase in their trust toward The League and expressed a greater likelihood of donating, volunteering, or enrolling in a course. As anticipated, the inclusion of testimonials, authentic images, and a dedicated news section effectively enhanced users' confidence in The League's mission and impact.
Cross-Functional Collaboration
Working in a cross-functional team enabled me to actively contribute to various aspects of the project, including web development and content strategy. For example, I learned how to effectively communicate my design intentions to the web developer by providing clear comments on the specific changes I wanted to implement. Collaborating with the content strategist emphasized the importance of precise wording, ensuring users can quickly grasp the purpose of each page. Additionally, working closely with the Visual Designer taught me the significance of maintaining consistency in text hierarchy, section spacing, and the balance of graphic elements from textual information. Overall, this project was one of the most rewarding experiences I had this summer!
