Jarryd Wafer - UX Designer and Product Team Lead at Booking.com

Design a mobile micro-interaction with Principle

2018-01-24T03:11:00+01:00

PrincipleForMac is a design tool for animating user interfaces for web, mobile and desktop. Prototyping an interactive user interface allows you to quickly evaluate and share your ideas before investing valuable engineering time in development. In the long run, prototyping complex User Interface interactions will accelerate your design-development cycle.

There are other tools out there to design animated, interactive user interface prototypes like Framer. But for those that aren’t that very comfortable with Javascript and animating with code, Principle is a great place to start. Principle lets you create designs that look and feel amazing straight from Sketch artboards which makes for a simple and streamlined workflow.

When I want to communicate a complex User Interface idea to a client, I like to quickly prototype the concept before jumping into code, so I often present an interaction for approval before going too deep. This motion graphic is based off of a recent menu interaction I presented for a mobile application redesign:

I have found that developing a proper workflow can save you time and headaches. In this article, I will take you through the basics to create a simple interactive mobile UI animation. To get started, download Principle, fire up Sketch, and grab a pen and blank sheet of paper.

Start with a solid idea

Principle works best if you plan layouts with ‘screens’ or ‘states’ that will transition into each other. Because you are going to be orchestrating a series of events, it is very helpful to have a general script. Try to think through and plan out the steps that you would like to animate:

initial screen => interact with trigger => overlay appears + menu slides in => selection made => menu slides out + overlay fades => back at initial screen.

If you are having trouble visualizing the UI interaction that you want to create, find a simple animation on your phone and try to recreate it. You can find some good examples here on Dribbble.

Layout Screens

I start out by sketching a general screen flow to map out my initial ideas on paper. Then I will fire up Sketch and start laying out the interface elements and content blocks for the initial screen. I try to keep elements as generic as possible. You can effectively communicate interaction ideas with appropriate shapes and colors.

I suggest that you spend time organizing your layers into clear, cohesive components. Try to nest layers as little as possible, but create clear groups that will animate together. You should turn these groups into symbols and utilized nested symbols for changing states. Proper organization helps Principle recognize the same layers from screen to screen even if sizes and styles change for that element.

After finishing your first screen, duplicate that artboard and name it appropriately. Create your second screen with the changes that you would like to see. Here we will add a layer with opacity to cover our content and indicate that it is below the menu that we will be animating up from the bottom.

Note when creating screens for Principle:

When planning your animation, it is good practice to also figure out a way to animate back to the initial screen. This allows for you to create an animated gif that loops smoothly instead of jumping back to the initial screen at the end of the animation.

Also, for each new element that you plan to introduce, you want to add that element in Sketch one screen before it appears. This allows Principle to automatically recognize a tween between the two states. In Sketch, when you move an element outside of an artboard, it removes that layer from that artboard’s hierarchy. No problem, if you drag the layer symbol back into the position that you want it in the appropriate artboard, the element will stay off screen, but it will now be in the proper place.

Time to open and import to Principle

When you have finished setting up your screens, it is time to save your Sketch file and fire up Principle. The file that you are going to animate needs to be the only Sketch file open. In Principle, you will click the import button and it will show you the name of whatever Sketch file is open. Choose file, click import and now your artboards, layers, and groups should appear in Principle’s interface ready to animate.

A great feature is that you are able to work between Sketch and Principle pretty seamlessly. If you want to make changes to the files that you imported, you simply go back to Sketch, make changes, and re-import. Principle does a good job saving any interactions that you have already defined while introducing the new elements that you added in. If you want to change the position or other properties of a layer that was imported from Sketch, it’s easiest to make that change in Sketch and then import again.

Here is a quick intro video to demonstrate what you can do with Principle and introduce you to the interface:

Setting up interactions and animations in Principle

