Steph Parrott

Square

Thu, 12 Feb 2015 08:46:40 -0500

Getting invoices paid faster

Plumbers, caterers, massage therapists, martial arts studios and home inspectors have ditched paper invoices in favour of getting paid faster with online credit card payments via Square.

Overview

While many know Square for the little white card reader used at markets or the register in coffee shops, many sellers don’t have physical storefronts and need to take payments remotely. As a result, Square Invoices was introduced 4 years ago.

With little marketing to-date, adoption has grown organically through existing Square sellers and referrals. These sellers have seen the value in an invoicing system that is integrated with the rest of Square, willing to live without some of the missing features that are available in other invoicing systems.

As a result, the challenge for the team was to make the product more remarkable for existing users before focusing on new user growth.

Goals

While there were a seemingly endless number of features we could have built, we spent a lot of time really listening to sellers to prioritize which features would help them:

1. Get paid faster, so that they can better manage their cashflow.

2. Manage their invoices efficiently, so that they can spend less time on invoicing and more time on building their business.

3. Look professional, so that customers have trust in the seller delivering their product or service as promised.

Role & Process

As a team of 2 designers (within the larger Square design team), we individually led the design on different projects, but sitting next to each other, and next to our product manager, data scientist and engineers on the team, led to a very open and collaborative process.

I was a very strong advocate for integrating more user research throughout all stages of the design process, resulting in:

A design requirements document (‘DRD’) that would be created before a project kick-off and shared with the team alongside the existing product requirements doc. The DRD gathered and grouped user research from all available sources (surveys, support tickets, community forum & social media posts, sales and ongoing phone interviews) and framed the core issues/needs within the overarching jobs-to-be-done for the product. This document helped to bring the team (product, engineering, marketing, data science, support) onto the same page, empathize with our users and align on priorities from a user experience perspective.
An in-person and remote usability testing practise with sellers that helped us test designs and prototypes more frequently and consistently and allowed the whole team to be involved.

Featured Projects

Below you’ll find an overview of some of the projects designed to help fulfill the jobs above for our sellers. I would love to chat about the full process for each project with you, so please don’t hesitate to get in touch.

Shortcuts:

Invoice Timeline

Helping sellers see when invoices have been viewed, paid & everything in between.
Recurring Invoices

Improving the discoverability and ease-of-use for recurring invoices.
Automatic Reminders

Automating invoice payment reminders to help sellers get paid.
File Attachments

Saving sellers time with files attached to the invoice.

Invoice Timeline

Overview

Imagine that you sent an invoice to a client for a photoshoot you did last week. A few days have passed, including the due date, and it still hasn’t been paid. You’re thinking about following up, but you’re not sure if they’ve seen it yet and you don’t want to look too pushy.

For those without a physical storefront to represent them, looking professional is crucial when building trust and communicating with customers. Without more visiblity into the status of an invoice, sellers don’t have all the information they needed to communicate professionally with their customers. This desire for transparency and visibility was a common theme in our NPS surveys.

We opted for a timeline view to answer questions like ‘When did my customer last view this invoice?’ or ‘When was the last time I sent my customer a reminder?’ to help the seller manage their communication.

Previously, the seller could only view the current status of the invoice.

Now, the seller can view all activity related to the invoice in the order it took place. Here, for example, you can see that the customer didn't view the invoice until after the due date, and so the seller can take action as they see fit.

The Many States of an Invoice

The invoice timeline shows sellers the status and important actions that have taken place—when it was viewed, sent, updated—so that they have the information they need when communicating with their customer.

The designs needed to relect the multitude of states that an invoice can be in (unpaid, overdue, paid, refunded, failed, cancelled, etc.) and actions that can be taken in each state (for example, a reminder call-to-action is only shown when the invoice has not been paid).

The invoice in an unpaid state

The invoice in a paid state

The invoice in an overdue state

Once there are 3+ activities, the most recent (and relevant) activities remain visible, while past activity is still accessible.

Design Validation

After many iterations, we started a round of user testing to see how sellers would interpret the events in the timeline and how they would act on that information, and to see if there was any information that was missing that sellers would find useful.

