Peak Fitness Website

This project involved the creation of wireframes for a prospective gym website. The process included outlining business and customer goals, site brainstorming, sitemap design, and finally the design of wireframes for desktop and mobile versions of the website. I was involved at all steps of the process.

Components:

· Business Research
· Desktop Brainstorm & Sitemap
· Mobile Brainstorm & Sitemap
· Desktop Wireframes
· Mobile Wireframes

ClientPeak FitnessTypeUI/UXToolsGoogle Docs, Creately, Photoshop CCYear2016

Business Research

My team began this project by first figuring out the purpose of the website both from the business and customer perspective.  Beginning by identifying these respective goals allowed us to get a better sense of what requirements the website would need.  It gave us a rough roadmap of where to start so to speak.

Furthermore, at this stage we laid out metrics in order to quantifiably measure the success of our design decisions.

Desktop Brainstorm & Sitemap

Our team brainstormed the wide assortment of things that could be a part of the website.  These individual items were grouped into parent categories, which eventually served as the basis for our site navigation in our sitemap document.  Our site navigation 1st level links focus on the core items a user may be looking for during their time on the website.

Mobile Brainstorm & Sitemap

A conscious decision was made to treat the mobile version of the website as a separate experience hence the need for a different brainstorm and sitemap.  I determined that the needs of someone looking at the website on their phone are different from someone on desktop.  Users on their phone may be quickly gleaming the website for specific bits of information while users on a computer may have more time to dive deep into the site.

Desktop Wireframes

I designed the Homepage, a first level page, and 2 second level pages.

The Homepage includes a slider with a call to action area that allows for immediate marketing efforts on the website.  A tabbed informational area below that allows the business to answer the most sought after questions right away.

The Accommodations page offers photos and descriptions of 4 main groups: facilities, equipment, personal training, and juice bar. Clicking on the photos or links will take users to the specific topic page.

Mobile Wireframes

I also designed the mobile Homepage, Accommodations, Equipment, and Juice Bar pages.

The mobile Homepage keeps the slider element intact but moves the call to action just below the slider. This keeps the sign up button prominent as one of the first things users see.  The tabbed info area from the desktop version doesn’t work well here so instead there are links to easily navigate users to the most requested information.

The Accommodations page carries over similar elements from the desktop version but adapted for a mobile screen.  I chose to leave out text in this case in order to put an emphasis on beautiful visual imagery to guide the user to the page they’re looking for.

Privacy Preference Center