<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
	<title>Jeffrey Skinner</title>
	<subtitle>Design Articles</subtitle>
	<link href="https://jeffreyskinner.com/feed/feed.xml" rel="self"/>
	<link href="https://jeffreyskinner.com/"/>
	<updated>2019-09-30T17:00:00-07:00</updated>
	<id>https://jeffreyskinner.com/</id>
	<author>
		<name>Jeffrey Skinner</name>
		<email>jeffrey.skinner@gmail.com</email>
	</author>
	
	<entry>
		<title>ACT Mobile App</title>
		<link href="https://jeffreyskinner.com/projects/act-mobile/"/>
		<updated>2014-04-30T17:00:00-07:00</updated>
		<id>https://jeffreyskinner.com/projects/act-mobile/</id>
		<content type="html">&lt;section class=&quot;project-overview&quot;&gt;
	&lt;div class=&quot;section-inner&quot;&gt;

		&lt;div class=&quot;project-overview-sidebar&quot;&gt;
			&lt;img src=&quot;https://jeffreyskinner.com/img/projectlist/actstudent_app2.jpg&quot;&gt;
			&lt;dl class=&quot;roles&quot;&gt;
				&lt;dt&gt;Role:&lt;/dt&gt;
				&lt;dd&gt;Information Architecture&lt;/dd&gt;
				&lt;dd&gt;Wireframes&lt;/dd&gt;
				&lt;dd&gt;Visual Design&lt;/dd&gt;
				&lt;dd&gt;User Testing&lt;/dd&gt;
			&lt;/dl&gt;
		&lt;/div&gt;

		&lt;div class=&quot;project-overview-desc&quot;&gt;
			&lt;h3&gt;Overview&lt;/h3&gt;

			&lt;p&gt;Our focus with this app was to help students prepare for the ACT Test as well as access their registration and afterwards, their scores.&lt;/p&gt;

			

			&lt;p&gt;Right after finishing work on our College Search App, we set out to launch ACT’s second mobile application, the ACT Student App.&lt;/p&gt;

			&lt;p&gt;With our development platform already in place, and having done student interviews, we were confident we could take what we had learned and launch this project in an even shorter timeframe.&lt;/p&gt;

		&lt;/div&gt;
	&lt;/div&gt;
&lt;/section&gt;

&lt;!-- End Overview Section --&gt;

&lt;section&gt;
	&lt;div class=&quot;section-inner&quot;&gt;
		

&lt;h3&gt;Approach&lt;/h3&gt;

&lt;p&gt;Once again, we brought in additional team members to help with a preliminary design session. Taking over a conference room, we plastered the whiteboard with Post-it notes and markers in an attempt to refine the interaction flows.&lt;/p&gt;

&lt;p&gt;A few short days later, we had paper prototypes that we were able to present to the stakeholders responsible for accounts and sample test questions.&lt;/p&gt;

&lt;p&gt;While the account screens were straightforward, the sample questions posed a bit of a challenge. Replicating a test experience on a small screen required that we adjust how the questions were presented. Some items had stems that referred to a line number in a reading passage, while others referenced a science diagram. Conferring with our test development staff, we made better use of web conventions (removing underlines and line numbers for highlighted text) to accurately convey intent, and used modal drop-downs to show larger diagrams in the Math and Science sections.&lt;/p&gt;

&lt;p&gt;Two months after we began, the ACT Student App launched for iOS.&lt;/p&gt;

