UX / UI Designer
Year
2024
Tools
Figma, Photoshop, Zoom, Slack
UX Skills
Requirements Gathering, Wireframes, Prototype, Project Management, Visual Design
Team
Neema Bardi, Phillip Tran, Lucas Sundby, Karissa Paddie, Jolo Adlong, Gail Fausto
Background
Atllas offers modern products to streamline their agents’ marketing efforts, online presence and networking. Their products include Open Home, Loop, AI CRM and Cold Call AI.
Overview
I was the UX/UI Designer tasked to handle their website, tablet and mobile app designs. The team composed of myself, stakeholder, product owner, developers and a CRO Specialist.
Problem
My task was to brainstorm and design the Cold Call AI feature, which lets agents automate cold calls with AI. This feature must be integrated seamlessly with their existing platform, design system, and accessible in various devices.
Problem statement
How might we create a feature that lets agents automate cold calls with AI using their agents portal or phones?
Target Audience
The main target audience for this project are real estate agents who are subscribed to Atllas’ platinum plan. These agents have full access to Atllas’ suite of over 10 business management products, real estate training and transaction support. They have full access to the platinum agents portal and mobile app.
Approach and strategy
The following approach and product strategies were accomplished:
- Requirements Gathering – Requirements gathering helped align the team during the entire process.
- Information Architecture and Flow Diagram – Used information architecture to organize content and help users find relevant information and reach their goals quickly and efficiently. Created flow diagrams to visualize use cases and to ensure that no scenarios are missed.
- Wireframes, mockups and prototyping – Created wireframes, mockups and prototypes as solutions to solve user needs and goals.
Low fidelity wireframes and prototype
Low fidelity wireframes and initial prototype helped stakeholders visualize the concept and idea. It also let the team resolve basic questions about the content, layout and product requirements before committing to a higher fidelity prototype.
Solution: Creating a campaign
Letting users automate their cold call process using AI by creating campaigns and reviewing campaign summaries.
Step 1: Select campaign recipients
“As an agent, I want to input my contacts so that I can send them my campaigns.”
Input numbers
Users can input single or multiple phone numbers or import a spreadsheet.
Select existing contact
How the input field looks like once filled up with AI CRM contacts and phone numbers.
Contacts selected
How the input fields look like with selected contacts.
Upload spreadsheet
“As an agent, I want to upload my existing spreadsheet so that I can quickly import my contact list in the campaign.”
Drop or upload CSV
Users can either drop or upload their CSV files in the modal.
Preview
Preview of the imported file. Users can select the column with the correct dataset so that they can add them to their campaign recipients.
Preview
How the preview screen looks like when all the fields are selected, the preview cards will show all the relevant details.
Error state
When there is a problem with the file uploaded, this error prompt will appear, letting users know that they can fix the column data or try another sheet.
Confirmation
After confirming the selection, users will be lead to this screen.
Confirmation
A success modal will pop up confirming successful import.
Step 2: Create prompt
“As an agent, I want to create a prompt so that I can make my campaign message.”
Default screen
Users can select a template or type in a custom prompt.
Custom prompt
How the screen looks once the custom prompt field is filled up.
Step 3: Test prompt
“As an agent, I want to test my prompt so that I can finalize everything before sending it out.”
Enter phone number
Service providers can register for an account with Google, Facebook or manually inputting their details.
Listen to prompt
They provide information about themselves in the process.
Written transcript
They upload the necessary documentation needed to complete the process.
Step 4: Confirmation
“As an agent, I want to view confirmation messages so that I can validate campaigns sent.”
Confirmation
A confirmation message including instructions about next steps.
Confirmation
A confirmation message informing users that their campaign is on their way.
Dashboard
“As an agent, I want to access my dashboard so that I can navigate through the feature.”
Empty state
How the dashboard looks in an empty state. User can set up a new call by clicking the Add Call button or “Add Call to get started link.
Filled state
They can opt to take a photo of their certifications or browse files to upload it.
Filter by
Microinteraction that lets users filter their campaigns by their status.
Microinteractions
Microinteraction that lets users view campaign summary or delete existing campaigns.
Campaign summary
“As an agent, I want to view a campaign summary so that I can review existing campaigns.”
Recipients
This screen lets the user review the recording and transcript of campaign recipients.
Recipients
This screen lets the user view the results of campaign recipients.
Summary
This screen lets the user view the date and time of the campaign and prompts used.
Results
This screen lets the users view the results of the campaign.
Output
Here are mockups of the output in mobile view.
Outcome
Figma Prototype in mobile view:
Figma prototype in desktop view:
Figma prototype in tablet view: