Project Overview

I embarked on an exciting journey to craft a digital realm that resonated deeply with underrepresented Chicanos. It's a world where the fervor for fitness intersects with a celebration of Chicano culture. This is the captivating story of Footfitness, a project that aimed to revolutionize both fitness and culture.

Who is FooFitness?

In the buzzing world of fitness, Footfitness came to life as a true reflection of Chicanos finding their groove in physical activity. It's more than just a brand – it's a whole vibe, a movement that lets us express pride, confidence, and grit as we tackle life's ups and downs. So, our mission? Bring all that spirit into a website. Not just to show off products, but to share the real story of our culture and the journey we're all on together.

The UX Design Process

I wanted to understand my audience

so I conducted 20 interviews to grasp their expectations from FootFitness and identify their needs for the website

User Persona

Then I wanted to see what competitors' websites offered

To get ideas for FootFitness, I scoped out competitors my client liked. Checked what features they had, spotted opportunities where they were lacking. Bit tricky 'cause they're more established, but I picked features that fit FootFitness now and chatted with the client about future plans. Gotta think ahead!

I learned that

Some features were must-haves and common across the board. However, there were others that the client's business wasn't quite ready to integrate.

I also observed that competitors didn't excel in visual design, so I leaned into that to make FootFitness stand out.

Now, it's time to chart a flow and determine how information and features will be grouped

Information Architecture Decisions

I decided to showcase all products on the homepage since they only sell four items. The quicker users see the product, the better the chances of purchasing.

I opted to begin the homepage with information and a brand statement about FootFitness to help users learn about their mission.

As FootFitness doesn't support online purchases, I included a call-to-action (CTA) with instructions and a link redirecting users to their Instagram for making purchases.

I moved to lo-fi wireframes so bring out ideas

I quickly fleshed out various lo-fi wireframes to bring ideas together and figure out a possible layout.

Various lo-fi wireframes

Strengthening the brand was crucial for establishing a clear identity

FootFitness did not have an established brand, so I saw this as an opportunity to help them discover an identity, achieving consistency across channels and professionalism.

The style was determined, so I was ready to move on to mid-fi wireframes for both web and mobile

It is essential to ensure the website is mobile-responsive since 95% of users would visit the website on their phones

Mobile mid-fidelity wireframes

Web Mid-Fidelity Wireframes

To test my assumptions, I conducted 10 usability tests

I introduce you foofitness.shop web and mobile interfaces

This is what the website accomplished for FooFitness