For the longest time, the WeightWatchers.com homepage had been stuck in the very distant past. From a design and user experience standpoint, the site was not keeping pace with the industry and had started to become a bit of a sore spot for a company that was spending a large amount of money on image and branding. However, the WeightWatchers.com homepage is and continues to be a highly converting, very successful page. Therefore, not all stakeholders felt the formula needed to be re-engineered.
"Progress is a nice word. But change is its motivator. And change has its enemies." Robert Kennedy
In order to drum up fresh ideas for the new homepage, the creative department at Weight Watchers decided to hold a pitch contest. Teams of 3 to 4 from a mix of disciplines (design, IA, & front-end developers) would each dissect the current homepage, re-strategize the content, user experience and visual design, and pitch to a group of senior executives a new vision for WeightWatchers.com. The timeline for this exercise was 1 week.
Phase 1: Problem Dissection
To start, let's take a look at the problem, the WeightWatchers.com of the past:
It's important to note what our user's expectations are when they visit WeightWatchers.com. In general, they have the following questions:
- How do I learn more about the plan?
- How do I sign up?
- What are the different offers and products?
In our analysis, we found the high-level problems with the current homepage to be:
- Information overload
- Duplicative offer blocks
- No information hierarchy
- No color hierarchy or theory
- No division between editorial content and products
- No clear overview of Weight Watchers
Phase 2: Research
Whenever I start a project, one of my initial exercises is research. I look for best practices and attempt to locate design consistencies among the best of breed websites.
For this project, we looked at the following:
So what best practices did we find?
- 960px width
- 4 column layout
- Large masthead
- Single, primary call to action “get started”, which drives to sign-up
- Limited primary navigation
- Simple video introduction
Of particular interest to us was the idea of a simple video introduction. This practice is widely utilized among startups, who are communicating their mission statement to never-users who have no previous exposure to the brand or product offering. However, we felt that this practice should also be utilized by large, established brands, because as companies expand to multiple product lines and divisions, you frequently find an increase in user confusion as a result of information overload.
For WeightWatchers.com, this translated into "Weight Watchers in 60 Seconds", a video designed to provide a quick overview of Weight Watchers, to give never-members an idea of what we're all about.
Phase 3: Sketching
After conducting our best-practices research, it became clear which path to follow. A 960px wide site, utilizing a full-width masthead and a 4 column layout was the right approach. Below is a quick wireframe:
We particularly liked this layout because it followed a 4 column grid, which gave us 4 "buckets" to display our most important initiatives, such as Lose For Good, our annual drive for charity. In addition, in adapting a wider layout, we gained 200px which gave our content more room to spread out.
Phase 4: Design
In translating our wireframes to visual design, we added an offer block to the right hand side of the masthead, so we could continue to upsell important discounts, such as "Join for FREE".
The full-width masthead provided the perfect canvas for showcasing the stunning Jennifer Hudson:
In the end, our pitch won the competition. We attribute our win to a complete disregard for the rules (for instance, the judges stipulated that we do not touch the primary navigation), and also our application of best practices.
Phase 5: Final Result
Below is the WeightWatchers.com homepage in it's final form. We are exceedingly pleased with the end result, which propels the brand to the future through a current, more modern aesthetic.