ROLE // Case Study
YEAR // 2018
Little Kid's Rock is a non-profit organization that provides music education to a multitude of schools across the United States. Founded in 2002, they've served over 400 school districts and aim to improving the lives of kids in K-12 grades. Throughout an immersive course at the Univeristy of California, Irvine, a team of us researched and addressed areas of opportunity that would improve the overall user interface experience, elevate the playful brand messaging and simplify the application process to bring Modern Band programs to desired schools.
We were given two weeks to run the study and immediately dove in to research. Initial challenges we encountered consisted of their complex navigation, tedious application process and overall outdated branding and web design. With a strong presence and important impact in communities all over the country, we felt this was an organization that had an empowering and insightful mission that could use a bit of a face-lift, if you will. Below is an in-depth anaylsis of the process, methods and end result.
* There is no affiliation with the Little Kid's Rock organization.
Current State: The exisitng website has an extensive navigation with numerous secondary pages. Content is heavy and paired with an outdated design. The application process consists of tedious and repetitive questions that leave the user anaware of where they are at in the application process. When completed, there is no confirmation of delivery and thus, believed to have entered the black hole of the internet.
In regards to preformance, Little Kid's Rock website takes over 9 seconds to load while top-preforming websites often times load in under 4. A few fixes to the website could reduce page load time by a few seconds. After runing a diagnostics test with Think With Google, it is clear that it does not pass usability guidelines for mobile due to lack of legible font-size and non-responsive layout.
The User: A target user was created in preparation for the interviews; someone who would be browsing the website and filling out an application to bring the program to their designated school. Through interviews and pinpointing the consistently mentioned issues, it was decided to use one of the interviewees, Flip, as the user persona on which to base our solutions around.
Problem Statement: After research and interviews, we observed that the website isn't engaging new teachers enough to help them learn about the services and complete the process for workshop applications. This is causing confusion to the end user and lowering the impact of the organization. How might we improve the Little Kid's Rock website based on increased teacher application completions and increased Modern Band music classes in public schools across the United States.
User Journey: We mapped out a user journey that takes you through the emotions and stages that parallel what a visitor to the website experiences while navigating the website. Our overarching insight into the user was that a motivated music teacher needs a more simple way to find resources and cirriculum so he can communicate with school boards and keep music programs alive in local schools and communities.
Understanding the Organization: Little Kid's Rock has a playful brand message and is geared towards appealing to young kids in grades K-12. With such a huge impact and presence in schools across the country, we wanted to stay close to their roots and see how we could still utilize their existing color palette while trying to modernize the website itself and simplify the application process.
The User: After previously mentioned interviews and insights, we found that our main points of focus were elevating the brand and simplyfing the application process. Our key takeaways that remained at the forefront of our mind when embarking on this next phase was:
1. PEOPLE LIKE PROOF – When submitting any type of form or information, users like to fill out as little information as possible and need to know that whatever they filled out went to wherever it was supposed to go.
2. MODERN TIMES CALL FOR MODERN DESIGNS – May we always look back on the early 2000's and the design patterns that emerged from it. However, clean and simple design builds trust and resonates with users.
3. KNOW YOUR AUDIENCE – It's important to know who is interacting with the website and who you are connecting with. While the organization itself is geared towards kids, the online presence should connect with adults that are visiting the website and looking to join.
The Gameplan: Through defining areas to focus upon, our game plan was to modernize and simplify the homepage layout to increase conversion, simplify the application process to ensure completion and elevate the overall brand while staying true to their original, playful color palette.
Initial Wireframes: After gaining insight into the needs of our user and pinpointing our design goals, we began developing initial wireframes. The wireframes focused on the homepage, the application process and the confirmation page. Other pages for consideration included About Us and Learn More.
Logo Concepts: Through modernizing the brand and flushing out a minimal look, we took a few logo concepts to the users. We found that one logo stuck out to most and when paired with playful colors, attracted users more.
High Fidelity: After testing our low-fidelity prototypes in InVision and through google surveys, we iterated our solutions and carried those through to our high-fidelity mocks. Our final designs focused on minimizing the navigation, implementing Google's Material Design guidelines, and simplifying the complex application process.
Future Iterations: Although this was preformed as a brief case study addressing high level issues on the website, future considerations are in mind such as increasing responsiveness, content clean up, consistency in design, and further A/B testing.