Background
We had in production a native app with web-based components and transitions. Therefore, regarding components, the Paddy Power app was not native. CMS managed the content of the app.
The Challenge
Apple warned the Paddy Power-Betfair brand, highlighting that non-compliance with iOS rules would result in the deactivation of the app. That prompted us to work within a stringent deadline to align with iOS Human Interface Guidelines, ensuring adherence to iOS standards for an optimal user experience.
Role
Senior Product Designer.
I led, along with another Senior product designer and a UX researcher, the adaptation of the Paddy Power sports app into full iOS compliance. In this project, I assumed these responsibilities:
• User Experience (UX) Designer
• Interaction (IxD) Designer
• User Interface (UI) Designer
• Visual Designer
Deliverables
These are all the deliverables:
• Audit Paddy Power Sports
• UI Kit library for the Paddy Power Sports app
• UI agnostic screens
• JSON Functional animations - micro-interactions with After Effects and Bodymovin (Lottie)
• Specifications
• Hi-Res Prototype
Tools
Figma, Invision, Abstract, Miro, Jira.
My Impact
Paddy Power Sports fully complies with iOS standards from a UI and component standpoint. That indicates that Apple won't deactivate the app. Therefore, it has a massive commercial impact.
Final UI
This is the new app compliant with iOS Human Interface Guidelines.
Approach
According to Paddy Power's brand, ensuring that the Sports section follows iOS Human Interfaces Guidelines would be sufficient for an app to remain on the market since over 60% of these problems exist only in the Sports section.
#Analysis
We had an app managed by CMS. So, We didn't have control over the content. On the other hand, The Paddy Power branding colours were already part of the storybook code, so engineers knew the colour style to apply to every component, sport and its corresponding state. Regarding the Text styles, We followed iOS specifications and Type sizes using Paddy Power typeface, Arial.
I analysed the end-to-end user flow related to how to place a bet, which basically is the main task regardless of the sport.
Audit
I conducted a design system audit to understand how many components, sports, scoreboards… We needed to consider for the Paddy Power Sports section.
#Ideation
We started to build the UX components of the master screens extracted from the Audit. We approach that agnostically since the CMS controlled the content of the app. We set up a naming structure for the components of the UI Kit to improve functionality when searching for them and, at the same time, align them with engineers.
Components: We didn't atomise the components. For engineers, it was easier to follow the structure they had already implemented, so since We had aggressive deadlines to achieve, as a business, We decided to move in this direction.
Text Styles: We followed the iOS specifications guidelines type sizes (Large, default). We didn’t support the Dynamic type scale feature since there were many unknowns about the impact on the rest of the app and how it would perform.
Colour Styles: We had All Colour styles already documented as part of the Whole Paddy Power app brand Identity, and engineers had the colour variable hexa code already integrated into the storybook, so supplying the components and referencing the BI colour variable was okay for them to proceed.
Icons: All icons were supplied by Porto Paddy Power team in .SVG, so basically as We created the components We nested the icons as it needed.
Once We created all the components, we built the screens of the Paddy Power sports section; in this way, with the UI Kit plus the screens, developers had everything They needed.
iOS Specifications: We specified all the components. But we prioritised the ones liable to fail from an iOS human interface guidelines perspective.
.JSON micro-interactions: Motion for emotion. These micro-interactions aimed to enhance product usability, humanise the user experience, and make it more fun. So I supplied the. JSON files to engineers; in this way, they could integrate them into the code. This micro-interaction occurs once the user taps on the tab bar icon.
#Prototype
I also supplied a High-fi prototype with native transitions, making a walkthrough of all the screens affected by the changes applied.
#Test
Our Job as Senior Product Designers (contract) was to make the app from a UI standpoint compliant with iOS. Engineers tested every component as we produced them to ensure they all adhered to the iOS Human Interface guidelines.
Lessons Learned
One aspect that could have been improved was the product's strategic vision. We were focused on the Paddy Power Sports section, but the company lacked clear direction on the subsequent steps to fully transition the entire app to a native platform. The primary issue stemmed from the fact that some components were shared across different sections. Consequently, modifying only the components in the Sports section required additional effort from an engineering standpoint. We didn’t alter components in other sections because we were uncertain about the potential impact. In my view, it is crucial to establish a UX strategy integrated with a product strategy. This is the only way to effectively visualise, track and measure outcomes.