Categories
iSchool Portfolio

Redesign Proposal: LasPilitas.com

For my graduate-level information architecture course, I teamed up remotely with two classmates to complete a semester-long design proposal with several distinct components and deliverables, including content and business strategy, content inventory, user research plan and initial card sort task results, personas, and mock-ups or wireframes. We chose to focus on the website of the family-run California native plant nursery Las Pilitas, a treasure trove of information about gardening and nature that appears among the top Google search results for queries relevant to its somewhat niche interests, but suffers from navigation and wayfinding issues. Based on the publicly available SEO data we could find, we posited that a relatively high bounce rate reflected this poor navigation, meaning users landed on a particular page, such as a page about a popular plant family, but did not explore image galleries, information about specific varieties of the plant, advice about landscaping with these plants, and so on.

Screenshot of my early research notes

As students, my teammates and I balanced responsibilities in order to maximize learning, as the project was an opportunity to practice a variety of skills and gain experience with new tools. I created all the wireframes in Balsamiq; developed our content inventory process in Airtable; designed the report, personas, and and slides; performed competitive and background research; drew the final version of the site map diagram; and did light project management/tracking in a simple spreadsheet.

Screenshot of a portion of our project tracking spreadsheet

Based on content inventory and competitive research, we knew we needed to improve the site’s overall organization for more meaningful breadcrumbs to give visitors entering via web search a sense of where they’re at and what else they might explore. We expected this would also support effective “related” links on deep nodes like plant detail pages. Additionally, we wanted to explore modernizing the global navigation bar with a fat menu design. We tested a number of possible user flows on the existing site and noted pain points to accomplishing common user goals like making a purchase or finding plant information, which informed several smaller decisions in terms of buttons, tooltips, search interface, and media experience.

Since this was a student project with no client contact or budget for in-depth user research, we were limited in our scope. The wireframes, labels, and personas are all effectively a first iteration and would undoubtedly evolve over the course of doing real client-contracted work. In particular, I’d like to be able to see site analytics and search traffic data to more effectively identify important entry points and stress cases for visitors and customers. Additionally, the content library is enormous, far too many documents to cover for our project, but a thorough accounting of the site’s content and how it’s internally linked would be an important starting point for a site redesign.

User flow from entry point (plant group page) to a plant detail (product) page to shopping experience comparing existing experience with proposed redesign wireframes

Translating ideas and inspiration to a coherent mock-up requires creativity and a clear sense of your users and the product. We realized that, for as much as we could do on spec, our work would only really be actionable after we could address the limitations. Despite that, the team benefitted from the collaborative design process overall and enjoyed learning new tools, like Balsamiq, Lucidchart, and Airtable, to make design ideas tangible.

Categories
iSchool Portfolio

UX Evaluation & Prototyping: Yummly

For my graduate-level web usability course, I completed a solo project that explored a design problem and its possible solutions. I hypothesized that a key problem with recipe search experiences is the discoverability and ease of using filters so users could easily sift through recipes irrelevant to them based on ingredients, diet, style, or other factors. I focused on Yummly.com, a recipe search tool that already offers many of these filters, but could use improvements in some aspects of the user experience.

Compilation of annotated screenshots highlighting possible UX issues with top recipe search experiences
Screenshot of notes from informal user interviews collected via Instagram direct messages

Without a budget or resources for in-depth user research, I reached out to my personal network via Instagram to solicit feedback on recipe search experiences, including what they use to find recipes and their frustrations with recipe search. After identifying key user concerns, I performed competitive analysis of top recipe sites and identified their strengths and weaknesses. Based on this background research, I devised a list of potential user interface changes, taking heavy inspiration from Jenifer Tidwell’s Designing Interfaces patterns. These included a clear entry point the filter wizard to make this feature more prominent; adding modules for features results and suggested filters within the search results to enhance discovery and help users struggling with too many results; and using modal panels (popover windows) for filters, results, and source pages to address the problem with jumping users out of the search results without any way back. I also designed a “favorite site” feature that, in conjunction with an existing “saved recipes” function, could help personalize results for logged-in users.

Screenshot featuring multiple slides with prototype components

I faced significant challenges while working on this project, not least because it happened during Spring 2020 and COVID-19 restrictions severely limited my ability to perform prototype testing. Although the assignment only called for paper prototypes, at the time, I found it easier to use PowerPoint to develop a high-fidelity clickable prototype using screenshots, shapes/text, and embedded links to other slides to simulate clicking and scrolling. I had not yet become acquainted with professional wireframing tools and my instructor did not encourage remote user testing, so I could only test the experience with my partner.

Even this limited testing suggested a number of changes for a second iteration of the prototype and was an informative experience. Overall, as a first attempt at a solo user research and testing initiative, I learned quite a bit about how much I have to learn from other people–even people who are relatively “similar” to me–and that even relatively small-looking design iterations require thorough consideration. I also really enjoyed the process. Details of my process, findings, testing, and learning reflection can all be found in the linked report.