The user testing validated many of the decisions we made around what information to present and informed some visual tweaks to the timeline as well. When seeing when the invoice has been viewed, for example, one merchant noted: ‘The viewed dates, that helps me know where they are at. If they just saw it, I’ll give them a couple more days’. Over time, we heard many times in interviews and online about how useful it is to see when the invoice was viewed:

You know what I love about @Square - it shows when invoice is viewed 👍🏼No more "oh I just saw this". 🚯 #freelancelife #smallbusiness
— Myra Joloya (@myrajoloya) June 9, 2017

A REALLY NICE THING ABOUT SQUARE is that it notifies you when ppl view your invoices so when ppl act like they didn't get it YOU CAN TELL
— Swordie the University Fool (@milkybois) June 29, 2017

Dear @Square thank you for this update that shows me when people see my invoice! I now send reminders when I see that they've saw it! 🙌🏾
— Ashli Brown (@mrsashlibrown) June 16, 2017

Redesigning Recurring Invoices

Overview

Square sellers use recurring invoices to send invoices on a repeat schedule—imagine a martial arts school offering a monthly membership or a wine shop offering a bi-monthly wine club.

When I joined, a year and a half after the feature was initially released, we decided to redesign parts of the feature for a number of reasons:

Low adoption: We weren’t seeing the adoption numbers we’d hoped for—10% of sellers exhibited recurring behavior but weren’t using the recurring invoices functionality.
Usability issues: There were a number of usability issues that frustrated sellers, costing them time and money (for example, when a customer chose to save a card on file with the seller, the card wasn’t applied for future recurring invoices—this confused many sellers, as they thought it would be an automatic process).
Discoverability issues: We saw many support issues along the lines of “Do you guys have a way I can set up automatic monthly payments with my clients?”. Sellers were asking for functionality we already had but either couldn’t find it or didn’t think of what they were trying to do as a recurring invoice.

Previously, the forms to create an invoice and a recurring invoice were separate. We decided to combine the form under a 'Frequency' option in order to improve discoverability of the feature and to bring feature parity between the forms.

We added search, filters, stats and toast confirmations to help sellers find, manage and navigate their recurring invoices more easily.

Prioritizing for Impact

To determine what would have the greatest impact on helping sellers manage their invoices more efficiently, get paid faster and look more professional in their communication, I looked at:

Support issues to find and track the most common and painful issues.
In-product feedback to learn about the experience of current sellers and what’s top of mind for them.
Phone calls with existing sellers to learn more about their specific use cases and to validate open questions we had from the support issues and feedback.
Usertesting.com to test the discoverability of recurring invoices with non-Square users.

Previously, recurring invoices could only be created and managed on the web. To increase adoption, we introduced recurring invoices on mobile.

Recurring options on mobile

Simplifying the process for allowing customers to save a card on file for automatic payments.

Additional stats and timeline events for a recurring invoices.

Design Validation

After many iterations and rounds of user testing and phone calls to validate that we were making the right changes, we launched in a Beta period to gather more feedback from sellers.

Post-launch, I followed up on the phone with many of the sellers that had provided initial feedback, and we also launched a feedback widget for sellers to provide feedback in-product.

We knew there was still some missing functionality that we weren’t able to prioritize at this point, but through constant validation during the process and via multiple channels, we were confident in the changes and the impact they would have for these sellers:

"I love the new system! Makes keeping up with my customers recurring invoices or automatic charging a breeze!!"

"Good changes! I like being able to allow automatic payments in one click instead of having to save their card and then edit the invoice. Also, I'm glad Square doesn't send an email every time you update a recurring invoice."

"Very pleased with the updates. It seems to run much faster and the option to search recurring invoices is also great. Your company is kick ass."

Automatic Reminders

Overview

Unpaid invoices are the bane of many sellers’ existence. Reminding a customer to pay an invoice can be a very delicate dance. Sellers don’t want to come off as pushy, but they also need to be paid on-time to run their business as efficiently and stress-free as possible.

The team introduced a ‘Send Reminder’ feature that sellers could use to resend the invoice manually, one-at-a-time. This worked well generally, but was time-consuming and something many sellers would just forget to do. We found that sellers who used invoice reminders were 5% more likely to get paid—a number we hoped to increase by automating the process.

