Objectives

I worked closely with the engineering and marketing team to identify and define their objectives, which were:

  1. Low impact changes
    Avoid making drastic code modifications that could potentially impact the sign-up and sign in forms. This was important because a broken Sign Up/Sign In page could result in security concerns, losing prospective customers and frustrating existing customers.
  2. Asynchronously update images
    Minimize the involvement of the engineering team in updating the marketing images by enabling the marketing team to easily update the images remotely, so the engineering team can avoid minor task "distractions" and stay focused on higher priority engineering change requests.

Process

To explore different layouts and colours, I created six medium-fidelity prototypes. I chose to create medium-fidelity prototypes so the marketing team can easily visualize the appearance of the UI and because the Sign Up/Sign In pages were one-page designs.

After presenting the six prototypes to the marketing team, they selected v1.2, as they preferred the color scheme and the sign in form was in primary focus while the marketing image was in secondary focus.

Feedback

The marketing team also gave feedback that there was no clear differentiation between the Sign Up/Sign In pages. They also wanted to highlight Wootric's value propositions on the Sign Up page, so I was asked to explore v1.6 for the Sign Up page.

Further Exploration

In v1.6.1, I slightly enlarged the content of the marketing image to place greater emphasis on Wootric's value proposition. However, the design looked very cramped as a result.

In v1.6.2, I switched the order of the sign-up form and marketing image, keeping in mind that people read from left to right and that the marketing team wanted to entice potential customers to sign-up by highlighting Wootric's value propositions.

The decision to switch was based on the Gutenberg diagram that stated the Primary Optical Area was at the top left, and Neilson Norman Group's study that views on the left half of screens were significantly higher than the right half; Potential customers would be more likely to read Wootric's value propositions if they were placed on the left side of the page.

Solution

Design

While abiding to the same color scheme, I used different background colours and layouts to distinguish the Sign Up and Sign In page. This was to provide immediate clarity for existing customers who wanted to sign in instead of sign-up, and to prioritise the display of information accordingly to potential and existing customers.

Development

After studying the original codes of the Sign Up/Sign In pages, I found that a second column could be easily added without having to heavily modify the original codes. I made HTML and CSS modifications the pages and used an <img> tag for the marketing images on each page.

For the marketing images, I gave them generic names (i.e. signup_marketing_image.png ) and uploaded them to AWS, and then included image address link in the src of the <img> tag. The marketing team just had to rename new marketing images for the respective pages to these generic names and upload them to AWS to replace the older images with the same names. This lets them update marketing images remotely without involving the engineering team, which could improve process efficiency by removing a step from the usual 2-step process of sending the image to the engineering team to upload and then update the image address link in the page's code.

Responsive Design

Though the Wootric web application was best viewed on the desktop, I made the Sign In/Sign Up pages responsive for them to look presentable even on mobile devices. Also, the marketing team wanted to enable potential customers to still be able to sign-up on mobile devices.

Impact

A month after the changes were released, the marketing team reported a 11% increase in conversion rate with quicker onboarding of new features.

More Projects
Designed + built by Victoria Koh © 2020. Updated September 2020.