Categories
Portfolio Yahoo

Competitive UX & Content: Knowledge Graphs

As part of an ongoing competitor parity initiative, I collaborated with product owners, designers, engineers, and others in the Search Editorial team to create new “knowledge graph”-type experiences and enhance existing ones. I made use of internal databases and curated content sources as needed to meet user and business needs in a variety of areas, including TV, elections, and reference.

Planning and deployment of election-related search experiences to lead users to reliable information on commonly searched queries.

Ask

I was approached by search product teams working on distinct experiences around the then-upcoming 2016 U.S. primary election to offer feedback on proposed designs and organize editorial efforts in content curation and quality validation.

Process

  1. Led team effort to develop detailed list of potential features along with timeline, content source(s), and priority. Features based on team knowledge and real user search data/query patterns.
  2. Researched content sources for features that would be relevant in early 2016 (general politics, candidate research). Key requirements included high-quality, politically neutral data; structured in a way that was compatible with our content management platform; served in XML or JSON format or able to be extracted and converted to usable form.
  3. Joined product team meetings to give updates on content development and share feedback on whether design matched real content and user needs.
  4. Created and launched experiences on web search and provided support for other platforms using our work.

Result

By February 2016, we launched several features on web search:

  • Presidential candidate knowledge graph, incorporating party affiliation, donation data from OpenSecrets.org, polling data, and political office history.
  • Latest quotes with “truthfulness” rating from Politifact for all presidential candidates.
  • Candidate stances on 20+ key political issues extracted from ProCon.org with manually curated browse element to help search users explore candidate opinions.
  • Political cartoon of the day.

Additionally, detailed requirements for election results and future election experience ideas were documented.

Expanded on basic series-level profile to include better coverage of streaming availability at series, season, and episode levels.

Screenshot of search results for the TV series Survivor, featuring TV knowledge graph (right) and episode detail with streaming links (top left)
TV series knowledge graph with latest episodes and streaming links – clicks on the right bring up episode details and links to stream on the left.

https://search.yahoo.com/search?p=survivor (still live in some form, but without all the features noted here)
Screenshot of TV season search feature for the series Survivor, season 26, including description and episode list
Also created season details experience (no longer functional).

Ask

The Knowledge Graph team wanted to develop major feature improvements to entity profiles around People, Movies, and TV Series with competitor parity as a goal. As a TV enthusiast, I volunteered to support TV Series profile enhancements.

Process

Because I was responsible for the migration of the existing TV series experience into our content management platform, I was well-acquainted with the data elements and quality we already had and could create a clear list of requirements to replace and significantly improve. I was also able to compare this with elements found in design mocks created for the effort. Initially, the planned design did not account for the quality of images available in our database, so I was able to leverage my experience to strike a balance between design requirements and content realities. I was responsible for UX copy including data labels and headers.

After the experience had been live for a time, I learned that our Knowledge Graph database now included content I believed to be valuable to search users: streaming links. While competitors already offered this information, they focused on a la carte options and not popular subscription services, where many series could already be found. I sought and received buy-in from product owners to pursue major changes to the TV series experience.

Streaming links were stored at the episode level, not series or even season, but our keyword list was manually generated, but I found a scalable way to serve episode-level links without manually curating triggering lists covering thousands of individual episodes. I also used this data to identify whether a series could be found on the streaming sites Netflix, Hulu, and Amazon, and if so, to construct a series-level link.

The Knowledge Graph team also wanted to perform a quality audit of their data for several key topics. I served as the lead for TV Series, creating a finite list of elements to review and guidelines for assessing quality, moderating discussion, and authoring a report on the results.

Result

TV Series in web search results went from a very basic snapshot of title, synopsis, network, logo image, and cast to an interactive set of features including the same key base content as well as episodes, seasons, air dates, and streaming links.

While these solutions were not necessarily an ideal user experience, they allowed users to easily click and find information they might want without too much effort.

The results of the quality audit were used to develop systemic improvements to the way they merge and manage data sources.

Development of low-coverage search experiences for information about trees, food, planets, etc.

Screenshot of search result knowledge graph for a valley oak tree
Tree knowledge graph with growing information extracted from Calpoly’s website and images via Flickr Creative Commons APIs (no longer live)

Ask
Search leadership asked our editorial team to identify and develop “low hanging fruit” reference-type content as part of a competitive parity initiative. In some cases, we took content that had already been curated for standard search features and turned it into expanded right-side “Knowledge Graph”-style elements.

Process
For existing content, this was effectively a UX or template migration: the content was there, it just needed to be moved to a different format. Trees and food nutrition facts were two good examples. The only trick was that the images already curated weren’t large or high quality enough to serve as a large “hero”-type banner image, so I took advantage of Yahoo subsidiary, Flickr, which has a search-based API that let us serve only Creative Commons-licensed user images.

Result
Though these efforts did not represent high-volume queries, the effort did not go unnoticed by leadership, and it also served as an opportunity for less experienced team members to build their skills and flex creative muscle.