Now that our screens are imported and the stage is set for our events, it’s time to start orchestrating. There are lots of interesting techniques that you can utilize in principle. On a single screen you can create elements that scroll and tab. You can create interactions with transitions between screens. You can create independent, reusable components that have properties to embed into the parent file. And you can use Principle’s Driver feature to add some very dynamic, position based changes like rotation and scaling based on an interaction. You can learn more about all of these methods on Principle’s tutorial page.

In this example we will start by creating our first transition. Select the element that you want to act as the trigger. You will see a small circle with a lightning bolt icon. Click that icon and an action menu will pop up. I am animating a menu icon, so I am going to choose a ‘tap’ interaction. Click in the circle, and drag the arrow it creates to the screen you want to transition to. This will create your initial transition which you can test in principles live action screen.

Once you successfully set up your first transition and test it, it is time to configure the rest of the screen interactions that you planned out. If you now click on the transition arrows connecting your screens, it will pull up an animation timeline at the bottom of your project screen. This window will display all elements that change from screen to screen with matched properties that can be animated. Here is where proper organization and naming conventions from your sketch file will really help keep you organized. For each element, it will tell you what changes, for example x axis, y axis and opacity.

You can move these properties around in the timeline panel and change the easing type by clicking ‘Default’ in the middle of the timeline element. You can change the length and the offset by simply moving the blue bar for the element. This allows you to orchestrate animations with very dynamic transitions.

There are all sorts of possibilities of what you can do with this application, and here is where you have the chance to play around and get creative until everything feels right to you. Principle has certain subtleties that you may have to dig up online to figure out, but once you figure out a solution they become simple processes. One such example is clipping and masking layers.

You don’t create masks in Principle like you would in Illustrator or Sketch, which you would do by linking two layers. Instead, masks are create by groupings in folders. If you put elements in a folder, you simple click ‘Clip Sublayers’ and the layers in the folder will not appear outside of it’s bounds. Because of this, you want to organize your sketch layers according to how you want to clip them.

Once your project runs how you want it to in the live action panel, it’s time to save and share your animation which you can do as a prototype, video, or animated gif.

You can easily share as a video or animated gif by clicking the camera icon in the top right of the preview window. You have the option to use the round touch cursor, the arrow cursor, or have the cursor hidden in the recording. After selecting an option for the cursor, Principle begins a screen recording of the Preview window. When the icon starts blinking, the recording has started and you can begin to interact with your design (it may take a moment for the recording to start). Once you’re done recording your design, click the camera icon again to stop recording.

If you’d like to share your designs to others that may not have Principle, you can export a standalone Mac app that anyone with a Mac can open. If you’d like to share you’re design for iOS, see Running on Device. This is easily done if one downloads Principle Mirror.

I hope that this article helps you to get started with Principle! It’s a great program that helps you build some really killer prototypes and motion graphics that really help to communicate great UI concepts!

Building a Simple Ember.JS App

2017-02-23T03:11:00+01:00

BUILDING A SIMPLE EMBER APP

Imagine that a group of developers had gone looking for best practices in creating a web app front end, and then codified what they found into a framework. That is the idea of Ember JS. Ember brings back the fun of Rails, this time for single-page applications with great performance.

Ember is an open source JavaScript framework, maintained at emberjs.com and on Github. It provides much of the front-end infrastructure you need so you can speed up the development of web apps. While using ember, you’ll write less code and you’ll write simpler code. And simpler code is better code.

By injecting object-oriented design principles into JavaScript to help you strucutre your code in a sensible way, Ember lets you think at a modular level. this makes your app easier to create and maintain. The features packaged with Ember rely on Node.js, npm, and Handlebars.

In this tutorial we will build a simple, single page ember app. Let’s get it!

Install Ember and Ember CLI

Ember CLI is a command-line interface for building Ember apps, and it’s the project team’s preferred means of obtaining the framework libraries. Ember CLI makes short work out of a lot of boilerplate tasks, such as building and deploying, executing tests, adding files to create new features, and so on.

It’s worth noting, that while we’ll use Node to run the Ember CLI development tools, Ember itself isn’t a server-side framework. Ember is used for creating browser-resident apps.

