The Kickoff

HelloSign Web App Redesign

When I joined HelloSign back in 2014, we were a tiny team of dedicated individuals who were working hard to solve a problem that’s much too familiar to us all: how do I sign and send this damn document? Where’s the printer? Where’s the scanner? Do they even make those anymore?!

Although, we were working on an important problem and had a lot going for us, our web app was a bit of a mess. It didn't do a great job of showcasing the true value of our amazing product. So, we decided to take another stab at it.

The Kickoff

The Kickoff

We kicked the project off by asking “Why?”. Before diving into possible solutions, we wanted to understand what some of the problems were and why we should even consider a redesign. This early phase included:

1. Auditing and understanding the existing product

2. Forming informed assumptions

3. Early research to validate or dismiss assumptions

 

 

User flow study

User flow study

The first order of business was working on a user flow map. Having this zoomed out, bird's eye view gave us a lot more visibility into how our users experience the web app. We found that some crucial pages were missing from the flow and also, some of the paths seemed to be disconnected. It was clear that we needed to rethink the flow as our first step.

Forming & Validating Assumptions

Forming & Validating Assumptions

As product creators, we’re constantly forming assumptions about how users use the products that we design. This becomes easier to do when working on a redesign since you’re in the product every day and are able to easily point out some the frustrations. One major pitfall that you want to avoid here is not taking the time to validate your list of assumptions.

We started out by digging deeper into the data that we already had available to us. Since we were a very small team of just 15 people, I was lucky enough to be able to collect insight from teams that interact with customers on a daily basis — Customer Support and Sales. Running these internal focus groups has a high impact and a very low cost attached to it.

The second source for validating our assumptions were actual customers. We scheduled calls with a few of our customer to ask them direct questions that would help us identify areas of opportunities. We structured our interviews on these 3 questions (refer to this post by Charles Liu for more info):

What are you trying to get done? (Gather context)
How do you currently do this? (Analyze workflow)
What could be better about how you do this? (Find opportunities)

The themes that we constantly heard matched with our list of areas of opportunities pretty closely. The next step was to take this long list and prioritize items based on a few other factors like competitive analysis, available resources, and company objectives.

Goals

Goals

• The web app needs to cater to not just individuals but also small to medium teams

• Offer more robust functionality to be able to power more complex workflows

• Make the user experience more intuitive

• Consistency and scalability should be top of mind

 

Sprint

Sprint

We got 5 key people in a room for a week to brainstorm possible solutions, taking the goals of the project into consideration. We used the first two days to brainstorm and sketch. The third day was devoted to shortlisting the best ideas. On days four and five, we put together medium fidelity Invision prototypes of the 3 directions that we wanted to explore further.

We tested our two favorite solutions with power users. These were still at medium fidelity.

blank.png
web_app_redesign_hero_2.png
 👆🏽 Details for easy access to signing options and account details on every page of the app. This information wasn't readily available in the old design and was definitely a pain point for our users. 

👆🏽 Details for easy access to signing options and account details on every page of the app. This information wasn't readily available in the old design and was definitely a pain point for our users. 

blank.png
5_me+others.png
 👆🏽 One of the three signature request flows.

👆🏽 One of the three signature request flows.

documents.png
 👆🏽 Our 'documents overview' page is where all your documents live. A couple of important changes on this page were:  1. We introduced a 'status' column to let users know where their document is in the transaction, at a glance. This proved to be a very useful addition to the documents page.  2. We redesigned the 'more details' tab to include a lot more information about the transaction.

👆🏽 Our 'documents overview' page is where all your documents live. A couple of important changes on this page were:

1. We introduced a 'status' column to let users know where their document is in the transaction, at a glance. This proved to be a very useful addition to the documents page.

2. We redesigned the 'more details' tab to include a lot more information about the transaction.

Areas of Opportunity

Areas of Opportunity

An intuitive experience

One of our main goals as a company is to help teams become more efficient. The best way to meet this goal is by ensuring that we have an extremely simple, easy-to-use product. This is also a priority because given the nature of our industry/product, it's very easy to create something complex and convoluted. For this redesign, we made sure that we strip down the app to only keep what's absolutely needed. Editing is one of the toughest parts of the process, be it Filmmaking or Product Design. Simplicity FTW!

Consistency

Before I was hired, the HelloSign team worked with a few different contractors to design the web app. Needless to say, the user experience and visuals of the web app were all over the place. I wanted to make sure that by the time we launch our redesign, the web app is not only consistent with our newly redesigned brand (and logged out experience) but the consistency carries through across the board. In order to do this, it was important to start establishing rules and guidelines.

Scalability

As we scale from a small startup to a company that serves clients like Instacart, Twitter, Lyft, Samsung, our product needs to scale to meet more complex needs as well. While working on the redesign, we took our product roadmap into consideration to account for future developments. Another important factor in this redesign was internal scaling. It was important to design for efficiency between Creative, Product, and Engineering going forward. Like I mentioned before, there was no consistency in our web app. We took the redesign as an opportunity to start developing our style guide. It's still a work in progress but the style guide definitely helps us collaborate better as a team.

•••

This is one of the most exciting and challenging projects that I've worked on. What seemed like a huge undertaking in the beginning turned out to be a beautiful and elegant solution to some pesky problems.