research.html

---
layout: layout.liquid
title: Research work samples
description: 3 UX case studies of contributing, guiding, and shipping projects.
noindex: true
---
<section class="hero">

    <h1>Research</h1>
		<p>I’ve sat on research teams at two companies and just relish seeing people actually use the site you spent months on. What's even better is asking them about it. Below are a few research projects I was a part of.</p>
	</div>
</section>

<section class="ux-case-study">

		<h2>AB testing</h2>
		<h3>Test 1: “Do shorter pages convert less?”</h3>
		<p>For this test, we wanted to challenge a norm in the company around content length. Our hypothesis was that less text wouldn’t hurt conversion rates. However, we encountered a barrier in that our page views were very low, so we bundled the test across five clients and aggregated the data. Our writers varied their strategies to provide an alternate view of certain pages.</p>
		<div class="results checks">
			<h4>Results:</h4>
			<ul>
				<li>Growth in conversions by 16.65% </li>
				<li>No negative effect on keyword visibility after assessing the experiment 6 months after launch.</li>
			</ul>
			<h4>Impact:</h4>
			<ul>
				<li>Reduced the workload for writers by half!</li>
				<li>UX benefits: users were able to get their answers faster. Our pages were quicker to digest and more to the point.</li>
			</ul>
		</div>
		<div class="roles">
			<h4>What I did</h4>
			<p>Strategy, data gathering, analysis. <a href="https://www.bayonet-inc.com/heating">Live site</a>.</p>
		</div>
	
		<picture>
		<source srcset="/img/work/data/bayonet.webp" type="image/webp">
		<source srcset="/img/work/data/bayonet.png" type="image/png">
			<img src="/img/work/data/bayonet.png" alt="a side-by-side screenshot showing the page length 1/4 or so difference of shorter word content vs longer. " />
			<p class="caption">Before and after of shortened word-length experiment</p>
		</picture>

		<h3>AB test 2: “What CTA button converts better, 'Contact Us' or 'Get in Touch'?”</h3>
		<p>This was a common question between writers and designers. We cycled between 12 different options. It also seemed like a great one to test once we nailed our AB testing process down. We sought to follow takeaways from bigger brands and test button wording. 	</p>
		<p>The statistical significance calculator told us we needed a pretty big boost in conversions to make this test useful.</p>
		<h4>Results:</h4>
		<ul class="checks cross">
			<li>We didn’t get it. Our tool hit its timing limit of 3 months and found no leader. Although inconclusive as a whole, the opposite of our hypothesis was leading the way — “Contact Us” did better than “Get in Touch.” We learned we’d need to make changes with a bigger impact for this amount of traffic.</li>
		</ul>
		<div class="roles">
			<h4>What I did</h4>
			<p>Project lead, data gathering</p>
		</div>

		<div class="col stretch-right">
			<picture>
			<source srcset="/img/work/data/no-leader.webp" type="image/webp">
			<source srcset="/img/work/data/no-leader.jpg" type="image/jpg">
				<img src="/img/work/data/no-leader.jpg" alt="a screenshot from google analytics with a large headline reading 'No leader found.'"  />
				<p class="caption">Our first AB test with no clear winner.</p>
			</picture>
		</div>


</section>


