My final project I worked on at GBH, a data visualization of the CMS's building blocks.

Overview
GBH is an American public broadcasting group who serves as the primary PBS member television station licensed to Boston, Massachusetts. Nationally, GBH broadcasts numerous iconic PBS programs, including American Experience, Arthur, Frontline, Masterpiece, and NOVA. It also is a member station of National Public Radio and has a major digital news presence, making it one of the most influential public broadcasting services in the U.S.
Having watched GBH shows as a kid, I was ecstatic to work at a company that shaped my childhood and help influence the future of GBH's digital services as a Digital Design/Product Intern. My responsibilities included redesigning features of the main GBH website, conducting user research to inform site redesign and UX survey decisions, and creating information visualizations to clarify internal design and product challenges. 
Mentors: Gene Yoon (Senior Director, Digital Design); Heather MacDonald (Senior Director, Digital Product); Li Wei (Senior Manager, User Experience); Amelia Leason (Senior Digital Designer)
Duration: 7 months (early June to mid December 2021)
Role: UX Research, Web Design, UX Prototyping, Data Visualization
Tools: Adobe XD, SurveyMonkey, Miro, Brightspot CMS
Responsibilities 
I helped GBH formalize fundamental design practices in three key areas:
Wireframing
As a design intern, I worked extensively with Amelia to redesign navigation and persistent player wireframes for the GBH main website. In addition, I led a team design sprint to examine the efficacy of UX wireframing methods from low to high fidelity to best meet the needs of stakeholders, designers, & developers.​​​​​​​
Surveying
While working with Li and Gene, I used surveying as an emerging methodology to uncover user insights at scale in the evaluation of preliminary prototypes. I also honed my UX writing techniques in creating and auditing questions for a UX survey we sent out to GBH users to gauge their feedback on our redesigned website prototypes.
Product Planning
Towards the end of my internship, with the help of Li, Gene, Heather, Tim Kinnel, and other members of the Engineering/Product teams, I created a visual information system as an aid in the comprehension of data structure, content configuration, and product signifiers as a prerequisite to productive product planning discussions. This project is shown below.
CMS Data Visualization
While most of my site redesign work is under NDA, I am able to share the final project I worked on at GBH, which was a data visualization of the basic building blocks of the main website's back-end content management system. This project was a crucial first step in helping GBH's Design & Product teams engage in more efficient future product development practices during the ongoing DotOrg main site redesign and shift in backend CMS software.
Above is one of our first attempts at trying to visualize basic aspects of the CMS with digital sticky notes. While the beginnings of some visual/data hierarchy were being formed, we ran into issues with being able to clearly differentiate between technical CS terminology and specific examples of said terminology. 
We also tried using simple wireframing techniques to visualize the nesting of data objects within one another, as shown above with this sample breakdown of a home page. This was a step forward in using more obvious visual hierarchy to categorize information, but we soon realized that the result looked too similar to a low-fidelity prototype of a web page and could thus confuse lay audiences as to which data objects were literally displayed on the front-end.
It was important that designers, journalists, and other stakeholders with little-to-no computer science background could clearly understand the basic concepts behind how individual data objects related to the content they saw on the front-end of the GBH website. Consequently, a primary concern of this design challenge became accurately visualizing in 1 diagram what was a subcategory (i.e. multiple promos comprise a list) versus a specific example (i.e. two-ups are an example of a list) of a data object.
Thus, we created a model where the left half of the visualization showcases how back-end data objects are conceptually categorized in relation to each other in the example of a Home or Article page. The right half then connects these concepts to their respective front-end visualizations on the actual GBH website. 
Reflection

"[Ray's] projects provided an important basis for the design team and Digital Department at large to improve our operations, establish new best practices, and optimize product development. I hope he can take his experience at GBH and build upon it as he embarks on what will no doubt be a storied career, no matter what path he chooses." 
- Gene Yoon, Senior Director of Digital Design

GBH was my first ever product design internship, and it gave me a robust foundation in understanding the role and scope of UX and product practices within a large digital media company. I'm infinitely grateful to the welcoming community of designers, product managers, and engineers at GBH who gave me their undivided attention as the sole design/product intern for the summer and fall terms. In particular, it was a joy collaborating with Li and Gene during design brainstorming sessions or chatting with them about our other creative hobbies and interests.
Being able to receive mentorship from people who truly believe in the value of UX and work tirelessly to convince company stakeholders of the growing value of their discipline was truly empowering, and I'm excited to continue exploring the field of product design given my experience interning at GBH.
Back to Top