Creating a new FabFitFun.com

December 7, 2016   Ohsik Park

Stages of design process

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

Previous dashboard and 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.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *