My Role

Redesign, Development

Tools

Figma, Framer, Slack, Google Analytics, PageSpeed Insights, BrowserStack

Overview

Chosen Few Media is a creative video production agency based in Atlanta, Georgia. I was assigned to redesign Chosen Few Media's new portfolio website at OneXI. With a strategic approach, I conducted stakeholder interviews and competitive analysis. The final product is user-friendly that effectively showcases their expertise fostering a strong connection with the audience.

Worked For

STEP 1

Planning & Wireframing

The project brief highlighted a key issue: the previous website's outdated information architecture led to a disjointed user flow. To remedy this, my process began with a thorough analysis of competitor websites and a deep understanding of the client's services. This research informed the development of a new sitemap in Figma.


Following the sitemap, I developed wireframes (see below) to visually map out key page layouts and user interactions to build a connection between content and user experience. These wireframes were specifically tailored to the website's content.


The project brief highlighted a key issue: the previous website's outdated information architecture led to a disjointed user flow. To remedy this, my process began with a thorough analysis of competitor websites and a deep understanding of the client's services. This research informed the development of a new sitemap in Figma.

Following the sitemap, I developed wireframes (see below) to visually map out key page layouts and user interactions to build a connection between content and user experience. These wireframes were specifically tailored to the website's content.


STEP 2

Design

Following wireframe approval, I transitioned to the design phase, prioritizing the effective visual communication of the client's services within the approved layout. The existing brand color palette was carefully preserved to maintain brand recognition, while I focused my design efforts on refining the typography and visual elements. In the header, I chose a font pairing that balanced modernity with readability. My primary objective was to encourage user conversion.

A/B Testing: Hero section

A/B Testing: Process section

A/B Testing: Projects section

STEP 3

Development

I built this site using Framer, but the client had some specific requirements that needed custom solutions. To meet these, I implemented several custom codes, including a CMS for easier project management, a logo transformation effect based on scroll, a unique video transition effect, and a dark-to-light transition depending on the section. I kept an eye on speed optimization and responsiveness properly.

STEP 4

QA, Testing & Refining

To test speed, SEO optimization, and front-end code issues, I utilized PageSpeed Insights. Given the client’s specific requirement for optimization on iPhone, I also used BrowserStack to simulate and test the site’s performance on that device.


Other Case Studies

More Work