El Sistema Pittsburgh: CMS

El Sistema is a national non-profit organization, with chapters in various states. Each chapter manages it’s own web presence, and the Pittsburgh chapter came to us with a need for a simple content management system to be able to manage its website. Our team was assigned to create a custom content management system for the volunteer content admin at El Sistema Pittsburgh.
“Why don’t they just use WordPress?”
Well, we found out that their webmaster was separate from the content management admin, and that the custom CMS’s main purpose would be to organize and communicate articles, blog posts, and events, without any of the other web management tools you would find in a traditional CMS.
My assignment was to design the layout and interactions of the dashboard, as well as the rich content editor for writing and submitting articles and blog posts. My partner was assigned to the calendar and events scheduling.
UNDERSTANDING THE USER

User Story Map



INSPIRATION BOARD

IDEATION



WIRE FRAMES




TESTING: WHAT MAKES THE MOST SENSE?
Tools: Sketch, Marvel
Although testers liked the flow, we found that they didn’t like the big square buttons taking up so much room on the screen at all times, that the fonts were way too big, and that all the components were too big as well. From here, I tested two things:
- Smaller navigation icons in a top bar and in a side bar
- Fonts down to 14pt, 16pt, and 18pt


Information architecture
Tools: Optimal Sort, UsabilityHub
Open card sort resulted in the following categories for the home page:
- Content
- Events
- Donations
- Admin
Material Design
Material design has a very clean look, and I think lends itself well to an intuitive and easy-to-use interface. I tested colors, sizes, and layout.




Responses to my test were just what I was hoping: eyes went to the calendar and the My Posts sections, instead of straight to all the navigation options.
I also collaborated with my partner to rework the calendar to fit more with the overall design.




PROTOTYPING
Tools: Sketch, Marvel
CONCLUSIONS:

The resulting dashboard and content editor are simple enough for volunteers with no coding experience to do their jobs easily. Limits on the rich content editor keep formatting and style consistent, resulting in a website that will be more engaging by displaying new and professional-looking content more often.
With more time…
- More research and design into rich content editor interactions
- Visualize and prototype next steps after editing and clicking “Submit” or “Finish Later”
