League of Amazing Programmers

Website Redesign

For 10 weeks, I worked in a team of 5 at
Design For America to redesign the League’s website such that it would help grow a diverse student body of programmers and bring new opportunities to those who might not have access to higher-end resources.

Timeline : Jan 2021- March 2021
Role: UX Designer
Scope : UX Research, UX Design, Visual & UI Design

View the full prototype here

Skip to results here

Overview

The League of Amazing Programmers is a k-12 nonprofit coding school that aims to provide quality coding education for students. Their mission is to help under-deserved youth gain access to coding education.

Problem statement

“How might we design an engaging web experience that inspires people to contribute to LAP’s mission of empowering diverse youth?”

Our higher level goals were to:
- Boost overall recruitment.
- Create an engaging online onboarding experience for users.
- Put more emphasis on inclusivity and accessibility.
‍

My Role

My role bounced between UX Researcher and UX designer as we rapidly ran user interviews and tests, all while designing prototypes for usability testing. As a collaborative team, I was involved with every step from wireframing, user flow, low to high fidelity mockups, and information architecture.

Taking a Deeper Look...

The Process

Research

For our secondary research, we utilized competitive analysis and analysis to understand the League’s competition.

Based on the competitive analysis conducted on coding academies such as Codeacademy, Khan Academy, Leet Code and Code.Org, we took notice of the difference in visual elements, website structures, mission statements, and overall navigation experience.
‍
The competitive analysis allowed us to understand the weaknesses from the current website, which includes the difficulty of navigating to other pages, understanding the curriculums and exploring the available programs.

We also conducted a website audit and analysis of current website to narrow our scope on the project given that the League offered us creative freedom to determine what we wish to redesign.

Upon analysis, we noted that the website did not convey the mission, the programs were very difficult to locate from the homepage, the curriculum was extremely wordy and hard to digest, and there was a lack of cohesiveness throughout.

User Interviews

We then conducted a 8 total user interviews with 5 students, 2 parents and 1 League teacher to get a better understanding of what these user groups look for when searching for classes.

What We Found

5 out of 8

users stated that they would like to see the curriculum in a more accessible manner + more visible way.

4 out of 8

users found that the Java curriculum was unreadable, too long and technical.

7 out of 8

users said that they would not sign up for LAP, after the first impression of the website.

User Needs

Parents and Students needed to easily view curriculum for Java and Python.
Parents needed to view faculty instructors’ information to help decide whether to sign their child up for LAP.
Low income parents needed a menu entry for financial aid to easily access information about scholarships.
Parents needed to view testimonials on landing page to understand the level of expertise LAP offers.
Parents needed a clearer flow when navigating the site.

Overview of Usability Errors

Our Design Goals

Rebrand the League visually such that League appears more reputable, fun, and diverse.
Improve presentation of curriculum and financial aid information.
Simplify user flow and navigation.

Ideate and Prototype

Site Architecture

The team came together to narrow down our scope of focus to design the home page, about page, program pages, and additionally incorporate a new financial aid page. We reorganized the information hierarchy and site architecture, and replaced hamburger navigation to achieve a smoother and more intuitive user navigation.
In addition, we added several entry points for financial aid information as indicated below such that financial aid information can be accessed easily.
‍

Brainstorming and Rapid Prototyping

As a team, we engaged in activities like rapid sketching to come up with home page designs. The shared design session was beneficial to create the vision needed for later stages of designing.

From Lo-fi to Mid-fi to Hi-fi

While I was a part of decision making at each stage of design for each pages, I primarily designed the Java curriculum page, Python curriculum page, and Financial aid page.
For every stages of designs, several iterations were made through shared decision making amongst designers, and I took part in iterations of visual design, information hierarchy, and copy writing.

Usability testing

Upon developing our high-fidelity design, we conducted a round of usability testing to validate our design decisions and identify possible need for alteration.
Our research questions:
- Could users identify the League’s mission?
- Could users navigate the website to the financial page with ease?
- Could users understand League’s curriculum and programs?

The Results

6 out of 6

Users preferred the redesigned website.

The usability testing showed the need to adjust font and image sizes, as well as improvment for copy writing. However, in terms of flow and visuals, users was content with the Hi-Fi designs.

Outcome

Our final deliverables received high praise and approval from the Director of the League of Amazing Programmers. Our stakeholders were incredibly excited about their improved website! The website is now fully implemented!

View the website here!

Reflection

My prior experience in user experience was mainly research based, and this project taught me a lot about the design process. Though the learning curve was nonetheless very challenging, it was a rewarding experience. In the short amount of time that we had, we were able to create high quality deliverables that satisfied user needs. If I could do things differently, I would spend more time designing and iterating such that we can focus on usability testing in order to fine-tune our designs and validate our decisions better. Overall, I am thankful for this opportunity.

Blendees website design >