Mobile App and Web Design

Mobile Connect: Orange integration

At - a - glance

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.