&lt;div class=&quot;img-grid&quot;&gt;
	&lt;img src=&quot;https://jeffreyskinner.com/img/actmobile/student_01.jpg&quot; alt=&quot;messages&quot;&gt;
	&lt;img src=&quot;https://jeffreyskinner.com/img/actmobile/student_02.jpg&quot; alt=&quot;campaigns&quot;&gt;
	&lt;img src=&quot;https://jeffreyskinner.com/img/actmobile/student_03.jpg&quot; alt=&quot;library&quot;&gt;
	&lt;img src=&quot;https://jeffreyskinner.com/img/actmobile/student_04.jpg&quot; alt=&quot;library&quot;&gt;
	&lt;img src=&quot;https://jeffreyskinner.com/img/actmobile/student_05.jpg&quot; alt=&quot;library&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;</content>
	</entry>
	
	<entry>
		<title>College Search</title>
		<link href="https://jeffreyskinner.com/projects/act-college-search/"/>
		<updated>2015-04-30T17:00:00-07:00</updated>
		<id>https://jeffreyskinner.com/projects/act-college-search/</id>
		<content type="html">&lt;section class=&quot;project-overview&quot;&gt;
	&lt;div class=&quot;section-inner&quot;&gt;

		&lt;div class=&quot;project-overview-sidebar&quot;&gt;
			&lt;img src=&quot;https://jeffreyskinner.com/img/projectlist/collegesearch_app.jpg&quot;&gt;
			&lt;dl class=&quot;roles&quot;&gt;
				&lt;dt&gt;Role:&lt;/dt&gt;
				&lt;dd&gt;Information Architecture&lt;/dd&gt;
				&lt;dd&gt;Wireframes&lt;/dd&gt;
				&lt;dd&gt;Visual Design&lt;/dd&gt;
				&lt;dd&gt;User Testing&lt;/dd&gt;
			&lt;/dl&gt;
		&lt;/div&gt;

		&lt;div class=&quot;project-overview-desc&quot;&gt;
			&lt;h3&gt;Overview&lt;/h3&gt;

			&lt;p&gt;In 2010, the web team at ACT was asked to develop a mobile app to help connect our student audience to our company’s services. Working with one of our developers, we led discovery sessions with stakeholders to determine a feature set for our first release. Wanting to keep the app as focused as possible, we decided that the best solution was to create two separate applications, College Search and ACT Student.&lt;/p&gt;

			
			
			&lt;p&gt;We set out to create the college search application first and determined that since our target audience was high school students ages 15-18, the largest platform would be iOS due to the large number of students that would have an iPod Touch if not an iPhone.&lt;/p&gt;

		&lt;/div&gt;
	&lt;/div&gt;
&lt;/section&gt;

&lt;!-- End Overview Section --&gt;


&lt;section&gt;

&lt;div class=&quot;section-inner&quot;&gt;
		

