top of page
Mock frame.png

Fin vs Fin Website Strategy & Design

Website design, implemented with WordPress

Designed and implemented Fin vs Fin’s website. Fin vs Fin is an online resource platform that reviews DTC brands.

Overview

Fin vs Fin is a DTC brand review platform.

I was hired by Fin vs Fin to design and implement its website. The goal was to:

  • improve the user experience, especially the landing page and website structure, to make sure visitors can easily find what they are looking for;

  • revamp the visual design of the website to better match the company’s branding and the target audience’s preference including leading the creation of illustrations and icons.

Role

I was the sole UX/UI designer on the team, working closely with the CEO and CFO.

Project Length

6 Months

Tools Used

Figma
UXtweak (for tree testing)
Google Analytics
Wordpress

Project 1: Homepage Design

User Survey & User Interview Findings

Trustworthiness

  • Website visitors want to consume information on websites that they can trust.

  • There is so much information out there on the internet, it requires a lot of effort to filter information.

Adding social proof content from major websites..png
Introducing team experts on the Fin vs Fin who review the brands and products.png
Keep branding consistent on the website and promotion materials.png

Category

  • Most visitors have categories that they are interested in. Therefore, they want to be able to quickly navigate to the categories of interest.

  • Visitors want to see product/brand comparison within the categories of interests

Adding filter options to the list of product review.png
Let viewers identify the categories that make the most sense.png
Add comparison charts under category specific pages. (outside of Homepage scope).png

Wireframes

Homepage 1.png

Credibility Building

To ensure the trustworthiness to website viewers, a "featured in" section was added.

Filter By Category

To meet the user needs of browsing specific categories, a filtering option was added to the product review list on the homepage.

Comparison Charts

A section with comparison charts among different brands in the same product category was added.

Experts Highlight

To further build the trustworthiness of the website, experts profiles were highlighted on the homepage. 

Homepage 2.png

Project 2: Website Navigation Improvement

Step 1: Identify Key User Flows

I worked closely with the company CEO to dig into past data and user feedback to identify 3 main user flows to focus on.

he is considering..png
Scenario B_ The user wants to decide between multiple brands within a category of product.
Scenario C_ The user comes to the site from a specific review article, but is looking to l

Step 2: Conduct Tree Testing > Redesign Site Map

For each user scenario, I led tree testing using UXtweak. The goal was to understand the most intuitive routes for all top the user scenarios.

I then used the tree testing result to finalize the website navigation and menu design.

tree testing.png
Sitemap.png

Results & Learnings

+66.7%

+133.3%

Growth in overall page views

Growth in affiliate clicks

  • Gained experience working with data dashboards, and combining user research insights with data to inform decisions

  • Learned to evaluate feasibility of designs by using Wordpress and custom coding to implement design wireframes

  • Experienced with multiple user research methodologies, such as user interviews, surveys, tree testing, and focus group

bottom of page