Health & Fitness
Bodybuilding.com, Llc.
https://bodybuilding.com
Senior Product Designer
2011 — 2016
Projects include Workout Tracker App, Store App (+ Translation), Bodybuilding.com Website, BodySpace, Forum, Content & Video, Recipe Articles, Search, Photo Uploader, Emails, and many others.
The years at Bodybuilding.com was monumental to my career and I cherish the time & experiences I had with that UX Team. I worked on all facets of the digital facing products in both app (iOS & Android) and web. We had an entire engineering floor that we worked closely with, and a business intelligence team that would provide us valuable data. On our UX team we had a dedicated User Tester and an Information Architect.
For design software we used Adobe Muse, Whimsical, Sketch, InVision and Photoshop. For a portion of the time as a UX Designer we were individually embedded into engineering teams. We would work with them daily and attend morning scrums and participate in Agile development. This helped bridge the gap and build trust between the UX Design team and the Engineering teams.
Our team worked directly with the CEO to bring his visions to life. The world's 10th largest fitness forum. The #1 online nutrition retailer. The most visited fitness site worldwide. The BodySpace social network. We designed solutions used by millions of satisfied fitness customers.
Late nights at the office with helper pup, Stella. And my son Brody helping wireframe on the blackboard.
Most initiatives started with a research & documentation phase to determine the current state.
This is a sitemap of the Find a Supplement Plan wizard. Seeing a system organized like this provides insight to technologies that may be required.
User Journey's were performed as well. They show a number of user's decisions / clicks required to convert, and what paths they take depending on those decisions.
The Bodybuilding.com website and apps cover a vast amount of user interactions and had plenty of opportunity for upgrades to better UI and experiences. This provided us with endless projects to enhance and update out-dated systems. These are just a portion of the projects I worked on during my time with the company.
The websites primary bread & butter was the Store. A majority of the products were drop-ship, but Bodybuilding came out with it's proprietary line: B-Elite Supplements & Apparel, and B-Elite Fuel (Microwaveable Meals). This unique line of products was exciting to work with and promote within the experiences. We also carried several premium brands, and product lines that were promoted by fitness models. This added a great deal of the human element to the website and app experiences.
Being an active website with millions of fitness customers we designed and built new versions of BodySpace, the fitness social network. It had cross-over into the e-commerce Store side where customers' purchases & written reviews could be verified by a badge, or a customer could recommend a product on their social feed.
I designed the upgraded version of the photo uploader that included post-upload editing features.
This is a sample of some of the documentation I would maintain, and was provided to client-side engineering teams.
When a user uploads a photo, these are the dimensions and cropping that will be generated and utilized across the UI.
One of my concepts of a homepage redesign.
BodySpace aimed to have everything you would on any other social network like Twitter or Facebook.
But we took it a thousand steps further.
It included feed card-types for posting Before & After Progress Photos, Workout Results, Weight Goal Notifications, Measurement Updates, Food Journal Entries, and lots of other fun. I got to work on compiling, organizing, creating mechanisms, and documenting the entire feed-card library.
Each feed card had a unique set of functions and interactions. Each piece of content displayed needed to have min. & max. value restraints designed and accounted for so the layouts don't break. You'd be surprised the kind of data users enter.
BodySpace had it's web-based platform, but also had a stand-alone iOS and Android app. This included a workout tracker and several other fitness tools that would feed the data back to your online profile. Every concept that existed on the web had to be designed & documented again for each app and operating system.
Every action that occurred on the Bodybuilding.com website and apps were also sent out in the form of an email notification. We designed an email for notifications, milestones achieved, workout reminders, and more . I designed Notification Settings within a user's account would allow them to toggle any/all notification types to their notification badge, app, email or SMS.
This is a small example of email templates I designed and maintained.
These are some concepts for an icon family for the primary Bodybuilding.com apps. This is good to see as it is common to explore several dozen different types / arrangements / visuals until it feels right. Often this process is hidden and never seen.
The Store was ever evolving and getting better as we added more data tracking & intelligence. We worked on everything from main category pages, search bar behavior (auto-complete, auto-suggest), results pages, products pages, checkout flows, translation/currency, and more. We were able to design A and B variances and run it through live traffic testing to prove winning UI.
A large project I worked on was product filtering & sorting UI for the mobile store. This is just an example of a user flow if they were to tap on the filtering button and making adjustments. This was built into a clickable (tappable) prototype as well, presented to leadership, and used in live user-testing.
Before our design software did all our documentation work for us... we used to do it by hand.
The UX Team handled everything including building out the screenshots that were submitted to the Apple App Store.
It's entertaining to show the vast amount of product types we had to account for, and document for, in each major breakpoint.
Workout Trainer pages were a big project as these were essentially "hubs" that held all the information about that specific trainer. These entire 12-Week Trainers with daily videos and meal schedule were completely free, and they were awesome. Every other month one of our sponsored athletes would release a new trainer that we all had to try.
Below are concepts into two of the popular trainers at that time by Kris Gethin & Jamie Eason. Eventually the top workout trainers were gated behind a pay-wall to add an additional stream of revenue.
The more popular workout trainers that were promoted the most also got their own apps released to the Apple & Android app stores.
This is the layout I designed the layout for the "View All" apps page that includes a popup modal when selecting an app.
If you made it this far I applaud you. You wouldn't believe this is a small fraction of the screens I had compiled. There's just so much fun work to show. Thanks for viewing.