Connie Xu


USC Annenberg Media
🗞

January 2022 - May 2022 | UX Research, Website Redesign & Build |

Project Manager


USC Annenberg Media is a forward-thinking, professional media outlet housed in USC. Annenberg Media came to us with concerns about their website: our goal was to improve the UI/UX of the website within the constraints of Arc Publishing, their content management system.

Our priorities included increasing website traffic, streamlining the publishing process, and maintaining consistent and professional brand identity across the entire site. However, it was also important to allow for layout customization so that editors could express creativity and ownership over the content they publish.

As the Project Manager, it was my priority to create the project plan, allocate assignments, track progress & challenges, and report updates to our client. I worked closely with the research, design, and software engineer teams.


annenberg-media-scope

Client Brief

In the first couple of meetings with representatives from Annenberg Media, my goal was to understand the scope of the project.

Our client drew inspiration from established news networks such as The New York Times, 19th News, and The New Yorker. We also took a look at The Washington Post as a product of Arc Publishing to identify feasibility in design implementation.

Beyond the design inspiration, our client came to us noting that a key challenge they have been facing is creating an equitable and intuitive layout of the website sections.

I created a project workflow in our team's Notion hub -- the same hub was used to track progress and challenges at each internal meeting and milestone. Efficiently iterating through designs would be essential in creating a timely product that both our client and our team would be proud of. So, I held the role of the Scrum Master in our Agile Scrum sprints throughout the project.

I lead client meetings after every key milestone.

annenberg-media-client-brief

annenberg-media-moodboard

Mood Board

I allocated assignments to our team of 5. Starting with the mood board, I decided it would be best to have an all-hands approach and have every team member pitch in with inspiration for the website redesign, color palettes, and fonts.

I knew that it would be important to save more time for the website design drafts, so I suggested we finish the mood boarding process in 1 week.

We curated a mood board consisting of ideas for navigation menus and home page layouts. At this point, we started to identify design elements that could be relevant to the content that Annenberg Media produces.


annenberg-media-ux-research

UX Research

Recognizing the fact that getting stakeholders to meet with us would take time, I proposed that we start stakeholder interviews as soon as our team was on the same page about the scope and direction of the project.

Our team conducted interviews with internal stakeholders: primarily undergraduate editors and supervising faculty. We ideated solutions for the navigation hindrances and unintuitive user flows in our site map.


annenberg-media-usc-flow

UX Flow

After developing User Personas and discussing the important needs of each user, our team developed a UX Flow.

Conversations with our contact within Annenberg Media revealed that there have been internal conflicts regarding the visibility of certain news desks within the news publication as well.

This complicated our plan to remove the dynamic “Trending” bar that exists on their website currently as it served as a compromise to mediate those conflicts.


annenberg-media-ux-research-findings

UX Research Findings

We sent out a survey to Annenberg Media to gauge opinions on the user experience and visual preferences from editors.

We received less feedback from Annenberg Media than anticipated, likely because we broadcast it over Slack, where people post a lot. As a result, we were unable to account for our survey responses in our design. However, we are leaving the survey open and handing off edit access to our client for them to track editor reactions to the current and future site.


Low Fidelity Mockup

Our team designed three layouts: the home page, section page, and article page.

Our low fidelity drafts focused on margin sizing and image placement. There was an emphasis on designing for usability and eliminating redundancy.

We were also mindful of our UX interview findings as we consolidated the news desks into our menu bar items and made them static.

annenberg-media-lo-fi

Middle Fidelity Mockup

To utilize our efforts more effectively as a team, I suggested that each team member should continue the redesign of one page of the website instead of having everyone work on all the pages at the same time. We were able to speed up the process of design output while maintaining quality designs.

After meeting with our client to discuss the low fidelity drafts, we began to make edits to account for their feedback.

We edited the footer to better accommodate the client’s needs and social media contacts, for example. We also substituted real content for the filler assets to identify and resolve potential publishing issues.

One challenge we came across was citing many authors within the same article on the home and section pages without sacrificing finesse in the visual design.

annenberg-media-mid-fi

High Fidelity Mockup & Final Deliverable

For our high fidelity iterations, we edited for consistency in our design system across all the templates, settling on our fonts, and incorporating the official Annenberg Media logo.

We handed off the design files and the UX research findings to our clients.

View the full website with this link: uscannenbergmedia.com






annenberg-media-hi-fi

Thanks for scrolling!