The goal of this project is to redesign our current loan application entry form using the Salesforce Lightning Design System (SLDS) framework (links at bottom). We are a Saas business, and our loan forms are branded to our clients and are componentized to reflect their business needs.

Requirements
Functionality:
The UX designs should provide a complete end to end experience of filling out the data, verifying, and reviewing the entered data for both new and returning users (i.e. can login).

Designs need to provide mobile and desktop versions of the experience.

There should be two versions of each screen – one in data entry mode and one in read only mode for sales reps reviewing the submitted form.  

Common elements like data lookup, picklists and item selection elements should share similar functionality and design (e.g. contact info lookup should look similar to equipment selection etc).

Showing helpful supporting information for  users, alerts for incomplete information, or navigating away from an incomplete form.    

Design:

The proposed design must adhere to the principles of SLDS (Salesforce Lightning Design System). This includes:

Using SLDS components for common UI elements like buttons, forms, and icons (can be downloaded to Figma).

Applying appropriate spacing, typography, and color palettes.

Maintaining a consistent and responsive design across different screen sizes.

Utilizing icons and elements available in SLDS only. Background images and any additional icons need to be provided in the appropriate format with HTML files.

Initial design cues and color pallet can be from https://northteq.com/ , however our clients will want to use their logo and/or colours if possible.

Technical:

The design must be developed using modern web development best practices, including:

Modular code structure with clear separation of concerns.

Reusability of components and code.

Accessibility considerations for users with disabilities.

Deliverables:

HTML/Figma, and PNG files that can be rendered in any browser as assets.

Click, drop and any JS interaction is not required for the mockup, but we would want to see interactions for certain elements (look up opened, search results, closed etc.)

Additional Considerations:

Consider accessibility best practices to ensure the component is usable by everyone and delivers a delightful experience

Timeline: 2 weeks

Resources:

Salesforce Lightning Web Components documentation: https://developer.salesforce.com/developer-centers/lightning-web-components  

Salesforce Lightning Design System: https://www.lightningdesignsystem.com/

Hourly Range: $30.00-$60.00

Posted On: February 01, 2024 22:22 UTC
Category: UX/UI Design
Skills:Adaptive Web Design, Style Guide, UX & UI, Web Form, Figma, CSS, Responsive Design, Wireframing, User Flow

Country: United States

click to apply