The surprise box has become a new trend in the fashion industry. As a fashion lover and an Instagram&Youtube addict myself, I often ran into people’s posts about FabFitFun and their reviews about the products inside each secrete boxes. I was curious and went to the FabFunFit.com to learn more about it, but I realized some problems while using the website.
So I set out to explore features enhancements and improvements that would help the user have a better browsing experience.
Problem & Hypothesis
I really appreciate FabFitFun’s business model and the visual design of the products. However, I found it is very hard to find more information about the box, such as products included, customer review, press endorsement. I also found it very hard to go back to previous page since the navigation bar on the top of the website changes every time I click.
A way to make the website more accessible for new users would be redesigning the navigation bar and sequences of each section.
I researched the philosophy that guides FabFitFun. They deliver the season's best beauty, fashion, fitness, and lifestyle products (full-size, of course) straight to customers’ doorstep. I am confident that FabFitFun aims to attract more customers to subscribe to the service and stay in the FabFitFun community.
First, I created a provisional persona of a potential FabFitFun user based on online research and people around me who are using similar services. Since FabFitFun is about beauty and lifestyle products, I envision the ideal user is a social media user, care about the beauty industry and exploring the product for her use.
Job Story & Scenario
I crafted the following job story with the "Jobs to be done“ framework and scenarios.
Guerrilla Usability Testing
Based on my job story and the scenario, I conducted guerilla usability testing to test my hypothesis. I asked three people who never heard of FabFitFun but interested in the beauty industry to test the website. I asked the following questions:
1) If you are selecting a collection of quality beauty & lifestyle products, what information would you look for?
2) If you decided to subscribe to the FabFitFun box, how would you do that?
3) If you have questions about the FabFitFun box service, how would address your questions?
Identifying and Prioritizing Pain Points
According to user interviews, I categorized user's pain points with Affinity Mapping and prioritized them with 2x2 Matrix.
I realized that the inconsistency among different pages is the key cause of confusion in navigation. There is also some space for improvement in introducing the product and the box, and the user experience in the payment page.
1) create consistency among pages to reduce the learning cost of users
2) Re-order the main page to better address new user's questions of the product
Before committing to create hi-fi mockups, I did some sketched to explore and find the best solution to the pain points.
Prototyping and Validation
I used Adobe InDesign, Photoshop, Illustrator to creat hi-fi mockups and test the prototype with two new people. Below is the prototype I created.
# function pages Redesign
#Page Layout Redesign
I reordered the sections in the home page to address new users' doubts during their first visit, as follows.
1) what is this website? what is FabFitFun box?
2) what's in the box?
3) why would I want to but the box? what do others say about this product?
4) how does the entire process work?
5) what else is in my membership
6) yes! I want to subscribe. where can I do that?
The top navigation bar is designed to stay on the top of window when user scrolls down to ensure user can easily access "get the box" button.
Below are full page of old website(left) and re-designed home page(right), You can click to enlarge each image.
The bottom section of original website varies among Home page, Shop page, Blog Page, and TV page. It will remain consistent on every page re-designed website as follows.
In general, I enjoyed this re-design. I love FabFitFun and the idea of the seasonal selection of beauty and lifestyle products. I especially enjoy the graphic design of the box, a style that is also very popular in young social media users, which is why I decided to use the similar color scheme and graphic style in the redesign of the website as part of FabFitFun branding and products marketing. I think FabFitFun has wonderful content and that's why I did this re-design, hoping to help new visitors better explore FabFitFun.com and enjoy the surprise box.
In the re-design process, I realized the importance of user testing - I could lost in detail and be over-obsessed of my design and forget about the user experience. I used several UX models and did two rounds of user tests, and incorporated their feedback in the design. In order to have quick feedback and more iterations, the user pool is relatively small. Therefore the result I received could be biased. I would recommend to test the final product on a large group of people and see what other places of improvement will emerge.
Let me know what you think! I always look for the feedback!