When enabled, sellers can leave the defaults or set custom dates and messages. In a future iteration, sellers will be able to set it on by default so that they don't need to set up the reminders every time.

Sellers can choose any number of days before, on or after the due date and can choose to include a custom message.

Setting Smart Defaults

When deciding which reminder defaults to provide to sellers, we looked to the current usage of manual reminders. We found that reminders were sent most frequently 1 day after the due date, followed by 2 days after. We also saw that sellers typically sent 1.4 reminders per invoices. We decided to set the default number of reminders to 2, set at 1 and 3 days after the due date (we thought 1 and 2 days after might seem a bit irritating).

Reminders enabled on mobile.

Custom date and message.

The timeline shows when the next reminder is scheduled to prevent over-communication.

The customer's view of the email reminder with custom message from the seller.

Design Validation

Usertesting.com and in-person usability testing validated that sellers understood what the feature would do, how to enable it and edit the defaults.

Surveys and phone calls with sellers also validated some of our design and product assumptions. For example, we decided to limit the number of reminders to 5 and found that over 50% of survey respondents would send 1 or 2 reminders and 0% would send more than 5.

Almost 75% of survey respondents said they would set the same reminders for every invoice—this validated our hypothesis that a global setting would save sellers time by not having to set up reminders every time. A settings page for this and other defaults was in development, but unfortunately wasn’t available at launch.

@Square really loving scheduling automatic reminders for invoices! What a game changer! 😁
— Newport Solutions (@NewportSol) June 5, 2018

File Attachments

Overview

Square sellers use file attachments to provide their buyer with all the information they need in order to make a payment and close the sale.

Previously, sellers would need to separately email the file to their customer, creating more work for the seller and providing a less professional experience.

While a seemingly pretty simple feature on the surface, there were a number of things to take into account, from the type and quantity of files allowed, to how long files should be stored, to how the files would be represented in an invoice preview, the invoice email and the invoice payment page.

Adding a photo attachment on mobile.

Option to rename attachment, helping the seller to look more professional.

Uploaded attachment on the invoice form.

Customer's view of the attachment while paying the invoice.

Professional File Names

On mobile, I wanted to ensure that sellers would still look professional—right down to the naming of their files. While it is easy to rename a file on a desktop computer, it’s not so easy to do on a phone. We provided sellers with a generic name of Invoice-Attachment-#, rather than the default IMG_####, and sellers had the option to rename it completely before adding it if they have the time.

Adding a file attachment on desktop.

Uploaded attachments on the invoice form.

Customer's view of the attachment while paying the invoice.

Design Validation

Usability testing via UserTesting and with existing sellers showed that they had no problems finding the functionality on desktop and mobile, selecting files, renaming them, uploading them, and verifying that they were uploaded. Some confusion arose around how the uploaded file was presented to the customer in initial iterations, so this gave us time to iterate.

Upon release, the feature gained a healthy adoption and we continued to monitor things like the average number of files being uploaded and most common file types being uploaded to make sure the limits we initially set continued to serve our sellers well.

"It's important to have a better reference available when reviewing past transactions and this helps provide additional details to the customer in one format and location."

"Found it perfect for sending the signed contract along with the invoice to our clients. It takes a step out of our process and saves us time."

"Easy to do and allows my customers to review the detailed documents we produce."

Square

Thu, 12 Feb 2015 08:46:40 -0500

Getting invoices paid faster

Plumbers, caterers, massage therapists, martial arts studios and home inspectors have ditched paper invoices in favour of getting paid faster with online credit card payments via Square.

Overview

As a result, the challenge for the team was to make the product more remarkable for existing users before focusing on new user growth.

Goals

While there were a seemingly endless number of features we could have built, we spent a lot of time really listening to sellers to prioritize which features would help them:

1. Get paid faster, so that they can better manage their cashflow.

2. Manage their invoices efficiently, so that they can spend less time on invoicing and more time on building their business.

3. Look professional, so that customers have trust in the seller delivering their product or service as promised.

Role & Process

I was a very strong advocate for integrating more user research throughout all stages of the design process, resulting in:

