```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP776vl5uo1SteqJnzttgSrhiijk1%2F1L5IJmlGYhCDfbOa2uOe%2Ff4db0bf1-b978-4615-a6d8-a108169244b4.png?alt=media&token=15602585-243d-457c-8be5-ca7020eae190","id":"f4db0bf1-b978-4615-a6d8-a108169244b4","width":4800,"height":2400,"filename":"Cover.png","type":"image/png","caption":"","border":true}]}
```

### Background

PYRAMID planned to expand their online product offerings by up to 80 percent in Q1 2022 through a merchandise partnership with Printful. Merch is a novel product category for PYRAMID — having only sold the occasional T-shirt in person previously — which would additional space in navigation to accommodate it.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP776vl5uo1SteqJnzttgSrhiijk1%2F1L5IJmlGYhCDfbOa2uOe%2Fe925d276-5dac-417f-96a5-5de9e45a7a42.png?alt=media&token=87fcdc11-d8eb-4972-9898-cab2f8d02d53","id":"e925d276-5dac-417f-96a5-5de9e45a7a42","width":4800,"height":3200,"filename":"ProductLineGraph.png","type":"image/png","caption":"","border":false}]}
```

Coincidentally, our product roadmap contained a major website update, Ochre 3.0, scheduled to release in late December. This update added support for Shopify's Online Store 2.0, boasting improvements in speed, customization and accessibility. It also brought the site into full compliance with Ochre, PYRAMID's design system.

Ochre 3.0 centers around building foundations to compete in a future of hybrid fitness services. Information Architecture is incredible important we categorize, label, and arrange our pages and products determines how easily customers can complete their jobs to be done.

The previous navigation arrangement was the result of an open card sorting study that I had conducted in 2018. Due to membership churn and new product introductions, those findings were no longer valid and new research needed to be done.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP776vl5uo1SteqJnzttgSrhiijk1%2F1L5IJmlGYhCDfbOa2uOe%2F3c26ccf6-e7be-4971-88c7-af035b897c69.png?alt=media&token=ea1b7227-5105-4595-8698-7d71c326f0c5","id":"3c26ccf6-e7be-4971-88c7-af035b897c69","width":4800,"height":3200,"filename":"FlowDiagram.png","type":"image/png","caption":"","border":false}]}
```

### Planning

To definine the problem space, I ran a stakeholder workshop to define:

* Business goals relevant to the project,

* Learning objectives - information that would help to achieve those goals.

From there, I converted those methods into testable research questions.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP776vl5uo1SteqJnzttgSrhiijk1%2F1L5IJmlGYhCDfbOa2uOe%2F1de55641-d506-4a3b-ab74-36b523bd76b2.png?alt=media&token=2ac8b85a-e7e3-4a39-aa96-a6b12c802c4a","id":"1de55641-d506-4a3b-ab74-36b523bd76b2","width":4800,"height":3200,"filename":"PlanningChart.png","type":"image/png","caption":"Takeaways from the initial stakeholder meeting","border":false}]}
```

Before selecting a method, I wanted to take advantage of the opportunity explore Information Architecture research methods. I read [this article from UX Matters](https://www.uxmatters.com/mt/archives/2011/06/comparing-user-research-methods-for-information-architecture.php) on IA methods, and selected chapters from [Peter Morville and Louis Rosenfeld's book](https://www.amazon.com/Information-Architecture-Beyond-Louis-Rosenfeld/dp/1491911689/ref=pd_lpo_1?pd_rd_i=1491911689&psc=1) on IA for the web. Initially, I expected to approach these research quesitons with a tree test, followed by a generative method in the event of disagreement. Instead, I found the approach of using a hybrid card sorting method to be a more efficent way of answering generative and evaluative questions at once.

Before executing research, I shared a Notion document with my stakeholders containing a brief background, a kanban board of research methods to indicate progress, and a section for scripts and deliverables. My goal when writing research plan is to provide stakeholders a skim-able overview of what I'm doing and why I'm doing it. More depth can be saved for the reporting process.

### Methodology

To reach a correlation coefficient of 0.95 in a card sorting exercise, I followed Tullis and Wood's recommend sample size of 30 participants — all members who had visited PYRAMID's website in the past month. Taking advantage of my location, I recruited participants as they entered for their workouts, having them complete the study when they finished in the club's lounge.

Participants were presented a two-column FigJam space, pictured below. Participants dragged cards representing products from the left column into the appropriate row representing its navigation category. If participants felt that a card did not match any category, they could place the card into a miscellaneous category at the bottom of the column, where they could suggest a better navigation label.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP776vl5uo1SteqJnzttgSrhiijk1%2F1L5IJmlGYhCDfbOa2uOe%2F84adc238-6476-43b2-b788-ceeb5715bf4e.png?alt=media&token=73d1133a-a1e6-4dbd-b0d2-b163658abf44","id":"84adc238-6476-43b2-b788-ceeb5715bf4e","width":4800,"height":3200,"filename":"FigJamBoard.png","type":"image/png","caption":"Unsorted board in FigJam","border":true}]}
```

