FRI, a chemical and petroleum engineering association, modernizes its technology and membership experience.

User Experience Design + Branding

Who is FRI?

FRI (Fractionation Research Incorporated) is a non-profit international association whose research helps Chemical and Petroleum engineers perform plant-scale analysis in distillation.

Project Goals

Rebrand FRI
Improve user experience & flow
Increase user engagement & site content
Implement new CMS & Technology

Project Duration

12+ months

My Role

Stakeholder Interviews

User Surveys

Persona Creation

User Stories & Flows

Wireframing

Branding

Prototyping

Usability Testing

The Problem

FRI had a pretty tall order when they approached us for help. Their wishlist was as follows:

New Technology - FRI was using an old database, and their provider would be discontinuing their service at the end of the year.
New CMS - A new CMS that would help their team make changes/updates to the site more efficiently.
New UX experience - Improve the UX experience for visitors and logged in members navigating the site.

Users & Audience

We had two distinct audiences for this project.

FRI's internal admin team - They would be responsible for managing the content of the site, engaging with members, and recruiting new ones.

The non-members and members of FRI - This audience would consist of chemical and petroleum engineers worldwide.

Scope & Constraints

This was a vast project, over 60+ pages. With only three team members committed to this project, it took a significant amount of our time. Our team consisted of a project manager, a full-stack developer, and myself, the UX/UI designer. We estimated that this project would take a full 12 months. We used Jira, our project management system, to schedule daily stand up meetings and had bi-weekly sprint meetings to discuss our progress and plan new goals. After each month, we had a meeting with our client to discuss our progress and plan next month's goals.

The user experience for their current members within their portal was challenging to understand, requiring several interviews, slack messages, and phone calls.

Additionally, at about month 4, we had a significant setback when both of my team members had to abandon the project for different reasons. Because of this development, we had to bring on an external development team to do the heavy lifting and make up for delays. My role expanded to take on the project management role as well.

My Process

I decided to follow BDC's UX Double Diamond Design Thinking process to ensure that my design decisions were supported by user research and feedback.

The UX Double Diamond Process. Discover, define, develop and deliver.

phase 1: discover

User Interviews & Surveys

In order to build a better understanding of FRI's target audience, we conducted 4x 1 on 1 user interviews.

Characteristics that engineers needed in a website

Educational
Intuitive
Modern

Usability Testing - current site

We collected data on the challenges and opportunities of the current FRI website; covering content, key navigation elements, page flow and functionality.

Key Findings:

We discovered that there wasn't a clear idea of how to navigate the site. There were three different nav menus—all leading to various pages and subpages.
Several pages weren't needed. Either they lacked content or could've been consolidated with another relevant page.
The user flow for navigating through the handbooks, reports, and meetings was difficult.

phase 2: define

affinity mapping

Inputs for the Affinity Map include:

User Interviews
Usability Tests on the current website
Stakeholder interviews

Persona creation

To start, I created a persona of a potential FRI customer based on user surveys and stakeholder interviews –– focusing on motivations, challenges, and their story.

summary

We understood that this audience is hyper-focused on making smart, responsible decisions on behalf of their company through our research. They needed a professional organization to help them perform plant-scale analysis distillation.

phase 3: develop

Information Architecture & user flows

We used a user-centric approach to defining and testing the IA for the reimagined FRI website.

Ideating the Solution

Then it was time to start sketching. I came up with several potential solutions to each of the pain points and made some rough UI sketches. I did some preliminary validation on the Lo-Fi UI sketches and used the feedback to refine my sketches and narrow down my solutions for the Hi-Fi mockups.

Sketched wireframes of FRI's new webpages

phase 4: deliver

Design system

Before getting into the pages, I thought it would be a good idea to create an FRI design system. It would help me iterate and design faster and ensure that designs were consistent on all pages. After completing the mood board, I presented it to the stakeholders to get their buy-in. After getting the ok, I created the full design system that would set the design direction on all 60+ pages.

see full moodboard

see Full Design System

This is a moodboard I used for FRI. This board represents the color selections, imagery, typography and tone for their new website.

This is a sample of the FRI Design system. This represents some of the design components we used such as forms, radial buttons, checkboxes and more.

Prototyping and Validation

I jumped into AdobeXD to create Hi-Fi clickable prototypes of my proposed solutions. I tested the prototype with two new individuals. After testing these designs, these designs were handed off to our dev team through Zeplin. Below are the Hi-Fi mockups of my final solutions:

see Full website design

see Full portal design

Home Page

Member Companies

Resources Page

About Us Page

Dashboard Home Page

Reports Page

Lessons & Takeaways

Although this project is still in development, I learned a great deal in the experience.

Firstly, this project proved why you should have a proper UX research and dev handoff process. In retrospect, I wish I could've taken a little more time understanding the admin team's workflow. There were several technical questions and design challenges that arose throughout this past year. Many that could've been resolved earlier if more time was taken or if better questions were asked initially.

Although I had no control over this, I wouldn't suggest taking on this project with under five team members. I'm incredibly proud of this project, but I also believe that having an additional designer or two could've taken this project to the next level.