Redesign the Test Taking Platform for better usability
Redesign the Test Taking Platform for better usability
Redesign the Test Taking Platform for better usability
PRODUCT DESIGN
PRODUCT DESIGN
UX RESEARCH
UX RESEARCH
WEB DESIGN
WEB DESIGN
What is Skillovilla?
What is Skillovilla?
What is Skillovilla?
SkilloVilla is an online learning platform that turns skill-building into real job opportunities. Offering live classes, expert mentorship, and support with resumes and interview prep, SkilloVilla partners with 300+ companies and has a strong track record in helping students launch their careers across various industries.
SkilloVilla is an online learning platform that turns skill-building into real job opportunities. Offering live classes, expert mentorship, and support with resumes and interview prep, SkilloVilla partners with 300+ companies and has a strong track record in helping students launch their careers across various industries.
SkilloVilla is an online learning platform that turns skill-building into real job opportunities. Offering live classes, expert mentorship, and support with resumes and interview prep, SkilloVilla partners with 300+ companies and has a strong track record in helping students launch their careers across various industries.
My role
My role
My role
Designed a user-friendly interface to enhance the test-taking experience by addressing usability pain points and improving focus and engagement.
Designed a user-friendly interface to enhance the test-taking experience by addressing usability pain points and improving focus and engagement.
Designed a user-friendly interface to enhance the test-taking experience by addressing usability pain points and improving focus and engagement..
Collaborated with cross-functional teams to design an intuitive, responsive platform that simplifies the test process.
Collaborated with cross-functional teams to design an intuitive, responsive platform that simplifies the test process.
Collaborated with cross-functional teams to design an intuitive, responsive platform that simplifies the test process..
My team
My team
My team
Worked with product managers, business team, stakeholders and engineers.
Worked with product managers, business team, stakeholders and engineers.
Worked with product managers, business team, stakeholders and engineers.
Timeline
Timeline
Timeline
Feb, 2024 - Apr, 2024
Feb, 2024 - Apr, 2024
Feb, 2024 - Apr, 2024
problem
problem
spotting the pain points 🤔
spotting the pain points 🤔
At SkilloVilla, our mission is to empower students by providing them with the skills needed to land their dream jobs. However, we recognized that the test-taking experience was a barrier to smooth learning progression. That’s when we decided to revamp the test-taking platform, aiming to make it more intuitive and user-friendly.
At SkilloVilla, our mission is to empower students by providing them with the skills needed to land their dream jobs. However, we recognized that the test-taking experience was a barrier to smooth learning progression. That’s when we decided to revamp the test-taking platform, aiming to make it more intuitive and user-friendly.
At SkilloVilla, our mission is to empower students by providing them with the skills needed to land their dream jobs. However, we recognized that the test-taking experience was a barrier to smooth learning progression. That’s when we decided to revamp the test-taking platform, aiming to make it more intuitive and user-friendly.
Our research revealed three key pain points that were significantly impacting the test taking experience
Our research revealed three key pain points that were significantly impacting the test taking experience
Our research revealed three key pain points that were significantly impacting the test taking experience
Limited layout flexibility
Limited layout flexibility
Limited layout flexibility
The fixed, cramped layout hindered users from efficiently managing long questions
The fixed, cramped layout hindered users from efficiently managing long questions
The fixed, cramped layout hindered users from efficiently managing long questions
Cluttered interface
Cluttered interface
Cluttered interface
Overcrowded ui with excessive elements on the screen made it difficult for users to focus on the most important content
Overcrowded ui with excessive elements on the screen made it difficult for users to focus on the most important content
Overcrowded ui with excessive elements on the screen made it difficult for users to focus on the most important content
Inefficient learning flow
Inefficient learning flow
Inefficient learning flow
users faced difficulties in navigating and interacting with the platform were delaying task completion, decreasing overall productivity, and limiting the value users could derive
users faced difficulties in navigating and interacting with the platform were delaying task completion, decreasing overall productivity, and limiting the value users could derive
users faced difficulties in navigating and interacting with the platform were delaying task completion, decreasing overall productivity, and limiting the value users could derive
Following this, we defined our core problem statement.
Following this, we defined our core problem statement
"How can we redesign the test-taking platform to create a seamless, user-friendly experience that minimizes distractions and enhances content visibility, boosting student performance and driving higher engagement?"
"How can we redesign the test-taking platform to create a seamless, user-friendly experience that minimizes distractions and enhances content visibility, boosting student performance and driving higher engagement?"
objective
objective
our goal 🎯
our goal 🎯
To enhance the test-taking experience, we focused on our two main objectives:
To enhance the test-taking experience, we focused on our two main objectives:
To enhance the test-taking experience, we focused on our two main objectives:
Streamlining test taking experience
Streamlining test taking experience
To provide a seamless, intuitive experience, allowing users to focus on taking test without usability challenges
To provide a seamless, intuitive experience, allowing users to focus on taking test without usability challenges
To provide a seamless, intuitive experience, allowing users to focus on taking test without usability challenges
Boost engagement
Boost engagement
Reduce drop-off rates and improve conversion by streamlining the user journey
Reduce drop-off rates and improve conversion by streamlining the user journey
Reduce drop-off rates and improve conversion by streamlining the user journey
impact
impact
what i achieved?✨
what i achieved?✨
user persona
user persona
our users 💁🏻♀️
our users 💁🏻♀️
At SkilloVilla, our mission is to empower individuals with the skills they need to land their dream jobs. Below are two personas representing our core target audience.
At SkilloVilla, our mission is to empower individuals with the skills they need to land their dream jobs. Below are two personas representing our core target audience.
At SkilloVilla, our mission is to empower individuals with the skills they need to land their dream jobs. Below are two personas representing our core target audience.
The Aspiring Graduate
The Aspiring Graduate
The Aspiring Graduate
eager to land their first job in tech, motivated to upskill and gain practical experience but can feel overwhelmed by overly complex systems
eager to land their first job in tech, motivated to upskill and gain practical experience but can feel overwhelmed by overly complex systems
eager to land their first job in tech, motivated to upskill and gain practical experience but can feel overwhelmed by overly complex systems
Goal
Goal
Goal
"I want a platform that’s easy to navigate & provides clear, actionable feedback, so I can build confidence & improve my chances of getting hired."
"I want a platform that’s easy to navigate & provides clear, actionable feedback, so I can build confidence & improve my chances of getting hired."
"I want a platform that’s easy to navigate & provides clear, actionable feedback, so I can build confidence & improve my chances of getting hired."
The Career Switcher
The Career Switcher
The Career Switcher
transitioning into tech, seeks a intuitive platform that minimises learning curves & maximises understanding of technical concept
transitioning into tech, seeks a intuitive platform that minimises learning curves & maximises understanding of technical concept
transitioning into tech, seeks a intuitive platform that minimises learning curves & maximises understanding of technical concept
Goal
Goal
Goal
"I want a simple, well-structured platform that helps me quickly grasp concepts and track my progress, so I can successfully shift into a tech role."
"I want a simple, well-structured platform that helps me quickly grasp concepts and track my progress, so I can successfully shift into a tech role."
"I want a simple, well-structured platform that helps me quickly grasp concepts and track my progress, so I can successfully shift into a tech role."
research
research
detective mode on! 🧐
detective mode on! 🧐
*For confidentiality reasons I have omitted the actual values for these metrics.
*For confidentiality reasons I have omitted the actual values for these metrics.
We conducted research to understand the challenges students faced while using the test-taking platform.
We conducted research to understand the challenges students faced while using the test-taking platform.
We conducted research to understand the challenges students faced while using the test-taking platform.
Data from user research & surveys
Data from user research & surveys
🔍
🔍
from Microsoft Clarity
from Microsoft Clarity
Key interactive elements were barely clicked, suggesting users didn’t realize these options were available.
Key interactive elements were barely clicked, suggesting users didn’t realize these options were available.
On observing Session recordings showed that users often spent 30% more time than expected on simple tasks.
On observing Session recordings showed that users often spent 30% more time than expected on simple tasks.
Heatmaps highlighted users clicking on non-interactive areas. This indicated confusion about where to find the actions they needed.
Heatmaps highlighted users clicking on non-interactive areas. This indicated confusion about where to find the actions they needed.
💬
💬
from Surveys
from Surveys
We asked users to rate their experience with the platform, and most gave it a ⭐️ 3/5, describing it as “okay”.
We asked users to rate their experience with the platform, and most gave it a ⭐️ 3/5, describing it as “okay”.
40% of users mentioned the layout felt restrictive, especially for longer coding questions
40% of users mentioned the layout felt restrictive, especially for longer coding questions
Some users complained that after submitting their code, they couldn't view some features simultaneously, which made it harder to identify and fix errors quickly
Some users complained that after submitting their code, they couldn't view some features simultaneously, which made it harder to identify and fix errors quickly
Insights from our UX Audit
Insights from our UX Audit
01
01
Unnecessary elements during test
Unnecessary elements during test
Unnecessary elements on the screen create visual clutter, making it difficult for users to focus on the key information they need.
Unnecessary elements on the screen create visual clutter, making it difficult for users to focus on the key information they need.
02
02
Overcrowded interface
Overcrowded interface
Interface was cluttered with too many elements, making it difficult for users to focus on essential tasks and navigate seamlessly
Interface was cluttered with too many elements, making it difficult for users to focus on essential tasks and navigate seamlessly
03
03
Limited view for critical content
Limited view for critical content
Key information was restricted to a small area, reducing visibility and making it harder for users to access and interact with essential content effectively
Key information was restricted to a small area, reducing visibility and making it harder for users to access and interact with essential content effectively
user flow
user flow
designing the user path 🛣️
designing the user path 🛣️
I've designed a streamlined test-taking flow that enhances user navigation, from instructions to test submission, ensuring clarity and engagement.
I've designed a streamlined test-taking flow that enhances user navigation, from instructions to test submission, ensuring clarity and engagement.
wireframes
wireframes
bringing concepts to life 📝
bringing concepts to life 📝
Here's a sneak peek of my low-fidelity wireframes. At this stage, I concentrated on the core functionality and layout before moving into detailed design.
Here's a sneak peek of my low-fidelity wireframes. At this stage, I concentrated on the core functionality and layout before moving into detailed design.
final designs
final designs
showtime 🎬
showtime 🎬
*Some features were not designed due to prioritization, ensuring focus on the most impactful updates first.
*Some features were not designed due to prioritization, ensuring focus on the most impactful updates first.
Here’s the final design with key improvements based on user feedback. While some sections remain unchanged as they weren’t a priority at the time, new features have been implemented, and certain pages have been redesigned for a better experience.
Here’s the final design with key improvements based on user feedback. While some sections remain unchanged as they weren’t a priority at the time, new features have been implemented, and certain pages have been redesigned for a better experience.
01
01
test instructions
test instructions
Instruction Section : Here, we reduced the space for the main heading to provide more visible area for content. The section is designed in a collapsible style for easy navigation.
Instruction Section : Here, we reduced the space for the main heading to provide more visible area for content. The section is designed in a collapsible style for easy navigation.
Sections Overview : Scrolling down shows the section overview in a clear tabular format. After giving consent, users are provided with a single "Start Test" CTA, reducing unnecessary clicks.
Sections Overview : Scrolling down shows the section overview in a clear tabular format. After giving consent, users are provided with a single "Start Test" CTA, reducing unnecessary clicks.
To simplify the test-taking experience, we combined the instructions and section overview, reducing unnecessary navigation & allowing users to view all essential details at a glance before starting their test.
To simplify the test-taking experience, we combined the instructions and section overview, reducing unnecessary navigation & allowing users to view all essential details at a glance before starting their test.
02
02
coding ques view
coding ques view
Coding Question view : We focused on improving the coding widget, output panel, and question panel for better flexibility and consistency. For the header and bottom navigation, we adjusted sizing and colors but didn’t redesign them as it wasn’t a priority at the time.
Coding Question view : We focused on improving the coding widget, output panel, and question panel for better flexibility and consistency. For the header and bottom navigation, we adjusted sizing and colors but didn’t redesign them as it wasn’t a priority at the time.
Here's the view of solving a coding question during the test. Hints are provided to assist users if they get stuck
Here's the view of solving a coding question during the test. Hints are provided to assist users if they get stuck
03
03
sql ques view
sql ques view
