How to build a custom OutSystems login screen that aligns with brand identity?

Building a Custom OutSystems Login Screen Aligned with Brand Identity

Creating a custom login screen in OutSystems that aligns with your brand identity involves a combination of design elements, logical flow, and the application of branding principles. This detailed guide covers the steps necessary to achieve a professional and cohesive brand experience for your application's user access interface.

Prerequisites

• An OutSystems account with developer access to create new applications and modules.
• Familiarity with OutSystems Service Studio for application development.
• Access to branding assets such as logos, color codes, and typography guidelines.
• Basic understanding of CSS for custom styling, if needed.

Understanding Brand Alignment

• Key to brand alignment is maintaining a consistent look and feel across applications and platforms.
• Consider elements such as logo placement, font styles, and color schemes used in other brand materials.
• The login screen should communicate the brand's tone and values to enhance user trust and recognition.

Creating a New Application in OutSystems

• Open OutSystems Service Studio and create a new application.
• Select the type of application you want to build, typically a Web or Mobile app.
• Name your application appropriately, reflecting its intended purpose or aligning with your brand's naming conventions.

Designing the Login Screen

• Access the 'Interface' tab to start building your custom login page.
• Create a new screen and name it, typically as "Login" or similar.
• Drag and drop visual elements on the screen, such as:
  • Logo: Insert your brand's logo using the Image widget to reinforce brand identity.
  • Input Fields: Use the Input widgets for 'Username/Email' and 'Password'.
  • Buttons: Add a Button widget for 'Login', and consider adding 'Forgot Password' and 'Sign Up' links if applicable.
• Ensure that your elements are arranged logically to create an intuitive flow for users.

Customizing the Login Screen with Brand Styles

• Access the styles panel to modify basic styling like colors, fonts, and spacing.
• Colors: Use your brand’s primary and secondary colors for backgrounds and buttons.
• Typography: Set fonts and sizes to match your brand’s typography guidelines.
• Buttons: Customize the button styles to enhance visibility and brand consistency.
• If needed, apply additional CSS for further customization through the Style Classes editor:

      .custom-login-button {
        background-color: #YourPrimaryColor;
        font-family: 'YourBrandFont', sans-serif;
      }
      

Implementing Business Logic for the Login Process

• In the Logic tab, create actions that handle the actual authentication process.
• Utilize the built-in User Login action to authenticate credentials provided by the user.
• Handle successful login by navigating users to the main application screen and manage errors (e.g., incorrect passwords).
• Example logic flow:
  • Check input fields for validity (e.g., non-empty, valid email format).
  • Call the 'User\_Login' server action with parameters.
  • On success, navigate to the dashboard or homepage module.
  • On failure, provide feedback to the user, allowing them to retry.

Testing & Feedback

• Use OutSystems' built-in testing tools to ensure the login screen functions correctly across scenarios.
• Conduct user testing to ensure the screen is intuitive and aligns with user expectations.
• Gather feedback on the UI/UX and adjust elements to enhance usability and satisfaction.

Final Adjustments and Going Live

• Review and ensure consistency with web and mobile guidelines as applicable.
• Deploy the application to the relevant environment (Development, QA, Production).
• Once live, monitor user interactions for continuous improvements and adjustments.

By meticulously following these steps and leveraging OutSystems' powerful development platform, you can craft a custom login screen that not only aligns perfectly with your brand identity but also offers an efficient and engaging user experience.