Align
Align is growth management software companies. Organizations use the software to keep their goals and employees aligned as they scale up. Key features of the app include a critical number dashboard, a daily stand up section, and a place to track individual and company KPIs.
As the sole designer at Align, I worked with the tech, marketing and customer-facing teams to overhaul the visual style, reposition the product, and redesign key components.
The CHALLENGE
Align was originally designed to digitize a business methodology called the Rockefeller Habits. Early Align users were followers of these habits. They hired specialized business coaches to help them implement this methodology within the Align software.
As Align grew its user base and started to enter new markets, most new users did not have a coach. Some wanted to track KPIs but were unfamiliar with the Rock Habits. These new users had no idea how to begin using the product.
In addition, there were severe usability issues. Since the software had grown from disconnected feature requests from business coaches, even long-term clients had usability issues performing basic tasks. Discoverability was an issue.
As a result, Align was having a hard time converting new customers and retaining old customers past a year. The redesign was a two-pronged strategy to address conversion and retention.
Step 1: Learn
Understand the User
When I joined Align, my first objective was to learn as much about the existing users as possible. I listened in on sales calls to hear impressions from potential clients who were seeing the interface for the first time as well as customer support calls with existing users. I conducted discovery interviews with power users and ultimately established a User Advisory Panel filled with coaches and users.
From this research, I created personas for our existing users. I worked with the marketing team to create personas for target users as well.
PROCESs & tools
NPS (Net Promoter Score) surveys
Support tickets
Customer Interviews
Observational Studies
Timed task-focused “find-ability” study
Personas
User Advisory Panel
Google Analytics
FullStory
AppCues
Understand the Problem
From the user interviews, distinct usability patterns became to emerge.
gather data
To access granular actionable user data, I researched and implemented data capturing tools in the software including Google Analytics, FullStory, and AppCues. Before these integrations, Align only had insight into application page views.
I combed through years worth of customer support tickets, filing them by keywords and pulling out relevant information.
We started sending out NPS (Net Promoter Score) surveys. Initially, the results were sobering. While some users appreciated Align’s functionality, most were frustrated with usability issues. Many employees who were required to use the application resented it. Previously, the Align’s strategy had been focused on pleasing the the CEOs and decision-makers. However, even if the CEO loves the software, it is hard for them to get internal traction if their employees aren’t enthusiastic participants. This data allowed us to make a case to senior leadership to shift our priorities.
Finally, I ran a few rapid usability studies to take baselines for feature usability before we overhauled major aspects of the application.
Step 2: Prioritization
Critical Number Redesign
After I identified usability pain points through research, I synced with the team to prioritize. We mapped options on an impact effort scale, and decided to begin the redesign by updating the Critical Number component.
The two-week redesign cut the amount of time it took an average user to create a Critical Number in half. It also made it easier for first time users to understand and use the feature. Read more about this initiative here.
Average time it took new users to create a Critical Number
Onboarding
As part of our goal to increase our user base, our team set a goal to increase conversion (trial to paid customer) on accounts that did not have a coach. Historically, that specific conversion rate was very low.
Market research
I researched best practices for onboarding and education design. I looked at various best in class companies that had similar onboarding requirements including Asana, Turbo Tax and Basecamp.
Since our new target user base didn’t have coaches to implement the software, I began asking how can the software be a coach?
Empty States
New trials entering information in the application — even one field — was highly correlated with trial conversion. However, the majority of trial users logged in once, did not enter any information, and never logged in again.
We found many users were overwhelmed by the application and didn’t know how to get started. Part of the problem was that when users first created a trial most of the application was blank because they hadn’t entered their information yet.
Quotes:
“I don’t know where to start.”
“I feel like I am getting scolded by the application.”
Example: this did not explain what critical numbers are nor did it show the user a way to add them :(
Filling out quarterly strategic goals is a mental and emotional lift. As is is learning a new complex system. If we wanted our users to do this without a coach we needed to provide positive content to assist them.
Empty states educate users on the purpose of various features and motivate them to fill them out.
Onboarding flow
I used AppCues to make a personalized onboarding flow that asked users about their goals and directed them to the appropriate section. I rewrote the onboarding email course to be more concise and informative.
Visual Designs
The UI was inconsistent and described by users as “clunky”.
The goal was to make it clean, straightforward, and usable. Align’s underlying functionality is incredibly complicated so I sought to simplify and clarify whenever possible.
Style guide
Typography & Visual Consistency
Visual consistency in components.
Interactive elements had a clear logical hierarchy
Updated the color palate, getting rid of forrest green and added teal as a secondary color
Clean, acccessible HTML markup
Streamlined, fresher look
Accessibility
Many of our users were having a hard time using our application without zooming in. I updated the typography, changed the font to a sans-serif “Roboto”, increased the font size and created consistent headers. I also increased color contrast and cleaned up the HTML markup to improve accessibility.
Cleaning up the Code
The CSS file was over 12K lines long. Multiple engineers had worked on it leading to a plethora of overrides and unexpected behavior when components were moved around. I organized, consolidated and re-wrote the CSS of the major components and buttons so that they were self-contained. I also grouped CSS sections together and created a table of contents so it was searchable by other developers.
Navigation Consolidation
“I feel like I’m operating a space ship.” - a user
The sheer number of navigation items led to decision fatigue and an inability of users to focus on the task at hand. During usability studies, participants spent minutes reading through all of the navigation items. There were two navigation bars and the logic behind why certain items were in the side navigation versus the top navigation was unclear. Furthermore, some navigation items were redundant: both in the top navigation and the side navigation. Finally, it lacked hierarchy; it was unclear which pages were the main pages.
I began a crusade to consolidate the navigation and organize it into a logical information hierarchy. I ultimately ended up consolidating the navigation by 40%, which drastically increased discoverability in our user tests.
Looking Forward
The user data that we gathered took time upfront, but ultimately proved invaluable to making smart product decisions.
If I were to do this project again I would have created a live website style guide for the developers sooner so we could stay on the same page while creating new components.