Peak Fitness

BACKGROUND

Peak Fitness is a fictional family-owned gym with 5 locations in Southern California. Each location offers a variety of classes and is equipped with state-of-the-art machines and amenities, such as a trendy smoothie bar and childcare services.

CHALLENGE

Peak Fitness wants to reach a broader audience with a website and have all its information and resources in one place.

TEAM AND MY ROLE

The project was a four-person team. Everyone collaborated and took on various roles. I participated in the affinity diagramming and helped cluster the brainstormed content. I structured the content into a sitemap. I collaboratively created wireframes and provided feedback. Lastly, I designed the deliverable wireframes with annotations.

TOOLS USED

Adobe Illustrator
Adobe InDesign
Adobe XD
Draw.io
GlooMaps
Google Drive

SOLUTION

An affinity diagram was used to organize the brainstormed content. It creates a visual representation of the data. Once the data is analyzed and grouped, it can be translated into a more structured format, such as a sitemap. A sitemap is a blueprint for a website. It communicates the scope and hierarchy of a website. The navigation of a website is derived from a sitemap. The navigation describes how different web pages are organized and connected to one another. Once a plan is in place, wireframes are created.

*Affinity diagram of brainstormed content*

RESULTS

A wireframe is a low-fidelity visual guide that depicts the arrangement of a website’s content, such as interface elements, navigation systems, and the relationship between the interface elements and navigation systems. A wireframe purposely lacks visual treatment because it focuses on functionality and the relationship between web pages and not the actual content of the website.

Annotations were added to the wireframe because a roadmap is needed to provide information about the navigation, what each element is, how each element functions, and how the user interacts with the elements. Annotations are crucial because developers use the wireframes and annotations to create high-fidelity prototypes.

Wireframes are an effective method for making rapid prototypes in the iterative process. Wireframes are quick and low-fidelity, and changes can be rapidly implemented and tested.

The Differences Between the Two Iterations are:

Iteration 1 focused on only one page: Home. Iteration 2 is a revised version of iteration 1 and a more expansive view that focuses on five pages: Home, Training, Classes, Membership, and About.
Iteration 2's annotations are more detailed about the navigation and functionality of different elements.