BACKGROUND / CONCEPT

Role: UI/UX Designer 

Softwares: Invision, Balsamiq, Photoshop, Illustrator

Goal: Responsive site redesign and rebranding for personal trainer Joey Baran.

Vancouver has a reputation as an active city, the people that reside here aim to live well-balanced lifestyles. The personal training industry is quite competitive because of this. There are many well qualified trainers but competing with large fitness chains cuts out some potential clientele. For those indivisuals who prefer or seek out private trainers, they have quite a large basket to choose from. Joey Baran is a local personal trainer from Vancouver, BC. He specializes in one-on-one boot camps in areas such as weight-training, mobility training, calisthenics, and yoga. He is looking to revamp his new site to set himself apart from his competition. While there are many trainers that offer similar services, Joey believes his competitive advantage is his love for health and nutrition and when supplemented with consistent and quality training, people can become the best version of themselves.

PROCESS

I started with the entire Information Architecture and design process, taking into account user types, demographics, and tasks to be performed as well as analyzed his most direct competition. After quick evaluation I realized the best course of action going into the testing phase was to approach it with a mobile first mentality since most views on the site will be on mobile devices.

Design Brief

As his current site was basically non-existent, I started from the ground up gathering content and relevant information that is expected to be found on all personal trainers sites to give the navigation structure and clearly defined the goals of the site. I developed a sitemap and brainstormed key elements that would make the users experience as simple to find key information they were seeking with clear labeling. 

Wireframes & Style Tile

I wanted to get familiar with a variety of wireframe and prototype tools that are popular in the industry, I designed the basic look and feel of the site and developed a style tile to give his brand a professional look that matched his personality. The gold and slate grey with black and white accents and main colors aimed to give a sense of professionalism to his business. Below is also a complete usability report of tests on the sites look and feel and functionality based on the final Invision prototype.

I suggested to Joey that having a blog in this industry would help greatly with SEO and would allow him to share his passion and knowledge about nutrition and fitness. Therefore, the focus on the usability testing and mockups were geared around the effectiveness of a user flow finding information relevant to his blog posts.

Desktop Wireframes

Mobile Wireframes

Style Tile

FINAL

After going through whole testing environment (see usability report) the results showed that the site seemed to labeled well but a common complaint was the logo. I decided to create a new logo for Joey and decided that with the high fidelity prototype tested, the design is ready to go to development. You can view the final Invision prototype below.

joey baran business card

Along with the live site I have created a live wordpress site that is slowly under construction. The site is missing a few pages but when the blog is complete he will be able to easily upload his own posts through the wordpress dashboard.