Framebridge

Overview

I redesigned key pages of Framebridge's website to help fix their mobile conversion problem. At the time, Framebridge was optimized for desktop web— usability on mobile was lagging and conversion rates from their growing mobile user base was down. The purpose of this project was to increase mobile conversion rate and profit margins, by mobile optimizing the site. The client also shared data and user insights (e.g., target users were new customers coming in from SEO), and specified several high-converting elements to include, that informed our design choices. 

—
Before Redesign

—
After Redesign

My Process

I first identified immediate issues, such as features that were broken and places where the user would get confused/ lose interest (e.g., long paragraphs), as well as elements that were structurally similar and what required the most/least change. 

From there, I re-organized the page structure, if necessary, with most important information was up front, and supporting details and features secondary. To inform the new IA, I tested the content hierarchy by going over every experience, feature, detail, and asking: “Does this really need to be here?” And if so:"Why?" 

Show Don't Tell

I added visual elements to help users quickly grasp information as they scrolled through a page. For example, I felt that it would be easier for users to understand different pricing options if they could visually compare their choices. So I created icons showing the different frame sizes, shown below, for the price details section on the pricing page.

Designing for CMS

The desktop interface had modules with text overlaying images. However, on mobile, color contrast between text and images often made words hard to read and pictures difficult to see-- mobile users were likely skimming over these sections. I created responsive modules that separated text from background image. These modules easily converted from the existing design, worked with varying HTML elements and could be easily managed by content editors. 

Increasing Conversions 

A big part of the re-design was organizing and creating new content based off of user data collected by the client. For e.g., we added modules showing "top-4" most popular frames on pages because data showed users are more likely to convert when they see this. We also added modules about Framebridge's mission because many mobile users enter through SEO and miss the curated homepage experience.

Optimizing for Mobile

Many desktop features were broken or difficult to use on mobile. I took into account mobile limitations, such as performing tasks with one hand and the size of touch targets, to ensure that users could just as easily use these features on their phone as they could on a computer.

A Better Homepage 

The Homepage redesign required more research and planning. To gather some quick insight, I spoke with a handful of people who were unfamiliar with Framebridge. I showed them the current mobile homepage and asked various questions like "what do you think the purpose of this site is?"

From there, I created a new page layout and made key content more prominent to help new users better understand Framebridge and why they should care. I also added visuals to improve scannability and a popular frames section to encourage browsers to become shoppers. 

My Account & Order Details

This part of the project needed the most work. Looking at the flow with target users as the main focus, I defined what users were coming here to accomplish and identified elements that made this challenging.  From there prioritization of content established page structure and informed the design of new elements needed (e.g., the "my order" modules.) After the mobile designs were finalized, I created the desktop versions.