Website Revamp

Project Brief

Over the past few months, I was often involved doing front-end development and the designated web designer for Adsurge's new projects, a sub-division company at my work.

To start the year off in 2019, Adsurge decided to do a whole revamp of the Signup/Login flow of the website, which I was responsible for the design and front-end development. It started as drafts (graph tree/sitemap flow), then converted into interactive mocks as prototype to mimic the look and experiment what the flow is like visually. I collaborated with one of the back-end developers (Cesar) in my team to finally bring the project to life.

Node.js • Vue.js • Bulma • Pug/Jade • CSS/Scss • Git

Sign In Page

This is the first page users see of the Signup flow. The Adsurge team wanted a "split-screen" where the second half will be a section for the latest news and events. Only the top 3 latest news will be shown in a slide carousel.

Special features on this page:

  • Subtle rotating animations on the triangle graphics
  • Subtle movements on the second screen's background to mimic an underwater movement (despite it being a static image).

Sign Up Page

This is the most important page of the Signup flow. The "split-screen" layout remains but instead of a News/Events section, it displays a few reasons why users should sign up.

Special features on this page:

  • Subtle animations and movements to graphics and background
  • Mouse-over movements upon hovering graphics on the bottom left to trigger a parallax mouse-movement effect. This effect is reduced on smaller screens and eliminated on mobile for compatibility purposes.

Thank You Page

Thank you page users sees upon a successful signup.

Call to action buttons lead to Adsurge's social media pages.

Forgot Password Page

Forgot Password page that is accessible from the Login page.

Users who have trouble remembering their passwords can send a password reset request to the e-mail associated with their account.

Reset Password Page

The "Forgot Password?" email received in the previous step leads users to this page where they can reset their password.

Special feature:

  • When the text field is focused, a password strength indicator appears to guide users in creating a stronger and safer password.

Mobile Responsive

E-mail Confirmations

Replaced old e-mail templates with new ones to match the new Adsurge revamped look.

New vector illustrations were created to match content for the five main e-mail templates.

Page Revamps: Before & After

Side-by-side comparison before and after revamp of some of the Adsurge pages.

Can you spot the differences? :)

Sign Up Page

Before & After

Referrals page

Before & After

Payments page

Before & After

Email Templates

Before & After

Other Materials

Other promotional materials designed for the launch of the new Adsurge revamp.

© 2023 Ruuka.net