El Sistema — UX Case Study
Pittsburgh’s Musical Program Website Redesign
I had the opportunity to work with three other UX designers (and a wise project manager) to redesign a website for El Sistema Pittsburgh. We were given two weeks to research, design, prototype, and deliver a custom Web Content Management System (WCMS). Our client’s main goal was to redesign the old website while adding editing capabilities to the new one. Out team collaborated and handed this project off to El Sistema Pittsburgh, then delivered it to a web development team for production.
Sometimes the hardest part of any project is knowing where to start. I once had a smart friend say to me, “It doesn’t matter where or how you start, just begin. Put pen to paper and the rest will eventually fall into place.” Simple enough I suppose. When writing this article I decided to heed my friend’s advice. My first opening paragraph contained the letters “ergrergger.”
“Ergrergger” is not only fun to try and pronounce. These letters are a direct combination of frustration, brain activity, and random hand input. Not exactly validating, but a very human response nonetheless. Then something clicked for me. I said to myself, “I cannot fill this article with any content which isn’t real or human-centered, so don’t even try.” Let the research, events, and mistakes tell the story, and since you can’t get anymore real than being human, here is the real El Sistema UX story. Ergrergger!
Introduction to El Sistema
El Sistema Pittsburgh provides Pittsburgh’s youth with accessible and intensive classical music instruction. Utilizing music as a vehicle for positive change, ESPGH promotes the development of music, cognitive and social skills, self-esteem, and community pride in youth. (The El Sistema Pittsburgh Mission Statement)
El Sistema is an organization that seeks to elevate the less fortunate mindset, or increase opportunity, using music as a vehicle for success. They are a high intensity, after school program based around a symphony set which challenges students to learn music, to become musicians, citizens, and to be a part of something larger than themselves. El Sistema students are committed to practice 2–3 nights out of the week, 3–4 hours each night. El Sistema Students perform in front of an audience 2–3 times per month.
Meeting the Client and Defining Success
Our design team met with Jerry Crockett who represents the new El Sistema chapter in Pennsylvania (ESPGH). With Jerry’s knowledgable advice, we defined the following deliverables for ESPGH in our kick-off meeting:
- 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.
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 website while the other team was in charge of designing the administration and CMS side.
My individual responsibilities for ESPGH design sprints:
- Identifying color palette and building style guide
- Blog page design, layout, and transitions including single blog view
- Media page design, layout, and transitions — i.e., photo light-box
- About us design, layout, and transitions
- Volunteer profile layout and light-box
- Contributed to home page design including navigation bar and navigation bar animations
- Error screens and confirmation pages
- Contributed to footer by polishing design and implementing buttons
- Building InVision prototype and delivering assets / icons to development team
Phase 1: Understand
Not only did we have to understand ESPGH as our client, but as UX designers, we truly needed to understand ESPGH users. It was important for us to know who would be using the new website, how they would be using it, and what web features were most important to them. This process was a bit tricky for us because ESPGH had not officially launched, which meant there weren’t any students, parents, staff, or volunteers to interview, at least not yet. We had to quickly adapt our UX process and obtain our research using a different medium.
After a bit of digging, we discovered an established El Sistema chapter in our current stomping grounds, Salt Lake City, Utah. We were able to meet and chat with Victoria who was in charge of the after school students. The “Salty Crickets” let us sit in on their practice session.
Our research goals were to interview parents, teachers, and students, but things did not go as planned. We didn’t take into consideration how long practice sessions were, nor did we account for time. In such a busy atmosphere, we did not want to overstay our welcome. We missed our research objective and had to adjust or UX process accordingly. Nevertheless, the visit gave us great insight and was an awesome win. Thank you again El Sistema, Salt Lake City.
All Was Not Lost
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.
Boom. We have our first User Persona!
Phase 2: Define
Competitive Analysis — S.W.O.T
We asked ourselves as a team, “How can we ensure users will actually want to use the new El Sistema website?” We decided to use S.W.O.T. technique for our analysis needs. Strengths, Weaknesses, Opportunities, and Threats. This competitive analysis helped us not only identify direct competition, but also to identify value for the new website.
Pittsburgh Symphony is one of ESPGH’s main competitions. Not only are they local, but they offer the same type of musical instruction. We learned Pittsburgh Symphony does integrate children into music, but does not directly cater to students the same way ESPGH does.
User Persona
Our user persona helped us identify and relate to our key audience. More importantly, this tool helped our team to develop user empathy for ESPGH clients. There are four main personas types to consider: the administrator, the staff, the volunteer, and the student. For the sake of article length, I will touch briefly on “the parent” persona.
As we read Maria’s persona below, we can understand her expectations. She is a single mother who uses only an iPhone for browsing, wants information quickly, and doesn’t want to rely on her child as a source of information.
“Isn’t it fantastic when your child informs you the night before about a performance happening the very next day?”
We feel your pain, Maria. Or at least, we have developed empathy for you.
User Story Mapping
Our user map tells a story about a type of person performing an action, or doing something with the product.
As a <specific role>, I want to <action I want to accomplish>so that, <get value of some kind, meet a goal>.
Our Example:
As an El Sistema Supporter, I want to learn about donations, so that I can donate a violin I own but no longer use.
Our story map below is very similar to the exercise above. The difference is, instead of identifying a single person’s goals, we listed all the goals we thought El Sistema users would have. In group activity, we wrote down all user goals, features, and values we could think of. We put our ideas on to sticky notes, then placed them on the wall one by one, explaining our thought process as we went. We discovered that even our bad ideas lead us to some interesting insight. Something we wouldn’t have seen otherwise.
User Centric Flows
Another tool we used for this project is User Flow. In the format below, we wrote out what our user might see, then the action the user took based on what they saw. Then, we wrote out what our user might see next. Finally, what the user does next. Rinse and repeat. User Flows helped our team analyze the efficiency of each user task.
At first this method sounded simple and pointless, but I was mistaken. We were able to discover road blocks, identify dead ends, and missing parts of the website. We tested a goal to donate on the El Sistema website.
Pretending to be an El Sistema user:
We derailed near the end of this user flow because there was something unexpected in our user’s experience. What were we missing? It would make sense for our user to see a confirmation page at some point. We completely overlooked error and confirmation pages! I’d like to say we caught this error early on in our design sprint, but we did not. We didn’t catch it until we were already knee deep in high fidelity mock-ups.
Adding in confirmation pages turned out to be an easy fix since we identified them as high importance and categorized them as high priority.
Data Analysis
Wrapping Up Research
From our research and our defined deliverables from our client, we know the website can be defined as “an informational musical website where content can be located quickly with ease. A website which content can be easily manageable by El Sistema Management, Staff and Volunteers.”
The website should be / contain:
- Responsive
- Mobile-friendly
- Informational Website
- Easily Accessible Events
- Calendar
- Text Message Alerts
- Blog Integration (staff can blog, all others can read / share)
- Media Page with Pictures and Video
- Administration Capabilities for Admin and Volunteers (MVP)
- Donation Page
- Big Media or Frequent Media Usage
(Note: Our client was interested in implementing a mobile app or text message service in the future, but not during this design iteration.)
Phase 3: Diverge
Ideate Sketching
Wireframes, wireframes, wireframes! While there are many alternatives to sketch wireframes digitally, we prefer the old school way of putting pen to paper. Paper sketches are quick. Using the 10x10 method, we were able to generate multiple variations of each webpage without getting attached to any one of them. Plus, it looks super cool to have our work area covered with various pen sketches and post-it notes.
Phase 4: Decide
Once we all came to a conclusion on which paper wire frames to advance with, we started mocking them up in Sketch with low fidelity. We reflected back to our deliverables, research, and data analysis to aid us in our final decision and layouts.
Low Fidelity Wireframes
Phase 5: Prototype
In the final sprint we begun prototyping high fidelity mockups. Our first round of Hi-Fi designs serve three purposes:
- To hammer out fine details into a polished deliverable.
- To test our designs with users and to gain feedback.
- To have our basic ideas reviewed by the client and to gain feedback from ESPGH.
Style Guide Troubles
We ran into a minor setback when collaborating our project. Our team established a style guide, but parts of our style guide were not established, nor implemented well. After 3 days into Hi-Fi design, we found our style guide missing a standardized font typeface. Our color palette was somehow off by a few hexadecimals. Whoops. When we went to split up assignments, these small differences became wildly apparent when we merged our designs into one master copy. This set us back by a few hours, but we were back on track well before day’s end.
Color Palette
We chose our initial color palette based on our research. Inspiration was borrowed from the Venezuela and Pittsburgh flags. The shades of blue created a gentle atmosphere for students while maintaining a level of professionalism. We tried to keep yellow to a minimum, but felt the color needed to be present since Pittsburgh is often represented with yellow and black. (I’m looking at you, Penguin fans!) Last mention on colors: we chose an eggshell white (FEFEF6) for the background to resemble the color of sheet music.
High Fidelity Wireframes
Since this article has now ventured into the TL;DR zone, I will keep this section short. The screenshots below are the first rounds which we tested and presented to Jerry. We received some praise, yet also received some valuable criticism.
Usability Testing Results
We mocked up our design with InVision for Jerry to mess around with. Here is a quick summary of our findings and fixes:
- Our client wanted to remove some negative space. Our initial designs had too much.
- Our client also wanted to see more Yellows and Blacks to represent Pittsburgh.
- We replaced some blues with some blacks.
- We scrapped the idea of having an image carousel due to browsing difficulties.
- We made edits to make our designs more appealing to students and parents.
- We redesigned the front page to give users a better impression of what the website is all about.
- Improved the media and blog pages by reducing negative space.
- Brought our designs up to par with Material Design — i.e., blog search function.
The Results
Here is a screenshot of our final design for the home page. We worked directly with the development team and offered support during production. We used Zeplin to transfer assets, icons, and graphics.
InVision Prototype
Conclusion
This project was challenging yet rewarding. It was difficult to research and study a client who hadn’t quite reached the start-up phase. Without clients we had to look for similar models for our research, interviews, and data. It was also a challenge to collaborate Sketch files:
“finalMaster.sketch”
“finalFINALmaster.sketch”
“MasterFinalVersionTwo.sketch”
“ThisIsTheFinalFinalMaster-NoneShallPass.sketch”
As a team we were able to pull together as a united front. We came up with better naming conventions, laughed a little, cried a little, then high-fived one another. Our team experienced failures, triumphs, definitely some “ergrergger” moments, but in the end, we are proud of the work we accomplished.
We are grateful for the opportunity to work with Jerry, El Sistema Pittsburgh, and the awesome development team who put life into our designs.
Time for a soda.