A design requirements document (‘DRD’) that would be created before a project kick-off and shared with the team alongside the existing product requirements doc. The DRD gathered and grouped user research from all available sources (surveys, support tickets, community forum & social media posts, sales and ongoing phone interviews) and framed the core issues/needs within the overarching jobs-to-be-done for the product. This document helped to bring the team (product, engineering, marketing, data science, support) onto the same page, empathize with our users and align on priorities from a user experience perspective.
An in-person and remote usability testing practise with sellers that helped us test designs and prototypes more frequently and consistently and allowed the whole team to be involved.

Featured Projects

Shortcuts:

Invoice Timeline

Helping sellers see when invoices have been viewed, paid & everything in between.
Recurring Invoices

Improving the discoverability and ease-of-use for recurring invoices.
Automatic Reminders

Automating invoice payment reminders to help sellers get paid.
File Attachments

Saving sellers time with files attached to the invoice.

Invoice Timeline

Overview

Previously, the seller could only view the current status of the invoice.

The Many States of an Invoice

The invoice in an unpaid state

The invoice in a paid state

The invoice in an overdue state

Once there are 3+ activities, the most recent (and relevant) activities remain visible, while past activity is still accessible.

Design Validation

You know what I love about @Square - it shows when invoice is viewed 👍🏼No more "oh I just saw this". 🚯 #freelancelife #smallbusiness
— Myra Joloya (@myrajoloya) June 9, 2017

A REALLY NICE THING ABOUT SQUARE is that it notifies you when ppl view your invoices so when ppl act like they didn't get it YOU CAN TELL
— Swordie the University Fool (@milkybois) June 29, 2017

Dear @Square thank you for this update that shows me when people see my invoice! I now send reminders when I see that they've saw it! 🙌🏾
— Ashli Brown (@mrsashlibrown) June 16, 2017

Redesigning Recurring Invoices

Overview

Square sellers use recurring invoices to send invoices on a repeat schedule—imagine a martial arts school offering a monthly membership or a wine shop offering a bi-monthly wine club.

When I joined, a year and a half after the feature was initially released, we decided to redesign parts of the feature for a number of reasons:

Low adoption: We weren’t seeing the adoption numbers we’d hoped for—10% of sellers exhibited recurring behavior but weren’t using the recurring invoices functionality.
Usability issues: There were a number of usability issues that frustrated sellers, costing them time and money (for example, when a customer chose to save a card on file with the seller, the card wasn’t applied for future recurring invoices—this confused many sellers, as they thought it would be an automatic process).
Discoverability issues: We saw many support issues along the lines of “Do you guys have a way I can set up automatic monthly payments with my clients?”. Sellers were asking for functionality we already had but either couldn’t find it or didn’t think of what they were trying to do as a recurring invoice.

We added search, filters, stats and toast confirmations to help sellers find, manage and navigate their recurring invoices more easily.

Prioritizing for Impact

To determine what would have the greatest impact on helping sellers manage their invoices more efficiently, get paid faster and look more professional in their communication, I looked at:

Support issues to find and track the most common and painful issues.
In-product feedback to learn about the experience of current sellers and what’s top of mind for them.
Phone calls with existing sellers to learn more about their specific use cases and to validate open questions we had from the support issues and feedback.
Usertesting.com to test the discoverability of recurring invoices with non-Square users.

Previously, recurring invoices could only be created and managed on the web. To increase adoption, we introduced recurring invoices on mobile.

Recurring options on mobile

Simplifying the process for allowing customers to save a card on file for automatic payments.

Additional stats and timeline events for a recurring invoices.

Design Validation

After many iterations and rounds of user testing and phone calls to validate that we were making the right changes, we launched in a Beta period to gather more feedback from sellers.

Post-launch, I followed up on the phone with many of the sellers that had provided initial feedback, and we also launched a feedback widget for sellers to provide feedback in-product.

"I love the new system! Makes keeping up with my customers recurring invoices or automatic charging a breeze!!"

"Good changes! I like being able to allow automatic payments in one click instead of having to save their card and then edit the invoice. Also, I'm glad Square doesn't send an email every time you update a recurring invoice."

"Very pleased with the updates. It seems to run much faster and the option to search recurring invoices is also great. Your company is kick ass."

Automatic Reminders

Overview

