Creating a new FabFitFun.com

Ohsik Park
Mar 28, 2017 · 4 min read

This article is to organize and share my thoughts on the process of building a brand new theme designed for the users on FabFitFun.com.

Goals

  • Build a platform to offer a better user experience, features and content
  • Improve usability on mobile (since more than 70%+ of traffic comes from mobile)
  • Build the FabFitFun brand throughout the site
  • Define our style for our digital products

We started the entire process with re-defining features and content on the member dashboard. We came up with a list of features and content from diverse researches, and started to place them on the dashboard page. After some sketching some mockups, we came up with a rough wireframe that shows where all features and content will be displayed on desktop and mobile devices.

How we work together

As the UX designer/Product designer at FabFitFun, I worked with product managers to make sure that we have covered all the features and content that users and business need and they were placed where they could serve our users in the most effective way. We had multiple meetings on each design mockup and prototype to make sure the new design would achieve all the goals we had set.

I spent time observing and getting feedback from other colleagues in the office. After I converted prototype to the actual web pages with working UI, I was able to walk around the office with an iPad to let my colleagues try it. Observing their behavior helped me to improve current stage of design.

Beside making sure that we have a good UI on new design, I wanted to make sure that it would convey our branding that we have been building for years. I started a design mock up based on the existing style guide that the art team created for all the creative products, including FabFitFun boxes, brochures, and graphics for social media and email. From that first mock up, we have been consistently improving the style to attract our users.

After I converted the final design to the web pages, our developers came in to implement all the backend functions. Our developers worked with product managers to make sure all the features were working properly in the new theme.

Defining our new style

Due to our lack of style guide/asset library for our digital products, I wanted create one that can be used in the future. I created a Github page and started documenting everything we had been using on the new design.

Check our our style guide

This made sure that all the great input from the art team and everyone in the office didn’t get lost. It will also comes in very handy for the future to scale the site while keeping the consistency.

Where we started

Old dashboard
Old my account page

Our new start

New dashboard
New my account page

On mobile?

I’m so glad that we could do this entire process from scratch and work with very talented people who are willing to build a better product that has it’s own personality. We hope that this new design will make your life easier when you are on FabFitFun.com. As we planned, this is the very first step for us to build a better place for people who use our website and we will consistently test and improve this as we go on.

Come check out the site at FabFitFun.com I would love to hear your thoughts on this. If you have any feedbacks or suggestions, please feel free to contact me at anytime. Your input will help us make our product better.


Originally published at www.ohsikpark.com.

Ohsik Park

Written by

Just a skater who likes to build beautiful products.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade