GGP Malls Website Directory

GGP is a retail real estate company and has a responsive website template for all of its 118 mall properties. GGP Purchases data that shows the brands and products sold at each store in their malls.

According to analytics, a significantly low number of users tapped the Brand & Product filters on the responsive website. I lead a team of three designers to discover why usage was so low. Did people even want this feature? When we learned they did, we redesigned the website directory to make this feature to more discoverable and intuitive.

In a span of four weeks, my team tested the existing website directory, wireframed, prototyped and tested each prototype until we found the ideal flow. Then we created hi-fidelity mockups and worked with the development team to reduce engineering time while still maintaining the optimal experience.

USABILITY TESTING

Testing the Existing Directory

We conducted user tests that primarily focused on the brand and product filters feature. We set out to discover why brand and product filters usage was so low, and then ways we could make them more intuitive. Seven participants were given tasks to complete on the mobile mall websites and the app related to the directory.

COMPETITIVE ANALYSIS

Finding Familiar Design Patterns

We searched the internet to find a UI pattern users were already familiar with that would allow us to integrate brands and products into the directories. Amazon and Esty start their users with a category such as “jewelry”. As the user selected the category, products were presented below.

WIREFRAMES

Design, Iteration and Testing

We wireframed, prototyped and then conducted “lunchroom” usability tests. With the test results, we iterated on the design and then tested again until we found a flow users understood.

Desktop Wireframes

Similar to Etsy and other e-commerce sites, we changed products to subcategories of store categories. On desktop, selecting a category displays stores within that category and the product filters are nested below.

Mobile Wireframes

On mobile, tapping a category will display stores within that category. Then a button with an option to filter further by products will appear above.

Brand & Product Search

Based on feedback from our user tests, we added brands and products into the directory search.

Lunchroom Testing Results

There was a positive reaction to the search box on both desktop and mobile. Users liked it because it eliminated the confusion of distinguishing between categories, products, and brands. It aligned closer to their expectation of how a product filter might work.

On desktop, users were delighted to stumble upon specific products that were presented to them after they selected a store category.

On mobile, participants used the search bar to look for something specific but were unsure what to expect under the products filter. After a few tests and iterations, we designed a version where a few product filters were exposed with an all products option. With this in place, participants understood how to use the product filters.

Product Categorization

We organized all the products into their parent categories. We manually filtered the data to make it accurate. We created flow diagrams for every category.

VISUAL DESIGN

Final Design

Each team member designed a different UI for the directory using the websites existing branding and patterns. We discussed each one, combined a few elements and created the final directory visuals.

CROSS-TEAM COLLABORATION

Reducing Development Time

From a development perspective, incorporating the brand and product filters into the directory was going to be very difficult. We worked closely with the development team to assure they understood the intent. We iterated on the design again to cut down development time while maintaining an optimal user experience.

Launch

The directory with the brand and product integration went live in July 2017.

View Live Site

GGP Malls Website Directory

GGP is a retail real estate company and has a responsive website template for all of its 118 mall properties. GGP Purchases data that shows the brands and products sold at each store in their malls.

In a span of four weeks, my team tested the existing website directory, wireframed, prototyped and tested each prototype until we found the ideal flow. Then we created hi-fidelity mockups and worked with the development team to reduce engineering time while still maintaining the optimal experience.

USABILITY TESTING

Testing the Existing Directory

COMPETITIVE ANALYSIS

Finding Familiar Design Patterns

We searched the internet to find a UI pattern users were already familiar with that would allow us to integrate brands and products into the directories. Amazon and Esty start their users with a category such as “jewelry”. As the user selected the category, products were presented below.

WIREFRAMES

Design, Iteration and Testing

We wireframed, prototyped and then conducted “lunchroom” usability tests. With the test results, we iterated on the design and then tested again until we found a flow users understood.

VISUAL DESIGN

Final Design

Each team member designed a different UI for the directory using the websites existing branding and patterns. We discussed each one, combined a few elements and created the final directory visuals.

CROSS-TEAM COLLABORATION

Reducing Development Time

Launch

The directory with the brand and product integration went live in July 2017.

© 2018 Jeff Kloosterman. All Rights Reserved

© 2018 Jeff Kloosterman. All Rights Reserved

© 2018 Jeff Kloosterman. All Rights Reserved