El Sistema Pittsburgh: CMS

Preston Purnell
Jul 24, 2017 · 4 min read

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

Brainstorming features for goals and actions listed in user story map pictured previously (poor color choice, I know /: )
This feature brainstorm includes volunteer and events ideas, although those were for my partner’s portion of the project.

INSPIRATION BOARD

Other CMS programs from around the web that we planned to take inspiration from. Visually, there were a lot of things that we liked about each of these, but our dashboard needed to be a lot simpler. In the end, our ideas evolved from what had originally caught our eye.

IDEATION

Some quick sketches of potential layouts for the dashboard and the rich content editor.

WIRE FRAMES

Simple wireframes for layout and flow, created in Sketch

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:

  1. Smaller navigation icons in a top bar and in a side bar
Most common mental model: controls across top NOT along the side.

Information architecture

Tools: Optimal Sort, UsabilityHub

Open card sort resulted in the following categories for the home page:

  1. Content

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.

The blue was too bright, and the bar was still too imposing. Testing with representative users showed that too much attention was given to the actions at the top rather than the information on the dashboard. (The blank space on the left of each screen was a place holder for the Events Overview calendar).
With UsabilityHub I created a 5 Second Test and posted to UX Designers on Reddit, and found that the bright navigation buttons were still too distracting, even after decreasing their size.
Testing a version without colored circles on the top icons

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.

Original idea for rich content editor toolbar
El Sistema wanted more control over style and layout. Inspiration taken from Medium’s text editor.
Top drawer for displaying comments
Side drawer was the clear winner after testing. Inspired by Google Maps (desktop) side drawer on street view.

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…

  1. More research and design into rich content editor interactions

Preston Purnell

UX Portfolio for Preston Purnell