Myzone.org


Role: Web Development

Overview

Myzone is an internationally recognized fitness brand focusing on heart rate monitoring products to help clients get the most out of their work out. By gamifying exercise, Myzone users see real results and with the new app, they can see it in real time. Fitness clubs have partnered with Myzone all over the globe, offering the top notch heart rate monitoring fitness belt at their locations and enabling users to see each others heart rate and effort meter to both encourage and compete.

Myzone's web design was in need of an update, the designer wanted fit Myzone.org with a sleek modern design to fit their recent rebrand.

Breakdown

After receiving mockups I did a breakdown of the website and decided how I could make the website modular by utilizing WordPress post-types and practicing modular css. I noticed the design of the website had several re-usable elements within the site such as case-study articles, menus, buttons, and forms.

With the mock ups broken down, I began creating WordPress custom post types so that the client could easily update the content-heavy site with blogs, case-studies, faq's and other misc. information.

After the post-types were created, I created modules to go along with them so that the code of the website was reusable and modular.

AAA Mockup 1

Customization

The design of the site also included a few custom elements as well. The home landing page consisted of skewed sections featuring video backgrounds on hover. This gave the website a feel of action and movement on the initial landing of the page.

Luckily for me, I had exerience with video background home pages before on previous projects. I was able to tweak what I already knew and make the site fit the custom design.

Refinement

After custom development, WordPress implementation, and integration with Myzone's existing platforms, the site was ready for refinement.

The site was using a few plugins, and api integrations so I wanted to make sure that the site was still optimized to achieve a pleasant user experience. I spent some time minifying scripts, refactoring styles, and optimizing images so that the browser load would be a bit lighter.

During the course of this project I utilized past research I had done on task runners, such as Grunt and Gulp. These are both tools that help you optimize and deploy sites easily.

Reception

After launch of the site the client was extremely pleased with the feedback they received on the site. They saw an increase in product sales, website traffic, and social media shares.

Reflection

This being one of the larger sites I've had the pleasure of working on. I certainly noticed a few things that I could change if doing it again.

  • Slow down. I knew the project was large so I was furiously working to meet the deadline, however when a bulk of the website was done I realized I had plenty of time till launch and I could spend time refining. If I worked slower I could've spent more time making things neater instead of refactoring them at the end.
  • Ask questions. There were a few times I made assumptions of the mockup based on previous user experience. The designer had a similar idea on the design but wanted to tweak the actions a bit. I could ask first next time and compile dev docs so that in the future we can both save some time.
  • Use actual content while developing. I wasn't accustomed to working on a site with so much content. There we're times that I underestimated the length of some content, and found that once it was in there (not lorem ipsum) that I had to make minor tweaks to fit it.

View More Projects


Myzone.org

Web Development

View Project >

Flight Treks

Web Development

View Project >

UCF Homecoming

Web Design & Development

View Project >

AAA Internship

UI/UX Design

View Project >