Questions that needed answering

We faced several unknowns at the start of the project:
‍
- What kind of users are we designing for, and what are their unique needs? - What is working well in our current approach, and what needs improving? - What metrics are we trying to impact, and what might success look like?

‍To address these questions, my Product Manager and I took the following steps:

1. Consult internal resources
To understand usability issues, customer complaints, and feature requests, we analyzed ProductBoard insights and customer support logs.

2. Interview internal stakeholders
To create team alignment and understand technical constraints, we interviewed Engineering Leads and Customer Success Managers.
‍
3. Interview users
To understand our users’ needs, frustrations, habits, and expectations, we conducted eight interviews with end-users.
‍
4. Evaluate competitors
To identify market gaps and opportunities, I conducted a Heuristic Evaluation and SWOT Analysis of three key competitors.

Early user interview insights

After interviewing 8 end-users, we found that:

There is no one-size-fits-all approach.
The recruiting teams that use Beamery ranged from intimate, three-person teams to complex, multinational operations. Seeing our users' diverse needs highlighted that we would need to support a number of different personas and use cases in order to succeed.
‍
Recruiters are time-poor.
A recruiter's job is multifaceted, demanding, and time-consuming. To make their lives easier, we would need to provide delight and efficiency in the form of time saving shortcuts and automated workflows.

Mobile support should be a priority.
Mobile compatibility was a low priority at Beamery. This was justified, in part, by web analytics that indicated that 99.5% of our users are on desktop devices. However, our research revealed users would use Beamery on mobile devices if only our technology supported it!

Accessibility drives product value.
Inaccessible features in our app prevented users from completing basic goals. A vision-impaired candidate struggled to use our Forms because we didn’t support screen readers. We had a clear business case for accessible features.

Evaluating other products on the market

After identifying three of the most commonly-used form builders through user interviews, I conducted a Heuristic Evaluation and SWOT Analysis to understand how we could contribute original innovations to the field rather than reinventing the wheel.

From this exercise, I saw that there were some excellent form builders on the market. To set us apart from competitors, I identified three key unique selling points:

1. Integration with Beamery's flagship CRM and its powerful hiring workflows.
2. Multi-language forms to target international audiences.
3. Advanced reporting tools to measure the efficacy of hiring initiatives.

Heuristic Evaluation

SWOT Analysis

Metrics

To measure product success and adoption, we outlined the following metrics:
‍
Accessibility: 100% compliance of all components to WCAG AA standards.

Satisfaction: Increase Customer Satisfaction Score (CSAT) by 5%.

Conversion: Increase candidate conversion (form submissions out of unique visits) by 20%.

Mapping the current user journey

To visualise the current user journey and identify key moments that caused frustration and delight, I created a set of user journey maps. This revealed that asking candidates to sign in before accessing the form led to high drop-off rates. As a result, we removed sign-in and instead offered Single Sign-On as a time-saving option.

Recruiter Journey Map

Candidate Journey Map

Creating team alignment with user personas

Based on our user interviews, I segmented hypothesised user types into personas. These personas helped build internal empathy for users while highlighting that our users should not be lumped into one monolithic category.

Building empathy through user stories

When working on enterprise B2B products, it’s easy to become consumed by business priorities and deadlines while losing sight of your user's needs. To place ourselves in users' shoes, we utilised the user story framework when outlining feature requirements.

User Stories

Prioritising features based on user value

I prioritised our user stories according to persona needs, perceived technical feasibility, and business objectives. By creating a user story map, I was able to help my team visualise the full user journey while understanding what iterative steps it would take to reach an ideal end-state.

User Story Map

Design Principles

Before exploring interaction steps and potential solutions, I identified four design principles and linked each to a value proposition. These principles guided our design and development approach while setting key criteria to test built designs against:

Predictive

Save time with suggested question labels and form templates. Delight users with predictive technology that simplifies complex workflows.

Customisable

