ROLE
UX/UI Designer
TIMELINE
Jul - Sep 2024
SKILLS
Information Architecture
Interaction Design
Wireframing/Prototyping
Design Systems
TOOLS
Figma
THE GOALS
The League needed a website redesign that would not only make navigation more intuitive but also create a unified experience that blended their main site with external platforms like Pike.13 and MeetUp, used for payments and registrations.
Our high-level goals included:
1. Streamline user flows
2. Elevate the brand identity
4. Reflect instructor care
THE BACKGROUND
The League of Amazing Programmers is a nonprofit organization dedicated to teaching kids professional-level programming in a fun and engaging environment. Their website, however, struggled to represent their mission effectively. While their programming curriculum is robust and tailored to prepare kids for the future, the site’s user experience fell short in conveying this core value proposition.
The target audience for the redesign was primarily parents, specifically "sophisticated career moms" who value professionalism but also want an approachable, human touch when selecting educational opportunities for their children. The challenge was to create a seamless, visually consistent, and emotionally engaging experience that would help parents discover the right classes, understand the organization’s care for its students, and complete sign-ups with ease.
THE DISCOVERY
To better understand the pain points expressed by our stakeholder, I collaborated closely another UX/UI Designer and the UX researcher to conduct the usability testing with four participants—parents from Southern California in their 30s to 50s with varying levels of tech expertise. These moderated sessions, conducted via Zoom, asked users to complete tasks such as enrolling in a class, finding tuition details, and navigating key pages like the donation and volunteer sections. We identified three overarching issues that hindered the website’s effectiveness:
1. Confusing User Flows
2. Overwhelming Information Architecture
3. Inconsistent Visual Design
STRATEGIC
DIRECTION
Following the competitive analysis, our stakeholder emphasized the importance of translating the insights into actionable improvements. Inspired by the user flow of competitors like Coding with Kids, he challenged us to simplify the website into a one to two page format, significantly reducing the number of pages while maintaining clarity and functionality.
COMPETITIVE
ANALYSIS
To refine our design direction, we conducted a competitive audit of five prominent coding education platforms: Coding with Kids, CoderDojo, Code for Fun, Girls Who Code, and Code.org. Each platform offers unique solutions for delivering coding education, and the audit focused on identifying strengths, weaknesses, and opportunities to inform our redesign strategy.
Our stakeholder highlighted Coding with Kids as the gold standard for user flow. The platform ensures that by the time users reach the bottom of the homepage, all questions are answered, creating a frictionless and intuitive experience. This prioritization guided our efforts to structure information clearly and build confidence in prospective users through transparency and flow.
INFORMATION
ARCHITECTURE
Through our site map, we uncovered redundant navigation paths, vague labels, and excessive steps for key tasks like enrollment. By refining the information architecture, we aimed to reduce friction and clarify pathways which set a foundation to inform our low-fidelity prototype.
We developed and tested two distinct low-fidelity prototypes:
Version 1: Single Page Approach
This version consolidated most of the website’s information onto the homepage, emphasizing a streamlined flow with minimal navigation.
Version 2: Multi-Page Approach
This iteration retained a structure similar to the original site but addressed previous navigation inefficiencies by improving pathways and organizing information into concise sections.
ITERATIVE
REFINEMENT
After presenting both prototypes, the stakeholder expressed that the single-page format lacked the depth and narrative required to effectively highlight the program's mission and value. They emphasized the importance of integrating storytelling into the landing page to establish credibility, showcase the organization’s identity, and build trust with prospective users.
In response, we consulted with our mentor, Sarah Park, to refine the site's organizational strategy. Together, we established a narrative framework prioritizing credibility by first introducing the organization, leading into the programs offered, and culminating with student success stories. This approach informed the next phase of design, ensuring the structure aligned with both user needs and the stakeholder's vision.
FINAL
PROTOTYPE
After implementing the refined organizational strategy and visual design updates, we presented the final high-fidelity prototype to the stakeholder. During this phase, the mid-fidelity and high-fidelity prototypes remained largely consistent, with adjustments focused on fine-tuning design choices and enhancing the site’s organizational clarity. Minor updates included optimizing the layout for improved readability, refining call-to-action buttons to enhance visibility, and integrating feedback from the stakeholder to ensure alignment with their vision.
POST-DESIGN
TESTING
Our user researcher conducted a final usability test on the redesign to obtain the quantified impact and showcased an improvement across four key categories: Trust/Credibility, Information Architecture, Style/Aesthetic, and User Flow. The data was gathered using a "Scale of 1 to 10" questionnaire, with mean scores plotted for each category. The data was collected during both the pre-test (on the original site) and the post-test (on the redesigned site), allowing us to compare the effectiveness of our changes.
Our findings demonstrated a 41% improvement across all categories. Trust and Credibility saw the most significant gains, reflecting user confidence in the redesigned site’s clearer information and enhanced visual presentation. Information Architecture, which was our primary focus, received the highest overall score, indicating that the streamlined navigation and content reorganization resonated with users.
While Style/Aesthetic was already a strong aspect of the original site, it also saw notable improvements, further elevating the user experience. The redesign effectively addressed the core pain points, leading to an overall increase in user satisfaction and usability.
We were also given feedback on key elements of the redesign:
Course Calendar: Users appreciated the improved course calendar, finding it informative and easy to use.
Concise Content: The website's content was well-received for its clarity and lack of unnecessary information.
Visual Enhancements: Interactive elements like animations and drop-down boxes were praised for improving engagement and usability.
Clearer Navigation: The reorganized site structure and improved navigation made it easier for users to find the information they needed.
Overall, the redesign was a success, resulting in a more user-friendly and engaging website that better meets the needs of the target audience.
VISUAL DESIGN
We collaborated with the visual designer of our team to refine the design system, ensuring a cohesive and polished aesthetic across the site. Drawing inspiration from comic book styles, we incorporated superhero imagery and bold, vibrant colors to align with the organization’s branding and establish trust with users. By standardizing typography, color palettes, and visual elements, we enhanced consistency throughout the site. The refined design system not only strengthened the current prototype but also provided a robust foundation for future iterations.
KEY
TAKEAWAYS
This project emphasized the importance of effective communication when collaborating with a cross-disciplinary team, including stakeholders with varying levels of familiarity with design concepts. I learned how to articulate design decisions clearly and tie them to both user needs and business goals, ensuring alignment across all team members.
Additionally, I gained a deeper appreciation for how critical information architecture is to the overall narrative of a website. Many of the original site’s challenges were rooted in structural issues rather than purely visual ones, highlighting the need for a thoughtful approach to organization and usability.
Working within a cross-disciplinary environment reinforced that successful design requires balancing diverse perspectives—from business objectives to technical constraints—while maintaining a user-centered focus.
