Website Design - Teague Nelson

Client

Steyn Group Investments

My Role

Project Management
UX & Visual Design
WordPress Development

Summary

Website design for a global family office with investments spread between the US and Europe

Visit the Steyn Group Website

PROBLEM STATEMENT

The Steyn Group wanted a website that would introduce themselves and their investment philosophy, and highlight their current investments and ongoing projects.

They also wanted a look that made them seem approachable and ‘non-rigid’ in the way a lot of investment offices are.

APPROACH

Discovery

Structure & Wireframe Design

Visual Design

Development

Ongoing Maintenance & Reporting

1. Discovery

GOALS, AUDIENCE & MESSAGE

In the discovery phase we talked about the intended purpose of the website, the feeling they were trying to convey, and who the intended audiences were.

I like to kick off projects by asking a standard set of questions that really get at the underlying goals and audience goals, and then discuss further with the client to dig in more and make sure we’re both aligned.

Discovery Process

Discovery Intake Questionnaire and Discussion Starter

View Documents

2. Structure & Wireframe Design

SITEMAPS, WIREFRAMES & CONTENT

After getting aligned on the goals, audience, and messaging of the project, the next step was to map out a sitemap (how the website’s navigation and page structure will be), and think about the content that would fill out each of the pages and sections.

With the sitemap as a guide, I always begin designs loosely by blocking out wireframes. This helps clarify the content sections, and helps people see how the layout of the pages will look before I invest further time with visual elements like color or fonts.

3. Visual Design

Colors, Fonts & Images

After the structure of the website is set I begin to overlay the visual look and feel elements like colors, fonts and images. This is the stage where the website starts to really come alive and the clients recognize the site as their own.

For this website we decided to go with an illustrated look to reflect the feel of a ‘field journal’. I found and worked with a really talented illustrator to develop each of the illustrations used on the website.

4. Development

WORDPRESS DEVELOPMENT

I typically do WordPress development myself for website projects.

I have a base framework I’ve structured to start each project, and use the Genesis Framework as an easy way to get a lot of heavy lifting out of the way.

For styling I use SASS as an abstracted styling language to compile down to CSS. I like to structure each element atomically as much as possible to keep my styling files organized.

5. Ongoing Maintenance & Reporting

STAYING UP TO DATE & REPORTING

Generally after finishing a website project, I like to offer clients a support and maintenance package to take care of their site, keeping it up to date and fixing anything if something goes wrong.

Monthly I’ve set up a system to send detailed reports to clients outlining the analytics, and technical updates I’ve made to the site that month.