Webpage Redesign: Location Search/Landing Page


 
Mockup Image_Laptop_1.jpg

About Client

Fitness franchise company with over 8,300 franchisees worldwide in 32 countries.

 

Project

Improve the experience for customers who are searching for locations on corporate website.

Role

UX/UI Designer

Project Goals

• Improve visibility of classes and instructors

• Modernize look and feel of search and location pages

• Invite the consumer to the in-class experience

 
 

My Design Process

Understand the Current experience

First I wanted to know the path the user takes to search a location and see what they see. So I created a screen flow of the current UI to examine and audit the experience.

 
 
JCLS_Current Screen Flow_Map Page.png

Research

Client provided research data to review, outlining customer base and company goals.

Doing competitive analysis of other sites and evaluating the user journey.

 
 

Mapping

Created a map of the entire website to understand the how the webpages are linked, and to see if there any potential impacts the updated designs may have on related pages.

Jazzercise Website Flow.png

Meeting with internal stakeholders

Getting feedback from sales and marketing leads on business goals and identified problems.

 

What are the Problems to solve?

Map Page

  • Location search experience is outdated

  • Available screen space is under utilized

  • Page is not responsive to smaller screen sizes

Jazz_Location Search Page.png

Location Page

  • Lack of details provided for location or instructors

  • Membership options have little visibility

  • Available screen space is under utilized

  • Page is not responsive to smaller screen sizes

Jazz_Facility Page_A.png

Design

Exploring different layouts

Came up with multiple concepts to explore content layout. In these there is focus on emphasizing several information hierarchies such as Map, location details, and search results.

Location Search_Concept Bundle_Layouts.png

Location page layouts that focus on heirarchy of location details, membership options, and schedule.

Facility Page_Concept Bundle_Layouts.png

Wireframes

Map Page Callouts.png
Facility Page_Callouts.png

Responsive Design

Map Page_Wireframes_Responsive Layouts.png
Facility Page_Mockups_Responsive Layouts.png
 
 

Hi-Fidelity Mockups

 
 
Map Page_Sidebar_List.png
Map Page_Sidebar_Location Details.png
Facility Page_DesktopHD.png
 
 
 

Outcome

Over the course of 8 weeks, updated versions of the Location Search and Landing page were designed. Final deliverables included PSD files, screen flows, and wireframes. The client is currently implementing these designs.

Throughout the project, a lot of ideas were considered for exploration, but due to strict time restraints, a design direction had to be quickly narrowed down. Thanks to a fast feedback loops and plenty of iterations the design met the project goals and business objectives.