V1 of the Mock Interview (video) UI Iteration was both my favorite and the client's choice.
Prentus
A B2B2C job placement platform powered by AI and built to help people break into tech
Overview
Prentus transforms job-searching into an engaging game. It features a 'Job Tracker' for monitoring applications and interviews, a tight-knit community for support, and an extensive job board sourced from Indeed and LinkedIn. Prentus sets itself apart with AI-driven tools that craft personalized resumes and cover letters. Further, its AI-assisted career coaching offers custom advice, mock interviews, and feedback, equipping users with sharpened interview skills and confidence.
For this project, my team and I introduced new features to the existing Prentus website. This included the design of the AI video mock interview, AI feedback screen, and the career coach review and feedback sections.
The Challenge
Based on prior user feedback, Prentus had a commendable 8 out of 10 rating in user experience. Aiming for an exceptional 11 out of 10, our team identified critical areas for improvement.
AI Integration: Create an AI video mock interview feature for a seamless user experience on the web-mobile platform.
Engaging Feedback: Design an intuitive feedback interface for clear, actionable feedback to enhance interview skills.
Mentorship Consistency: Develop screens for mentors to efficiently review job seekers' mock interviews, ensuring a consistent UX across all account types.
The Solution
After in-depth research and iterative brainstorming sessions, we designed screens for the job seeker dashboard, video/chat mock interview, and AI feedback screens to drive user success. We incorporated gamification to enhance engagement, reinforcing Prentus' user-centric approach. Our innovation stood out with the AI avatar-video interface, aligning with Prentus' UI while retaining the feel of familiar video platforms.
Process
Discovery & Research
Ideation
Design
Dev Handoff
Reflection
Tools
Figma
Adobe Illustrator
Google Meet
Slack
Role
UX Researcher, UX/UI Designer in a team of 5
Project Duration
7 weeks
Discovery + Research
Understanding the Product
At the beginning of our UX journey my team and I fully immersed ourselves into Prentus' multifaceted platform, exploring its job board, job tracker, and community. While our main focus was centered around the AI interfaces and feedback, we aimed to grasp the platform's interconnectedness in full.
Establishing Clarity from the Start
We devised targeted questions for the client, learning their preference for text and number-focused AI feedback. They also showed interest in an AI avatar for video interviews and stressed the value of a gamified, yet straightforward, design.
Guided by the client's vision, we aimed to design an interface that was fun, simple, and addicting.
Competitive Analysis
We analyzed platforms similar to Prentus, that emphasized AI career coaching, video mock interviews, as well as video conferencing tools. This provided inspiration, foundational insights, and identified standout features.
Key Takeaways
I was genuinely surprised by the large amount of interview prep products available! As we delved deeper, we began to appreciate Prentus' multifaceted design. More than just an application, its intricate features revealed themselves gradually, positioning it as a comprehensive platform for job seekers. Each discovery presented new challenges, pushing our team into intensive brainstorming sessions and close collaboration on Google Meet and Figma.
Ideation
User Stories
Our client presented us with three User Stories to highlight the core needs and aspirations of the platform:
As a user, I want to have a realistic mock interview to prepare me for real ones
As a user, I want to understand how I can improve in my interviews
As a coach, I want to be able to review job seekers mock interviews to give them feedback
These user stories anchored our design process. With the project's complexities, they proved pivotal in ensuring our solutions remained focused and user-centric.
User Flows
Utilizing the user stories, our team collaborated on FigJam to map out user flow pathways. Leading the design for User Story #1, I put myself in the user's shoes to detail the steps from the dashboard to the mock interview screen. This step-by-step blueprint provided critical insights, allowing us to:
Determine the exact screens needed for the user to complete the flows
Pinpoint navigation challenges within the app linked to the introduction of new features
Ensure a seamless and intuitive user experience across touchpoints
Low-fidelity Wireframes
Using Figma, we developed low-fidelity wireframes to begin seeing our designs coming to life. We quickly recognized that the first and second user flows overlapped. Due to these shared steps, two teammates and I divided the responsibilities for both flows, to ensure cohesive and consistent designs.
Iterations & Refinement
Building on our initial low-fidelity wireframes, I engaged in a collaborative design iteration with my team, integrating client feedback and a user-first approach.
Transitioned the primary website navigation from a top bar to a side panel, eliminating the sub-navigation which became redundant.
Rebranded 'AI Career Coach' to 'AI Career Services' to better resonate with users.
Strategically positioned "AI Mock Interview" and "AI Career Chat" options at the top left, highlighting them as primary user tasks and ensuring maximum visibility due to their primary importance on the platform.
Focused Content Display: Concentrated on-screen content to feature core elements—past sessions, progress tracker, and interview/chat options—facilitating a more intuitive and uncluttered user experience.
Design
Considerations for Optimal UX/UI Design
Authentic Interview Simulation: Replicate the interface and ambiance of a Zoom experience to boost users' confidence for their upcoming real interviews.
Optimizing Feedback Value: Design a user-friendly interface to deliver practical, actionable, and immediate feedback. Elevating user experience by amplifying their chance of being hired.
Charting User Progress & Growth: Integrating a progress tracker to not only celebrate achievements but to pinpoint areas needing improvement.
Tailored Learning Pathways: Direct users to customized resources, be it articles, videos, or podcasts, forging a bespoke route to their career success.
Mentor Interface Efficiency: Design a dashboard that complements the jobseeker's, streamlining mentor feedback processes.
Commitment to Collaborative Excellence: Hold weekly meetings for progress checks, feedback exchange, and continuous learning, aiming for both outstanding UX/UI and our collective growth as designers.
Refining the User Interface
Considering the product's complexity, we created three design variations for five key screens, including AI Mock Interview (video and chat), Mock Interview AI Feedback, and Mentor Interview Review (video and chat). Responsible for the design of the AI Mock Interview video interface, I aimed for a user-friendly interface with a familiar Zoom-like feel, as well as to create client-useful iterations while adhering to the project scope.
It's noteworthy to mention that our team represents Prentus' target demographic. While I fully understand the importance of not making assumptions in UX Design, this project resonated deeply with us. We took this project to heart, and approached it with a personal touch, envisioning the AI feature as we'd want to experience it firsthand.
Navigation Challenges
In our lo-fi wireframes, we proposed a top navigation bar for jobseekers, mirroring Prentus' mentor account. This was aimed at bringing cohesion across different user accounts and optimizing screen space, considering side-navigation bars can be space-consuming. However, after collaborative discussions with both the client and our internal team, we gravitated towards a side navigation approach, catering to Prentus' extensive features and the platform's intricacy.
While the client favored the original navigation design, we implemented strategic tweaks to enhance user navigation and streamline the experience.
-
-
The same as V1 in light mode
-
V2 - A maximized video view version to give the user a realistic feel of a video conference application
-
V3 - A more simplified version of V1, giving the user the option to minimize the Live Transcription on the right side of the screen for optimal focus on the video interaction
Video Display Breakdown
Optimized Size: Enhanced video windows ensure a clear view of both participants.
Speaker Highlight: A distinct border emphasizes the active speaker for clarity.
Balanced Views: Equal-sized windows facilitate user self-assessment and engagement with the AI interviewer.
+ Live Transcription: Introduced for accessibility and clear speaker identification.
Video Control Bar Features
Progress Gauge: Indicates interview stage and time left.
Pause & Play: Allows users to manage interview flow.
Duration Display: Shows ongoing interview time.
Recording Alert & Control: Indicates active recording with a toggle feature.
Camera Control: Confirms user video feed status.
Question Replay: Let users request question repetition.
Full-Screen Toggle: Expands view for focused interaction.
Session End: User-directed exit with automatic draft-saving after session completion.
Elevating Prentus' Style Guide
While Prentus had a solid style foundation, we identified areas for enhancement:
Iconography and Emojis: Added a tailored set of icons and emojis for the new design needs.
Illustration: Introduced illustrations to bring in a playful touch. To ensure brand coherence, I sourced open-source illustrations and adjusted their colors to align with the brand's palette. For a perfect fit with Prentus' style guide, I even recreated some illustrations using Adobe Illustrator, tailoring them to our designs.
Color Gradients: Crafted brand-aligned gradients, resulting in a unique shade of blue. By blending the brand's primary colors, we achieved a beautiful new shade of blue. I took particular pleasure in incorporating this gradient for a harmonious aesthetic, and game-like atmosphere.
Button Enhancements: Upgraded buttons with subtle gradients for enhanced user engagement and a game-like visual charm.
High Fidelity Screens
During this phase, our team dynamics shifted as my responsibilities expanded to cover both user flows one and two, in collaboration with two team members, while the rest of our team tackled mentor view screens.
My primary focus was on the AI video mock interview in flow one and the AI feedback screen in flow two.
Feedback Screen
While initially, the AI feedback screen wasn't my primary focus, I was equipped to handle its intricacies, backed by comprehensive research, team discussions, and client interactions. The client's preference was to integrate a substantial amount of information in one place: combining both AI and human mentor feedback. This required embedding the video interview player alongside AI feedback for each of the ten interview questions. Plus, we had to add a space for the yet-to-arrive mentor feedback. This then posed another design task: notifying users once the mentor feedback was in.
Snippet from my research on video conferencing platforms
AI Mock Video Interview: Creating Realism & Functionality
Video Player Control Bar: By benchmarking leading platforms like Zoom, Loom, and Google Meet, I refined the video control bar to ensure top-tier functionality.
Humanizing AI: To elevate the experience's realism, we collectively opted for a lifelike AI avatar. Using an image of a human face, we hoped to intensify the user's immersion.
Transcription Control: To offer user autonomy, I incorporated a toggle for live transcriptions, allowing users to switch as needed.
Clean Interface: Above all, I aimed to design a clean, distraction-free UI, prioritizing engagement and experience.
Final Iterations for Video Mock Interview
Though the client chose the 'dark mode', we offered both light and dark modes for the interview screens. This choice aligns with our commitment to user preference and adaptability. Presenting these options not only showcases our dedication to flexibility but also emphasizes a user-first approach to our designs.
Dev Handoff
In the project's final stretch, our team prepared thorough developer handoffs, detailing spacing and thorough annotations. This meticulous approach aimed to promote flawless collaboration and prevent any design ambiguities. I took charge of the video mock interview screens in flow one and the mentor feedback screens in flow three.
Reflection
Embarking on the Prentus project felt like a rollercoaster - exciting, challenging, and ultimately rewarding. It was a journey that tested our perseverance and showcased our dedication to achieving design excellence.
I was fortunate to team up with a dynamic group of talented women, each bringing unique strengths and perspectives to the table. Despite our diverse backgrounds, our collective skills in UX Design and mutual high standards forged a strong and harmonious team dynamic.
I truly cherish the countless hours spent brainstorming and co-designing on Figma, as they not only refined our designs but also cemented friendships that I believe will last a lifetime. It was exciting to introduce a brand new feature to an existing website while adhering to existing style guidelines, and yet being granted the freedom to think big and suggest enhancements. Imagining what the AI mock interview's functionality should be and its feedback mechanism was a creative challenge, especially when we received minimal pointers on what it should look like. I believe that our design not only reflects today's AI capabilities but also accommodates future enhancements.
What made Prentus especially exciting was its innovative essence. The opportunity to embed AI into the platform in a rapidly advancing sector was an invaluable learning experience. Our client’s clarity and constructive insights ensured our trajectory was spot-on, removing potential pitfalls and promoting our productivity. This journey has been transformative for me, and I’m pumped for more such projects, continuing to dive deep into innovative solutions and contributing to the ever-evolving world of design.
🎉 Huge shoutout to my incredible team! Your dedication, creativity, and collaboration were the backbone of this project's success. 🥂🌟 #DreamTeam