Let’s start out by installing bower, phantomjs (dependency as a test execution environment), and ember-cli globally.

$ npm install -g bower
$ npm install -g phantomjs
$ npm install -g ember-cli

Installing Ember CLI causes the Ember framework libraries to be installed, along with the CLI itself. Now that we have Ember and Ember CLI we’re ready to start coding.

Creating an App Repository

Ember CLI takes a very app-centric approach. The first thing you do is to create the app, and every module you create is part of that app. Our first step is to create the app’s repository (Ember CLI assumes you’ll be using Git, so it references a project as a repository).

$ ember new webapp

Before we write our UI code, let’s also install a Bootstrap stylesheet to give us a good starting point. From your new Ember app directory, you can run the following commands:

$ cd webapp
$ npm install
$ bower install
$ bower install bootstrap --save

and then add these lines to webapp/ember-cli-buld.js, right before the last line of code:

app.import('bower_components/bootstrap/dist/css/bootstrap.css');
app.import('bower_components/bootstrap/dist/css/bootstrap.css.ma;',{
  destDir: 'assets'
});

Once you are able to do all of these thing successfully, you can now run your ember app with the following command:

$ ember serve

Creating a new template

$ ember generate template application

<h1>Grow Co. Designs</h1>

Generate a route for the homepage

ember generate route homepage

Routes

Components

To create an ember component:

ember generate component main-nav

Typekit

LESS

Creating a contact form

nodemailer

Agency Analytics - Email Response

2017-02-15T10:29:00+01:00

1) How many hours a week are you able to devote to this position?

As many as necessary. I have the bandwidth for a fulltime commitment of 40 - 50 hours a week, no problem. I am also open to contract work.

2) Have you ever worked remotely at a previous position? If so, what methods did you use in order to communicate and go over project specifications?

I have not worked remote in a full time position, but I have worked remote on many contracts with distributed teams across the globe. I recently worked with a team in Belarus in an Agile environment. We had a stand up each morning (early morning on the west coast, evening in Belarus) and communicated throughout the day via Skype. We kept track of our sprints and progress on JIRA. Personally, I prefer Slack and Trello, but all these technologies are accomplishing the same goal - creating clear avenues of communication while keeping teams accountable and on the same page in as efficient of a way as possible.

3) Please describe your developer experience, if any. Specifically, do you have any experience with ReactJS and CSS?

I am familiar with ReactJS projects runnings on a node server, but have not worked with ReactJS extensively. I am comfortable with designing components and OOP. I have worked on a couple applications in EmberJS, which has many similarities. I am confident that I can ramp up my ReactJS knowledge quick, as I am eager to learn.

I consider my CSS experience to be very strong. I am interested and passionate about best practices for performance when writing complex CSS in a large production environment, starting with appropriate, performant selectors. I love designing micro-interactions and animations in CSS that in the past we would use JQuery for. Currently experimenting with building complex illustrations and animations using SVG’s and CSS.

I am going to try and keep this brief and general, because honestly, I don’t feel all that comfortable auditing parts of the website before having a conversation with a human being at Agency Analytics.

That being said, I did a thorough dive into the product and recorded screen cast of the sign up experience on both desktop and mobile.

The sign up form is great. Clean, simple, no distractions. Step 1 to confirm email is easy and appropriate. Step 2 is straightforward as well. Step 3 is where I encountered some friction and I’m sure the biggest drop off is for incomplete registrations.

I encountered multiple bugs in the ‘Create Campaign’ process and wasn’t thrilled that it opened in a modal and tiled additional ‘authorization’ windows on top of that window.

However, my biggest issue as a new user was lack of information to learn more about steps I felt unsure about before listing keywords and giving access to services. Taking these personal actions seems out of context at this stage.

This could be done more effectively within the product when users are setting up a dashboard for the first time. Since the product doesn’t visually start out by leveraging any of the information users provide, it would be more appropriate to integrate these steps throughout the product onboarding.

