Free-Website-Mockup-PSD-2018-1

Web Design

Litchfield Hills Rowing Club 

I created this website design as part of a re-branding collaboration with Point One Percent, a branding agency located in Lichfield, CT. 

Litchfield hills Rowing Club is a private rowing team based on Bantam Lake in Litchfield, Connecticut. In November of 2020, I began a rebrand collaboration with Point One Percent as LHRC's brand was inconsistant and out of date. The club has been expereincing rapid growth and success and their branding needs to grow with them. I redesigned their Unisuit and then began hammering away on a new website design.

Check out some of the original design here

Goals

The first step in my process was to identify the goals for the website. Rather than create traditional personas through interviews, I worked with the current head of web content to come up with the goals for the new site. Having coached for the team for 8 months, my familiarity with them and the website combined with her expertise and a quick interview with the head coach allowed us to set concrete goals and scope without involving too many differing opinions.

website-step1
svg-image

Site Map

The next step was to create a site map. I mapped out the current website and then adjusted it as needed for the new site. Then I created the sitemap diagram. 

When going into wireframe design, I kept several goals at the forefront of my work:

1. Design simple. The site is going to be manged and updated by volunteers on squarespace with minimal web experience so all designs need to be buildable on that platform. The design system also needs to be easily replicated for new content.

2. Keep the scope contained. The rebuild is also being done on a volunteer basis and has a tight timeframe so only redo what is needed - The Financial Aid, Registration Storefront, and Gear Storefront pages are not being re-designed.

3. The website to needs to showcase the club through photos as these can share the feel and the acomplishments of the club more successfully than text alone. This also takes into account the Head Coaches philosophy of “photos sell rowing.”

4. The site needs to sell prospective rowers and provide the information that current members are looking for. Information needs to be presented concisely as "People come to our site for information" - current web manager Becca Cadoff.

Lo-Fi Wireframe Overview

Wireframe

Lo-fi wireframes can be found here.

For the high fidelity wireframes I:

1. Added type were needed and brought over existing copy

2. Refined visual language where needed

3. Adjusted information archicture as needed

4. refined my site map as bringing in site information made a need for some changes clear.

Hi-Fi Wireframe Overview

Wireframe-hifi

Hi-fi wireframes can be found here.

Imagery

Collecting imagery was the first step for the visual design process. Most photographs for the website are courtesy of Amber Shulde, a parent on the team, and myself.

Header_GradientMap-3
Style-Tile

Style Guide

Next I defined typography and UI states. The color palette is by Point One Percent. The type, colors, and images were then all added to the wireframes to create the visual design.

Visual Design Overview

Visual-Design

Visual Design Frames can be found here.

Individual Page Process Examples

Free-Website-Mockup-PSD-2018-1

The Figma Prototype can be explored here. Disable Figma UI to use the navigation bar.

Selected Works