Nora Mock AI Interviewer
Nora Mock AI Interviewer
Nora Mock AI Interviewer
A solution to help students interview prep more effectively
A solution to help students interview prep more effectively
A solution to help students interview prep more effectively
overview
overview
What would the ultimate interview tool look like?
What would the ultimate interview tool look like?
What would the ultimate interview tool look like?
Imagine if there was a way to get unlimited, authentic interview experience? That is the goal of Nora Mock AI Interviewer. From thoroughly simulating a real interview with real-time responses using incredibly accurate text-to-speech, the AI is remarkably close to resembling a real interviewer. Additionally, Nora's personalized feedback report thoroughly analyzes its interviewee's answers by covering strengths and weaknesses, example answers, and next steps to improve one's responses.
Imagine if there was a way to get unlimited, authentic interview experience? That is the goal of Nora Mock AI Interviewer. From thoroughly simulating a real interview with real-time responses using incredibly accurate text-to-speech, the AI is remarkably close to resembling a real interviewer. Additionally, Nora's personalized feedback report thoroughly analyzes its interviewee's answers by covering strengths and weaknesses, example answers, and next steps to improve one's responses.
Background, what exactly does Nora AI Mock Interviewer and why is this important for other students to have this as a learning tool, basically just a general background on why you did this in the first place, how does it help the world.
The Problem
The Problem
The Problem
Nora Mock Interviewer needs a website to clearly inform users that it is a real-time interview tool rather than a simple chat-bot. The website also must streamline the process of using Nora so that users don't get confused by the interface.
Nora Mock Interviewer needs a website to clearly inform users that it is a real-time interview tool rather than a simple chat-bot. The website also must streamline the process of using Nora so that users don't get confused by the interface.
Nora Mock Interviewer needs a website to clearly inform users that it is a real-time interview tool rather than a simple chat-bot. The website also must streamline the process of using Nora so that users don't get confused by the interface.
The Solution
The Solution
The Solution
I designed various features and screens to assist in launching the Nora Mock AI Interviewer. This included items such as a technical slider, pricing paywalls, informative homepages, and more.
I designed various features and screens to assist in launching the Nora Mock AI Interviewer. This included items such as a technical slider, pricing paywalls, informative homepages, and more.
I designed various features and screens to assist in launching the Nora Mock AI Interviewer. This included items such as a technical slider, pricing paywalls, informative homepages, and more.
Project Type
Project Type
Project Type
UI/UX Design
UI/UX Design
UI/UX Design
My Role
My Role
My Role
Ideating
User Research
Usability Testing
Wireframing
Prototyping
Ideating
User Research
Usability Testing
Wireframing
Prototyping
Ideating
User Research
Usability Testing
Wireframing
Prototyping
Timeline
Timeline
Timeline
Jul 2024-Sep 2024
(3 months)
Jul 2024-Sep 2024
(3 months)
Jul 2024-Sep 2024
(3 months)
Tools
Tools
Tools
Figma
Figma
Figma
research
research
Who's our target audience and what do they need?
Who's our target audience and what do they need?
Who's our target audience and what do they need?
Disclosure
Disclosure
Disclosure
This product was a team project, and having joined a bit late a lot of the preliminary research and ideation was already conducted, therefore I didn't play an active role in it, however, I will outline the user and their needs before getting into where I jumped in with the mid-stage design.
This product was a team project, and having joined a bit late a lot of the preliminary research and ideation was already conducted, therefore I didn't play an active role in it, however, I will outline the user and their needs before getting into where I jumped in with the mid-stage design.
This product was a team project, and having joined a bit late a lot of the preliminary research and ideation was already conducted, therefore I didn't play an active role in it, however, I will outline the user and their needs before getting into where I jumped in with the mid-stage design.
The User
The User
The User
A college student who is just beginning to apply or is somewhat familiar with applying to internships. They need a clear design that thoroughly explains how the Nora Mock AI Interviewer works, and exactly what it is: an interviewing tool that will give them real-time, personalized practice.
A college student who is just beginning to apply or is somewhat familiar with applying to internships. They need a clear design that thoroughly explains how the Nora Mock AI Interviewer works, and exactly what it is: an interviewing tool that will give them real-time, personalized practice.
A college student who is just beginning to apply or is somewhat familiar with applying to internships. They need a clear design that thoroughly explains how the Nora Mock AI Interviewer works, and exactly what it is: an interviewing tool that will give them real-time, personalized practice.
technical slider
technical slider
The first order of operations: the technical slider
The first order of operations: the technical slider
The first order of operations: the technical slider
Purpose
Purpose
Purpose
When setting up their interview, users need a way to adjust the technicality of their interview. Therefore a toggle slider is necessary to choose either a completely behavioral interview, a completely technical interview, or something more standard that implements a mix of behavior and technical questions.
When setting up their interview, users need a way to adjust the technicality of their interview. Therefore a toggle slider is necessary to choose either a completely behavioral interview, a completely technical interview, or something more standard that implements a mix of behavior and technical questions.
When setting up their interview, users need a way to adjust the technicality of their interview. Therefore a toggle slider is necessary to choose either a completely behavioral interview, a completely technical interview, or something more standard that implements a mix of behavior and technical questions.
Feature Version 1
Feature Version 1
Feature Version 1
Features
Features
Features
-Scale of 0 (Not Technical) to 1 (Technical)
-Midpoint of .5
-Scale of 0 (Not Technical) to 1 (Technical)
-Midpoint of .5
-Scale of 0 (Not Technical) to 1 (Technical)
-Midpoint of .5
Edits Needed
Edits Needed
Edits Needed
-0.5 isn't a good midpoint
-The descriptions of the different modes aren't clear
-0.5 isn't a good midpoint
-The descriptions of the different modes aren't clear
-0.5 isn't a good midpoint
-The descriptions of the different modes aren't clear
Feature Version 2 (Final Version)
Feature Version 2 (Final Version)
Feature Version 2 (Final Version)
Features
Features
Features
-Scale of 0 to 10 (5 is a whole number midpoint)
-More descriptive modes (behavioral mode and technical mode)
-Scale of 0 to 10 (5 is a whole number midpoint)
-More descriptive modes (behavioral mode and technical mode)
-Scale of 0 to 10 (5 is a whole number midpoint)
-More descriptive modes (behavioral mode and technical mode)
Mobile Mockup
Mobile Mockup
Mobile Mockup
Edits
Edits
Edits
-Components arranged vertically
-Singular column layout instead of 2 columns
-Components arranged vertically
-Singular column layout instead of 2 columns
-Components arranged vertically
-Singular column layout instead of 2 columns
Payment screens
Payment screens
Up Next: Creating a way for users to pay
Up Next: Creating a way for users to pay
Up Next: Creating a way for users to pay
Feedback Report Paywall
Feedback Report Paywall
Purpose
Purpose
With Nora being a paid service, users must be presented with a payment wall before gaining access to their interview feedback.
With Nora being a paid service, users must be presented with a payment wall before gaining access to their interview feedback.
Low fidelity
Full-Screen Version
This was the initial draft for the paywall, just a simple new screen to block the user from paying. It was effective in showing the benefits of Nora and clearly communicating the price to users.
High fidelity
Pop-up Version
This high-fidelity version retained essentially all the components of the low-fidelity, except with the addition of colors and stylization. However, the biggest change was making it a pop-up screen so that users could get a small sneak-peek of the feedback report that they could unlock once they subscribe.
Mobile Mockup
Vertical Pop-up
-Kept pop-up design
-Arranged content into vertical layout
Low fidelity
Full-Screen Version
This was the initial draft for the paywall, just a simple new screen to block the user from paying. It was effective in showing the benefits of Nora and clearly communicating the price to users.
High fidelity
Pop-up Version
This high-fidelity version retained essentially all the components of the low-fidelity, except with the addition of colors and stylization. However, the biggest change was making it a pop-up screen so that users could get a small sneak-peek of the feedback report that they could unlock once they subscribe.
Mobile Mockup
Vertical Pop-up
-Kept pop-up design
-Arranged content into vertical layout
Low fidelity
Full-Screen Version
This was the initial draft for the paywall, just a simple new screen to block the user from paying. It was effective in showing the benefits of Nora and clearly communicating the price to users.
High fidelity
Pop-up Version
This high-fidelity version retained essentially all the components of the low-fidelity, except with the addition of colors and stylization. However, the biggest change was making it a pop-up screen so that users could get a small sneak-peek of the feedback report that they could unlock once they subscribe.
Mobile Mockup
Vertical Pop-up
-Kept pop-up design
-Arranged content into vertical layout
Low fidelity
Full-Screen Version
This was the initial draft for the paywall, just a simple new screen to block the user from paying. It was effective in showing the benefits of Nora and clearly communicating the price to users.
High fidelity
Pop-up Version
This high-fidelity version retained essentially all the components of the low-fidelity, except with the addition of colors and stylization. However, the biggest change was making it a pop-up screen so that users could get a small sneak-peek of the feedback report that they could unlock once they subscribe.
Mobile Mockup
Vertical Pop-up
-Kept pop-up design
-Arranged content into vertical layout
Low fidelity
Features
-Full screen paywall
-No stylization
High fidelity
Features
-Paywall as a pop-up
-Visually "blocks" users from feedback screen
-Added colors and softened edges
Mobile Mockup
Features
-Kept pop-up design
-Arranged content into vertical layout
Low fidelity
Features
-Full screen paywall
-No stylization
High fidelity
Features
-Paywall as a pop-up
-Visually "blocks" users from feedback screen
-Added colors and softened edges
Mobile Mockup
Features
-Kept pop-up design
-Arranged content into vertical layout
Low fidelity
Features
-Full screen paywall
-No stylization
High fidelity
Features
-Paywall as a pop-up
-Visually "blocks" users from feedback screen
-Added colors and softened edges
Mobile Mockup
Features
-Kept pop-up design
-Arranged content into vertical layout
Low fidelity
Features
-Full screen paywall
-No stylization
High fidelity
Features
-Paywall as a pop-up
-Visually "blocks" users from feedback screen
-Added colors and softened edges
Mobile Mockup
Features
-Kept pop-up design
-Arranged content into vertical layout
Finish and Pay Screen
Finish and Pay Screen
Purpose
Purpose
In order to subscribe, users require a subsequent payment screen when they can insert their payment information and gain confirmation of their purchase.
In order to subscribe, users require a subsequent payment screen when they can insert their payment information and gain confirmation of their purchase.
Payment Information Page
Features
-Descriptive fields to input information
Payment Success Page
Features
-Informs users that their payment has successfully gone through
Payment Failure Page
Features
-Informs users that their payment has failed to be processed
-Feature is a pop-up on the same screen to encourage users to try again before proceeding
Payment Information Page
Features
-Descriptive fields to input information
Payment Success Page
Features
-Informs users that their payment has successfully gone through
Payment Failure Page
Features
-Informs users that their payment has failed to be processed
-Feature is a pop-up on the same screen to encourage users to try again before proceeding
Payment Information Page
Features
-Descriptive fields to input information
Payment Success Page
Features
-Informs users that their payment has successfully gone through
Payment Failure Page
Features
-Informs users that their payment has failed to be processed
-Feature is a pop-up on the same screen to encourage users to try again before proceeding
Payment Information Page
Features
-Descriptive fields to input information
Payment Success Page
Features
-Informs users that their payment has successfully gone through
Payment Failure Page
Features
-Informs users that their payment has failed to be processed
-Feature is a pop-up on the same screen to encourage users to try again before proceeding
Payment Information Page
Features
-Descriptive fields to input information
Payment Success Screen
Features
-Informs users that their payment has successfully gone through
Payment Failure Screen
Features
-Informs users that their payment has failed to be processed
-Feature is a pop-up on the same screen to encourage users to try again before proceeding
Payment Information Page
Features
-Descriptive fields to input information
Payment Success Screen
Features
-Informs users that their payment has successfully gone through
Payment Failure Screen
Features
-Informs users that their payment has failed to be processed
-Feature is a pop-up on the same screen to encourage users to try again before proceeding
Payment Information Page
Features
-Descriptive fields to input information
Payment Success Screen
Features
-Informs users that their payment has successfully gone through
Payment Failure Screen
Features
-Informs users that their payment has failed to be processed
-Feature is a pop-up on the same screen to encourage users to try again before proceeding
Payment Information Page
Features
-Descriptive fields to input information
Payment Success Screen
Features
-Informs users that their payment has successfully gone through
Payment Failure Screen
Features
-Informs users that their payment has failed to be processed
-Feature is a pop-up on the same screen to encourage users to try again before proceeding
Home Screen
Home Screen
Finally: wrapping everything up with a home screen
Finally: wrapping everything up with a home screen
Finally: wrapping everything up with a home screen
Purpose
Purpose
Purpose
Now that all the components of the Nora Mock AI Interviewer are complete, all that's left is to create an informative home webpage that can tell users what Nora is about. From here they can gain insights to Nora's various features, how it works, and what they can gain by using Nora.
Now that all the components of the Nora Mock AI Interviewer are complete, all that's left is to create an informative home webpage that can tell users what Nora is about. From here they can gain insights to Nora's various features, how it works, and what they can gain by using Nora.
Now that all the components of the Nora Mock AI Interviewer are complete, all that's left is to create an informative home webpage that can tell users what Nora is about. From here they can gain insights to Nora's various features, how it works, and what they can gain by using Nora.
Original Home Screen
Original Home Screen
User Feedback
User Feedback
There's too many items in the navigation bar
There's too many items in the navigation bar
There's too many items in the navigation bar
Is this a part of Nora Mock AI Interviewer?
Is this a part of Nora Mock AI Interviewer?
Is this a part of Nora Mock AI Interviewer?
These logos are hard to see
These logos are hard to see
These logos are hard to see
What does Internship Common App mean?
What does Internship Common App mean?
Is this another service?
Is this another service?
Interface
Interface
My Task
My Task
My Task
Overall it seems like users are confused with the amount of services on the homepage: there's a lot going on and there isn't a central service when the main focus should be the Nora Mock AI Interviewer. To address this issue, I'll simplify the home screen and reduce a lot of the unnecessary components.
Overall it seems like users are confused with the amount of services on the homepage: there's a lot going on and there isn't a central service when the main focus should be the Nora Mock AI Interviewer. To address this issue, I'll simplify the home screen and reduce a lot of the unnecessary components.
Overall it seems like users are confused with the amount of services on the homepage: there's a lot going on and there isn't a central service when the main focus should be the Nora Mock AI Interviewer. To address this issue, I'll simplify the home screen and reduce a lot of the unnecessary components.
New Home Screen
New Home Screen
Edits Made
Edits Made
Simplified navigation bar
Simplified navigation bar
-Phased out Cheetah Apply
-Mock Interviewer is now default home page
-Phased out Cheetah Apply
-Mock Interviewer is now default home page
Updated + enlarged logos
Updated + enlarged logos
Displayed Nora's Features for clarity
Displayed Nora's Features for clarity
-Gives users a better idea of how Nora works
-Highlights real-time text-to-speech ability
-Gives users a better idea of how Nora works
-Highlights real-time text-to-speech ability
Another Nora AI Feature
Another Nora AI Feature
-Feedback Report
-Feedback Report
Retained FAQ Section, removed "Need Advice?"
Retained FAQ Section, removed "Need Advice?"
-FAQ section is likely sufficient for user Q's
-FAQ section is likely sufficient for user Q's
Updated + enlarged CTA's to begin interviewing
Updated + enlarged CTA's to begin interviewing
Added final CTA to remind users to try Nora AI
Added final CTA to remind users to try Nora AI
Interface
Interface
Results
Results
Results
-Users have a better understanding of how Nora is meant to work
-Increased retention and longer scroll time on the screen
-Now over 1800 active users
-Users have a better understanding of how Nora is meant to work
-Increased retention and longer scroll time on the screen
-Now over 1800 active users
-Users have a better understanding of how Nora is meant to work
-Increased retention and longer scroll time on the screen
-Now over 1800 active users
Reflection
Reflection + What I learned
Reflection + What I learned
Time Management and Making the Deadline
Time Management and Making the Deadline
Time Management and Making the Deadline
I learned that there isn't always time for a fully thought out ideation process from start to finish. With this product being a collaborative effort, I'd be in touch with developers and pushing finished screens to them days or even hours before launch. Therefore, I often adjusted my design process to less steps to make these deadlines, hence why some features lack low-fidelity wireframes. I feel that I've become a more efficient designer who can work under many conditions.
I learned that there isn't always time for a fully thought out ideation process from start to finish. With this product being a collaborative effort, I'd be in touch with developers and pushing finished screens to them days or even hours before launch. Therefore, I often adjusted my design process to less steps to make these deadlines, hence why some features lack low-fidelity wireframes. I feel that I've become a more efficient designer who can work under many conditions.
I learned that there isn't always time for a fully thought out ideation process from start to finish. With this product being a collaborative effort, I'd be in touch with developers and pushing finished screens to them days or even hours before launch. Therefore, I often adjusted my design process to less steps to make these deadlines, hence why some features lack low-fidelity wireframes. I feel that I've become a more efficient designer who can work under many conditions.
Never Underestimate the User
Never Underestimate the User
Never Underestimate the User
It's obvious that the user is important, however, at times during this project I found myself being initially confident with certain features or screens. Being a college student applying for internships myself, I think I gave myself too much credit with regards to knowing my audience. However, when conducting usability tests after pushing these features, I found a lot of critiques and constructive feedback that proved really valuable to improving the final product. User testing saved me from potentially wasting effort on features students wouldn't even enjoy.
It's obvious that the user is important, however, at times during this project I found myself being initially confident with certain features or screens. Being a college student applying for internships myself, I think I gave myself too much credit with regards to knowing my audience. However, when conducting usability tests after pushing these features, I found a lot of critiques and constructive feedback that proved really valuable to improving the final product. User testing saved me from potentially wasting effort on features students wouldn't even enjoy.
It's obvious that the user is important, however, at times during this project I found myself being initially confident with certain features or screens. Being a college student applying for internships myself, I think I gave myself too much credit with regards to knowing my audience. However, when conducting usability tests after pushing these features, I found a lot of critiques and constructive feedback that proved really valuable to improving the final product. User testing saved me from potentially wasting effort on features students wouldn't even enjoy.