MMSG (RemServ) - Web Design & CMS

Role

Date

MMSG (RemServ)

Re-design of Salary Packaging Platform

MMSG was undergoing a digital transformation driven by Cognizant. One of the key projects included re-platforming an online portal for their RemServ brand – vital to improving the experience for customers managing their account online. Cognizant recognised a critical opportunity to improve the design and UX and hired me to lead those efforts.

Role

  • Design Lead

Services

  • User Research
  • UI & UX Design
  • Design System
  • Strategy

Client

  • McMillan Shakespeare Group
MMSG Cover Image

Research & Insights

One of the initial challenges I faced was the lack of understanding of the importance of user research & insights from within the organisation. I required quick quantifiable research methods that I could use to make informed design decisions and convince key stake holders.

I ran a workshop with colleagues and execs who were used to dealing with customers queries day in day out. The goal was to understand the users high-level pain points and gain a deeper understanding.

MMSG Workshop
MMSG Affinity Mapping

I used a combination of empathy and affinity mapping to find high-level themes. These workshops also helped bring a sense of cohesion and importance to the wider project.

MMSG Empathy Mapping MMSG User Workshop
MMSG Miro Board Empathy Map

Analytics & Insights

I was fortunate to get access to VWO earlier on in the project. Through VWO, I ran heatmap and clickstream tracking and an in-app feedback survey which collected over 300+ responses from everyday users. I also analysed Google analytics data to help understand red routes and goal completion.

Miro Survey
Analytics

Prioritising Efforts

We had to weigh up engineering time and effort and look for quick wins. I got the whole project team together and at a high-level we prioritised what we could tackle within the project timeframe.

Matrix Diagram

Look & Feel Consistency

One of the clear needs was to improve the look, feel and consistency – not only to the new platform but also across all other experiences, including the mobile app and website.

Old look and feel Old app before design

I aimed to set the foundations for other designers moving forward. I created the foundations of a style guide and component library in sketch with an improved focus on accessibility.

Using the new library and style guide, I mocked up early concepts showing how the platform could look.

Dashboard Style 1 Dashboard Style 2 Dashboard Style 3 Dashboard Style 4

IA & Rapid Prototyping

I ran a card sorting workshop with key stakeholders and leaned on our research findings to improve terminology and navigation.

Card sort workshop
IA Old IA New

With the project timeframe in mind, I was keen to get to work creating low-fidelity prototypes and start testing new concepts.

For speed, I used Whimsical to collaborate and prototype ideas – focusing on functionality and usability. We worked through many iterations of ideas and tested interactive prototypes with users in Invision.

Final Result

Login & Register

Login Screen
Login Mobile Register Mobile Forgot Details Mobile

Reset Password

Reset Password Reset Password 2 Reset Password 3 Reset Password 4

Home Dashboard

Dashboard
Dashboard Mobile Dashboard Mobile Dashboard Mobile

Make a Claim

Transactions

Transactions
Transactions
Transactions Transactions Transactions

Benefits

Benefits
Benefits
Benefits
Benefits Superanuation

Documents & Forms

Docs and Forms

Help & FAQs

FAQs Screen
Contact Screen

Account & Settings

Account Screen
Account Screen Address
Account Screen Bank Account Screen Bank 2 Account Screen Bank 3 Account Screen Bank 4
Marketing Preferences Screen
Account Pass Screen