&lt;h3&gt;Approach&lt;/h3&gt;


	

	&lt;p&gt;Knowing that we would be addressing the Android platform later in our roadmap, we wanted to choose a development platform that would be flexible enough to publish to both. After researching, downloading, and testing (PhoneGap, Rho, Sencha, and various others) we ultimately decided on Appcelerator’s Titanium. We found the javascript back-end language easy enough for a designer such as myself to quickly set up a wireframe for an app, and the developer to add in the necessary hooks.&lt;/p&gt;

	&lt;p&gt;With our development platform decided upon, we called in other web team members to help do preliminary design sketches. After a quick few days, we had the basic tenets of our app in place. With some rudimentary styling and our database loaded, we asked our UX manager to help set up a user study at a local high school.&lt;/p&gt;

	&lt;p&gt;Armed with a bandolier of iPod Touches, we interviewed 10 high school students and performed a few UX exercises to help us understand the importance of some of the facets in our college search. After we learned as much as we could through questions and answers, we set out to observe the students using our app as they followed a script of tasks.&lt;/p&gt;

	&lt;h3&gt;Some things that we learned&lt;/h3&gt;
	&lt;ul&gt;
		&lt;li&gt;Our app seemed easy enough to use even for students that hadn’t used iOS before&lt;/li&gt;
		&lt;li&gt;They could type REALLY fast&lt;/li&gt;
		&lt;li&gt;A feature that we thought would be important to them (How close the school was to their friend’s choices) was decidedly not.&lt;/li&gt;
	&lt;/ul&gt;

	&lt;p&gt;With this testing, we headed back to finishing the project, adding in the final visual flourishes, squashing bugs and optimizing for speed.&lt;/p&gt;

	&lt;p&gt;In under 3 months, with no prior knowledge on how to build an app for iOS, we helped ACT deliver its first foray into the mobile world. A few short weeks later, the app was named an App Store Staff Favorite in Education.&lt;/p&gt;

	&lt;div class=&quot;img-grid&quot;&gt;	
	&lt;img src=&quot;https://jeffreyskinner.com/img/college/college_01.jpg&quot; alt=&quot;college search&quot;&gt;
	&lt;img src=&quot;https://jeffreyskinner.com/img/college/college_03.jpg&quot; alt=&quot;college search&quot;&gt;
	&lt;img src=&quot;https://jeffreyskinner.com/img/college/college_05.jpg&quot; alt=&quot;college search&quot;&gt;
	&lt;img src=&quot;https://jeffreyskinner.com/img/college/college_07.jpg&quot; alt=&quot;college search&quot;&gt;
	&lt;img src=&quot;https://jeffreyskinner.com/img/college/college_09.jpg&quot; alt=&quot;college search&quot;&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;</content>
	</entry>
	
	<entry>
		<title>Cloud Call Center</title>
		<link href="https://jeffreyskinner.com/projects/cloud-call-center/"/>
		<updated>2015-04-30T17:00:00-07:00</updated>
		<id>https://jeffreyskinner.com/projects/cloud-call-center/</id>
		<content type="html">&lt;section class=&quot;project-overview&quot;&gt;
	&lt;div class=&quot;section-inner&quot;&gt;

		&lt;div class=&quot;project-overview-sidebar&quot;&gt;
			&lt;img src=&quot;https://jeffreyskinner.com/img/projectlist/ccc-preview.jpg&quot;&gt;
			&lt;dl class=&quot;roles&quot;&gt;
				&lt;dt&gt;Role:&lt;/dt&gt;
				&lt;dd&gt;User Research&lt;/dd&gt;
				&lt;dd&gt;Wireframes&lt;/dd&gt;
				&lt;dd&gt;Visual Design&lt;/dd&gt;
			&lt;/dl&gt;
		&lt;/div&gt;

		&lt;div class=&quot;project-overview-desc&quot;&gt;
			&lt;h3&gt;Overview&lt;/h3&gt;

			&lt;p&gt;CallFire wanted to rebuild their outbound call center application from the ground up.&lt;/p&gt;

			
			&lt;p&gt;The previous version of the app was built in a way that made updates and iteration difficult and didn’t allow us to properly adjust to customer needs. Other issues were:&lt;/p&gt;

			&lt;ul&gt;
				&lt;li&gt;For agents to join a campaign, they had to sort through a public list of all available campaigns on the platform, causing confusion when similar campaign names existed&lt;/li&gt;
				&lt;li&gt;The campaign creation process was unintuitive and clunky&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/section&gt;

&lt;!-- End Overview Section --&gt;


&lt;section&gt;
	&lt;div class=&quot;section-inner&quot;&gt;
		


	

&lt;h3&gt;Approach&lt;/h3&gt;
&lt;p&gt;Not only were our client success managers vital in helping us understand our customers pain points with the app, but we were able to have them use the product while we built it out. This enabled us to quickly gain feedback and iterate on features and improvements.&lt;/p&gt;

&lt;p&gt;One thing I learned from our initial prototype was that in our particular use-case, our users wanted to quickly be able to paste in a set of numbers since our platform didn’t have any integrations for MVP.&lt;/p&gt;

&lt;h3&gt;Iteration&lt;/h3&gt;
&lt;p&gt;I realized that many of the steps we put users through were optional and in some use-cases not needed altogether. To help pave the happy path for these users, I reduced the flow from 5 pages down to 2, allowing users to add optional and advanced features after the required steps were complete.&lt;/p&gt;