Sellers can choose any number of days before, on or after the due date and can choose to include a custom message.

Setting Smart Defaults

Reminders enabled on mobile.

Custom date and message.

The timeline shows when the next reminder is scheduled to prevent over-communication.

The customer's view of the email reminder with custom message from the seller.

Design Validation

Usertesting.com and in-person usability testing validated that sellers understood what the feature would do, how to enable it and edit the defaults.

@Square really loving scheduling automatic reminders for invoices! What a game changer! 😁
— Newport Solutions (@NewportSol) June 5, 2018

File Attachments

Overview

Square sellers use file attachments to provide their buyer with all the information they need in order to make a payment and close the sale.

Previously, sellers would need to separately email the file to their customer, creating more work for the seller and providing a less professional experience.

Adding a photo attachment on mobile.

Option to rename attachment, helping the seller to look more professional.

Uploaded attachment on the invoice form.

Customer's view of the attachment while paying the invoice.

Professional File Names

Adding a file attachment on desktop.

Uploaded attachments on the invoice form.

Customer's view of the attachment while paying the invoice.

Design Validation

"It's important to have a better reference available when reviewing past transactions and this helps provide additional details to the customer in one format and location."

"Found it perfect for sending the signed contract along with the invoice to our clients. It takes a step out of our process and saves us time."

"Easy to do and allows my customers to review the detailed documents we produce."

Box

Thu, 12 Feb 2015 08:46:40 -0500

Making it easier to build with Box

While Box is known for its secure file sharing capabilities for enterprise companies, one of the company's larger goals is to help employees collaborate on content and get work done faster, through Box's apps or custom-built content-centric apps.

Overview

In 2015, Box announced Box Platform, which helps developers build apps with Box as a hidden layer for managing, previewing, securing and collaborating on content.

With content at its center, Box is particularly focused on the ability to view and collaborate on all kinds of content in the browser—from 3D models to Word docs to DICOM medical images.

My Role

In 2015, Box acquired Verold, a start-up I worked for in Toronto. We were an 8-person team working on an online editor for creating interactive 3D projects for the web.

Once I joined the Product Design team at Box, I worked as the sole designer on the Box Platform team, which encompassed projects relating to developer experience and content experience.

Featured Projects

Below you’ll find an overview of some of the projects I worked on at Box. I would love to chat about the full process for each project with you, so please don’t hesitate to get in touch.

Shortcuts:

Developer Console

Redesigning how developers create and configure apps built on Box
3D Preview

A new way for 3D content creators to view and share 3D files in Box
Document Annotations

Redesigning how document annotations work in custom apps

Redesigning the Box Developer Console

Overview

Developers use the Developer Console to configure the Box API settings for use in their apps. When Box introduced Box Platform, we ran into a few issues with the existing console:

Lack of hierarchy and structure: Over many years, the developer console became a very long form with every possible setting available, quickly becoming difficult to understand and navigate.
Out-dated design system: The rest of the Box web app was being updated to a new design system, and the developer console needed to follow suit.
Poor onboarding: Once a developer created a new app, there were no clear next steps to start configuring their app.

Previously, the developer console was a one-size-fits-all laundry list of settings and configurations that a developer would have to sort through without any clear hierarchy.

With the redesign, the settings are grouped by functionality and developers are only shown those that are relevant to their app type.

Goals

Through surveys and interviews by our user research team, we found that the biggest pain point for developers was configuring an app, particularly choosing what type of user authentication was appropriate for their use case.

Box developers prioritized functionality (What types of apps can I build? What features can I utilize?) and ease of use (How easy will it be for me to build? How quickly can I get started?) over security, cost and reputation when considering a platform integration, which highlighted the importance of a friction-less app setup.

Overall, our goal was to reduce the time it takes to create and configure an app, thereby increasing the number of developers able to self-onboard and get to what we defined as the ‘a-ha’ moment: making their first API call.

With the redesign, we introduced a left-hand navigation that provides clear access to a developer's apps, reference docs and account settings.

Settings are grouped according to function, with smart defaults and in the order the developer will logically go through when configuring their app.

Streamlining Settings

Since we were working with an existing product, we started with an audit of all the current settings and functionality. Because the code base was very old and most of us working on the project were new to working with the codebase, there was a lot of digging around to see how things worked.

