Back to home About Skills Certifications Career & Education Projects Social Media & Contact

Sitewide Navigation Redesign – TopCashback front end

Project introduction

The project aimed to redesign and upgrade TopCashback's sitewide navigation system, improving the existing dropdown menus and creating new opportunities for sponsored tenancy.

The new navigation system was built to be fully operable by screen reader and keyboard-only users, as well as being fully responsive between desktop and mobile screen widths.

My roles within the project:

  • Translated static UI Designs into functional prototypes for testing.
  • Worked closely with Design/UX team to make small UI tweaks and iron out any usability issues.
  • Provided feedback to help inform design decisions, such as suggestions to enable accessibility and ideas for small "delights" to improve the visual quality of the page, such as animations and hover effects.
  • Produced the production version of the front end alongside other developers, working closely and being on hand to advise and help resolve any issues.
  • Actively involved in code reviews to ensure all front end code was efficiently written and accessibility-friendly.
  • Performed frequent cross-device and cross-browser functional testing to identify any bugs.
  • Ensured that all work was documented thoroughly, and that all written communications were clear and direct.

Legacy navigation system

Image coming soon, just trying to track one down.

Problems

  • Very outdated design dropdown design, outdated branding and generally missing opportunities to provide more value to users.
  • Very poor accessibility. Not accessible to keyboard-only users, no :focus-visible effects.
  • Very limited flexibility in terms of being able to frequently update navbar and dropdown content
  • No multi-tiering of cashback categories.
  • Missed opportunities for offer suggestions and sponsored tenancy.
  • No true responsiveness between desktop and mobile widths.

New navigation system

The new TopCashback navigation system

Improvements

  • Modernised design, with frequent use of rounded corners, softer colours/fonts and use of animations.
  • Brand new multi-tier dropdown categories system.
  • Inclusion of new sponsored tenancy options.
  • Much more up-to-date with the latest brand styles.
  • Complete page responsiveness between desktop and mobile widths.
  • Greatly increased accessibility for accessible-needs users – all content is now fully accessibile to screen reader and keyboard-only users.
  • Plus many more improvements.
See the new navigation system live (requires a TopCashback account to see the full page)

See next:

TopCashback redesigned brand pages front end Return to homepage