Credit Application
Web App & Email Notifications Design

Role: UX/UI Designer, UX Writer

Company: Sharp Hue

Timeline: ~12 weeks (2022)

Tools: Adobe XD, SendGrid, Adobe Acrobat

credit-application.png

PROBLEM

Customers had to fill out a physical paper application causing delays to the application process. Furthermore, sales representatives were unable to communicate with each other and give prompt application updates. 

GOALS

  • Design a customer-facing application form and application status web app.

  • Design an internal dashboard with metrics to track applications, create new applications, and update application statuses.

1. DISCOVERY

EARLY CONCEPT SKETCHES​​

To get a better understanding of the system and automate the application process, I began by creating sketches to open the discussion with the client. This allowed us to define the goals and requirements for the project.

pre-sketches-1.jpg
pre-sketches-2.jpg

SKETCHING

After defining the requirements, I began sketching a paper prototype for the Internal Dashboard and the Customer Application Form and Status. Additionally, I created sketches for the design of email notifications.

INTERNAL DASHBOARD SKETCHES

internal-sketches-1.jpg
internal-sketches-2.jpg

CUSTOMER APPLICATION FORM AND STATUS SKETCHES

app-sketches-1.jpg
app-sketches-2.jpg

EMAIL NOTIFICATIONS SKETCHES

email-sketches-1.jpg
email-sketches-2.jpg
2. INTERACTION DESIGN

WIREFRAMES - INTERNAL DASHBOARD

After sketching out initial concepts, we moved on to creating the wireframes for the Internal Dashboard. The design was created with the sales representatives in mind, who typically use tablets when creating new applications. The navigation rail allowed for a comfortable design that would translate seamlessly from desktop to mobile.

 

Click here to view the lo-fi prototype

internal-dashboard-wireframes.png

WIREFRAMES - CUSTOMER APPLICATION FORM AND STATUS

After creating the wireframes for the Internal Dashboard, I created the wireframes for the Customer Application and Status. Customers would access their applications through a passwordless and trackable link. It was important for the design to translate well into mobile, as to enable customers to complete their applications through their phones.

Click here to view the lo-fi prototype

customer-app-wireframes.png
3. VISUAL DESIGN & PROTOTYPING

STYLE GUIDE

To maintain the consistency of the styles between the Internal Dashboard and Customer Application I created a style guide to define the colors, typography, spacing, selectors, navigation, and others.

 

Click here to view the complete style guide

Style Guide.png
Style Guide.png
Style Guide.png
4. EMAIL NOTIFICATIONS DESIGN

BUILDING EMAILS ON SENDGRID

The last step was to build the email notifications design on SendGrid. Four different email templates were created for different notification scenarios:

  • when a sales representative creates an application request

  • when the application has been approved

  • when there is a status update to the application

  • when modifications are required

Screen Shot 2022-03-03 at 9.10.53 PM.png
Screen Shot 2022-03-03 at 9.12.27 PM.png
5. NEXT STEPS

The next step I would take to continue improving on this design would be to do some user testing by observing customers trying to fill out the credit application. Additionally, the Internal Dashboard could also benefit from user testing to see if there could be any improvements regarding the sales representatives.