I'm part of The San Francisco Standard's product team, where we focus on enhancing our brand's appeal. My role includes refining our website's design, creating engaging graphics for various events, and working closely with our editors to fulfill their illustration needs.
Industry: Digital News Media
Category: Brand Refresh
What I Did: Rebrand, Visual System, Web UI Layout Design, Marketing Campaign, Event Design, Illustration
Awards: 1st Place for Best Home Page Layout & Design and 2nd Place for Online Story Presentation Page Layout & Design,, announced by the California News Publishers Association
The San Francisco Standard Web Rebrand
In late 2023 to early 2024, we started working on the SF rebrand project. At the beginning of the rebrand planning, they wanted the new look to not stray far from the current version. Since a news media company already has a certain level of recognition, the rebranding had to be careful and subtle. We mostly kept the original layout. The biggest change was in the colors used. Our goal was to make the site more enjoyable to read, whether on a desktop, tablet, or phone. Bright new colors and typefaces make our work more lively. Our homepage and article pages have been redesigned to be more dynamic and better showcase photos and news.
Logo Look & Feel
We primarily modified the colors and styling of the logo. The new design features a more modern and minimalist visual style, incorporating a brighter and fresher yellow highlight.
Branded Materials
The new branding design was also applied to our press badges and various company items.
Web Rebrand
Awards: 1st Place for Best Home Page Layout & Design, 2nd Place for Online Story Presentation Page Layout & Design, announced by the California News Publishers Association
Adaptive News Display
Our homepage features a dynamic top section that adapts to tell stories in the most compelling way possible. Editors can choose from three distinct layouts to match the news at hand. The Daily layout serves as our standard format, providing a clean, consistent experience for routine updates. When stories are connected or part of a larger narrative, the Collection layout groups them together, helping readers understand the broader context. For those moments when major news breaks, our Breaking layout commands attention with bold visuals and prominent headlines, ensuring crucial information stands out. This flexible system gives our editorial team the tools to present news with the right visual impact and importance.
Homepage and Article Page
Our homepage and article pages have been redesigned to have a clearer hierarchy and more flexibility in layout. They are now more dynamic, allowing us to better showcase our news and photos. You can experience it in more detail on the SF Standard website.
*According to our weekly data from Parse.ly, the average number of pageviews exceeds 600,000+.
Newsletter Sign-Up Layout
The redesigned newsletter sign-up layout keeps a clear hierarchy and flexible design to ensure that the sign-up process is user-friendly and visually appealing across all devices. The bright new icons and simple design make it easy for users to select the newsletters they want to receive.
Email Newsletter
When I began designing the Email Newsletter, I focused on making it visually appealing first. However, after talking with our project manager and engineers, we prioritized successful readability over design. After several revisions, we chose a simple layout. This reduced repetitive coding for engineers and improved adaptability across different screens.
Newsletter Sign-Up Pop-Up
The newsletter sign-up pop-up will appear when a user is browsing our website for the first time or stays on the site for an extended period. The pop-up will be shown on the section and article pages, offering related newsletters based on the content the reader is viewing.
*According to our weekly data from Parse.ly, the number of newsletter subscribers averages above 30,000+.
Event Promotion
Our event promotion will cover multiple platforms, including pop-ups on the website article page, Instagram, the event page, and newsletters. The design team's main responsibility is to ensure brand visual consistency while maintaining the flexible layout of the graphics.
Project timeline：2022-2023
Next, I will present some of the projects I worked on when I first joined SF Standard. At that time, their style incorporated many hand-drawn elements, creating an organic, handmade feel in the digital environment. This approach, combined with an outlined framework that merges modern design principles with functional organization, results in a layout that is both aesthetically pleasing and user-friendly.
I designed this social graphic to promote the launch of a new newsletter in July 2022, which led to a significant increase in user registrations within just one month.
2023 Election Social Event: Promotion Graphic
SF Standard kicked off an election-focused marketing campaign, spotlighting live events and social promos. 'On the Record,' the first in this series, featured a city Senate debate. To make event promotion easier, I created simple, adaptable design templates. These posters, A4 for easy printing, were designed to be clear and cost-effective. Breaking away from the usual red and blue, I chose a fresh, lively design. I standardized the photos in black and white with bright backgrounds, solving photo quality issues and ensuring a clean, impactful look.
Candidate Posters
Designed for an event hosted by SF Standard, these posters feature an optimized layout, allowing event managers to quickly and efficiently update candidate details or relevant information on short notice.
Proposition Series
I collaborated with marketing to create social media templates for proposition results. These templates enabled quick updates and engagement with users as the results were announced, helping capture headlines and stay on top of trending topics.
Editorial Illustrations
Crafting editorial illustrations under tight deadlines and evolving content is a challenge, but collaborating with the team is rewarding. It gives me the freedom to experiment with various styles, fitting them to diverse news stories. Our work ranges from photo collages to unique creations, always emphasizing simplicity, boldness, and readability.
This project calls for a variety of illustration styles to represent each section, leading me to embrace a diverse and abstract approach. It's been a lot of fun, as there are no creative limits – I just ensure to maintain simplicity and readability in my designs.