Luis Queral
Digital Product Design & Research
Selected Case Studies
1. Jump City Records
2. Goldman Sachs
3. Boston Logan Airport
4. The Mellon Foundation Intranet
5. The Pleasure Chest (nsfw)

Jump City Records

Jump City Records is an open-source record label run entirely by a computer program.

It's a concept exploring the potential future of media publishers, where content is generated through a master algorithm.

This system was designed to mimic and automate real patterns that I use in my own production workflow.

This includes things like sample selection, clip arrangement, track & album naming, and making album art. The diagram below provides a general overview of what happens when the script is run.

For this project, I was particularly interested in producing atmospheric and ambient work. I fed the script lots of field recordings and other sonic ephemora and used panning techniques to provide an immersive, stereophonic experience.

Here's an example of a generated work:

Here's an example of generated album art. It consists simply of a time stamp and a few randomly placed rectangles in varying colors.

If you'd like to learn a little more, check out the video below to hear a talk I gave on Jump City at Livestream HQ in Brooklyn!

This project was a collaboration with Michiel Overtoom. It was written in Python and uses SoX for audio manipulation and Cairo for graphics.

For more info and installation instructions, check out the Github page.

Goldman Sachs

For several years now, Postlight has had an ongoing design and engineering partnership with Goldman Sachs on a variety of internal projects.

We've been embedded within their design team, helping out with high level product strategy, user research, interface design, and interactive prototypes.

With patience and diligence, we crafted deeply thorough pieces of financial software for their most expert users. The foundation of this work would eventually impact over $30 billion dollars of transactions a month.

Below are some press snippets that give an inside look into both a platform we were heavily involved in, along with its impact in a larger, business context.

Goldman Sachs wants to become the Google of Wall Street

Marty Chavez, a top executive at Goldman Sachs, has outlined a radical future for the Wall Street bank…. "We're packaging everything we do, and actually, we're redesigning the whole company, around APIs."

Goldman Sachs’ big bet on the future of Wall Street

This story charts the growing pains of Marquee and explains how Goldman thinks it can one day serve as the pipes underpinning dozens of Wall Street startups or external-trading platforms.

Goldman Sachs to Give Out ‘Secret Sauce’

New open source platform is an attempt by Goldman to bolster its technology bona fides

Boston Logan Airport

While I was at Blenderbox, I co-led the UX of the new Boston Logan Airport, along with a network of websites for the Massachusetts Port Authority.

I contributed to the overall strategy, architecture, and led our user research sessions.

The previous site, while a charming example of the web's early days, fell short in providing users with the kind of functionality they expect and need.

The previous

One of the biggest problems was the lack of mobile support. This was important since access from mobile devices was quickly overtaking desktop users.

Accessibility was also a concern, as the site wasn’t properly configured for screen reader access.

We kicked off this project by spending some time in Boston getting to know both the Massport team and their customers better.

These meetings informed a set of policies that grounded our main design and engineering decisions.

  1. Easy to Find Content
    Leverage intelligent search and proper markup to make finding content easier, for humans and search engines.
  2. Accessible to All
    No person should struggle using any Massport websites from any perspective, particularly mobile devices.
  3. Quick to Load
    Customers often access the site in a hurry. Engineering success means delivering page content under 1 second.
  4. Always Up-to-Date
    Prioritize internal data feeds (particularly for flight status) over slower, third-party alternatives.

With these in mind, we then got to work on a navigation system for the site. This was informed by stakeholder and customer interviews.

An example of how our sitemapping work was translated into wireframes and the final visuals.

During our research, we found searching to be particularly useful to users of airport websites. We checked our search logs, found a few common patterns, and handled these predictable scenarios with tailored results.

Terminals, airlines and restauraunts are examples of common queries we found in our logs.

As we implemented our designs and ran usability tests, we ran into a problem with our mobile navigation system. We found a lack of engagement with the "hamburger" navigation to complete certain tasks.

On deeper pages, we added a pre-footer at the bottom of the page that duplicated the section navigation. In follow-up tests, nearly half of users used it, doubling task completion from 30% to 60%.

Homepages across all of the Massport properties were designed to be as straight-forward as possible.

Typography was used to be the main vehicle of communication. We refrained from using leading images as it violates our "Quick to Load" principle.

Where appropriate we included calls to action and surfaced commonly searched links.

Another highly trafficked page was Boston Logan's Flight Status page.

We aimed to build the fastest flight status page we could by live-updating flight information from an internal database via AJAX. Color was used sparingly to make sure alerts stood out.

