OVERVIEW

Project Name: Rodeo Logistics Interactive Site Development

  • Objective: To create a responsive website empowering users to choose the locations for their animals and RVs on a live interactive map

CHALLENGES

  • Onboarding previous design research and development

  • Developing and designing for a relatively new interface format

MY ROLE

As the Senior Product Designer, I oversaw the research, design, and development of the interactive map, as well as the Open Stalls platform in total.

 

Problem Statement

  • The existing system of managing contestant flow and event logistics through basic spreadsheets and paper maps is inadequate for handling the volume and complexity of modern rodeo events. This method is outdated, error-prone, and inefficient, often leading to logistical challenges, participant dissatisfaction, and inaccuracies in event management.

 
 

Research - Discover

An example of some of the data tracked for events via Excel

Ethnographic research: onsite at the Fort Worth Stockyards

 
 
 

some of the systems and technical touchpoints

 

Summation of the problems inherent to the current system of data collection and publishing

I began by compiling and consuming the research that already existed, then began talking to stakeholders, SMEs, and users to get a sense for what the real problems were, and what was needed.

 

Synthesis - Define

Digesting the research findings, I began to clarify insights, and deduce opportunities.

Primary takeaways from initial user research: search and results users preferences

 

Ideation - Develop

Implementing the findings into viable, iterative designs through wireframes and mockups.

Initial wireframing

From the research it became apparent that an easy way to assist designers process would be surfacing relevant info as soon as possible. So looked at the possibility of passively surfacing two frequently sought features, ‘Recently Published’, and ‘Frequently Used’ below the search bar, before they even started the search.

Also played with other ways users could filter and refine content, such as ‘View Assets by Week’ and ‘Trending Editorials by Theme’.

I also looked at the possibility of surfacing other more relevant, personalized data to assist users more quickly. If users clicked on a thumbnail image, it would also surface a popup window to give them more info into the metadata related to that component.

 

After discussing of these ideas with IT and Business partners, we realized that some of these features would not be possible, at least for the MVP release, and so the UI evolved to accommodate this, as well as adding new, more powerful sorting and filtering options, in part to match the functionalities offered in the 3rd party CMS.

But wanted to keep the hover tooltip box that would give users a clearer insight into the metadata of the component.

Updated grid search return with more powerful search functionality

On-hover tooltip UI to offer better insights into component data

 

Subsequent user testing with the new designs led to informative insights. Specifically:

  • Filter and sort in the same search bar was more confusing than not

  • 'Recently Published’ was not a particularly important filter parameter for designers

  • Added a Sorting functionality

  • Users were often confused as to what the thumbnails were; so added a component tag in the image corner to clarify

  • What verbiage would make the most sense for users

Powerful search filtering and sorting, and ability to view results in a grid or column layout

 

Clean, simple UI; focused on selection of component type dropdown

More Info page - allowing a detailed description of all associated data and artifacts

 

Implementation - Deliver

Working directly with engineers and using Figma as a single source of truth, I delivered high-fi mockups and prototypes for final production, while continuing iterative updates.

Continued testing helped to refine the way we were presenting information, with more results per line, and shift to a more brand-centric color

Also refined the Filter to be distinct and secondary below the primary search bar - giving powerful options to users.

 

Addition of ‘Hubble’ Logo above (internally crowd-sourced)

Created a pop-over dialogue box screen - allowing users to search within the context of where they’re working.

 

Integration with Contentful - Next we had to figure out how to integrate with the 3rd party CMS Contentful.
We decided to try two variations: one CTA in the sidebar, and the other in-field, which would allow users to search any time they needed to add a component.

First round: Large solid-blue Hubble in-field CTA

After testing: more subtle, blue stroke and removed 3rd CTA

 
 

PROCESS

From the initial research, I developed a design that sought to address the 2 primary pain points:

  1. Designers working in Marketing and Advertising were recreating up to 30% of already created content;

  2. Because designers were building content and components on their personal computers, the performance of these elements was impossible to track or analyze.

Working with a 3-in-a-box team alongside a Product Manager and Lead Engineer, I performed additional, iterative research and concocted an MVP design that we were able to continue refining.

In order to deliver a high-performing design, I made sure to do iterative usability research to continually refine and improve the results

Though the design continued taking shape, we ran into a snag when we were informed that the 3rd party CMS for which we were building the search platform and planned to integrate with, would not be able to prioritize any of the changes we needed.

This required some quick, out of the box thinking. So rather than the ‘Hubble’ platform existing on its own page, we decided to add sidebar and in-field CTAs allowing users to access the search directly from the content creation screen in Contentful.

Luckily this tested incredibly well, and went into production soon after, as I continued to test and refine the design.

TAKEAWAYS

This was an awesome experience for me to work within a new framework much more closely with dev teams and my PM, and get some more hands-on UI design skills.

Upon completion, I had:

  • Led the design of a powerful content search platform that would allow users to find previously created content, and allow managers to track the performance of pages as well as individual pieces of content;

  • Successfully worked within a new context of product development, much more closely with developers;

  • With more time, I would:

  • continue to refine the design to suit novel contexts as we continued to scale to other parts of the company;

  • use the newly obtained performance data to refine the design and concepting;

  • deepen my understanding of the process of designing within this new system.

 

Next Project: