Overview

IBM was approached by MLSE to re-design it's mobile platform for 2 specific users. First for the collectors who collect player Jerseys and other collectible items and second, the sales associates who scan those items everyday and organized them into categories and inventories. The existing app on mobile wasn't performing as expected and was not ideal for use by both it's targeted users.They wanted to revamp the whole app by providing an intuitive interface that would resonate very well with both users and make their daily task easy.

1.3M

My design reached an estimated audience of 1.3 Million Maple Leafs Fans.

My Role

Senior UI/UX Design Lead

Team: IBM Agile Team

Software: Figma

About the project

A team of 20 people was immediately assemble to work on the project, this included developers, designers, and business associates and content writers. The project was to run for 2 weeks providing initial wireframes and prototypes in a very short timeframe. It would span and expand for several months once the proposal would be accepted and would require additional team members to work on the project full time which would go into MVP1 , MVP2 and MVP3 scope.

Asset validated and Jersey details screens

Research and Iteration Process

I was the lead product designer on the project and started the research process which would include getting any relevant information on the client company and its history. I made several request to the client to send any color patterns and branding they were using. The idea was to inject the company branding within the app to keep client fidelity and also to understand the process of how they categorize and keep their inventory. I did go on site and met with the actual people who would use the app and made a list of their requirements, for example what was needed and what did they want to see improved, how we could make a better mobile app that would cater for their needs, upgrading and enhancing their daily work productivity and keep them engage using the app. After collecting all these data, I went to the design board to start the first wireframing iteration.

Wireframing and Prototype process in Figma

Sign In and My account flow

NFC Tags

NFC Tags

Here's an actual NFC tag. I worked closely with developers to design the screens to scan and read the NFC tags. After much iteration and trial & errors we succeeded in understanding how it worked and proceeded with designing and building the reader which would scan and read the tags.

Design Highlights

The distinctive Black/Purple color branding of the company was injected within the prototypes and a sleek UI was selected to match with the SportX themes. I worked closely with the developers to design and build NFC tags. These Tags when scanned with a mobile phone, opens the apps immediately and downloads data to the users phone, showing all relevant information about the jersey or collectibles. Those data can be retrieved and gave more insights about the product itself.

(Image below on the right) The Jerseys being displayed had colored interactive spots which when clicked would launched little text boxes with info about some real facts pertaining to the player who worn the jerseys. Facts like like stains, ripped materials, dents & scratches anything wear & tear that happened during gameplays and which make the jerseys unique and a rare collectible item.

Assets validated screen flow

New / Share asset and video highlights flow

NFC scan prototyping

Below are the prototypes I've delivered in a very short amount of time to get the client approval for a longer run on the project. The client and the head of the team at IBM was very impressed by the rapidity and quality of the prototype handed. I was proud but for me its was just business as usual.

Asset Validated

Payment methods, Favourite and Jersey details

Final Results

A sleek and clean UI, where users can get all information about a player jerseys, its history, the game in which it was worn and a wealth of other information related to the item before making any purchase decisions. For the sales associates, an easy to download and use app on Google and Apple store, where they can scan indefinitely any number of Jersey or collectible items which have a NFC tags attached to it. The app was very well received by both users and sales associates.