The navigation element Karate was omitted as a row from this exercise to evaluate whether participants placed Keystone Karate Memberships in Sports or Memberships. A consensus among participants would warrant us removing Karate as a navigation category, given its relatively narrow scope.

On average, each participant took about five minutes to complete the exercise. When they finished, I gave participants the option to explain any choices or share anything that they found confusing. Importantly, such feedback led to our offering participants a mouse in later exercises, after a participant shared that they struggled to use a trackpad.

### Synthesis & Analysis

To understand the relationship between arrangements, I placed each product on the first column of an Google Sheet, and each product category on the first row. I calculated the frequency of each product appeared in each category, and calculated its relative frequency. When evaluating the relative frequencies, products that lacked a 0.7 frequency in one category were considered to be out-of-place. From there, I was able extrapolate a few relationships about the previous navigation structure:

* **Sports is too broad of a category to offer a strong information scent.** The previous navigation structure used Sports as a catchall for Sports Rentals, Sports Training, and Sports Camps. Participants disagreed on whether to place Sports Training into Sports or Training, suggesting that Sports as a category lacks information scent.

* **Users do not classify Karate as a sport.** Without a self-titled parent category, participants disagreed with one another over whether to place Karate as a sports product or as a membership. This, on top of our Karate program being offered by an outside company, suggests that Karate should occupy its own category.

* **The final word in a product title determines its placement.** Items with the strongest information scent included Individual Fitness Memberships and Family Fitness Memberships, located in the Memberships category.

### Ideation

Before determining how navigation elements would be placed, I created an affinity diagram to categorize products in line with new findings. Since the amount of categories warrented a two-tiered navigation bar, I worked with stakeholders to identify which categories belonged in primary vs. secondary navigation.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP776vl5uo1SteqJnzttgSrhiijk1%2F1L5IJmlGYhCDfbOa2uOe%2Fd1f67591-a605-4bf8-a973-d8e5f3c610e1.png?alt=media&token=7697c370-147b-4012-b8eb-9e9c4b4df131","id":"d1f67591-a605-4bf8-a973-d8e5f3c610e1","width":4800,"height":3200,"filename":"AffinityDiagram.png","type":"image/png","caption":"","border":false}]}
```

I envisioned a static secondary navigation sat on top of a sticky primary navbar. Hierarchy would also be expressed with color/contrast and font size.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FP776vl5uo1SteqJnzttgSrhiijk1%2F1L5IJmlGYhCDfbOa2uOe%2Fcc7a8da8-c320-4feb-9760-9dcf49ff8cb9.png?alt=media&token=6ebf21d8-13c3-4b62-b76a-63b10df6a638","id":"cc7a8da8-c320-4feb-9760-9dcf49ff8cb9","width":4800,"height":3200,"filename":"Wireframe.png","type":"image/png","caption":"","border":false}]}
```

### Final Product

I developed the final product using Liquid and pure CSS for performance. The final product shipped in Ochre 3.0 on December 31st, 2021.

Case Study

Excited to be joining Bright Horizons College Coach this March!

UX Designer

A hybrid card sorting study revealed a better approach to structuring products.

Information Architecture Research

Aligning all of PYRAMID's signage, with special attention to directional signage, with the company's design system.

Wayfinding Designs

Research and design of the first major facility update since 2012. The space provides a dedicated space for warming-up and self-care, which members had requested.

Stretching & Mobility Studio

Systematizing the design of digital and in-club experience as part of a multi-year design democratization effort. We prioritized accessible resources for developers (components), designers (Figma libraries & docs), and non-tech employees (Google Workspace templates).

Ochre Design System

Now-defunct platform for members to access at-home fitness services like personal training, group fitness classes, and community fitness challenges during COVID-19 lockdowns.

PYRAMID (At Home)

New e-commerce website powered by Shopify that prioritized single-purchase, extended memberships as part of business strategy. Increased sales over 300% in the first year, and growth has continued since.

Ochre 2.0

A reservation system built on Calendly to manage fitness class capacity during COVID-19.

RSVP

Foundational design changes to the club's brand and website as the result of a content audit and heuristic analysis. Improved speed, accessibility, and information architecture.

Ochre 1.0

A 6-month project to identify user attributes and needs through surveys, interviews, workshops, and implicit methods.

Generative Research

Group Fitness Class Brand Identity

Improved accessibility, information architecture, and visual + interaction design of the school system's website, as part of parent outreach efforts.

Rebrand + Website Update

Used Next.js and Tailwind CSS to build a showcase of some professional projects during my last job hunt. Now, I'm reimagining it as a place to publish writing.

Nick Mayernik

2022