I wouldn’t suggest making these changes without user testing for positive affirmation and AB testing to leverage user data to make the best data driven decision. There are a lot of small AB test that I think could help polish this experience as well, for instance changing the title from “Create Campaign” to something more inviting (since you are not in the product yet). But my main suggestion would be to integrate the ‘Create Campaign’ steps into the product onboarding. If it is necessary to keep this step before entering the product, I would start by adding more context and testing small changes to help remove user friction.

This is an unconventional dropdown from a top nav menu because it is horizontal, tiered, and has icons. I understand keeping design elements from the navigation on the Features pages, but I would suggest moving towards a more conventional navigational pattern and more consistent navigation in general. I would like to see a full horizontal navigation (on desktop) that is the same that you have on the Features pages. A clear example of the inconsistent design not working well:

view full size

To affirm what really draws users in best, I would set up a multivariate test with these three states:

Control
No dropdown on hover, link straight to feature landing page (or first feature)
Same feature bar design from feature pages would push content down, as a delightful micro-interaction, to reveal consistent feature nav bar (below)

view full size

On that note, thank you for giving me the opportunity to respond to your questions. Would love to talk to someone on the team to learn more about roles and responsibilities. If you have any questions, please feel free to contact me.

In Service ~ Jarryd Wafer

Building an AJAX contact form

2017-01-22T03:11:00+01:00

AJAX stands for Asynchronous Javascript and XML which allows us to exchange information between the server and client asynchronously which means that we can make changes on a website without having to refresh or update a page. This comes in handy when sending client information through a server for features such as contact forms.

There are pros and cons to using AJAX that you may want to consider before deciding to use on a simple website. Benefits include:

can be used on any platform or browser
low transfer between client and server
resource optimization
allows request to a server to receive data without loading a new page
can improve user experience

Some disadvantages of using AJAX are:

javascript must be enabled to run
has to make an additional call to a server
some functions that are used in web browsing may not work as expected which means you may have to write browser specific code

In this short tutorial, we will build an example of a simple AJAX form that you can use on most web projects.

Building the HTML form

Let’s start to build the HTML scaffolding so that we can implement AJAX to submit data from a form in the background. We are going to be using jQuery to help simplify the JavaScript that we have to write and a simple PHP mailer script to handle sending the user’s data via email.

Create a form with the element ID ajax-contact-form, set the method attribute to post, and the action attribute to mailer.php. We will create the mailer.php later.

<form id="ajax-contact-form" method="post" action="mailer.php">
  <div class="field">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
  </div>
  <div class="field">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </div>
  <div class="field">
    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>
  </div>
  <div class="field">
    <button type="submit">Send</button>
  </div>
</form>

Our simple form has fields to collect a user’s name, email, and message. We added a required attribute to each field to make sure to leverage HTML5 validation so that a form can only be submitted when all fields have been completed.

Next we will also want to create an element that will be used to display a message indicating success or an error to to the user. We will have this appear above the form.

<div id="form-messages"></div>

Submitting the Form Using AJAX

Now that we have our HTML for a form in place, we now need to add some JavaScript to the page in order to submit the form. Since we are going to be using jQuery in this example, make sure that a version of jQuery is initialized before you add your script.

We will want to set up variables for the form and the message homeSection. Then we want to set up an event listener for when the form is submitted.

$(function(){
  // Define variable for the form and message homeSection
  var form = $('#ajax-contact-form');
  var formMessages = $('#form-messages');

  // Set up event listener to submit the form
  $(form).submit(function(event) {
    // Stop he browser from submitting the form
    event.preventDefault();
  })
});

We will want to pass a function to the submit method that will be executed when a user submits the form. We also told the browser to not submit the form as it normally would by preventing the default action so that we can define our own.

We want to now convert this data into a key/value string that can be sent with he AJAX request by serializing it. We will use jQuery serialize method and store the result in a variable called formData. Then we will submit the code with AJAX by adding this code to your function:

    var formData = $(form).serialize();

    // Submit using AJAX
    $.ajax({
      type: 'POST',
      url: $(form).attr('action'),
      data: formData
    })

