Streamlining the page with standard components for intuitive navigation and responsiveness

What are Sign up forms?

AWeber's sign-up form editor allows users to create forms for their lists and publish them to their websites or landing pages. The sign-up forms index, accessible through the control panel, displays a list of created forms along with relevant data and actions.
‍
Split testing enables users to run controlled experiments on their sign-up forms to gauge performance. The sign-up forms split tests index presents a list of created form split tests along with relevant data and actions.

Roles and Responsibilities

Purpose of Redesign

01
Incorporate user research insights to enhance existing designs

02
Leverage standard UI components for faster reimplementation in React

03
Employ a consistent design approach across all pages for a seamless navigation

04
Introduce new features to expedite task completion and elevate user experience

User Research Insights

A short user survey was conducted to gather feedback from users on the current user experience of the sign-up forms and split tests index pages. The survey consisted of two questions: a multiple-choice question prompting users to identify challenging aspects of the current design, and an open-ended question soliciting suggestions for new features. From over 100 responses received, the following high-level insights were identified:

1. Users experienced cognitive overload due to the consolidated display of both forms and split tests tables

In the existing design, both the sign-up forms and split tests tables are stacked vertically on the page, accompanied by numerous options for actions and statistics. Users experienced cognitive overload as a result of this layout, and expressed the need to focus on one type of data at a time.

2. Users expressed the need for search and filter functionalities

The current design lacks a search functionality for users to locate specific forms or filter by form types. Thirty percent of users, who had numerous forms in their accounts, expressed frustration due to excessive scrolling required to find a particular form. This also resulted in the split tests table being pushed further down the page, exacerbating the challenge of locating specific records.

3. Mobile users needed improved responsiveness for efficient task completion on small screens

The current design lacks responsiveness across all screen sizes, which poses challenges for users accessing the application on mobile devices. The horizontal scrolling of table rows, to accommodate all columns, leads to users losing focus on the data. Analysis of tracking data from the past 90 days indicates that 20% of total users utilize the application on mobile, resulting in frustration when navigating the index page.

4. Users requested a need for more education through contextual help resources

In addition to user survey data, our analysis of quarterly NPS survey comments revealed that 55% of responses included requests for more educational resources such as contextual help tooltips, help articles, and videos. The current design presents numerous opportunities to address this demand for users in future design iterations.

Design Solutions

01. Incorporating user research insights to enhance existing designs

Reducing Cognitive Overload

Designed distinct pages for sign-up forms and split tests to present each table separately.

Reducing cognitive load by splitting tables

Implemented accordions in the split tests table, allowing expansion/collapse to manage excessive options.

Consolidated redundant action buttons within a three-dot menu. The top three commonly used actions are now represented as hover action icons upon row hover.

Hover actions to highlight important actions

Replaced redundant tooltip icons with tooltip display upon column header hover to minimize visual clutter. This also addresses the need for inline contextual help within the feature.

Added Search and Filter

Implemented a fuzzy search-enabled search bar so users can quickly search for specific forms. Additionally, users can filter forms by type using the button group component positioned on the top of the table.

Improved Responsiveness

The sign-up forms and split tests index pages were designed to flow smoothly across different viewport sizes. This was achieved by employing the card pattern for smaller screens, where values are stacked vertically to ensure they fit within the screen width. Moreover, hover actions were removed for touch devices, and only the three-dot actions menu was retained.

Sign up forms - Tablet and Mobile View

‍

Split tests - Tablet and Mobile View

Improved Contextual Help

In response to 55% of requests for educational resources, we introduced a new component known as the contextual help widget, integrated into every page header. This widget conveniently presents users with links to contextual help articles, relevant video tutorials, and blog posts for easy reference. Furthermore, we've included help cards at the bottom of pages during empty states, ensuring immediate access to help.

02. Leveraging standard UI components for faster reimplementation in React

Both sign up forms and split tests index pages were designed with the intention of utilizing standard components from the AWeber UI component library. This approach aimed to enhance usability and accelerate development by leveraging reusable components. Therefore, no new components were introduced in the designs, as a result of which the implementation time was reduced by half.

03. Employing a consistent design approach for seamless navigation

Our application features multiple index pages, each designed with consistency to ensure a seamless user experience. This uniformity allows users familiar with one index page to effortlessly navigate through others, such as the sign-up forms and split tests pages.

Consistent design patterns include hover actions, slide-out modals for form completion and actions, and button tabs for table data filtering.
‍

Slide out modals

04. Introducing new features to expedite task completion and enhance UX

We added several new features, including a thumbnail preview, the capability to search and filter forms, and the implementation of an accordion pattern on split tests pages.

Thumbnails are conveniently placed next to the form title to maintain visual coherence. Moreover, hovering over the thumbnail enables image zooming and smooth scrolling within the view.

‍

Users' demands for form search and filtering by type are met using our standard UI components, seamlessly integrated as high-level elements applied to the table.
‍

‍
The accordion pattern on split tests pages ensures a clean design and enables users to focus on individual records with ease. Additionally, inline actions to select or create a form are provided within the accordion child rows to reduce the number of clicks to complete the tasks.
‍

The Redesign

Before

After

Impact

1. The design reduces the feature development time by half with the use of standard UI components.
‍
2. Significantly decreased user navigation effort by incorporating quick actions such as search, filtering, and hover interactions.

3. Enhanced the user experience for mobile users through improved responsiveness.

4. Maintained uninterrupted UI patterns to foster familiarity and streamline efficiency, ensuring increased engagement.
‍
5. Offered ample contextual help resources, enabling users to accomplish tasks effortlessly without needing to contact the customer support team.

Meghana Ravirala

Streamlining the page with standard components for intuitive navigation and responsiveness

Sign up forms Redesign