&lt;h3&gt;Results&lt;/h3&gt;
&lt;ul&gt;
	&lt;li&gt;Reduced average campaign creation time by half&lt;/li&gt;
	&lt;li&gt;Saw a 30% increase in revenue over previous version of app&lt;/li&gt;
&lt;/ul&gt;

		&lt;div class=&quot;img-grid&quot;&gt;
		&lt;img src=&quot;https://jeffreyskinner.com/img/ccc/ccc-dashboard.png&quot; alt=&quot;call center dashboard&quot;&gt;
		&lt;img src=&quot;https://jeffreyskinner.com/img/ccc/ccc-create.png&quot; alt=&quot;call center create&quot;&gt;
		&lt;img src=&quot;https://jeffreyskinner.com/img/ccc/ccc-create-finished.png&quot; alt=&quot;call center create finished&quot;&gt;
		&lt;img src=&quot;https://jeffreyskinner.com/img/ccc/ccc-agent.jpg&quot; alt=&quot;call center agent&quot;&gt;
		&lt;/div&gt;

&lt;/div&gt;
&lt;/section&gt;</content>
	</entry>
	
	<entry>
		<title>Text Broadcast</title>
		<link href="https://jeffreyskinner.com/projects/eztexting-send/"/>
		<updated>2019-04-30T17:00:00-07:00</updated>
		<id>https://jeffreyskinner.com/projects/eztexting-send/</id>
		<content type="html">
&lt;section class=&quot;project-overview&quot;&gt;
	&lt;div class=&quot;section-inner&quot;&gt;

		&lt;div class=&quot;project-overview-sidebar&quot;&gt;
			&lt;img src=&quot;https://jeffreyskinner.com/img/projectlist/send-message-preview3.jpg&quot;&gt;
			&lt;dl class=&quot;roles&quot;&gt;
				&lt;dt&gt;Role:&lt;/dt&gt;
				&lt;dd&gt;User Research&lt;/dd&gt;
				&lt;dd&gt;Wireframes&lt;/dd&gt;
				&lt;dd&gt;HTML Prototype&lt;/dd&gt;
				&lt;dd&gt;User Testing&lt;/dd&gt;
			&lt;/dl&gt;
		&lt;/div&gt;

		&lt;div class=&quot;project-overview-desc&quot;&gt;
			&lt;h3&gt;Overview&lt;/h3&gt;
			&lt;p&gt;A cluttered lengthy page hid features and didn’t inspire confidence in the product.&lt;/p&gt;
			
			&lt;p&gt;As a first step in creating a message, users had difficulty in navigating a small scrollable window with horizontal tiled checkboxes to select their contacts.&lt;/p&gt;
			&lt;p&gt;Relevant features and selections were buried under on page menus or pushed down screen.&lt;/p&gt;
			&lt;p&gt;While the required fields needed to send a message were quite short, it felt much longer than necessary due to poorly grouped items and a lack of vertical rhythm. This made the likelihood of abandoning the keystone feature of the application unnecessarily high.&lt;/p&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/section&gt;

&lt;!-- End Overview Section --&gt;


&lt;section&gt;
	&lt;div class=&quot;section-inner&quot;&gt;

