Mobile Connect is a GSMA portfolio of secure authentication, authorization, and identity solutions for mobile platforms. The goal was to implement Mobile Connect technology across Orange websites and apps, ensuring a seamless and secure user experience while integrating cutting-edge digital identity solutions.
my role
Wireframing/Prototyping
UX/UI Design for Apps and Websites
Illustrations and Animations
deliverable
Wireframes and Prototypes
Mobile and Web UI Design
Onboarding Animation for Apps
Error Screens (Sketch to Motion)
SIM Applet Integration
team
Orange’s lead design manager
Developers (iOS, Android)
Web Developers
the Challenge
The primary challenge was to integrate Mobile Connect technology into Orange’s existing ecosystem of websites and mobile apps. This required balancing technical constraints, security considerations, and user experience design. The complexity of authentication journeys, from registration to recovery, needed a user-friendly and visually cohesive solution.
Business Opportunity
By providing an intuitive, visually engaging, and secure integration of Mobile Connect, the project could simplify authentication processes, improve user trust, and create a consistent cross-platform experience that meets Orange’s high standards for usability and security.
Design Concepts & Wireframes
The process began with extensive research into user needs and technical requirements.
Smartphone App Authenticator: Collaborative sessions were held with Orange’s lead design manager to map out identity verification journeys, from registration to recovery. Wireframes were developed and reviewed via Whimsicle to refine the workflows. Final designs included light and dark modes, shared through Zeplin for seamless handoff to developers.
SIM Applet: The integration of Mobile Connect into Orange SIM Applet demanded careful consideration of security constraints. Wireframes and mockups were iteratively designed to optimize user interactions, ensuring clarity and responsiveness across desktop and mobile platforms.
Onboarding Animation for Orange Apps
To simplify and enhance the onboarding experience, animated illustrations were created using Lottie files. These animations served as an intuitive guide for users, breaking down complex processes into accessible and engaging visuals.
Error Screens: From Sketch to Motion
Animated error screens were designed to provide a friendlier and less frustrating user experience during errors. Using Lottie files, dynamic and visually appealing illustrations were incorporated, transforming static error messages into engaging and informative screens.
Final Designs
The implementation of Mobile connect was designed for 6 different applications and websites
The final designs included:
Comprehensive UI for app-based authentication journeys
Seamlessly integrated onboarding animations to enhance user engagement.
Optimized SIM Applet interfaces for secure desktop and mobile authentication.
Engaging animated error screens that humanized technical errors and guided users through solutions.