Southport

Situated on Oregon’s south coast, Southport Lumber Co. is an innovative producer of high-quality wood products. They tasked AHM Brands with refining their identity, refreshing their brand standards, and delivering an updated website. The last piece is where I come in.

I lead the redesign of Southport’s website to ensure it reflects the brand’s unique character while impressing visitors with captivating photography and demonstrating how Southport sets themselves apart in their market as a state-of-the-art timber company.

project Strategy
Project Lead
Info Architecture
Content outlines

Design system
UI design
wireframes
Hi-fi mockups

Getting started

I needed two things to get started:

I was onboarded to the new brand by my colleagues who developed it, including the visual and written identity.
A kickoff meeting with the client to learn and understand their goals, needs, and challenges with respect to the website.

As I developed a strategy to address the practical and aesthetic facets of the website, I also provided our project manager with direction, requirements, and finally approval of a project plan and timeline.

After presenting and gaining approval of our approach with the client, I tackled the information architecture and established some visual precedents to inform the design system.

Southport’s primary goal for this project was to inform and impress prospective customers and employees. I devised a sitemap that would offer simple, broad content on the top-level pages to “cold leads” and more detailed information, deeper in the site, for warmer leads. I also accounted for the prospect of adding more pages and content later.

We knew photography was going to play a big part in the visuals since Southport had a lot of breathtaking and engaging photography to work with.

Visual Rules

Simple, minimalist
Flat, not overlapping
Straight lines and angular
Modern

Tone

Bold
Innovative
Knowledgeable
Personable

Brand precedents

Page structure

I composed content outlines for the various pages on the website so copywriting and wireframes could happen in parallel. While our content strategist wrote copy, I drafted page wireframes. We stayed in touch while we did our respective work, but working off the same page outlines ensured our deliverables would align in the end.

With the wireframes, I focused on user journeys and CTAs. The user journeys were relatively simple in this case; an extension of the sitemap strategy established earlier. As the user moved from the homepage into deeper pages, more content was presented to address common questions and concerns. And all along the way, multiple CTAs so the user could reach out to Southport as soon as they were ready.

I sprinkled in opportunities to show off their photography and called out the intent behind different photo placements to garner feedback from the client and guide our photo selection.

Final design

Bringing it all together, I coalesced the copy, images, visual styling, and page structure into the final page designs.

The earlier work made this final step fun and simple. I collaborated with my colleagues who developed the new brand to refine my interpretation of the visual standards. It was a very satisfying process.

It was important to find the right balance of color and textures so the website felt uniquely Southport without overdoing it. I also worked with the developer to ensure that the layouts and patterns would be conducive to a smooth implementation in the CMS. I created a style guide to facilitate the handoff process and annotated design components for a consistent and DRY build.