We also built upon an existing interactive map, making it more legible and easier to navigate on a mobile device.

Mellon Foundation Intranet

While working at Blenderbox, I led the overall strategy and information architecture for the Mellon Foundation's corporate intranet.

Our redesign targeted a bloated, 10+ year old platform by consolidating inefficent workflows and making the site much easier to navigate and read.

The homepage after the redesign. Big shout out to Amy Hunt who led art direction and branding.

We began by interviewing stakeholders and poking around their existing intranet. This informed a framework of principles to guide our decision making.

  1. Don’t Add More Work
  2. The success of this new platform was hinged upon the reduction of effort spent on maintaining it.
  3. Make Things Easier to Find and Read
  4. Users should be able to find content within 5-10 seconds. An aggressive but necessary goal.
  5. Strengthen Mellon’s Brand from the Inside
  6. Since the intranet is the default homepage across all computers at the Foundation, let's lift morale with a fresh starting point.

We then did the unthinkable: We read the entire intranet.

It was the only way to get a true idea of the content we'd be working with. We also met with various administrators and users to determine the most obvious and expected way to architect this information.

A snippet from our sitemapping document. We only showed the most trafficked pages for demonstration, a fraction of the total pages.

We deleted, consolidated and renamed hundreds of pages and painstakingly explored every single piece of policy information and guideline.

In the end, we reduced the amount of pages by 1900% (from 800 to about 40), while still managing to say the same thing as before.

One of the key reasons for this dramatic reduction was the design of our longform policy template.

Taking inspiration from code documentation, we combined the densest sections of policy information into a single page. Users could search within sections to single out the content they are looking for using their browser search tool.

An example policy page. Note the page navigation on the right.

A modular set of content blocks allows administrators to easily write and update policy sections as they see fit, designed to handle a variety of different content scenarios.

Sections within policy pages could also be anchor-linked, making it easy for users to share policy information in context with other surrounding policies that might affect it.

All of this work greatly reduced the amount of time spent clicking around the legacy intranet, hoping to find the content you were looking for.

Finally, we also had a number of integrations with external systems throughout the intranet, avoiding duplicate work.

One example is a custom calendar to advertise important deadlines across the company. It automatically imports events from their existing Sharepoint calendar.

The Pleasure Chest

During my time at Blenderbox, I led the overall strategy, information architecture, and front-end development The Pleasure Chest, one of the oldest and most progressive, sex-positive adult retailers in America.

There is fierce competition in the sex-retailer space, but the elephant in the room is Amazon. Despite its convenience, Amazon provides an impersonal and sub-optimal experience for buying adult products.

We hypothesized that by targeting the pitfalls in the Amazon shopping experience we could attract and retain customers.

To set the foundation for our work, the team devised a set of policies called P.E.E.P:

  1. Present the Pleasure Chest as a high end retailed providing the most unique and educational shopping environment.
  2. Establish an intimate connection with visitors through sophisticated design and streamlined purchasing experience.
  3. Educate by providing trustworthy resources gathered by credible experts and offering free online and in-store workshops.
  4. Promote sex positivity by inspiring a personalized sexual journey.

We started by tackling their navigation. We looked at their analytics and search logs, focusing on what worked and what content was difficult to find.

Our mobile approach leveraged category images as an extra affordance of section comprehension.

Our desktop approach was to make navigation items related to shopping as the primary navigation. Any other items, like "Contact" or "About" could be found in the top-most utility navigation.

For the homepage,we led with an editorial, content-centric appraoch.

Strong visuals and a more focused art direction strengthened the initial perception of the brand from the sites main entry point.

To assist with various campaigns throughout the year, we built a skinning engine that updates colors across the entire site to match campaign photography and branding.

Product category and detail pages also were important differentiators from a big box online store experience.

The category pages have customizable headers that can include either a video or photo. These are used specifically to educate users about specific product categories.

Intricate and focused detail pages help tell the story of their products. We emphasized focused product imagery, comments, and suggested products and accessories.

We also included testimonials from the Pleasure Chest's network of subject-matter professionals to help educate potential customers.

For fun, we also prototyped an easter egg that turned a users phone into a vibrator.

Using the HTML5 API, we were able to access the vibrate feature of certain devices. It was designed to offer 4 preset vibration functions and allows the user to adjust the rate at which these presets run.

With this feature, we aimed to establish a closer relationship with customers by transforming the site into the most intimate product a customer could own.


Phew, that was a lot to read!

Thanks for visiting and I hope you enjoyed reading about my work.
Please feel free to get in touch if you’d like to connect.

~ Luis