We are using jQuery’s ajax method to create a new AJAX request. We pass an object to the method that contains a number of properties used to configure the request. type specifies the HTTP method, which in this case is POST. The url property is the location of the script that the form data will be sent to which has been populated with the action attribute from the form. And the data property has been populated with the serialized form data we created.

Now we will want to define a successful response from the server along with an unsuccessful attempt. The done method will be called if the request completes successfully. If unsuccessful we will call the fail method.

    .done(function(response) {
      $(formMessages).removeClass('error');
      $(formMessages).addClass('success');

      // Set the message textarea
      $(formMessages).text(response);

      // Clear the form.
      $('#name').val('');
      $('#email').val('');
      $('#message').val('');
    })
    .fail(function(data){
      $(formMessages).removeClass('success');
      $(formMessages).addClass('error');

      if (data.responseText !== '') {
        $(formMessages).text(data.responseText);
      } else {
        $(formMessages).text('Uh oh. An error occurred and your message could not be sent.');
      }
    });

That will complete the HTML and JavaScript components of the contact form. Now we have to create a PHP mailer script that will be responsible for processing the form data and sending out the email.

Creating a PHP Mailer Script

This script will process the form data by checking that the data is valid and then sending out an email. If an error occurs, the mailer script will trigger the fail callback that we defined in our JavaScript.

To create the php component, create a new file called mailer.php and write the php code as outlined below:

<?php

  // Only process POST request
  if ($_SERVER["REQUEST_METHOD"] !== "POST") {
    header("HTTP/1.0 403 Forbidden");
    echo "Oops! There was a problem with your submission. Please complete the form and try again.";
    exit;
  }

  $name     = filter_input(INPUT_POST, 'name', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
  $email    = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL);
  $message  = filter_input(INPUT_POST, 'message', FILTER_SANITIZE_FULL_SPECIAL_CHARS);

  // Check that data was sent to the mailer.
  if ( empty($name) || empty($message) || filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
      // Set a 400 (bad request) response code and exit.
      header("HTTP/1.0 400 Bad Request");
      echo "Oh no! There was a problem with your submission. Please complete the form and try again.";
      exit;
  }

  // Set the recipient email address
  $recipient = "your-email-here@gmail.com";

  // Email Subject
  $subject = "New contact form from $name";

  // Build the email content
  $email_content = "Name: $name\n";
  $email_content .= "Email: $email\n\n";
  $email_content .= "Message: \n$message\n";

  // Email header
  $email_headers = "From: $name <$email>";

  // Send email
  if (mail($recipient, $subject, $email_content, $email_headers)) {
    // Set good response code 200
    header('HTTP/1.0 200 OK');
    echo "Thank you! Your message has been sent and we will be in touch.";
  } else {
    // Set a internal server error response code 500 if not successful
    header('HTTP/1.0 500 Internal Server Error');
    echo "Oh No! Something went wrong and we could not send your message.";
  }


?>

You now have an AJAX contact form. This form has to be served through a server, so upload your form to a server to see what you have to work with!

Additional information can be found at:

Web Technologies + Learning Modules

2017-01-19T03:11:00+01:00

Code schools

nodeschool.io - Open source workshops that teach web software skills.
You Don’t Know JS - Free book series on Javascript on Github
Eggly: AngularJS Fundamentals - Learn to build an AngularJS application through a series of small, digestible lessons

Technologies

Craft CMS - Craft is a content-first CMS that aims to make life enjoyable for developers and content managers alike.
Babel - Use next generation Javascript, today. Babel has support for the latest version of JavaScript through syntax transformers.

Animations

How SVG Line Animation Works - article on SVG Line Animation basics
Lottie - Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images. iOS, Android, and React Native library. great article
GreenSock - high performance HTML5 animation for the modern web - especially this MorphSVG plugin
Bounce.js - Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations.
Animate.css - CSS Animation library
Vivus.js - a lightweight JavaScript class created by Max Wellito to animate SVG files, giving them the illusion of being drawn.
Loaders.css - Delightful and performance-focused pure css loading animations.

