Tag: information architecture

Categories
Consulting & Freelance Portfolio

Small Ecommerce Website

McStuffiesPhD.com homepage screenshot

Ask

McStuffies, PhD is a crafter who sells their handmade items at craft fairs and online. Their main offerings are crochet stuffed animals and dolls, but more recently they’ve branched out into buttons, stickers, and other custom designed items.

The client had been using Square for both payments and an online storefront, but was dissatisfied with aspects of the inventory management and tagging offered by that platform. They purchased a domain and hosting for a WordPress/WooCommerce site and hired me to help them migrate to the new site.

There was no budget for themes, and while I’d worked with WordPress before, this was my first experience with WooCommerce.

Before: Screenshot of mcstuffies-phd.square.site Shop page

Process

There were several tasks to complete itself:

  1. Import data from Square and troubleshoot ongoing sync issues. This was the client’s responsibility, but I offered support as needed.
  2. Adjust category/tag taxonomy to better suit client’s needs and make the site more navigable. Because the client maintains these, I did not make significant changes to the labels themselves, but created a hierarchy and made suggestions. Some categories became obsolete thanks to WooCommerce’s default features, including “Sale.”
  3. Identify and test suitable WooCommerce themes and layouts. Options were limited, but we landed on Boutique, a child theme of Storefront, due to overall layout preferences and customization options.
  4. Create custom color scheme, CSS, and assets as needed. Client had an existing logo that I was able to incorporate into a default placeholder product image and site favicon. The logo also served as the basis for the overall color scheme, its dark teal and coral red finding balance with a deep purple, earthy yellow, and pale mint.
  5. Build a new homepage to feature categories and products according to the client’s needs. For the sake of simplicity, we launched with top categories featured, but as they grow into the site, they might take advantage of functionalities like “featured products.”
  6. Migrate static informational pages and develop new features, including a basic contact form to replace a simple email link and a new events schedule. I created a simple blog post template for the client to enter craft show information and added a plugin to make copying posts easier. The calendar was embedded into the new homepage using a plugin.
  7. Take feedback from the client and testers to make adjustments to the layout, especially on mobile.
After: Screenshot of mcstuffiesphd.com Shop page built with WooCommerce

Result

I wanted to leave the client with a website they felt confident with, and in that, we succeeded. The new McStuffiesPhD.com offers a cleaner layout with a pleasing color scheme that’s easy to browse on any device and easier to maintain for the client. It’s designed with a certain amount of whimsy, as appropriate for the nature of the products available, without being content-heavy, slow, or overwhelming.

The homepage includes two important features to drive sales and engagement: a display of “latest” products in popular low-price categories (stickers and buttons) and a list of upcoming craft fairs and events where visitors will find McStuffies, PhD in person. The calendar in particular gives the client and customers alike a central place to locate this information (which might otherwise be found in scattered social media posts) and promotes events within their regional community.

Having never previously set up an ecommerce site, the whole project was a great learning experience, especially in terms of problem-solving when it came to technical and display issues. We weren’t building something from scratch or reinventing the wheel, just trying to make the client’s life easier and better present their work within constraints. It’s also given me a few things to better incorporate in future projects at an earlier stage, such as improving content for accessibility and a stronger focus on the mobile experience.

Categories
Consulting & Freelance Portfolio

Queer Silicon Valley: LGBTQ+ History Digital Exhibit

Queer Silicon Valley logo and selected photos

Freelance project working with a small team to organize an online history website about area queer communities over the last 50 years.

Screenshot of QueerSiliconValley.org homepage
QueerSiliconValley.org homepage shows some of the 17 topical categories offered.

I was hired as an independent contractor to support the development and launch of a local history website. Originally intended as an in-person exhibit, QueerSiliconValley.org, a website documenting the history and culture of LGBTQ+ communities in and around Santa Clara County, California, was developed and launched in the summer and fall of 2020. Ken Yeager, BAYMEC Community Foundation’s Executive Director, spearheaded the effort and hired a small team of SJSU students to assist. Yeager’s “garage full of stuff” and a shared Google Drive was nowhere near exhibit-ready when we started. My role included project coordination, content wrangling, and helping set up the website.

Planning and communication via email alone quickly became untenable. During the early task breakdown phase, my teammates and I used a project management tool to assign and prioritize actions and research, but without the buy-in of our lead, the tool was abandoned to more lightweight methods. Part of the problem was that our lead would routinely communicate different requests and concerns to individual team members. To ensure the team was communicating those updates with each other, we established a private group chat, and I maintained a list of tasks related to whatever piece(s) of the project were active at a given time, along with who was responsible for them. I would also send an email as needed with this list as a status update. Team rapport was built via chat and Zoom meetings and was critical not only to our success, but social support during a sometimes-difficult process.

Each element of the project had its own tasking system, usually in Google Sheets, for managing notes, metadata, and status. This process became even more critical once the project hired a developer to build a custom WordPress site for us, meaning we had very specific content structure requirements to meet, as well as a needing a central place to note, report, and manage bugs and requests.

Throughout the project, I advocated for language and content changes to ensure the site was as inclusive as possible, such as including a content warning before stories involving violence (approved). I also helped the team learn some of the tech tools we used by creating a WordPress tips and tricks document and personally training our lead on how to navigate the site’s admin tools. I created a style guide, worked with our website developer to take ownership of several front-end display issues and fixes, and supported outreach and marketing efforts by creating slides, a media coverage page, and a ‘social sharing’ category. I did not stick to the letter of the project brief–if such a brief ever existed–and routinely offered suggestions and found ways to make things work.

