UI Redesign

Communications Preferences Page

I conducted an analysis of the current design of B-Stock’s Communication Preferences Page using various visual and interactive principles, and redesigned its UI within some constraints.

TIMELINE

2 weeks

LOCATION

Belmont, CA

ROLE

Visual design, analysis

TOOLS

Sketch, Marvel

Check out my work below

Project Brief

A constrained visual redesign.

While UX and UI designers are able to reimagine and redesign entire products and systems, often changes can be smaller in scope.

In this project, I used my knowledge of visual and interactive design principles to redesign the visual layout of B-Stock’s communications preferences page in adherence to the company’s brand. However, the programming and content captured on this form had to remain the same, so only changes that alter elements that were on the page were permitted. The user flow also could not be altered.

Evaluating the Current Design

01. There’s a lack of typographic hierarchy. The eye is immediately drawn to the bolded section in the middle, instead of the main title and purpose of the page “Manage Your Communication Preferences.”

02. The asterisk which indicates that email is required field is visually separated from the text.

03. There’s a lack of efficient white space that jumbles that different sections together.

04. In the case that the user wants to unsubscribe from all marketplace emails, they would have to manually select “no” for each marketplace. For those who follow many marketplaces, this can be repetitive and unnecessary.

05. The unsubscribe button is given an unusually high level of importance by being the first CTA on the page.

06. Currently, the form uses a drop down menu to select “yes” or “no.” For a simple binary selection like this, there are more efficient input elements that reduces the number of clicks needed like a checkbox or toggle button.

07. The main CTA is not aligned with the rest of the content.

08. The red error message presents accessibility issues for those who might be color blind.

#0e2954

#294D99

#0099ff

#00cbff

Lato Bold

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

Lato Regular

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

The Redesign

I redesigned the form page in Sketch while considering the design flaws I identified previously, and while adhering to B-Stock’s upgraded visual brand. I collaborated with the Director of Communications to update the form copy, and participated in meetings with the Marketo consultant to present designs and receive feedback.

Prototype of page including Verify E-mail Flows & Confirmation Page: https://marvelapp.com/3861797/screen/51235865

This was my proposed redesign. After talking with the Marketo consultant, there were some technical constraints with Marketo and the Javascript backend that made it difficult to implement the checkboxes for each marketplace. As a result, we came to a compromise and implemented the Yes/No dropdown from the original form design. This change is reflected in the final deliverable.