El Sistema Case Study
Responsive Website
Introduction
El Sistema is a worldwide known free classical music education program that promotes human opportunity and development for impoverished children. Originally founded in 1975 by Jose Antonio Abreu in Venezuela with a mission of bringing classical music disciplines to children in poor regions.
The first US-based program in Boston(2007) set in motion the expansion of El Sistema around the country, there are now over 100 programs listed and more popping up every month. We were lucky enough to work with a Pittsburgh chapter that needed a complete Website redesign with an administration side so classes, performances, and copy could be easily updated by the volunteers.
This project had a timetable of 2–3 weeks. Our team knew this was a tall order so we broke into teams of two. With two of us tackling the user-facing side and 2 working on the administration side of the site. I took lead on the administration side as I was the only person that had designed and developed a CMS before.
Pre-Kick Off Meeting
Our team sat down for a couple hours and came up with a game plan for the client meeting. We researched El Sistema and listed questions that we felt would be most valuable. Before we could do that we had to make a few assumptions about what the current site offered.
We knew the current site had a few obvious purposes.
- Inform people about the mission El Sistema Pittsburgh set out to accomplish.
- Seek donations in either money or tangible goods(instruments).
- Seek Volunteers to help teach classical music.
We knew it could be more.
- Calendar that displays class schedule, performances, and special events.
- A way to update the important information
- Notifications for parents and volunteers
- Videos
Our questions were based off the current site and the assumptions we made. Because Jerry threw the idea of an admin part out before the kick off we knew we had to build empathy with him as he would be the main user of those features.
Kick-Off Meeting
The meeting was scheduled with Jerry Crockett who represents the new El Sistema chapter in Pennsylvania (ESPGH) to discuss his goals and vision for the ESPGH. I spent the majority of the meeting making sure I knew exactly what the MVP in Jerry’s eyes would be.
Must Haves
- Increased website donations, registrations, and volunteers
- Increased viewers on site
- Prompting, yet subtle donation signals
- Ease of use
- Web content that is easy to update and manage
- Eye-catching design with lots of media
- Unique site design vs. existing competition
Note of importance: our client defines success by addressing each of the deliverable bullet points above.
After the meeting it was clear that Jerry Wanted a modern site unlike the local competitors. He provided some website examples that were to his liking, but in the end gave us full control on the design aspect.
Design Model
We followed GV’s design sprint model for this project. The four of us split off into two teams: The first team consisted of myself and another to design the CMS while the other team was in charge of designing the user-facing side. Because the two were the same project I jumped in with the website design early so I could find out what exactly needed to be updatable.
Building Empathy
Building empathy with a person that is extremely busy is much harder then one can imagine. Jerry only had about 30 mins every 2 weeks to talk with us. I did create a survey in the hopes jerry would pass it along to his volunteers.
I received zero responses, (I did receive a few after the project was completed) but luckily enough we had already addressed the concerns. I knew I had to take a different approach. Luckily the user side team also made a survey and had some great results that could help identify some of the content that needed to be updatable.
There was also another El Sistema Chapter here locally called the Salty Crickets. I made a quick call and asked if I could come down and talk to some of the volunteers, sit in on a class and hopefully catch some parents picking up their children at the end of the day.
I met with the director and she had many of the exact same problems as Jerry did. We talked for awhile about why these problems existed and the reason that popped out the most was their website lacked some of basic features needed to run an organization of this magnitude.
She was kind enough to sit down listen to some of the ideas I had to help solve some of her current problems. I was validating my current ideas on solving the problems at hand. We spent approximately 15 mins together and information I took away was beyond helpful.
The need for a notification system stood out above the rest. She also cheered at the idea of a permission-based admin system. I asked for a list of content she would want to make editable on her current website. The Class Scheduled was her number one priority.
It was at this very moment I realized I needed to speak with volunteers of all levels. I kindly asked If I could speak with some of the teachers or anyone that may use the admin side of the site.
Apparently, no one used the site at all. Everything was word of mouth and run through the school. It was run much like a public school. The main messaging system for the entire program was the children. As most know this can be troublesome.
“Mom we have a recital tomorrow at 10AM”
“Wait, what? Tomorrow? Are you serious? We have a trip planed tomorrow!”
Our Research Findings
Our team wanted to understand how parents kept up-to-date with their child’s after-school program. Did they visit a website, follow a newsletter, use an app, or simply ask their child directly? We interviewed parents from other after-school programs and found some interesting results:
(These bullet points are a summary of our most insightful user findings)
- Most parents keep up-to-date with after-school programs by asking their child directly.
- Receiving email newsletters and text message notifications came in second for being utilized by after school programs.
- Most survey responses (50%) thought it would be helpful if “the institution or program had a mobile app.”
- The other half (50%) said it would be excellent if the after-school program or institution hosted a text message notification service.
- Almost all survey responses indicated that they discovered their after-school programs directly from another parent, friend, co-worker, or through word of mouth.
- Almost all survey responses were unaware if their child’s after-school program accepted donations. If donations were an option, they were unaware on how to donate.
- We saw a recurring pattern that parents are busy and simply do not have time to sit at a computer to find the information they are looking for. They are busy “soccer moms” who use their phones to find announcements or upcoming events. They do this in between the small breaks they get among the chaos that everyday life brings.
This was more than enough information to create a usable and useful persona to keep us on track and never forget who we are designing for.
Persona
I had to work closely with the user-facing side team before digging into the CMS. We both knew some of the content that needed to be updatable but not all. We certainly did not yet know how notifications would work and Jerry was still on the fence about user permissions. Because I had to spend so much time working on what technically wasn’t my responsibility (and happily so) I had to adapt my process to make up for lost time. The deadline was still the deadline and there was nothing I could do to change that.
Story Mapping
Instead of making a user flow for the admin I helped build out the flow for the website and took notes on what needed to be updatable. This turned out to be perfect.
With that information and my notes on updatable content it was super easy to make a User Centric Flow.
This did evolve as time went on and expanded to a few pages
With a rough idea on where we stood on what a user would and would not be able to change within the website it was time to start designing.
Pencils before pixels
I went to work turning out as many ideas as I could. Most the work was spent on the dashboard concept. We used the 10x10 method, being able to generate multiple variations of each web page quickly without getting attached to any one of them is always the approach.
We settled on the side navigation bar with content being displayed to the right depending on the action occurring.
I put together some quick flows! I am 100% kidding when I say quick. Information architecture can be difficult, to say the least. Luckily enough planning and research were done beforehand to help ease the transitions from boxes to actual content.
More in-depth wire-framing was done
At this point we created a prototype and presented to our other team for a design review. You will notice not all of the categories are listed on the left hand side of the dashboard. We were really hurting on time and knew most the screens would share the same styling and that we could move directly from hand sketches to Hi-Fi Prototypes. Sacrifices had to be made if we wanted enough time to put together a solid working prototype.
High Fidelity Prototype
We mocked up our design with InVision for Jerry to click through. He spent most his time giving feedback to the front-end team. That is completely understandable as most people like to focus on the art side of websites.
We had a quick chat and review and he signed off on the CMS. Below is a prototype you can click through if you like.
Prototype
Hi-Fi Screens
The user-facing team did let me help on more than one occasion. I came up with this 404 page. For some reason, I always connect with a well done 404 page. It must be because I am always breaking things.
Conclusion
It was quick and little bit dirty at times, but it always is with creative projects. The idea to set out and create something with a minimal vision on how it will turn out can be overwhelming at times. The main lesson is to remember to keep working, as worrying about something will only slow you down. There will always be a point in the creative process where you are overwhelmed and not sure where to go next. The analogy that fits best is being in a valley with a mountain range in front of you. You know one of the mountains is going to be your destination, but there is no way to know for sure which one it is. Do you sit there and guess/plan to know you are only wasting time or do you start running up a mountain? Worst case you are wrong and then you run down and up a different mountain. Just keep running until you get there!
We made it.