Design Resources

2017-01-19T03:11:00+01:00

Design Resources

Articles and Videos

Microinteractions: The Secret of Great App Design - Great article on Microinteractions by Nick Babich
10 Videos All Designers Should Watch - 10 videos on creativity and design
These 7 Books Are Necessary Reading for All Creatives - Book list to inspire your inner genius

Freelancing

Upwork - Market for freelance work
Fiverr - Freelance services for the lean entrepreneur

Photography

EyeEm - Get your photos bought by leading brands and agencies

Microinteractions

Guide to using Principle - A Step-by-step Guide to UI Animation with Principle and Sketch

Archived Articles

2017-01-19T03:11:00+01:00

UX

Airbnb Guerilla Usability Test - A usability test on airbnb by someone not affliated. Good way to present an idea to company!

Customer.io UX Design Project

2017-01-19T03:11:00+01:00

To wrap up this design homework, I planned to pull everything together in a quick post to make it easy for review. So far I have spent about two and a half hours on the challenge and I will spend no more than 30 minutes getting this live - hopefully without too many typos.

To give you a quick breakdown of how I spent my time, I approached the project in this fashion:

30 minutes to research, pull assets, plan execution
30 minutes writing copy and quickly sketching wireframes
45 minutes in sketch building basic components then experimenting with different layouts
45 minutes on codepen building out the layout
30 minutes writing post and publishing (correction - ended up spending an hour)

Photo of wireframes

When I began to consider layout, I started with a simple, straightforward design with a call to action that would take you to a form on typeform.com. Even though the layout was simple, going to typeform.com was overkill.

Next I toyed with the idea of a layout split into 3 parts. The left side would have all the content, such as speaker information, and scroll independently. The right side would be a fixed navigation of homeSections and a fixed sign up module. I have seen a couple sites utilize this in really interesting ways, but it is more appropriate for a big project with a lot of content such as a conference website.

To best address the project at hand I decided to simplify ideas to focus on the content. I wanted to make sure that all of the content and sign up information would display on a single web sized screen. I started with another simple layout and then played with some ideas to differentiate the layout by integrating different angles and content shapes and relationships.

Simple build for web - view full size

Alternative build requiring a bit more time - view full size

Codepen build out

These are two of the layouts that I put together in sketch and decided to move forward with. The sketch design made it very easy for me to quickly build out the first design as a codepen. You can view it here codepen.io/jarrydwafer/pen/xggpma

Followup

To take this one step further I’ll go through what I would do next if I had the budget and time to maximize the impact of this event page. For an event page like this, you can really optimize conversions by optimizing things such as headlines through A/B tests. It is also important to know where users come from, how long they stay on the page, and what percentage of those that click in the form actually complete the form.

Continuing to learn from projects is important so that you can be more effective on the next one. Ideally, there would also be various traffic drivers to the sign up page such as adwords, print ad’s in magazines, email campaigns, sponsorships, etc. For those of you in marketing, you know exactly what I am talking about!

On that note, thank you for giving me the opportunity to present this project to the team. I had a fun time putting this little diddy together. If you have any questions, please feel free to contact me.

Peace out!

Animation + Video Resources

2017-01-19T03:11:00+01:00

Stock Video Websites

Video Communities

Motion Corpse - animation community with publicly shared After Effects source files
Animography - animation community with publicly shared After Effects source files
9 Squres - An international motion design collaboration.

Video Tutorials

Welcome to After Effects - 2013 article to help get started with After Effects

Case Study: UX audit of sign up and onboarding process

2016-12-28T19:37:00+01:00

In operation since 1999 and currently powering over 40,000 online shops, Volusion.com is a very successful ecommerce SaaS platform. At first glance, Volusion’s marketing website is slick and shiny, but once you sign up for an account that modern facade is lifted and a product painfully stuck in the past is revealed.

Above is the marketing website, below is the template gallery to view available themes - laid out in a bunch of nested tables.

The Problem

