C S E M E D I A
CSE MEDIA
Common Sense Entertainment (CSE) Media is an online platform for people to learn more about CSE Media and consume their content.
My Role
Visual Design Lead
Brief
CSE Media needs a website and branding to house their work, speak to their mission, and build their presence.
Tools Used
Figma, Optimal Workshop, Miro
Scope
2 weeks
What I Did
User Research, Information Architecture, Usability Study, Prototyping, Developer Handoff
The Problem:
How might we help people learn about CSE Media?
The Background
Common Sense Entertainment (CSE) Media is a digital production company producing content and programming to highlight Black and brown voices and represent local community culture in the DC Metro Area.
Their mission is to produce memorable collective experiences through compelling and original visual storytelling. They aim to inform, inspire, and entertain audiences around the world.
While they currently have several programs running and in production, they lack a digital presence.
I was contacted by CSE Media asking for a website design.
The Brief
CSE Media needs a digital platform for young professionals to learn about CSE, consume their content, join their team, and stay informed about the DC community.
In addition to these requirements, Raheem Dawodu, Chief Marketing Officer of CSE Media and our point of contact through this sprint, described their visual preferences as "empowering," and "bold."
What's out there:
Denman Digital, LAI Video, Nonagon Productions, Ivan Anhe Productions
I started by conducting a competitive analysis of existing websites for video production companies.
I examined at Denman Digital, LAI Video, Nonagon Productions, and Ivan Anhe Productions with a focus on UX analysis: to evaluate their navigation, layout, and general usability.
This helped me understand what CSE Media needs to provide to stand out from the competition:
• A way to sort through content in their works page; (lacking in Denman Digital, Nonagon Productions, and Ivan Anhe Productions)
• A "Careers" section with clear, intuitive navigation; (lacking in Nonagon Productions and Ivan Anhe Productions)
• A footer with navigation and quick social links; (lacking in Denman Digital, Nonagon Productions, and Ivan Anhe Productions)
Additionally, due to the variety of programs, CSE Media should have a way to search for specific content on their works page (a negative on all sites).
User Research:
Do you often see yourself represented in the media that you consume?
Next, it was time to assess what our target audience (young professionals between the ages of 18-35) was concerned with while navigating this sphere of media.
I conducted 14 user interviews with people in this age range. 100% of the participants were minorities and 93% of them resided on the East Coast of the United States.
My research goals were:
• To discover habits surrounding the consumption of media
• To recognize any trends or preferences with technology
• To understand how personal values influence the type of media consumed
"You don't want to pinhole yourself into one mindset and then not even try to hear a different one."
"I feel like it's kind of hard to think of like, a solid example of someone that I really relate to or identify with... I can't really find that perfect example. It's kind of scattered, mixed."
"I'm watching more Black and Latina creators. Black women that have really curly hair like me, there are Afro-Latinas that have the same moral values or experiences with mental health. That's nice because you feel like you're not alone."
"If I saw more black women doing things in media, that would make me feel great. Like our stories are worth telling."
Research Analysis:
Moving Forward
Following the research phase, I re-evaluated my assumptions based on the insights gained from my user interviews. From this, a few things became clear:
• Millennials were far more inclined to seek out representation in the media that they consume
• Among both Gen Z and Millennial viewers, YouTube was the most used platform
• Millennials proved to be more aware of the long-term effects of a lack of media representation from childhood to adulthood
Revising the Problem Statement
Using these findings, I revised my initial problem statement to better align with the users' needs and goals.
From:
Users need a way to learn more about CSE Media, their content, careers, and the DC community.
To:
CSE Media's target audience of young professionals needs a way to learn about CSE, consume their content, join their team, and stay informed about the DC community.
Empathizing with Our Viewers
Talking to potential viewers gave me a better understanding of their needs & goals, as well as their pain points & frustrations surrounding the problem space.
Using this information, I began to narrow the scope of the project by creating 2 distinct user personas.
User Flows:
How would our users find it?
Keeping these personas in mind, I set out to map their user flows.
This helped me keep the design human-centered. It made me conceptualize what pages or screens of the website will be needed from the perspective of my users.
Structuring the Content:
Initial Sitemap
Before jumping into the sketches for the individual web pages, I began to visualize the information architecture of the website into a sitemap, based on the information gathered from user research.
Evaluating the Structure:
Open Card-Sort
My initial ideas for the layout of the global navigation of the site were then tested by 6 participants with an open card-sort performed through OptimalWorkshop.
This card-sort garnered the following insights:
Confirming the Results:
Tree Test
After receiving the results of my open card-sort, I tested the initial sitemap layout once more through a tree test.
The most crucial insights gained through this test are represented below:
Restructuring the Content:
Sitemap Iteration
Using the data collected, the initial sitemap was iterated on to incorporate the results of both the open card-sort and tree test results.
Some useful insights from how participants grouped the content together led me to important adjustments of the sitemap:
• The consensus over the two tests was that "Careers" is most closely associated with the "Contact Us" section of the global navigation. Although this was not where it was originally placed, the sitemap was modified to reflect the common choice of a majority of users.
• Upon further research and contact with our client, the "Behind the Scenes" section was removed due to insufficient content.
Wireframing:
Sketches to Clickable Prototype
The process of developing CSE Media's website began with sketching, then continued to wireframing, before the first iteration of the clickable prototype was created.
Usability Testing:
Problems & Solutions
Using the global navigation as a starting point, I designed a high-fidelity clickable prototype in Figma incorporating all of the pages a user could potentially visit on CSE Media's website.
A usability test was then performed remotely with 3 participants. The resulting issues discovered through the test were then recorded and prioritized by severity, to be addressed in the final iteration.
These major problems were:
• One of the most glaring issues of the prototype was the broken drop-down menus at the home page. As the main point of navigation, it was the biggest failure and prevented all of our users from easily completing the tasks.
• Users missed the local navigation headers on the "Our Work" and "About Us" pages. As the color palette and typography was identical to that of the global navigation, users commented on "not even noticing" the additional links per page.
• 2 out of 3 users attempted to navigate to "Careers" in the footer. At the time, this was not implemented.
Usability Test: Broken Drop-Down (Clip)
Problem
Lack of visibility with the local navigation
Solution
Changed the color of the local
navigation to stand out more
Problem
Users searched for "Careers" quick link in footer; which was not present
Solution
Final iteration split the "Contact Us" quick
link into "Careers" and "Inquiries"
Presenting the Final Design:
"I'm absolutely blown away"
After addressing the usability issues with the first iteration of the design, I met with my client and presented the findings from the usability test as well as the decisions that followed in the latest iteration of the design.
They were very pleased with the design and impressed at my ability to incorporate my users' feedback into a final, coherent design that best suits their needs.
Developer Hand-Off & Next Steps
Though I have not been in direct contact with the team of developers my client is working with, I have gone through the process of organizing a documentation packet detailing the design process and laying out all of the deliverables.
In future iterations, I would like to tackle:
• More usability testing with the second iteration of the prototype
• Adaptive design to suit the needs of users who prefer mobile devices
• Standardizing the new changes to CSE Media's branding across their existing digital platforms
What I've learned from this project
& working on a team
One of the biggest challenges in this project was the limited time frame. The final iteration of my prototype was slated to be shown to our client along with a full design presentation within 2 weeks of receiving the brief. Thus, figuring out what methodologies would be most effective to prioritize over the course of the sprint was more difficult than expected.
Beyond this, another challenge was finding a balance between the needs and requirement of the stakeholders and those of the users. The CSE Media team we were in contact with consisted of 3 executive members who were eager to revamp CSE’s brand through this platform.
As this was beyond the scope of me and my team of designers, it was our responsibility to make sure our clients were aware that it was not something we would be able to complete within the given time frame.
I communicated this with our clients, and they were very receptive of the decision, understanding that the time frame provided would be more focused on the development of the hi-fidelity prototype.