The first step in creating a new app asked developers about their use case, to inform smart defaults provided in the next steps.

A user authentication method is recommended based on the type of app the developer chose in the previous step.

Focusing on App Creation

Knowing that authentication was causing the most friction for developers, we made this a focus for the new app creation flow to make sure developers could configure their application easily.

Since these were new app concepts being introduced, I experimented with many iterations of copy, graphics and layouts in order to make the choice as clear as possible. With feedback from the sales engineering team, along with testing with internal and external developers, we incorporated the terms they used into the short descriptions (above, left).

To get developers to their first API call faster (the ah-ha moment), the final step of creating an app gives them a code snippet with their developer token pre-filled.

Empty states provide more information for functionality that may be optional for their use-case, like integrating an app into Box's web app.

By reaching Beta ahead of schedule, we were able to showcase the new developer console at BoxWorks, which increased platform product awareness:

Through this redesign, we built a foundation that will allow the team to expand with new features without compromising the user experience.

3D Preview

Overview

3D preview in Box is a big deal for those that work with these files everyday—historically, 3D renders are shared with clients or colleagues as still images or videos, losing the file’s inherent interactivity. Being able to preview and interact with a 3D model in the browser—without requiring expensive proprietary software—opens up a slew of new sharing and reviewing workflows for these content creators and consumers.

The goal for this project was to integrate a very simplified version of Verold Studio in order for Box users to upload and preview 3D models within Box’s web app.

We started off with the most basic controls to help users configure the correct look and position of the model (rotation, render mode, camera projection).

A few early explorations of potential features: visual version history, multi-view, animation preview and visual render modes.

Beta Learnings

During the 3D preview Beta, we onboarded 40+ customers to start previewing their 3D files. A couple of weeks in, we ran a user study to dig deeper into some really interesting use cases ranging from 3D product displays to orthodontic scans. We found that 50% of users were previously sending 2D images instead of 3D files as a workaround, and that 90% of beta users found that Box’s 3D preview made sharing and viewing 3D files easier.

We found a number of problems that 3D preview in Box was helping to solve:

Consolidated assets: With all files in Box with unlimited storage, 3D assets (which often have many linked files) are no longer lost between different servers and file systems.
Reducing email communication: Collaborating in Box reduces a lot of emailing back and forth or project management software that isn’t user-friendly.
New audiences: Stakeholders who did not have access to expensive 3D software previously are now able to preview the 3D files instead of 2D images.

With Box functionality such as Box Sync for asset syncing, email notifications when files are updated, granular sharing permissions, file comments, version history to revert to prior renderings and large file uploads, 3D preview becomes part of a much larger streamlined workflow.

3D preview GA’d on Box, enabling anyone to upload and share 3D files. Try it out below:

Document Annotations

Overview

The Box View API converts Office and PDF documents to easily embeddable HTML5. This API replaced an older service called Crocodoc, another Box acquisition, which had a document annotations feature.

Annotations were a key feature used heavily by educational customers and needed to be brought into this new preview experience. While there were many different types of annotation types previously offered, we found that highlighting, highlighting with a comment and point annotations were most commonly used by far.

When a user highlights a piece of text in a Word doc, PDF or Powerpoint, a contextual menu appears. Annotations are numbered to help users reference comments in the document.

Point annotations can be added to any part of a document or image, displaying the username, photo, comment and date and time of the comment.

We went through a number of iterations and user testing to find the right balance between a point comment and a highlighted text comment. An initial version with a circular annotation proved confusing for users, as it looked like it was floating—it wasn’t clear that it was an annotation and linked to a comment. We changed this to a pin-shaped annotation with a circle below to anchor it to the location where the comment is placed.

Box Annotations were released for developers to use through the Box View API. The Box Web app team is currently working on incorporating annotations into file previews.

Verold

Thu, 12 Feb 2015 08:46:40 -0500

Making 3D content more accessible

What YouTube did for videos, Verold aimed to do for 3D. The same issues that video creators faced 10 years ago—the passing back and forth of huge files and expensive software and production equipment—has left 3D creators sharing renders as 2D images or video, losing the inherent interactivity of the original file.

