UX | Concerto CMS


Project Brief

Concerto is content management system (CMS) for NBCUniversal Entertainment brand developed on Drupal 7. With the new solution, Concerto will meet the user needs of producer and editor to create and manage contents much more efficiently and organized. As UX Designer, my objective is to lead the full UX process, which including discovery, user/competitor research, experience mapping, ideation, sitemaping, information architecture, wireframing, prototyping and quality management.


Objectives: User Research. User Experience Design. Interface Design. Quality Management.
Team: Amiel Zwier, Sergey Chistyakov, Yulia Lee, Karen Wang.
Date: March 2017 - May 2017

To Know the User

It is important to understand each user’s needs. For Concerto, as an internal tool for editors and producers, we want to understand the needs of each user as well as their process, through the interview and observation discover (section recording) process.

Once we gathered all our data we were able to create a digestible interactive website which would indicate the steps that each user took, they’re empathy level, and their pain points with possible opportunities for improvement.



Once we have gathered all our data the next task was to ideate and find solutions to meet the client's needs. Each ideation section will last 2 hours, including problem presentation, ideation, iteration, feedback and discussion with all stakeholder from project manager to engineer leads. 


Initial Wireframe

After synthesizing our solutions from the ideation session, we moved onto creating wireframes. The wireframes would be presented internally to the engineering team and project manager first to ensure we are meeting the client’s needs and that what we have designed was feasible from a engineering stand point. Finally we would then present the wireframes along with a full style guide to the client.



After discussion focused on previous feedbacks, we created annotations alongside the wireframe, which matches the final solution and clarify the desired workflow.

The feature of schedule, preview and version list will apply to all content types, which are series, season, episode, event, gallery, dynamic promo, any collection and collection group.



Next, after getting approval from all parties involved in the project we began prototyping each component of a project. These prototypes were very detailed which not only set and expectation on the client’s end, but also provided a thorough example of both design and code for the engineers once it goes moves to production. Throughout building the prototype we met with the clients constantly to ensure they are pleased with the design and functionality.


User Testing 

After the client and engineering gave their stamp of approval on the prototype, we moved right into user testing. During these sessions the users are given a script and asked to run through each step. While they are making their way through the script, myself and the rest of the team take notes on how the test is progressing and if the user is having trouble. We also make sure to record the users screen, voice, and facial expressions so that after the test we can revisit the videos and record any additional data. Once the test is completed we proceed to ask the users follow up questions and then synthesize all of our data.



Finally, after making refinements based off of the user testing results, we document the requirements for engineering. After the documentation is completed the next step is to hand off the project to the engineering team. From this point on I always made sure to be involved in the project to ensure that the product is built to specification.