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.
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:
Create a more professional website.
Create clearer call to actions and conversion rates.
Leverage testimonials and showcase excellence.
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.
Before
Navigation bar was awkward & overloaded
Poor quality photo
Confusing call-to-action (CTA) placement
After
Simplified navigation bar
High quality photos
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.
Before
Lack of color consistency
Typography inconsistency
Lack of brand identity
After
Consistent color to style guide
Consistent typography
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.
Before
Confusing title placement
Lack of consistent photo sizes
Overwhelming amount of text
After
Clear name and title
Consistent photos
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.
Thanks for reading!
Feel free to reach out if you have a website you'd like redesigned like this one.