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

Brand Pages Redesign – TopCashback

Project introduction

The project aimed to completely overhaul TopCashback's "brand" pages, the pages which individually hold each of the brands on TopCashback's site. Although the existing pages were used as the basis for the redesign, there were many new requirements which had to be designed for and developed, meaning the decision was made to completely rebuild the entire front/back end of brand pages from the ground up.

My roles within the project:

  • Heavily involved in the intial research and requirements analysis phase.
  • Came back into this project at the prototyping phase. Led the production of functional prototypes for testing.
  • Worked closely with Design/UX team to make small UI tweaks and iron out any usability issues based on testing feedback.
  • 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.
  • Led development of the front end, working closely with other developers, working 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.
  • Designed and led accessibility testing sessions, to identify any accessibility pitfalls that had emerged during development.
  • Ensured that all work was documented thoroughly and that all written communications were clear and direct.

Legacy brand pages

An example of the legacy TopCashback brand pages

Known problems from user feedback and previous research

  • Very outdated design, with sharp edges and design/layout inconsistencies.
  • Lots of visual clutter with very limited white space.
  • Obsolete sidebar full of unnecessary distractions.
  • Confusing cashback activation user journey, with multiple buttons often all doing the same thing.
  • Missed opportunities for unified branding within page content.
  • No true responsiveness between desktop and mobile widths.
  • Many accessibility problems.

Initial research

Competitor analysis

  • Researched competitors' brand pages (and similiar) to see what they were doing, and how we could do better.
  • From our assessment, it seemed that most competitors overall had better user experience and better usability.
  • Performed accessibility reviews of our competitors' pages. Many competitors were lacking in terms of accessibility – an area we decided we should focus on especially.
Honey's brand page VoucherCodes' brand page

Heatmapping click activity

  • Ran heatmapping and click tracking experiments on the existing brand pages using CrazyEgg, in order to determine current user behaviour by setting certain tasks and seeing how users acted.
  • One of the many things we determined was that users were getting confused by the fact that there were multiple "Get Cashback" buttons, and that we needed to rethink how individual cashback rates were displayed and activated.
    • Example of click tracking experiments

Early prototype development

  • As designs were beginning to take shape, I lead the development of a working prototype to be used for both design refinement and user feedback/testing.
  • The prototype was built using HTML, CSS and JavaScript as a Codepen. The aim was for the rendered UI to match the current state of designs as closely as possible, but not worrying too much about performance, code efficiency, accessibility (etc) at this point.
  • Only sample/mock data was used for testing purposes – no backend was attached at this stage.

Very early prototype

See the Pen Auto-ordering of rate card categories (JS + CSS) by Willis Dyson (@willisdyson) on CodePen.

Mid stage prototype

See the Pen Merchant page [2 cols, grey strips] by Willis Dyson (@willisdyson) on CodePen.

Late stage prototype

See the Pen Merchant pages (refined) (full) by Willis Dyson (@willisdyson) on CodePen.

User testing, A/B Testing and iterative improvements

A/B Testing

  • We performed iterative A/B testing using Convert throughout the whole project, using findings from each iteration to further refine the design.
Example of A/B testing results Example of A/B testing results

Development of final product

  • Once designs were finalised, I led the development of the front end for the final production version of the updated brand pages.
  • Worked closely with UX Designers to ensure that the interface was pixel-perfect.
  • Ensured that all code was written to be as efficient as possible, keeping accessibility at the forefront.
  • Collaborated with other developers to ensure seamless integration of the front end with the back end and resolve any technical challenges that emerged.

Cross-device testing

BrowserStack logo
  • During the later stages of development, I worked closely with testers to perfom cross-device testing using BrowserStack.
  • Any device or browser-specific problems were quickly identified and ironed out.
Example of a real iPhone and iPad showing the brand pages screen

Accessibility audit and testing

  • Designed and led interviews and users testing sessions with real accessible-needs users.
  • Identified several areas of inaccessibility which were missed during development – these were quickly fixed.
  • Ensured that all content was as close to WCAG AA compliant as possible (within the time constraints of the project).

Screenshots of the final result

The new TopCashback brand pages An example of the legacy brand pages The new TopCashback brand pages An example of the legacy brand pages The new TopCashback brand pages The new TopCashback brand pages See the new brand pages live (requires a TopCashback account to see the full page)

Project retrospective

  • ~70% reduction in missing cashback claims from members who clicked the wrong "Get Cashback" button before making a purchase.
  • New design is much more modern, with frequent use of rounded corners, softer colours/fonts and use of animations. Greatly reduced visual clutter and increase white space.
  • Just one "Get cashback" button, data-proven to reduce user confusion greatly.
  • Up to date with the latest branding colours, fonts and styles. Has a much more unified brand feel.
  • Greatly increased accessibility for accessible-needs users – all content is now much more accessibile. However, accessibility review and testing was limited due to time constraints, and further testing/improvement is recommended.

See next:

TopCashback homepage offers redesign Return to homepage