Case Study : Boxed Homepage
Below you can see the progression of the Boxed Homepage from 2014 to present. Version 2 was launched in 2016 and Version 3 is launching soon. Our focus has changed from being an introduction to Boxed as a new concept to aiding users on their specific Boxed adventures. Homepage used to be the first touchpoint for many of our users, however recent trends show the majority of users are now entering our site through our product pages instead. The goal is to turn the homepage into more of a hub for returning users, featuring products they would like to see, while making it easier for our marketing and merchandising teams to fill in better and better content.
Every project starts with documentation. We completed an audit of the current system, reviewed documents from related features and completed a competitive and benchmark analysis. Our goal was to understand what our current problem areas were; the marketing team was having a difficult time creating assets with such a rigid structure, our scroll rate was underperforming due to repetition, and our visual standards were falling behind our competitors.
Paper sketches were done loosely at first, each sketch was an attempt to tell a different story through the way pieces could be presented to the user and get an idea of what could be reused and what could be introduced for a better experience.
Sketches became more focused as we zero’d in on our goals, take these sketches for examples of the ‘returning user’ version of the homepage. We wanted to fork the experience that brand new users would have, a person returning who has yet to order, and a person who has ordered - and really tailor the experience to those groups.
Sketches translated into wireframes which were adapted from sketches and added to. I love using the wireframing stage to get as many ideas out of my head as possible, its my preferred medium for rapid iteration, its not unusual to end up with 50 grayscale mockups.
The quick wireframes are discussed with the team, and we take the favorites, or ideas from the favorites and create more robust wireframes. At this stage we start to really consider responsive behavior. Developers are brought in to look at wireframes and give initial feedback on plans. Once final wireframes are approved, visual design is completed in tandem with the marketing designers.
The final prototype for responsive web (as of April 2019, this feature has yet to launch)