Member Spotlight
FabFitFun - Product Design Intern
Summary:
One of the core value propositions and differentiating factors of FabFitFun is the community of members you can connect with after signing up. In past tests, we had also noticed that potential customers on the signup page gravitated to sections that featured products. For this reason, the Product Managers at FabFitFun decided that a member spotlight section should be included on the main "Get The Box" signup page (the main page upon which users buy the subscription). This member spotlight section would feature profiles of existing FabFitFun members along with their favorite products.
My Role
This project was assigned to me as soon as I joined FabFitFun in June 2019, which at the time seemed like a heavy task for a newcomer in the industry like me. However, looking back, this project was by far the single project that I learned the most from. I started off working on this project from a purely UI-perspective and eventually progressed into the backend side of the project. This involved coding the member spotlight in HTML, CSS, and Javascript so that it could run on FabFitFun’s internal A/B testing tool.
Objective
Design and code a section on the "Get The Box" Signup Page that highlights the member experience with the intent of increasing subscription conversion rate.
Details
1.Research: I tried to gather as much information as I could about the project. This meant looking through related tickets and familiarizing myself with any assets and information about the members that we already had.
2. Wireframing: After my research was complete, I started to sketch a basic paper wireframe for the section, while keeping in mind the various assets and pieces of information that need to be integrated into the section. Information Organization proved to be more difficult than I thought, since I wanted to create a final product that would be clear and uncluttered.
3. Wireframing (digital): After I completed the paper wireframe, I proceeded to make a wireframe using LucidChart.
4. Prototyping: Now came the most difficult task at hand -- creating the high-fidelity prototype of the section. Entering the internship, although I had a significant amount of experience using Figma and Adobe XD, I had never learned or used Sketch. However, I was able to learn how to use Sketch very quickly and then apply the various tools and functions of this program within my project in order to most efficiently display the information.
5. Review: After I created the High Fidelity Prototype, I asked my peers for their feedback. I was able to receive a lot of constructive criticism from my peers, which allowed me to think a lot more out of the box in terms of design. This criticism is what fueled me to make meticulous design decisions. For example, one of the suggestions I received was to make the section appear a lot less busy in order to increase readability. Looking at my design, I realized that my layout did not utilize the space I was given for the section as every element was grouped towards the middle. This criticism fueled me to properly space out all the elements on the page so that there was a distinct visual hierarchy. After completing a redesign based off the critique of my peers, I redesigned the section and presented the concept to my peers yet again. This time, there were a lot of changes and the project really seemed to be coming together.
6. Coding: In the following Sprint Meeting, I asked my boss if I could follow my design to the finish, which meant that I would be coding my design in HTML & Javascript and then integrating it onto the "Get The Box" page through A/B Testing.Through this process I realized how important it is to design meticulously. Every element of the design needs to account for engineering restrictions as well.
7. Implementation: After I finished coding the section, I worked with a Product Manager to implement the page in the company's A/B testing tool. By testing it through our A/B testing system, we would be able to determine whether my design had a significant impact on the subscription conversion rate.
Outcome
Served this section to 285,375 users via A/B tests with the intent of increasing subscribers.
