Majid Al Futtaim:<br>SSO UX Direction

Team structure

The lean agile delivery team consisted of:

Product owner
Technical delivery lead
Design/ experience director
User interface designer
Front/ back-end engineers
Copy writer

We were tasked with taking the project from conception to ‘ready for development’ in a short turnaround of 4 weeks. To achieve this, a lean approach was taken during the design phase, with the experience design running only a couple of days behind the interface design.

Responsibilities

As the director of UX for the project, my responsibilities were as follows:

Project kickoff & business alignment workshops
Project management & roadmap planning
Sprint planning & daily reviews
Usability audit & benchmarking
Experience principles & feature prioritisation
System/ information architecture
Wire-framing, prototyping & user testing
Management of user interface designers
Copy handover
Engineering handover

Product description

The MPASS team at Majid Al Futtaim, who manage the authentication across all MAF brand applications, approached us to redesign the SSO (single sign-on) experience. As the solution was being rolled out across all business applications, it was important for the front-end framework to be flexible and customisable to cater for multiple brand experiences.

To achieve this, the experience was unified with design tokens being used during the interface design process, enabling fonts, colours and interface styles to be easily customisable for each brand.

Analysis & benchmarking

The first step to unifying the experience, was through analysis of the existing sign-on/ sign-up implementation across all MAF brand applications. Experience and interface design principles were referenced during the analysis, highlighting areas where the principles were either being adhered to, or broken. This enabled us to build on the good aspects of what already existed whilst remedying any existing issues in the unified experience.

Alongside the analysis of the existing experiences within the MAF group applications, benchmarking of optimal experiences across similar organisations to MAF (which also deal with SSO across multiple brand applications), was also undertaken.

Usability audit

After our high-level analysis of the overall experiences across all MAF group applications, a more detailed usability audit was conducted, focusing on the end-to-end journeys of all of the current SSO features available, including:

• Sign-in with email
• Sign-up with email
• Forgot password flow
• Blocked email flow
• Update profile

The purpose of the usability audit, was to dig deeper into the end-to-end experience, flagging areas for improvement as well as identifying patterns and components that can be reused. This helped to inform areas of focus for the interface design team.

Feature prioritisation

Alongside the improvements that were being made to the existing features, there was a healthy backlog of new SSO features in the pipeline. These features included:

• Sign-in with OTP (one-time password)
• Sign-in/ sign-up with phone number
• Sign-in/ sign-up with social account (Google, Facebook, Apple)
• Compromised email/ password reset

A series of workshops were conducted with the business to understand the scope of the new features and prioritise them based on business impact against key performance indicators (KPIs).

We were tasked with designing the end-to-end experiences of these new features, utilising the components and patterns that had already been identified and designed. Here is where the use of design tokens came into play, enabling one experience to be applied across multiple brands.

Project planning & roadmap

With a tight timeline of 3 weeks to overhaul the SSO experience and interface design, it was vital to keep on top of the tasks and handovers. As well as managing the day-to-day tasks and reviews with experience & interface designers, it was also my responsibility to manage the handover to the copy and engineering teams.

Information architecture

Another of my key responsibilities was to provide the team with a clear architecture of the entire solution. This architecture was utilised by the business, design, copy and engineering teams. It helped inform business logic, aid designers to understand the flow of their interfaces, help copy writers craft their copy across these interfaces, and support the engineers build of the front and back-end solution.

Prototyping & testing

Before the interface work commenced, all new features were prototyped to present internally and test with external end-users. These prototypes helped to test the robustness and utility of the new features, providing a platform for internal teams and external users to provide their feedback on the evolving experiences.

Interface & design tokens

Vital to the success of the project was the use of design tokens. Tokens are essentially variables within design files that can be extrapolated to snippets of code that engineers can export to their preferred front-end frameworks. This enabled our interface designers to create one master design using design tokens, that could later be customised by altering key variables such as:

• Typography
• Colour swatches
• Light & dark themes
• Sizing & radiuses
• Effects – Shadows & Blurs

The use of design tokens was a key principle set out from the very start of the project, with the understanding that our designs would need to be translated across multiple brand aesthetics.