While New York has always been known for its service journalism, we needed to modernize our model for storing, sorting, and displaying data throughout our digital ecosystem. We tackled our restaurant and bar listings first since they were one of the last digital products on our legacy publishing platform. I worked on user flows, UI solutions, wireframes, and prototypes. The project launched at the end of 2018 and has already increased reader engagement with our food content by 41% and shown a 27x increase in search tool use.
The Team
I was the product designer on the team, working with a Senior Product Designer, Product Manager, and several engineers (who were both in office and remote). The core team collaborated daily at standups and sprint planning, and we met weekly with the Chief Creative Officer for feedback or to work through any blockers. Despite my coworker’s seniority, my institutional knowledge of the company meant that I was often the point person for stakeholder check-ins. While I helped gather competitive research and provided recommendations for the stand-alone listing page, my primary focus was on the search experience. When the Senior Product Designer went on maternity leave mid project, I led all remaining design needs.
Context & Goals
With advances in Google search results and the saturation of the listings market, the company was seeing a steady decline in consumer engagement. In August of 2012, there were 1.6 million visits per month to listings. By 2018, that number had dropped to around 250K. There was little benefit to maintaining such a comprehensive group of listings (at the time we were supporting over 6,000 restaurants and bars), but our authority was still quite valuable to our brand and readers. Basic info (hours, location, contact info etc) is easy to come by; meaningful, trusted insights into experiences, less so.
With all of this in mind, the business decided to lean into the idea of recommendations as the focus for the next phase of listings. The project scope consisted of three central design tasks: a stand-alone listing page design, an improved search experience, and a section front for our food and drink content.
The Research
To begin, I took part in several discussions with the editorial and product teams about the current state of our listings, what they meant to the brand, and how we believed we could make them better. It was important for me understand what success looked like from the beginning. I worked with the Senior Product Designer and Product Manager to define requirements for the search experience.
First and foremost, don’t make anything worse. With such poor numbers already, it was essential that getting rid of so many listings didn't affect our SEO equity and therefore our company revenue.
Upgrade the underlying tech. Modernize the platform by moving the tool into our latest CMS and incorporating Elastic Swiftype to handle data storage and output.
Go where our users are. With over 70% of site traffic coming from mobile, we need a mobile-first design approach.
Emphasize that we are knowledgable about New York’s food and bar scene. Features such as autocomplete and trending show we know what what the user is looking for even if she doesn’t.
Always provide clarity. Our categorization of filters must be user friendly and the UI should help illustrate why certain filters narrow and others expand results.
Next I performed a competitive analysis. With the plethora of recommendation apps out there, it was helpful to understand industry trends and gain insight from what was already being done. I collated my findings and any questions to consider before I began sketching (shared below).
Noticed friction between searching and seeing results - consider avoiding additional slideout, though nice to see some of the filter.
High quality imagery would differentiate us.
Display all selected filters for maximum clarity.
Rating system is helpful to emphasize authority.
Which filters should increase results and which should limit?
How to distinguish between restaurants and bars?
What will a null state look like?
I also asked our data team for the most common search terms for a rough idea of what people were looking for. Terms that were seen frequently factored into how we categorized our filters.
Design & Testing
At its most simplistic, this tool should help a user to find a restaurant through either a text search or filtering experience. Beginning with mobile, I mapped out those user flows and noted what information would be needed on each screen.
Then I did additional investigation on the filtering interactions. Specifically, I wanted to limit the disruption between selecting a filter and updating the list of results by trying to keep both states within a single screen. The solution I landed on was a sliding tray that opened (and closed) as you engaged with it.
With the mobile UI in a good place, I began translating the decisions I had already made to the desktop layout. With more space we didn’t need to stack elements to highlight that the results were dynamically updating each time a new filter was applied. I felt that to accomplish the same seamless transition between search and results, we could organize the filters along the left side rail of the page. I mocked up several options to discuss with the larger team.
The company has a long standing ethos that mobile should flow fluidly into desktop and vice versa. While I normally agree with this position - and understand the development lift of managing two distinct sets of code - in this particular situation I didn’t believe it provided the best user experience. After much debate, the Head of Product and the Chief Creative Officer pushed to move forward with an interface that more closely matched the mobile experience.
As the layout and structure of the search experience was coming together, it was time to create a prototype and hear from our users. With limited company resources for user testing, we went around the office with a list of survey questions and spoke to five coworkers about the design. We were able to validate that users understood our grouping types and filtered by neighborhood and cuisine first. Pain points included confusion over scrollability of filters and results list. Lastly, users requested more restaurant info be displayed within the autocomplete dropdown.
I continued to refine the designs based on the feedback I’d received from user interviews and explored interactions for the more complex elements - handling nested filters, displaying selected filters, and fitting in trending search terms. The final task was applying visual elements that felt in line with the New York brand as a whole and integrated seamlessly with the listing pages and section front. It was helpful to bring in the Art Director for feedback since she had just finished work on a New York homepage redesign.
The Outcome
The new search experience is a far superior product that keeps user priorities at the forefront. It is fully responsive, which is particularly amazing since we didn’t have any mobile search before. With the launch of this search tool, updated stand-alone listing pages, and a section front for our food and drink coverage, we have finally migrated all data off our legacy system. Furthermore, the company is now better setup to grow our e-commerce product database and sitewide search capabilities. While the number of listing pages decreased by about 86%, our user traffic only went down 7%. And Google referrals are up by 5% month over month which is excellent for our search traffic.
