SCRUFF — Information Architecture Redesign

// Overview

Identifying the Opportunities

The Problem. The most common SCRUFF complaint on the app store and in user interviews was persistent: "This app is too confusing." Metrics indicated that many deep features were never used — signaling a clear need for simplification.

The Goal. Evaluate and redesign the information architecture based on high-value flow prioritization. Streamline high-value interactions so that table-stakes functionalities are met by users with ease.

// 01 — Research

Research and activities

Buy-in is required by stakeholders. Our CEO is the primary engineer on these platforms — convincing him to embark on a major change initiative is a big undertaking.

// Feature Analysis

	Grindr	Bumble	Tinder	Chappy	Hinge	Facebook	Instagram	SCRUFF
In Primary Nav
Messages	✕	✕	✕	✕	✕	✕	✕	✕
Profile	(on home)	✕	✕	✕	✕	(on home)	✕
Grid (or match)	✕	✕	✕	✕	✕	✕		✕
Favorites	✕				✕		✕	✕
Event								✕
Venture								✕
Explore	✕						✕	✕
Mode Change		✕		✕			✕	✕ (×3)
Menu						✕		✕
Search							✕	✕
Woofs								✕
Unlocks								✕
Another Match								✕
Post							✕ (×2)
Feature Count	4	3	3	4	4	5	8	14

This home screen nav analysis shows objectively that SCRUFF's 14 nav buttons on the home screen is not common or best practice. Cognitive load on the users is comparatively very high.

// 02 — Team Involvement

Card sorting to align the team

I conducted an open card sorting exercise to identify sentiment of the team around how high-value elements should be organized. This served to align everyone internally on next steps while gathering sorting insight.

Card sorting exercise — team members grouping navigation elements

All communication elements were grouped together by 5 of 8 people

Profile area housed photo albums and settings by 6 of 8 people

"Find people" elements were grouped together by all 8 people

// 03 — IA Visualization

Visualizing the I.A.

Creating a flow visualization of the current state of SCRUFF helped organize all the high-level nav and sub-features while serving the purpose of aligning executive management with major changes. It's evident in the first image that most navigation features sit under the 'browse' tab.

// Simple Sitemap Visualization

◫

Current Sitemap

This visualization shows that many of the elements of the app are bundled under an unrelated umbrella screen. In Browse (the home screen) there are 9 primary flow nav options.

◫

Proposed Sitemap

With presentation of the modified sitemap, buy-in from C-level management was achieved. The redistribution of high-value nav elements into new buckets was the confirmed direction forward.

Interaction mapping

Interaction mapping for change

Moving into the design phase I used Miro to get a deeper sense of the navs. The sub-navigations and the types of interactions mapped out here helped inform how I could approach a new design system.

This helped answer questions about the types of interactions happening beneath the individual navigations.

// Key IA Insight

By surfacing all the nested interactions visually, it became undeniable that the current nav structure required users to hold too much mental context. The redesign could consolidate without removing a single feature.

// 04 — User Testing

A user test for a lofi prototype

A key factor that needed to be assessed was findability of the high-value flows for two primary user groups: legacy users and new users. Does this work for Android and iOS users?

Low-fidelity IA prototype — diagonal wireframe layout

I wrote a user test with essential baseline questions that needed to be answered in usertesting.com. I then collaborated with our researcher to ensure the test incorporated all best practices in question writing. Ex: Were the questions leading? Do we use the standard 5 pt scale?

Using the newly established information architecture I created a low-fi design and prototype to test on users. I used existing visual language to ground the UI so the transition would be seamless and understandable for our legacy users on both Android and iOS.

The HiG and Material Design guidelines were referenced frequently.

Information Architecture Prototype →

// 05 — High Fidelity

Selling the high def design

Once insights were gathered from the user tests, the pain points that most occurred for the navigation process were addressed for design. The successes stood as another selling point to executive leadership.

After some minor UI preference tests I redesigned the pain point areas and upped the fidelity for production.

// Streamlining the Messaging Experience

SCRUFF messaging redesign — before and after comparison

// Profile Editor Redesign

◫

Settings / Device

Before

Profile Editor
redesign

◫

New Profile Editor

After

// 06 — Design Handoff

Shipping development-ready design

Understanding how to deliver development-ready design is a big part of working at SCRUFF. I created tickets that incorporated design and wrote out the corresponding tickets using Gherkin Language.

Each design deliverable was paired with a Gherkin-formatted ticket that engineers could action directly — no ambiguity, no back-and-forth. This became standard practice across the design team and dramatically reduced revision cycles.

// Why Gherkin

Gherkin forces precision. Writing Given / When / Then scenarios means the designer has to fully specify every state, every edge case, and every expected outcome before handing off. If you can't write the scenario, the design isn't finished.

// An example

// Scenario: user is changing profile element Given I have tapped the profile nav icon And am in the profile area When I tap the "edit profile" Then the standard legacy profile editor opens

// 07 — What I Learned

What did I learn?

3 of 10 Roadmap Steps Released to Beta

8 Participants in Card Sorting Exercise

2 User Groups Tested (Legacy & New)

14→5 Primary Nav Reductions Proposed

// The Outcome

The first 3 major steps (of 10) in the simplification roadmap were released to beta and were met with mostly positive feedback — which was a first. There is huge value in usertesting.com when doing major Information Architecture shifts. It gave great direction and ensured success.

// What Surprised Me

The internal card sort was just as valuable as the external user test. Getting the team aligned on a shared mental model before talking to users meant the research questions were sharper and the results more actionable.

// The Principle that Guided This

Stakeholder buy-in is a design problem. The same skills used to simplify a nav — clear hierarchy, reducing cognitive load, evidence over assumption — apply directly to making the case for change to a skeptical executive.