<section class="ux-case-study theme--dark --curvy">

		<h2>Best practices</h2>
		<p>These are often unspoken and soaked in with team culture. Shining a light on them makes conversations smoother and saves time once spent hashing out definitions.</p>
		<p>Nothing's set in stone. Sometimes the practice breaks a convention enough to retire it. I consider this a type of data because it’s a step toward the objective.</p>

		<h3>Decided to stop using "flippers" on all sites</h3>
		<p>Upon research, we learned the method of button flippers we used didn’t follow industry or usability best practices. When hovered by a mouse, these multi-state elements turn over to display new info on their back. What was wrong with them?</p>
	
		<ul class="checks cross">
			<li>They hid conversion opportunities.</li>
			<li>They required a mouse on desktop, but on touchscreens they lacked an indication they were flippable. So it may have surprised folks and made them feel less in control. Surprising users is a big no-no.</li>
			<li>Clients liked seeing the flipping animation more than they considered the content. Some became a junk drawer of links, not considering the user.</li>
		</ul>
		<div class="roles">
			<h4>What I did</h4>
			<p>Project lead, data gathering, documentation writer</p>
		</div>
		<img src="/img/ab-quicklink.png" alt="a screenshot of a website showing quicklinks with one flipped over. The back side has 2 links." />
		<p class="caption">The flipper on the left is showing us its back</p>
		<h3>Moved the form field labels from within to above</h3>
		<p>Placing field titles within the field saves vertical space and reduces clutter, but we decided the cons outweigh the aesthetic.</p>
		
		<ul class="checks cross">
			<li>Cons: As the viewer begins to type their responses in the form field, the prompt disappears. When submitting the form, if there was an error, the title would no longer be present which may confuse someone. This may deter the user from submitting the form.</li>
		</ul>
		<p>This may be common knowledge these days, but at the time, much deliberation was had for us to get there.</p>
		<div class="roles">
			<h4>What I did</h4>
			<p>Project lead, data gathering, documentation writer</p>
		</div>
		<img src="/img/form-fields.png" alt="2 screenshots side-by-side, the one on the left has its field labels inside the field, whereas the one on the right has them above the field. " />
		<p class="caption">The form on the left has labels within the field. On the right, they're above the field. </p>

		<h3>Created governance for a growing agency</h3>

		<div class="results checks">
			<ul>
				<li>
					<h4>Conversion principles: Design methods for turning users into leads </h4>
					<p>This doc helped get the design team and others discussing design on the same page about our core design beliefs.</p>
				</li>
				<li>
					<h4>Anatomy of a Website: A Guide to Website Terminology</h4>
					<p>This doc was the precursor to a pattern library. We caught the startup disease of jargon-itis. This 23-page design glossary helped by naming and defining of every piece of our sites, including crowd favorites "banner", "hero", and "quicklink."</p>
				</li>
				<li>
					<h4>Design portfolio mini-site</h4>
					<p>We cranked out sites. This internal tool was a catalog for our proudest and highest performers. It was used by Sales and Project Management when showcasing our design work. It's job was also reinforcing the content from the two docs above: a common vocabulary and our conversion principles.</p>
				</li>
			</ul>
			<figure>
				<picture>
					<source srcset="/img/ops.png" type="image/png" >
					<img src="/img/ops.png" alt="3 covers of governance documentation. They read Design portfolio, Anatomy of a website, and  Conversion optimization principles" />
				</picture>
			<figcaption class="--center">All three ops docs</figcaption>
		</figure>
		</div>

</section>

<section class="ux-case-study">


		<h2 id="landing_pages">Personas</h2>
		<p>The goals of this project were two-fold: to make our landing pages less manual to build and to design them in a way that speaks more directly to users' problems. My fellow researchers and I tackled the latter.</p>
		<p>Our clients get the bulk of their work through phone calls. As such, we had the ability to listen to their customer calls. With the raw call data, we synthesized trends into four personas, each with a unique user story.</p>
		<p>The personas were different enough to justify highlighting various content based on their respective situations, which led to the creation of a unique landing page design for each one.</p>
			<figure>
				<picture>
					<source srcset="/img/ux/landing-pages/low-fi.png" type="image/png" >
					<img src="/img/ux/landing-pages/low-fi.png" alt="Image of persona, their pain points, who they are, why they’re on this site - and a small wireframe" />
				</picture>
			<figcaption class="--center">Persona and low-fi wireframe for content planning</figcaption>
		</figure>


		<p>For instance, a person with a plumbing emergency requires assurance that the company can promptly resolve the problem, while someone contemplating a new heating system may want to learn more about the system and the installing company. Therefore, each persona's distinct needs called for separate landing page designs tailored to their specific situations.</p>

		<figure>
			<picture>
				<source srcset="/img/ux/landing-pages/hi-fi.png" type="image/png" >
				<img src="/img/ux/landing-pages/hi-fi.png" alt="Image of 2 wireframes from a landing page about heating services. No images and little style, mostly grey boxes showing structure." />
			</picture>
			<figcaption class="--center">High-fi wireframe</figcaption>
		</figure>


		<div class="results checks">
			<h3>Results</h3>
			<ul>
				<li>Landing page creators now have four, instead of one, versions of layouts to choose from. Each corresponding with the top four customer needs.</li>
				<li>The new system populates dynamic content from styles specified by designers and can launch hundreds at a time.</li>
			</ul>
		</div>
			<figure>
				<picture>
					<source srcset="/img/landing-pages.png" type="image/png" >
					<img src="/img/landing-pages.png" alt="Image of 2 wireframes from a landing page about heating services. No images and little style, mostly grey boxes showing structure." />
				</picture>
			<figcaption class="--center">Two different landing pages based on different personas: one about repairs and one about reoccurring maintenance.</figcaption>
		</figure>
	</div>		

</section>

<section>
  <p>Jump over to see some <a href="/web">web design</a> projects or my <a href="/one-week-logo">logo</a> offering.</p>
</section>