Tag: ux

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
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
iSchool Portfolio

UX Evaluation & Prototyping: Yummly

Web UX final report prototype screenshot

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

Tumblr in Web Search Experiment

Screenshot of Tumblr search results experience for query "Charleston" sometime after the horrific church shooting

Explored ways to feature relevant, engaging Tumblr content in Yahoo web search results.

Screenshot of Tumblr search results experience for query "Charleston" sometime after the horrific church shooting
Tumblr in Yahoo Search results (no longer live)

Ask
After Yahoo acquired Tumblr, Search leadership asked me to find a way to feature Tumblr content in web search results.

Process
I started out with several things to consider:

  • Understanding the type of content on Tumblr
  • Determining what content, if any, could map to real web search user needs
  • Figuring out what metadata we could extract from Tumblr posts and whether it was enough to work well in our content management platform
  • Learning as much as we could from what little data the Tumblr team could share with us

Because I was unable to discover much evidence of existing Yahoo search-to-Tumblr content behavior in our logs, and the nature of Tumblr’s content is freewheeling and relatively unstructured, we had to experiment.

The first test featured content from specific Tumblr users (celebrities, online personalities, organizations–entities with discrete matching queries) in a simple image carousel. Limitations of this approach: only image-type posts could be displayed, so blogs with text posts, links, etc. would appear with limited results or none at all, despite frequent updating; we could only trigger on keywords that had a clear match to a single blog (e.g., Beyonce, ZooBorns). As a result, coverage was low, and leadership tasked us with significantly expanding the experience.

“[Emily] took on a very demanding team that wanted to create a new experience for users with Tumblr content. She patiently worked with the team and in many instances stepped in to help move the project forward. Without her it would have taken much longer to launch the experience on Search.”

Product Manager, Search

To accomplish this, I needed to rely on automatic triggering methods that offered far less control over what content appeared in search results. Despite concerns about relevance and quality, we launched a test for a small percentage of search traffic. The initial test had to be taken offline within days because, although the backend team took steps to remove content flagged as “adult,” pornographic results (and worse) slipped through.

Search leadership was determined, however, and resources were provided to dramatically improve the indexing for quality and cleanliness. The backend team also added logic for when to return content at all, based on timeliness and other factors. A visual designer was brought in to collaborate a unique template for Tumblr that accounted for the variable types of content and included more Tumblr branding (color, logos). The UX and content improvements launched as a test for a small percentage of search traffic, and although metrics weren’t impressive, it didn’t cause major problems, and the feature launched for all desktop web traffic.

“Emily did an outstanding job on the Tumblr [search experience] presentation for the Tumblr team. She has built a [search experience] that puts a stake in the ground until Science can develop more precise triggering.”

Product Marketing Manager, Search

Seeking to experiment further in hopes of improving and better understanding its performance, I took the initiative to categorize queries that triggered the Tumblr module and identify categories that might be well-served with Tumblr content. I used existing keyword lists roughly mapping to a dozen or so categories and set up a test bucket version of the module with only these categories with logging for each. I also wanted to see if other factors affected performance, including where the module appeared on the page (“slotting”) and how consistently it appeared (whether to ignore backend display logic). I tracked and compared my experiment’s performance to the primary module’s on a weekly basis, using that data to make small tweaks to each category along the way.

Result
The great Tumblr in search experiment ended after about a year and a half, when leadership decided the investment was no longer justifiable. Despite the effort’s ultimate failure, I was recognized for my contribution and creativity.

Key categories in my final experiment did show some lift in performance: food, books, holidays, fictional characters, TV series, and movie series.

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.

2016 U.S. Primary Election search features

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

Screenshot of candidate search features with example content for Hillary Clinton
2016 US Presidential Election search features, including candidate Knowledge Graph with fundraising data from OpenSecrets.org and polling from Real Clear Politics.
Screenshot of candidate quotes feature with example content for Marco Rubio
Factchecked quotes from the Politifact Truth-O-Meter.
Screenshot of candidate issue stance feature with example content for Bernie Sanders and Donald Trump on gun control
Where candidates stand on the issues, with researched positions from ProCon.org and “explore related” suggested queries manually curated.

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.

TV Series With Streaming Links

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.

Niche “Knowledge Graph” Reference Features

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.

Categories
Portfolio Yahoo

Global Project Coordination: 2012 London Olympics

Screenshot of Search Engine Land awarding Yahoo Search with the best Olympics experience

Ask
Search leadership wanted to take advantage of our then-new content management platform to release a complete suite of Olympics results features in each of 12 key markets, including the Arabic language site Maktoob. As an editorial leader and tool expert, I was tapped to organize the global team in this complex, ambitious effort.

Process
While the search front-end engineering team developed templates designed specifically for the Olympics–the first time our platform was used for an important tentpole experience–our editorial team organized into content/query experts and technical builders capable of wrangling backend data and tricky template mapping. I oversaw these efforts and maintained detailed tracking of efforts on a per-market basis.

In lieu of engineering-heavy front-end localization, I created an editorially-driven “localization” data source that was easy to use in the content management platform and simple for the global team to input and update specific text strings for UX copy. This made it easier to build centralized featured and simultaneously deploy in almost every market.

Keyword creation was an immense undertaking: we built whitelists of thousands of athlete names and variations (including event and country); numerous patterns were developed to address results by event/sport and country.

I was responsible for keeping stakeholders up to date, ensuring all delegated work was completed in time, supporting pre-launch QA, and understanding how it all worked well enough to address bugs and concerns as they arose.

Result
Our successful global Olympics experience demonstrated the power of the content management platform and the non-technical editors who worked with it. It also highlighted ways to improve the process to reduce engineering overhead and make even more complexity and customization possible.

For Olympic Medal Count Info, Yahoo Gets Gold, Google Silver & Bing Bronze (Search Engine Land)