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.
