What is the Daily Californian?
The Daily Californian is an independent, student-run newspaper that covers the UC Berkeley campus as well as the city of Berkeley. Established in 1871, it is one of the oldest newspapers on the West Coast and one of the oldest college newspapers in the country. The Daily Californian covers topics ranging from sports recaps and entertainment reviews to staff blogs and multimedia content.
The Problem
In order to make DC more accessible to all, the tech team began working on an official mobile app in 2019, and released a beta version via TestFlight in 2021. Before an official launch, however, the team wanted to implement some new features and designs to improve overall usability and branding, but were unsure of how to approach these goals.
My Role
I first joined The Daily Californian as a product designer, where I worked with the product marketing team to conduct usability testing and with the tech team to design interface updates. After a few months, I became the Digital Design Lead. Due to internal constraints, DC could not hire new designers until the next school semester, so I spent this time working directly with the Tech Manager to design a full updated high-fidelity prototype for the app, to be used for later iterations by our future design team.
HMW
DC’s overarching goal of creating an effective go-to news app for UC Berkeley students led us to ask:
Preliminary Research
Preliminary Usability Testing
To collect feedback on the beta app, I worked with the product marketing team to develop usability surveys. Sent out to over 1,200 DC staff members, it targeted preliminary features and asked for feedback regarding the usability of the entire application. Users were asked to reflect on their experience with flows such as searching for an article and navigating the explore page, as well as thoughts on how well it reflected the Daily Californian’s content.
So, what did we find?
After reading through all our survey responses, we created an affinity map to organize our findings and to note down various quotes from our interviewees. Through this, we found 4 key pain points (keep scrolling!).
Synthesis
Pain Points & Possibilities
From our survey, we discovered 4 key pain points (and possible solutions) within the beta app:
Pain Point 1
The home feed’s categories and ordering system is unintuitive and hard to follow.
Possibility 1
The home feed could be chronological or have the option to filter for articles.
Pain Point 2
The For You page is the same for all users, defeating the purpose of the name “For You”
Goal
The FYP could have recommendations, user-saved content, and pinned staffers.
Pain Point 3
The search feature is very limited and only allows users to search for articles.
Goal
Users could search and follow the content of authors & photographers.
Pain Point 4
The flow of the explore page and the purpose of its various buttons are confusing.
Goal
The explore page could directly offer popular articles from various departments.
Ideation & Prototyping
Course of Action
After reviewing the pain points from beta testing, I began my first iteration of the mobile app, focusing on reworking the home feed, for you page, and creating new customization features while incorporating DC branding.
Home Feed
Original
Mid-Fidelity Iteration
Replaced today’s date with the DC header to create a streamlined experience across mobile and web.
Users can tailor their feed by filtering for articles of a specific department.
Content across all topics are shown with text previews, exposing users to diverse content and digest-able information.
For You Page
Original
Mid-Fidelity Iteration
Users receive tailored recommendations based on their browsing history instead of the same articles given to all users.
Users can now save and follow their favorite topics and authors.
Saved articles are now easily accessible, rather than being hidden within the app’s settings page.
Customization Features
Author Search
Users can now access all content written by a specific author through both the search bar and from the article tag — this allows users to have more control over their app use.
Menu Screen
Users can further customize their mobile app by adjusting their notifications, display options, and text size — these ensure the app is tailored and accessible for all users.
The Challenge
After the above idea of adding a filter bar to the home page, the Tech Manager posed a new question: if users can purposefully explore new topics through the home page, then what is the role of the explore page? The purpose of the original explore page was to categorize articles into each department for easy access, but the new filter bar provides that function.
Rather than remove the explore page completely, we wanted to find a way to differentiate the home page from the explore page. We decided that the home page should just be a simple feed with no filters in order to streamline the mobile experience with the existing website. So... where does this leave the explore page?
Exploring Some Explore Pages
Original
First Iteration
Second Iteration
Third Iteration
Original
“Requires excessive scrolling to explore departments, and putting topics in “My Topics” has no impact on the app.”
First Iteration
"This has a more intuitive layout and better brand recognition, but is too bold for cohesion and doesn’t solve our dilemma."
Second Iteration
“This user flow gives the explore page clarity and purpose, but we don’t have the bandwidth to incorporate multimedia right now.”
Third Iteration
“Intuitive flow, subtle branding, and good amount of exposure to new headlines. Let’s continue with this one!”
Usability Testing
Well-Recieved
Needs Improvement
Final Touches
After gathering feedback on both the high-fidelity and mid-fidelity mockups, I went back to Figma to address the pain points listed in the “Needs Improvement” section. This time, I primarily focused on reworking the layout of the home page, streamlining design choices across pages, and experimenting with various filter bar locations and designs.
Intuitive sections, readable previews, and streamlined branding to demonstrate organization and reliability, with sharing features and accessible author pages for social connection.
Allows users to stay up-to-date on a variety of topics by showcasing articles from all departments. Individual department pages have unique and intuitive filter bars to encourage discoverability.
Addition of personalization features through a tailored For You page, consolidation of saved content, ability to favorite authors & topics, and customizable notification preferences.
Final Thoughts
I absolutely loved the process of getting to redesign this app with such amazing teammates on both the tech team and the product marketing team. I gained so much insight on interface layouts and saw how even the smallest design decisions should be justified. As design lead, I am so grateful to have had the opportunity to practice thinking more critically about functionality & flow in addition to visuals. Finally, conducting beta testing taught me the importance of getting feedback from the content creators themselves (authors, photographers, etc.). Their perspectives on the values & strengths of the Daily Californian helped us design pages that showcased department representation, creator recognition, update reliability, and more.
On a more personal note, this was my first full design project after deciding to pursue product design, and I cannot thank my teams enough for supporting me. It has been so amazing to see how far I’ve grown from my first few iterations of each screen, and I’m so excited to see which projects I get to work on next :)
Our DC team at an In-N-Out/bowling social!
