Refiner

Refiner is a global consultancy that brings the best people and practices from the business and technology world to the public, social, and faith-based sectors. Design a responsive website that can introduce this new consultancy to potential clients.

Role

Visual Design, Webflow Development, Graphics

Time

Fall 2021

Type

Client Work for Refiner

02 The Challenge

Business + Goals

Refiner is a startup consultancy that aims to connect people with skills in technology, business, and design with clients in the public, social, and faith-based sectors. The long term aim is to create a network of consultants and clients that can be matched together to achieve their aims. The client laid out the following goals during our initial discussion:

  • Get the word out

  • Convert, Activate, Retain

  • Monetize, Build a referral loop

The Problem

Refiner was lacking in business collateral as well as a way for customers to reach out and interact with the company for consultations and inquires.

The Solution

To create the desired network between clients and consultants, Refiner must first focus on getting the word out and bringing in some clients and consultants. The client needed a website that could fulfill this goal.

03 Process

Role and Responsibility

As a new startup, the Refiner team was very minimal.  I worked with the founder of Refiner as well as someone to write the copy for the website.

Budget

Due to minimal finances I had to take on a variety of roles. As the sole designer I was in charge of visual design, site structure, creating graphics and developing the live website on Webflow.

Timeline

The timeline was relatively short and fluctuated due to outside factors. While designing a custom site for Webflow the founder of Refiner was given the opportunity to speak to a large audience and promote her business. She needed to be able to direct the potential clients somewhere where they could book a consultation. Since this was a last-minute opportunity we had to make an intermediate website on Squarespace that would serve our basic functions until we had more time to fully realize our initial goals.

Setting Goals

Due to the short time frame we decided to focus on what was considered top priority. For Refiner this was to gain new clients and spread the word about the business. We came to the decision that we would make a website and focus on the most important pages, the homepage to introduce new clients to the consultancy and explain the services offered, and a page that allows clients to book a free session with a consultant allowing them to discuss pricing and potentially become a client of Refiner.

Users + Audience

The target users are clients in need of consulting within the public, social, and faith-based sectors. These clients often have vision but lack the skills and knowledge to execute their vision.

What is Refiner?

In addition to defining the audience, I worked with the founder to map out what Refiner meant to her and how the brand should be represented.

04 Visual Design

With such a simple structure to the website, the main focus became creating a brand and website that would look professional, and competent in order to influence the users' perception of Refiner and what it has to offer. I presented two options to the client in terms of visual design, a playful illustrative approach or a more mature technological approach. Given the audience we decided to go with latter as it looks the most impressive to the average viewer.

Visual Themes

  • Diamonds

  • Refining diamonds in the rough

  • Transformation

  • Value

  • Warm Colors

  • Phoenix

  • Rising from the ashes

  • Flame of refinement

Branding Ideation

Based on the brand identity discussion I began sketching out potential designs.

Wireframe Sketches

I sketched several wireframes to discuss with the client. This helped give us a visual starting point and an idea of what features we needed to include.

Iterations

The visual design for Refiner was done collaboratively. While I did the majority of the design work the client had access to the Figma file in order to leave feedback or test out graphics.

Graphics

To maintain low expenditures and make sure that the graphics suited the business visually I created custom motion graphics for the website. This was done with a combination of Cinema4D, Adobe After Effects and Premiere Pro.

Logo Test

Unused Logo Design, AE

Plan Build Grow

Graphic, AE + Cinema4D

Diamond

Hero, AE + Cinema4D

Colors + Fonts

Warm colors were chosen to reflect the brand identity. The fonts are modern and clean to add to the feeling of professionalism.

05 Final Design

Breakpoints
Responsive Design

Live Site

The full site is live at refiner.us

*The live site may not fully represent the original design due to client requests.

06 Reflection

The Future

The website was completed within the deadline which allowed the client to use it as a way of promoting her consultancy. Refiner is still in its early stages while the founder maintains a full time job and works on making connections and promoting her consultancy. Going forward the website will be developed to address additional parts of the business plan.

Lessons

I came away from this project with a strong understanding of flexibility and how to make things happen despite fluctuating circumstances. Creating with limited resources means simplifying and heavy prioritization. I was also reminded that the goal and client demands are more important that personal design preferences.

01 Overview02 The Challenge03 Process04 Visual Design05 Final Design06  Reflection