&lt;h3&gt;Approach&lt;/h3&gt;
&lt;p&gt;I wanted to break down the process of sending a message into 3 distinct steps: contact selection, message creation and scheduling. This way we could group similar features into these larger buckets.&lt;/p&gt;
&lt;p&gt;We made some decisions on behalf of the user, like automatically switching to send as MMS when an image was added, which allowed us to reduce form fields and thus cognitive load.&lt;/p&gt;
&lt;h3&gt;Iterations&lt;/h3&gt;
&lt;p&gt;After launching the new design to a small portion of our users we noticed through our analytics that the total number of contacts per session had dropped unexpectedly. Reviewing user data, we noticed users experiencing difficulty when adding multiple contact groups with our new selection component. With only a few minor improvements to the component, we fixed the dip in total contact use which allowed us to release the updated design to all users.&lt;/p&gt;
&lt;h3&gt;Next Steps&lt;/h3&gt;
&lt;p&gt;Through more user research, we determined that a core set of our users could benefit from additional guidance as they craft their messages. I’ve started to test further dividing up the steps so that we can use additional screen real estate to offer tips and call out relevant features better.&lt;/p&gt;

		&lt;div class=&quot;img-grid&quot;&gt;
		&lt;img src=&quot;https://jeffreyskinner.com/img/ezsend/ez-send-v1.jpg&quot; alt=&quot;send message&quot;&gt;
		&lt;img src=&quot;https://jeffreyskinner.com/img/ezsend/ez-send-v2.jpg&quot; alt=&quot;send message&quot;&gt;
		&lt;img src=&quot;https://jeffreyskinner.com/img/ezsend/ez-send-v3.png&quot; alt=&quot;send message&quot;&gt;
		&lt;/div&gt;
		&lt;/div&gt;
	
&lt;/section&gt;</content>
	</entry>
	
	<entry>
		<title>EZ Mobile App</title>
		<link href="https://jeffreyskinner.com/projects/eztexting-ios/"/>
		<updated>2019-08-31T17:00:00-07:00</updated>
		<id>https://jeffreyskinner.com/projects/eztexting-ios/</id>
		<content type="html">&lt;section class=&quot;project-overview&quot;&gt;
	&lt;div class=&quot;section-inner&quot;&gt;

		&lt;div class=&quot;project-overview-sidebar&quot;&gt;
			&lt;img src=&quot;https://jeffreyskinner.com/img/projectlist/ez-ios-preview2.jpg&quot;&gt;
			&lt;dl class=&quot;roles&quot;&gt;
				&lt;dt&gt;Role:&lt;/dt&gt;
				&lt;dd&gt;User Research&lt;/dd&gt;
				&lt;dd&gt;Information Architecture&lt;/dd&gt;
				&lt;dd&gt;Wireframes&lt;/dd&gt;
				&lt;dd&gt;User Testing&lt;/dd&gt;
			&lt;/dl&gt;
		&lt;/div&gt;

		&lt;div class=&quot;project-overview-desc&quot;&gt;
			&lt;h3&gt;Overview&lt;/h3&gt;
			&lt;p&gt;The UX team at EZ Texting was tasked with creating a new mobile application for our users.&lt;br&gt;
			During the last couple years, mobile usage has doubled on the platform. We decided to take a multi-faceted approach to inquiring with our users how they anticipate using a mobile app. Through surveys, customer interviews, usage data and customer-facing team feedback we determined that the primary use case would be receive notifications of inbound messages.&lt;/p&gt;
			
			&lt;p&gt;Our timeframe for launch was to have dev handoff in under 8 weeks.&lt;/p&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/section&gt;

&lt;!-- End Overview Section --&gt;

&lt;section&gt;
	&lt;div class=&quot;section-inner&quot;&gt;
	
	&lt;h3&gt;Approach&lt;/h3&gt;
	&lt;p&gt;A tight turnaround required us to refine our information architecture to the bare essentials of sending/receiving messages and light contact management while still meeting the needs of our customers.&lt;/p&gt;
	&lt;p&gt;We had been working on a responsive version of the web application and therefore able to utilize some component designs that could be used in a native app.&lt;/p&gt;
	&lt;p&gt;Using Adobe XD, we were able to quickly mock up and prototype the bare-bones functionality to test with non-technical employees. While this app was going to be iOS only at the start we still wanted to get feedback from Android users to ensure that it was still easily usable.&lt;/p&gt;
	&lt;h3&gt;Results&lt;/h3&gt;
	&lt;p&gt;&lt;em&gt;In development&lt;/em&gt;&lt;/p&gt;
	&lt;p&gt;More project details on the way…&lt;/p&gt;

	&lt;div class=&quot;img-grid&quot;&gt;	
	&lt;img src=&quot;https://jeffreyskinner.com/img/ezmobile/mobile-planning.jpg&quot; alt=&quot;mobile planning&quot;&gt;
	&lt;img src=&quot;https://jeffreyskinner.com/img/ezmobile/ez-mobile-side-by-side-11.png&quot; alt=&quot;mobile side by side&quot;&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