Overview

Verold Studio was* a browser-based 3D editor that used WebGL to create interactive presentations on the web. With a complex subject like 3D, Verold’s marketing site needed to clearly communicate what Verold Studio could do, and more importantly, what value it could bring to 3D content creators.

This redesign project began as an incremental change to a couple of invisible features that required a lot of attention: documentation, tutorials, and support. As we experimented with new designs for our nearly non-existent documentation section, we began to form hypotheses that this new design could facilitate clearer communication sitewide and provide a better baseline for improving our sign-up and project creation metrics.

* Verold was acquired by Box in 2015 and is sadly no longer with us.

My Role

For this project, I led the UX/UI design of everything that surrounds the Verold Studio editor - marketing pages, documentation, user profiles, project pages, and account settings. I worked closely with our CEO, front end developer and 3D graphics engineers to make sure we were accurately communicating the complex capabilities of Verold in a digestible way.

Verold Studio with a model imported, and an example of how the project was embedded within an external site.

Research

To determine whether redesigning the site was a worthwhile endeavour, we conducted usability studies of the existing site, testing three aspects:

Marketing site content: Participants were asked to visit the existing site and talk about what they thought the site was, who it was for, what one could do there and so forth.
Project discovery: Participants were asked to look for and explore existing 3D projects.
Sign-up flow: Participants were asked to sign up for an account and create a new project.

Wireframes & early mocks for the Help & Documentation pages

Based on our research, we redesigned the homepage with clear use cases, a simple step-by-step overview of Verold Studio and used the power of faces to show the value of Verold to the personas we identified.

As a very visual product, many of the features of Verold Studio are better to show, rather than tell. We found projects that best showcased each individual feature and embedded those on the page.

‘What our product can do’ vs. ‘What you can do with our product’

Participants felt that the homepage didn’t clearly explain what Verold Studio actually was (‘another 3D modelling tool?’) or what value could be created with it (‘what does this do for me?’).

Participants could only find example projects on a page that listed often unfinished community projects, so their first impression of what was possible was pretty underwhelming for them.

Based on the usability studies, we decided to redesign the homepage, features and pricing pages using the new layouts and visual design. We also added an examples page to showcase the best projects, and redesigned the company page, adding our mission, team photos, press articles and a media kit.

At the time of the redesign, we also introduced new pricing tiers. Our aim was to make it easier to see how the plans compared and contrasted.

The redesigned user profile page differentiates between drafts, published and private projects.

We added an Examples page to showcase the best examples of what could be made and changed the name of the Gallery to Community, to emphasize that the projects were made my community members.

User Onboarding

With the goal to improve onboarding and increase the number of projects being published, I wanted to better understand new users’ first time experience with Verold Studio. So, I sent out an email everyday for a few weeks to every new user that had signed up the day before, asking what they’d hoped to do after signing up and the number one question they had about getting started.

I was pleasantly surprised by the number of people that responded (about 30%), who took the time to write really thoughtful replies. Many even thanked me for reaching out to them.

Jason Fried’s post on the subject of simple email surveys was key: send a simple, short message that sounds like a real person, even if it’s a canned message. Mentioning the importance of feedback to a small team gives the customer faith that their response will be heard and responded to. An overly designed, clearly automated message wouldn’t have been nearly as effective.

Responses ranged from finding bugs to much appreciated praise. However, one common theme that stuck out was along the lines of “I haven’t had time to try out Verold yet…” or “When I get a chance…”. Users believed that getting started was a complicated, time-consuming process because they couldn’t see a clear path to success: uploading their model and seeing it in the browser.

Our goal was to streamline the sign-up process and eliminate the number of empty projects created without a model, so that users could see the value as quickly as possible.

Previously, creating a new project dropped users into an empty canvas without clear next steps. This redesigned flow would require an upload first (for those without a model handy, a template or sample model would be provided).

While the model is uploading and processing, users would then be able to name their project and add other details that would appear on the project's page.

Results