Volusion’s problem was clear as soon as you signed up for a trial. The product felt old and slow and it’s experience couldn’t hold a candle to its future forward competitors like Shopify and Squarespace. As a result, conversion rates were dropping week after week.

We were asked to analyze the competition and re-imagine what we could do between sign up and a user’s initial introduction to the product dashboard to help boost conversions. This project required a detailed understanding of user needs and behaviors, so we started at the beginning with research, as a user looking for a ecommerce platform.

When a new user signs up for a trial account, Volusion creates a store and dumps that user onto a complicated, unintuitive dashboard. Once new users signed up and the dashboard was revealed, only a small percentage of those users would take a single action to start setting up their new store.

It was clear that there were many issues that had to be addressed. If users were unable to get started setting up their store, all hope of converting them into a paying customer were lost. We broke down what other industry leaders were doing to keep trial users moving forward, presented them to the Volusion team and were subsequently asked to introduce onboarding steps and contextual reengagement opportunities.

Limitations

This project had some major limitations in terms of team and technology. I was hired to work directly with the CEO and a ‘growth hacker’, but I was siloed from the in-house design and development teams.

In terms of technology, the store creation process really crawled, and the problematic dashboard was in the middle of a redesign. Both features could use some major considerations, but I was asked to come up with solutions that left these outdated technologies intact.

Solutions

Our goal was to get users from sign up through set up in as few intuitive steps as possible. We really focused on identifying different User Types that would allow us to customize our onboarding and reengagement experiences based on specific user needs.

To address our limitations, I made suggestions to improve the ‘perceived speed’ of store creation by giving users a small task to complete while the store is being configured and introduced steps to pick a theme, set up a logo, and upload a first product / product list so that a User reaches the dashboard with a store that is already visual configured for their brand.

After a handful of deliverables and revisions, I was asked to come out to Volusion’s headquarters in Austin, TX to present to the team leads. Our review consisted of:

Competitive analysis of big market players: Shopify, Squarespace, Big Commerce, Zoey (by Magento)
UX audit of sign up
UX audit of store set up process
Defining and identifying user types
Collecting and leveraging user information
Prototype sign up flow for desktop and mobile
Prototype set up flow for desktop and mobile
Map out reengagement opportunities

Jarryd Wafer - UX Designer and Product Team Lead at Booking.com

Design a mobile micro-interaction with Principle

Start with a solid idea

Layout Screens

Time to open and import to Principle

Setting up interactions and animations in Principle

Exporting Principle files to share.

Building a Simple Ember.JS App

BUILDING A SIMPLE EMBER APP

Install Ember and Ember CLI

Creating an App Repository

Creating a new template

Routes

Components

Typekit

LESS

Creating a contact form

Agency Analytics - Email Response

1) How many hours a week are you able to devote to this position?

2) Have you ever worked remotely at a previous position? If so, what methods did you use in order to communicate and go over project specifications?

3) Please describe your developer experience, if any. Specifically, do you have any experience with ReactJS and CSS?

4) Please signup for a trial account at agencyanalytics.com. Analyze the current onboarding screen (verify email, specify name and create campaign). Explain how you would change this area to create a better user experience.

5) Please visit agencyanalytics.com and hover your mouse on the features menu link (you should see a popup with additonal links). Please create a mockup to improve the look of this popup. You may add additional components (ie. description) if you think they are necessary.

Building an AJAX contact form

Building the HTML form

Submitting the Form Using AJAX

Creating a PHP Mailer Script

Web Technologies + Learning Modules

Code schools

Technologies

Animations

Design Resources

Design Resources

Articles and Videos

Freelancing

Photography

Microinteractions

Archived Articles

UX

Customer.io UX Design Project

Photo of wireframes

Simple build for web - view full size

Alternative build requiring a bit more time - view full size

Codepen build out

Followup

Animation + Video Resources

Stock Video Websites

Video Communities

Video Tutorials

Case Study: UX audit of sign up and onboarding process

The Problem

Limitations

Solutions