Although I have not been actively involved the website management since December 2020, I know that new content being added has a clear place and format thanks to my efforts, and the team is empowered to carry out the work. Furthermore, the organizational systems I helped put in place set Ken Yeager and the History San Jose team up for success with an in-person exhibit opening mid-2021. It was by no means a perfect process–what is?–but having access to a variety of management theories and ideas meant I had ample tools to deploy as needed to keep things moving.

QueerSiliconValley.org website/online exhibit

Categories
iSchool Portfolio

Redesign Proposal: LasPilitas.com

Salvia clevelandii (alpine cleveland sage) & hummingbird
copyrighted photo used with permission of 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
Portfolio Yahoo

Yahoo Verticals & Media in Search

Yahoo Original Video Content

Keyword mapping and search placement for curated original video content.

Screenshot of an inline video player search result for a Yahoo News documentary titled "Uniquely Nasty: The U.S. Government's War on Gays"
Yahoo News original documentary – full video played inline on top of search results
Screenshot of a video search result for a Yahoo News documentary titled "Uniquely Nasty: The U.S. Government's War on Gays"
Smaller version among search results for alternative keywords
(no longer live)

Ask

Yahoo’s video site, Screen, hosted a wide variety of original content over the years, and they periodically asked for this content to appear in search results.

Process

Over the years, I built a relationship with contacts working on Yahoo’s video properties to support their efforts to receive views via relevant search traffic. While at first these appeared in search only as enhanced hyperlinks, eventually the search front-end team implemented an inline player functionality so we could embed Yahoo original content and other videos directly on a search results page. I created an expandable search feature that allowed me to respond quickly to the video team’s requests and generate appropriate keyword lists.

Result

Teams throughout Yahoo knew they could rely on Search to support their efforts to promote premium original content on-network without using significant resources per request.

Yahoo Magazines Vertical Search

Built special “vertical search” feature to support new property launches and reduce maintenance.

Screenshot of a Yahoo Tech vertical search result for writer David Pogue
Vertical search experience embedded in web search results – set up in support of Yahoo’s Digital Magazines strategy (Tech, Style, Movies, etc.)

Ask

Yahoo launched several new media verticals called “Magazines” and did not migrate any corresponding vertical search experiences, which were based on an older platform. Instead, a search product manager was tasked with adding vertical content to web search, filtered according to the user’s site of origin, and they enlisted my support to create and launch the necessary features in our search content management platform.

Process

Each query sent from a search box included more than just the user’s query–it contained referral information, usually unique to the property or even page. I used this information to determine when a search experience should appear, as well as pass variables to a backend. The news backend, which indexed news from hundreds of sources worldwide, including Yahoo’s own sites, could return articles matching any query, filtered by property and sorted by freshness.

Expanding on a template design already in use for news results in general web search, I created a “vertical search” feature that included up to 10 results with thumbnails for each and paginated results if there were more than 10 stories matching a given query. This large search feature appeared on top of the usual web algorithmic links and any other non-monetized search features.

Product owners also asked for Magazine stories to be highlighted in web search results (in a less aggressive form, of course). I created simple “navigational” features with a max of 3 stories to appear on searches by Magazine name and featured writers to satisfy their primary need. Because Magazine stories were indexed along with all news content, these stories could appear in regular news search results without any extra effort.

“Emily always brings a number of ideas and potential solutions to a problem, but will back them up with execution reliably, quickly, and self-sufficiently, and manages dependencies deftly and efficiently. When tasked to launch international Magazine Search in Q4, Emily took the lead, coordinating with int’l editorial leads, offering assistance where necessary, and following up to ensure completion, ensuring the appropriate Product approvals (from me) and transparency of communication. The task was completed successfully, quickly, and helped ensure a Green rating on that quarterly goal.”

Product Manager, Vertical Search

Result

No-maintenance, low-effort vertical search launched on all new Magazines. Sites and big-name authors were effectively promoted in web search.

Community Season 6 on Yahoo Screen

Created rich search experiences to feature Yahoo Screen originals alongside knowledge graph.

Screenshot of Yahoo Search results for the TV series "Community" including season 6 episodes streaming on Yahoo Screen
Community Season 6 – featured Yahoo Screen video content + keyword list cultivation for TV series knowledge graph (no longer active due to deprecation of Yahoo Screen)

When Yahoo Screen made its foray into full-length original TV series with Community and others, we were ready to go in search. I made sure that the latest episodes carousel had excellent coverage and TV Series Knowledge Graph contained accurate, detailed profiles.

Meanwhile…

Photo of Emily with actor Gillian Jacobs when the latter visited Yahoo in Sunnyvale
Grabbed a selfie with Gillian Jacobs

Saturday Night Live Videos

Created relevant search features to highlight licensed SNL video content.

Screenshot of video result for the famous "More Cowbell" SNL sketch
Saturday Night Live on Yahoo Screen – mapping keywords to vast back catalog of sketches and video collections (No longer live due to deprecation of Yahoo Screen)

Ask

Yahoo Screen was planning to release a massive catalog of Saturday Night Live clips, spanning the series entire run. I was approached to create relevant search features to highlight the licensed content.

Process

I was given a list of video collections–recurring characters, hosts, themes, etc.–and an enormous spreadsheet containing video metadata for every single item in the catalog. My task: organize this data into discrete sets of keywords to bring up the precise, relevant video result or carousel of results, and investigate existing search coverage of SNL to ensure we cover those videos.

In addition to creating basic query patterns for such a huge catalog, I was able to have some fun creating aliases for the more popular videos, such as “needs more cowbell.” Specific clips and characters were likely to appear in search logs shortly after new episodes aired, so I planned to monitor dashboards in order to add new videos and keywords Sunday mornings.

Result

I turned around a huge list of keywords in a matter of days so the search experience launched at the same time as the Screen content. Post-launch, I trained a teammate how to look up video IDs and identify relevant query patterns so we could take advantage of the unique, timely spikes that only SNL had.