As part of the redesign, we started implementing MixPanel + People Analytics in order to create a baseline for making data-driven design decisions. We didn’t get to act on that data, however, as our team got some game-changing news as we neared the end of development: Box was acquiring Verold. As the deal was going on, the site was in limbo. We launched it in an MVP state with not quite as much polish as we would have liked, and the focus then shifted to communicating the acquisition to our users—what it would mean to their accounts, their projects and the transition plan that was being put into place. Our users were sad to see Verold Studio go, but were excited to see how the product would evolve under Box’s wing.

Microsoft

Thu, 12 Feb 2015 08:46:40 -0500

Using Kinect to get kids off the couch

Studies show that embodied learning—learning by involving the whole body—helps kids grasp new concepts. Microsoft's Soho Productions studio was given a mighty task to do just that with Sesame Street using the Xbox + Kinect.

Kinect Sesame Street TV

Overview

For decades, Sesame Street has drawn its young audience in with audience participation—songs that encourage singing and dancing along, answering Elmo’s questions, or counting with Count von Count.

Kinect Sesame Street TV, a collaboration between Sesame Workshop and Soho Productions, aimed to do this on a whole new level. Using the Xbox + Kinect, kids are dropped into the middle of Sesame Street to jump, move, wave and play with Elmo & friends.

My Role

I hopped across the pond to London in 2011 and joined the small but mighty Creative Media team as a motion designer and video editor. I worked alongside game designers, user researcers, engineers, art directors and producers to create interactive video branching magic.

A promo I edited, giving you an idea of the type of interactivity for kids to experience.

Motion Design as User Feedback

With video as the medium, motion graphics functioned as a layer providing immediate feedback to the child in front of the screen. A character on screen might ask them to get up and jump, wave or shout in order to help them complete a task. Without visual or auditory feedback, kids lose interest, feel overwhelmed or may not feel involved in the story.

In this example, kids are asked to wave to the character on screen. In usability sessions, kids weren't sure what to do, or if they did wave, their wave wasn't long enough or wide enough for the Kinect to detect it. We needed a big, enthusiastic wave. After several experiments, I added a paw animation with particles in an arc shape to mimic the action the child should do—it worked!

Once the child waves, as detected by the Kinect, the specific shape that they've learned in the segment is reinforced through on-screen graphics.

Making Old Footage Interactive

An interesting challenge came with taking existing Sesame segments from past seasons and transforming them into an interactive experience. These were filmed on set with human cast members and muppets, sometimes featuring a celebrity guest (like Jason Schwartzman 💖).

The scenes were cut down to ~7 minutes and to keep kids engaged, the team decided to “hide” objects throughout the scene for kids to find (through voice and gesture detected by the Kinect).

There needed to be varying levels of difficulty in finding the objects to keep kids engaged, which came with a number of technical and usability challenges:

Blending graphics into complex video footage.
Balancing the frequency of the objects, the position and size of the object, the length of time on-screen and the level of visibility.

Left, the pumpkin is "hidden" and animates when found, right. These scenes involved meticulous camera tracking, rotoscoping and compositing in After Effects. Think of all the muppet fur! The objects fit in the scenes seamlessly, often blending in with backgrounds or hiding behind characters or objects.

Our User Research team tested segments on a weekly basis with preschoolers, revealing objects that were too difficult to find, too dark or too small or onscreen for too short of a time, so we could go back to the footage and iterate.

Adapting for Touch Screens

Another interesting challenge came when we began working on a touch version for Windows Surface. The challenge was to use the same content, but the interactions and voiceover prompts needed to be redesigned for tap and swipe rather than motion and voice.

I worked with our game designers and engineers to restructure and redesign the video content and graphics to correspond with the tap and swipe gestures.

An example of this was a segment that originally required the child to jump along with Cookie Monster, which was adapted to be a tap instead. The challenge was that we only had the original footage and assets, so this required taking a still image, slicing and dicing to animate it, and compositing it.

Results

Kinect Sesame Street TV was released in September 2012. Microsoft made some snazzy promo videos, it won a BAFTA Children’s Award and got positive reviews from game critics and Amazon critics alike.

It wasn’t quite the game-changer I had anticipated for such an inventive TV experience—owning a $300 Xbox is a barrier for a lot of families and 3-year-olds aren’t so great at navigating TV and Xbox menus themselves—but it was definitely a success for those of us working on it and we had a lot of fun and pride in doing so.