Amplify your company brand with intuitive form styling options. Target international users with tailored, relevant content.

Connected

Convert candidates to hires through integration with Beamery’s CRM. Drive users to the next step in their hiring journey.

Informative

Drive performance through helpful and actionable metrics. Alert users of system status at all times to make them feel secure.

Mapping user workflows

My design process always starts with creating user workflows, where I outline and optimise interaction steps. These workflows also serve as blueprints for Engineers by mapping every interaction state that needs to be developed.

Old user flow

In our old Beamery Forms workflow, users had to create, edit, build, and share their form in one overwhelming interface.

Intended new user flow

For the new workflow, I identified several entry points to take advantage of Beamery's interconnected product suite. To minimise cognitive load for users, I progressively guided them through smaller, more manageable tasks.

Sketching potential solutions

To rapidly ideate possible solutions (such as mobile vs. desktop views and static vs. dynamic interaction panels), I produced low-fidelity sketches that we validated through internal usability tests.

Wireframing while validating

Once we had an agreed approach, I used Whimsical to wireframe potential solutions before validating them again through internal testing. We didn't use actual users for this step because of the lengthy approval process required to set up testing sessions with them.

After weighing test results, I identified two approaches. My Engineering Lead helped me shape a satisfying MVP that would also lay the foundations for an ideal end-state.
‍

Prototype, test, iterate, and repeat

Beamery's existing design language provided a helpful set of constraints that enabled me to quickly develop my wireframes into high-fidelity prototypes. To test the prototypes, we conducted both moderated and unmoderated usability tests with end-users. Here are some of the design decisions that we made along the way:

Simplifying flow creation

User interviews suggested that recruiters want preset templates to speed up their workflow, yet usability tests revealed that templates would add minimal value for most users. As a result, we removed templates from our MVP and brought users directly to the builder when they clicked 'Create.' This was a win-win, reducing our development time while minimising friction for users.

The problem

A step-by-step creation process with template selection was well received by power users, but it slowed down standard users.

The result

Our simplified approach takes users directly to the builder once they click ‘create,’ speeding up creation time by 85%.

Previously, users could link form questions to custom data properties like ‘Salary Expectations,’ ‘Interest Areas,’ and ‘Earliest Start Date’. After learning from our Customer Success Managers that failing to link questions made data messy and unactionable, we decided to make question linking the first compulsory step when building .Users responded positively to this during testing. This also gave us the opportunity to offer predicted suggestions for question text, which saved users' and offered a sense of delight.

The problem

Without linking form questions to custom fields, form responses couldn’t be searched or filtered in our CRM, rendering the data unusable.

The result

Making question linking the mandatory first step framed users’ thinking to optimise how data is used in their CRM.

When adding single-select and multi-select questions to a form, users can select which answer options can be selected by candidates. They also need to rename these answer options, since internal naming conventions and codes were typically used.

The problem

Data logs revealed that some users had questions with 100+ answer options (e.g. countries or universities), rendering this design unusable.

The result

I proposed a searchable multi-select input that can easily accommodate unlimited options. Once selected, answer options can be renamed in a separate section.

After creating flows in multiple languages, users can select the languages that they want to publish. I initially proposed a modal to focus users' attention on the given task, but it obstructed the valuable information behind it. As an improvement, I proposed a slider panel that allowed users to interact with their work while reviewing it.

The problem

A focused but obstructive modal prevents users from viewing and editing forms before publishing.

The result

An unobtrusive slider panel allows users to review, toggle, and edit languages before publishing.

Ready to ship!

Our prototypes received consistently high (80+) usability scores, thus I was confident that users could successfully completing tasks in due time with minimal guidance. While engineers were building the first releases, I continued testing, iterating, and making improvements to upcoming versions.

Usability Report: Flow Builder V1

10

tasks

28

testers

usability score

Usability Report: Flow Builder Multi Language

7

tasks

24

testers

usability score