</content>
	</entry>
	
	<entry>
		<title>Pattern Library</title>
		<link href="https://jeffreyskinner.com/projects/eztexting-patterns/"/>
		<updated>2019-09-30T17:00:00-07:00</updated>
		<id>https://jeffreyskinner.com/projects/eztexting-patterns/</id>
		<content type="html">&lt;section class=&quot;project-overview&quot;&gt;
	&lt;div class=&quot;section-inner&quot;&gt;

		&lt;div class=&quot;project-overview-sidebar&quot;&gt;
			&lt;img src=&quot;https://jeffreyskinner.com/img/projectlist/ez-ios-preview-wide.png&quot;&gt;
			&lt;dl class=&quot;roles&quot;&gt;
				&lt;dt&gt;Role:&lt;/dt&gt;
				&lt;dd&gt;Visual Design&lt;/dd&gt;
			&lt;/dl&gt;
		&lt;/div&gt;

		&lt;div class=&quot;project-overview-desc&quot;&gt;
			&lt;h3&gt;Overview&lt;/h3&gt;

			&lt;p&gt;EZ Texting is a web application that allows users to create text message marketing campaigns as well as provide customer service through texting. As the application has grown with features we’ve noticed that our customers have difficulty in wayfinding as well as understanding features once they find them.&lt;/p&gt;

			

			&lt;p&gt;My task on the UX team was to help distill the many features into recognizable buckets, showcase relevant (learned through on-boarding) features, and still ensure everything else was easily accessible.&lt;/p&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/section&gt;

&lt;!-- End Overview Section --&gt;

&lt;section&gt;
	&lt;div class=&quot;section-inner&quot;&gt;
		
&lt;h3&gt;Approach&lt;/h3&gt;
&lt;p&gt;To help our users easily grasp what the platform does, our navigation needed to be understandable at a glance. I conducted a card sorting exercise with the company to group all of our features.&lt;/p&gt;
&lt;p&gt;Next, I built a quick HTML prototype with a revamped navigation drawn from the results of our card sorting. With that in place I tested the prototype with a panel of non-users from usertesting.com, asking them to find features that were previously buried in the iA. Having never used the platform before these users were able to locate these features in the prototype. This was especially enlightening as some of the terms/names for features can be vague.&lt;/p&gt;
&lt;p&gt;The other side of helping our users navigate through the app was to create a pattern library to help ensure a consistent experience. As the developers transitioned from our old php platform to Angular, this gave us an opportunity to begin standardizing table layouts and CTAs as well as adding more conversational help text alongside features and workflows.&lt;/p&gt;
&lt;p&gt;More project details on the way…&lt;/p&gt;

&lt;div class=&quot;img-grid&quot;&gt;
	&lt;img src=&quot;https://jeffreyskinner.com/img/ezpatterns/ez-messages@2x.png&quot; alt=&quot;messages&quot;&gt;
	&lt;img src=&quot;https://jeffreyskinner.com/img/ezpatterns/ez-campaigns@2x.png&quot; alt=&quot;campaigns&quot;&gt;
	&lt;img src=&quot;https://jeffreyskinner.com/img/ezpatterns/design-library.png&quot; alt=&quot;library&quot;&gt;
&lt;/div&gt;
												
		&lt;/div&gt;
&lt;/section&gt;
</content>
	</entry>
</feed>
