Group 7.png — FILMETRICS

Responsive UX & UI redesign of Filmetrics.com-- IN PROGRESS

OVERVIEW

MY ROLE

Partner in a freelance duo tackling full redesign of site-- UX design, UX research, UI, IXD
Other team members: Michelle Mosher-- UI design

CHALLENGE

Filmetrics is a leader in thin-film measurement software and hardware. The website hadn't been redesigned in nearly a decade. They wanted help bringing the site into a current design pattern, while still maintaining current content to as not to affect SEO value, as majority of their traffic is organically driven. Other goals they wanted us to focus on was easing the user flow for improving the contact form & getting a quote.

TOOLS

Pen & Paper
Sketch
HotJar
Google Analytics
Principle
Asana
Zeplin

TIMELINE

3 months part time

DISCOVERY

UNDERSTANDING THE THIN-FILM USER

After consulting with our client, I started getting a framework for our users on the site. Unfortunately, we weren't able to gather demographic data to jump off from, but I opted to begin our research by learning how our users were interacting with the current site. I started by setting recordings and heatmaps on the 10 most popular pages on the site.

ANALYZING POPULAR CONTENT

Based on the recordings and heatmaps set in Hotjar, I was able to gather some insights based on the way users were interacting with the site.

Overview:Sample Size: 1,105Top 3 Clicks: Products Nav Link (18.57% of clicks), Right Arrow on Hero Slider (14.30%), Technology (11.42%)Device Breakdown: 83% desktop, 1% tablet, 16% mobileAverage Time on Page: 00:01:01Observations:Navigation informat… — Overview:
Sample Size: 1,105
Top 3 Clicks: Products Nav Link (18.57% of clicks), Right Arrow on Hero Slider (14.30%), Technology (11.42%)
Device Breakdown: 83% desktop, 1% tablet, 16% mobile
Average Time on Page: 00:01:01
Observations:
Navigation information architecture could use an update based on both GA and heatmaps
Search is being underutilized at only 1.74% using the most direct option.
There’s not clear action or path for the user to begin their journey on (no CTAs, micro commitments etc)

Navigation/IA needs reorganization
Visual Hierarchy needs to be improved to make commonly clicked elements more accessible to user
There’s a lack of goal driven design, making users unsure of next step
Side panel engagement is minimal, which means their primary goal isn't being interacted with or understood.

READ RESEARCH

DESIGN LIBRARY

Michelle and I each were responsible for a version of each design for our clients to choose from or integrate. It was crucial to establish design guidelines and rules so our ideas looked like different options of a cohesive system. There was a lot of back and forth on the color scheme with the client, but eventually we landed on something we were all happy with.

Typography

We chose Nunito Sans, as it's very sleek and modern, but also very geometric, which we think lends itself really well to the technical aspect of the site's content.

Color Palette

We chose to use the two colors of their logo as per their request. The Yellow was integrated in order to create a more cohesive experience amongst their sister-site profilm.com We also included a lighter and darker shade of each of the main colors to accent the primary colors and expand the palette. We included a set of neutrals as well and we've opted to use a soft black and pure white as the text colors.

Iconography

We chose to go with Google Material Design icons due to budget and their appeal to a universal audience.

Buttons

Form Fields

We opted to go with inline error recognition that didn't feel as abrasive as other sites. We feel the encapsulation of the fields lends more to the use case.

Cards

These are a template we worked off of. The size and formatting will remain consistent, but the content and color scheme are subject to change.

DESIGN & ITERATION

OPTICAL PROFILER DILEMMA

In the midst of a big solve. Come back soon!

FILMETRICS