Web App & Email Notifications Design
Role: UX/UI Designer, UX Writer
Company: Sharp Hue
Timeline: ~12 weeks (2022)
Tools: Adobe XD, SendGrid, Adobe Acrobat
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.
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.
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.
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
CUSTOMER APPLICATION FORM AND STATUS SKETCHES
EMAIL NOTIFICATIONS SKETCHES
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.
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.
3. VISUAL DESIGN & PROTOTYPING
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.
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
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.