Ignite

A new design with delightful results.

Overview

This project involved research, visual design, and communication with the owner of a local business. The client owns and operates a volleyball club and needed a redesign of the current web interface, brand, and existing user flow.

Problem

The current website was lacking a unified visual design system and the navigation in the site's information architecture needed updating.

Solution

Through research, understanding the business, and a series of iterations, I worked with the client to produce a new web experience for their users.

Kickoff Session

Through in person meetings and phone calls, I began to understand the needs of the client, their understanding of market competition, and what the scope of the project looked like.

Ignite

Understanding

As I began to understand the local business further, I created an Affinity Map, merging all of my notes that I recorded during our kickoff session and competing businesses.

Business Goals

As a local business, there were three main goals after discussing the scope further with the client and gaining further understanding:

  1. Create a more professional website.

  2. Create clearer call to actions and conversion rates.

  3. Leverage testimonials and showcase excellence.

Ignite

Sketch

Taking some initial steps forward after beginning research, I began sketching the brand identity and the mobile interface, focusing on a couple key call to actions.

Iterations

As this project continued to take shape, there were several iterations of the website. I've highlighted a few examples of before and after features, showcasing UX best practices.

Image alt tag

Before

  1. Navigation bar was awkward & overloaded

  2. Poor quality photo

  3. Confusing call-to-action (CTA) placement

Image alt tag

After

  1. Simplified navigation bar

  2. High quality photos

  3. Clear CTA

Rationale

As a design principle, our cognitive load is precious cargo. According to Miller's Law, the average person can only keep 7 items or less in their working memory. So, having a nav bar that has too many items disrupts our cognitive load.

Image alt tag

Before

  1. Lack of color consistency

  2. Typography inconsistency

  3. Lack of brand identity

Image alt tag

After

  1. Consistent color to style guide

  2. Consistent typography

  3. Icons introduce clearer brand identity

Rationale

According to the aesthetic-usability effect as a design principle, folks often perceive visually pleasing design with usability, thus improving business goals.

Image alt tag

Before

  1. Confusing title placement

  2. Lack of consistent photo sizes

  3. Overwhelming amount of text

Image alt tag

After

  1. Clear name and title

  2. Consistent photos

  3. Call-to-action (CTA) for further bio info

Rationale

According to Jakob's Law, folks want consistency across the variety of platforms they visit. Since user's transfer expectations, designs should meet those expectations with delightful results.

*rationales inspired from lawsofux.com

Home Page

Here is a sample of the overall look and feel of the website, beginning with the home page. The client was grateful for the attention to detail and problem solving we were able to come up with.

Ignite

Thanks for reading!

Feel free to reach out if you have a website you'd like redesigned like this one.