An Outdated, Cluttered, and Overwhelming Interface

When I first landed on, it felt like I was transported back to the early days of the internet, reminiscent of browsing on an old iMac G3. The site presented two major challenges:

• Aesthetics: The interface was blocky, outdated, and visually dull, lacking any clear visual hierarchy.
• Functionality: The overwhelming amount of information and broken links left me unsure of what Fark was about until I did some digging.

Rebranding Fark with a Modern Interface to Drive Engagement

The primary objective of this project was to enhance the overall user experience on Fark. My goal was to revamp Fark’s branding and website interface to meet the business objective of increasing page visits and user engagement. To achieve these goals, my approach included:

• Revamping Fark's branding by making subtle changes to the logo and color scheme.
• Redesigning two key pages to better highlight Fark’s unique value proposition.

Identifying Key Challenges through Heuristic Evaluation

To uncover user pain points, I conducted a heuristic evaluation of Fark’s existing website. I documented my findings with screenshots and notes, revealing several usability challenges:

• A confusing navigation bar at the top of the page.
• Buttons that were difficult to notice.
• External pages opening without any warnings or indicators.

Discovering Best Practices through Comparative Analysis

To align the design with user expectations, I conducted a comparative analysis of similar platforms like Reddit and X (formerly Twitter). These sites provided insights into industry best practices, including:

• Positioning the navigation bar as a sidebar.
• Placing engagement buttons (like, comment, share) at the bottom of posts.

Fark’s Unique Selling Proposition: The Fark Tags (eg. “Florida Man”)

In a market saturated with discussion platforms, understanding what makes Fark unique was crucial. Through my exploration, I found that Fark stands out due to its distinctive humor, with tags like “Florida Man,” “’Murica,” “Silly,” and “Dumba*s.” This playful and vulgar language sets Fark apart, making it essential to highlight these tags in the redesign to emphasize Fark’s unique value.

“Fark!” The New Branding

The rebranded Fark logo features an exclamation mark and two “talking” horizontal bars within the letter “F.” This design reflects the site's name, which founder Drew explained as either a replacement for another F-word or the result of a drunken typo. The exclamation mark conveys the idea of a sudden remark, while the talking bars represent the site's role as a platform for conversation. To enhance the existing purple color scheme, I introduced a complementary red-orange hue to add vibrancy.

Before

• Unclear navigation structure: The navigation menu was cluttered, making it difficult for users to find key actions or access important sections of the site.
• Overwhelming and disorganized content: The homepage displayed an excessive amount of information without clear organization, making it hard for users to focus on relevant content.
• Unfocused call to action: The site lacked a clear, prominent call to action, leaving users uncertain about what to do next.
• Visually chaotic interface: The overall design was overwhelming, with no emphasis on Fark's unique selling points, causing the site to feel generic and uninviting.

1.1 Revamping the Navigation Menu

I reorganized the top of the page, prioritizing important actionable items like the search bar, login, and settings buttons. The main navigation bar is now hidden within a hamburger menu sidebar to accommodate Fark's numerous topics. The sidebar features key actions like returning to the homepage and creating a post, while all topics and tags are nested within an accordion for a minimalist aesthetic. Additionally, resources are readily accessible for user support.

1.2 Highlighting Fark’s Unique Selling Proposition

The redesigned homepage prominently features Fark's unique tags at the top, promoting their distinctive content and encouraging user engagement with the topics.

1.3 Emphasizing Actionable Items

The primary call to action (CTA) on the homepage is to encourage users to create posts, aligning with Fark’s objective of sparking site engagement. Each thread on the homepage now includes interactive buttons like upvote, downvote, discussion, save, and share, clearly communicating to users the available actions.

Before

The original thread page was so cluttered and confusing that I often wasn’t sure where to like or comment on threads.

The redesign emphasizes actionable gestures, making "like," "comment," and "share" buttons visible and easy to find. Additionally, increased white space helps declutter the page, improving the overall user experience.

Conducting Usability Testing to Validate the Design

After completing the redesign, the next step is to conduct usability testing to validate the design decisions and ensure they are intuitive for users. To measure the success of the project, I plan to gauge user satisfaction and monitor engagement metrics using Google Analytics.

Key Learnings

My First time Using Figma & Prototyping
This project marked my first experience using Figma to wireframe and prototype. Transitioning from a graphic design background to UX design presented challenges, as web design introduced new concepts like the 8-grid system, 12-column layouts for laptops, and the importance of maintaining font sizes between 14-16px for readability. I also learned about breakpoints and flexboxes, which were instrumental in building a responsive web layout.