WW International 'Studio Finder'

Cover+Image+showing+various+design+impressions+of+the+WW+Studio+Finder.png

After WW’s bespoke re-brand, the executive committee decided to go beyond a traditional re-skin approach. Major improvements have been made across the platform, including a new, simple and modernized version of it’s Studio Finder tool. This location search tool allows users, or members, to search for studio locations that host the infamous WW “Meetings”.

The team assigned to this project consisted of a Product Owner, a Product Manager, various CMS engineers for front- such as back-end work and a designer role, which I had the pleasure to fill.

  • Project Start: August 2018

  • Project Launch: 9/2018 soft version, 12/2018 full version

  • Back-end: Drupal / Various CMS add ons for different markets


Original version

Image+of+the+original+version+of+the+studio+finder.jpeg

pre.png

Pre-filter

Allows users to determine the area they want to filter by selecting locations in a breadcrumb-style. These screens are shown upon entering prior to the standard entering point. In common practice, the user accesses the studio locations through the homepage which leads to a ZIP code filter. This instance lets users filter for locations without entering a ZIP code. Designed to be responsive on all devices.

Flow: Country > State > City > Location


ZIP.png

Studio Finder Splash

With this screen being the main entrance point of the flow, it presented the opportunity to explain what meetings are and possibly convert prospect members to join. Aside from the tool solely helping current members to find a meeting or location.

Copy, imagery and overall content was controlled by the content team and presented itself as a fluid object that changed with campaigns or seasons.


3.png

Location Search Results

Upon submitting their requested ZIP code in the prior screen, the CMS serves the user a list of search results, filtering options, an interactive map and most importantly more information on the locations.

A closer look at the tool filters, which is designed to be ADA compliant like the rest of the website;

GIF+Animated+example+of+the+filters.gif

Image+of+the+Studio+Details+Design.png

Studio Details

The final step of the funnel is the Studio Details page which provides valuable information, like the studio schedule, for the user. Depending on what the studio managers inputs into the backend platform (Varies depending on country/local), different “Widget Style” elements appear on the page providing the information. This makes each studio details unique.

The information “Widgets” included a studio schedule, operating hours, coaches & qualifications, studio updates such as weather closures, Notes and more.


Additional information on the project

  1. The Studio Finder tool is 100% ADA compliant and has been proofed by a compliance team.

  2. The tool was designed to work internationally for all markets and various backend CMS.

  3. The original design was developed within approximately 1 Month.

Previous
Previous

WW International 'Account Recovery' Native