Berkeley Fiction Review
Website Redesign

The Berkeley Fiction Review is a UC Berkeley undergraduate, student-run publication.

Founded in 1981, the Berkeley Fiction Review is UC Berkeley’s oldest prose journal, having emerged as a descendant of Berkeley's Occident literary journal (1881 - 1960). BFR welcomes innovative short fiction, as well as traditionally constructed stories to be submitted for their annually printed journal.

As a web designer, I led the ideation, prototyping, and implementation for their updated Wordpress website. I worked closely with the managing editors at the time to get their continuous feedback as users as I planned out each page.

The design of BFR's old website made it difficult to navigate and order past issues, while also providing an obstacle for the team in reviving their online blog presence.

In my initial conversations with the BFR managing editors, they brought up 5 main goals they wanted to focus on with this website redesign:

(1) An overall redesign in aesthetics

(2) A cleaner, intuitive navigation

(3) More professional layout for blogposts

(4) Easier navigation of past/archived issues

(5) A "heavy overhaul in dragging [BFR] to the 21st century"

Revamp the BFR website to modernize their online brand, while also making sure that the site is easy to modify for future website managers of all technical skill levels.

Discovering other literary magazines to see how they juggle their own online marketplace, blogs, and print publications.

To get a better grasp of the BFR team's vision, I went back-and-forth with several of the publication's editors to understand what website improvements they wanted to prioritize as well as the aesthetic direction they wanted to take.

The team first sent me a color palette that they had in mind, along with four sources of inspiration from other literary publications.

Immediately, some patterns I noticed across the team's requests and inspiration were: (1) A simplified navigation bar at the top of the page, (2) a large splash page that featured a publication or story of choice, and (3) a user experience that would direct traffic through home page content rather than depending solely on the navigation bar.

Keeping in mind the overarching goal of simplifying the process of updating the website as well, I wanted to make sure that the team would need to do little to no maintenance work in addition to their regular posting of announcements, blogs, or other online content.

Simplifying the Berkeley Fiction Review website while creating an active online presence.

Something I constantly had to keep in mind throughout the redesign process was figuring out how to add and highlight new blog content without overshadowing their large amounts of existing online content. Below is the original home page for reference.

Naturally, the first thing that came to mind was reorganizing the menu bar — having to remove and restructure some pages — to simplify the overall navigation experience for users. We changed several menu items, some of them previously having over 30 sub-items, into their own standalone pages or opted to merge them with similar entries, like we did with our About and DeCal pages.

However, all this helped narrow down our long-spanning navigation menu into six categories that were visually sorted by relative importance. The homepage and submissions at the edges to catch the most attention, and the past issues gallery ("Journal") at the center to engage users with order forms and views.

On top of the navigation revamp, we made the newest issue the highlight of the landing plage in order to encourage more orders and interest in the print publication. With our newest major announcements on the landing page, we felt it would help BFR's online presence appear more active, showing continuously updated content at the front of their page. Below, you can check out the first two page mockups I created and presented to the team early in our prototyping process.

Pardon our construction, but thanks for reading this far into the project.
Last updated 9/22/2021.

Coming soon: Unexpected Obstacles, Key Takeaways + Next Steps