PsyCT Website Design
Dhirendra Paudel
The product:
Psychological Courses Tests (PsyCT) is an e-learning and
testing website dedicated to mental health. The typical
user is between 18-50 years old, and most users are
students or individuals striving for mental health well-
being. PsyCT's goal is to provide individuals access to
academically validated psychological assessment tools and
courses regarding mental health.
Project overview
Project duration:
Feb 2023 to March 2023
The problem:
Available online psychological courses and
assessment tools have cluttered designs, are
difficult to browse through, and are expensive
and confusing due to inadequate resources.
Project overview
The goal:
Design a PsyCT free-to-use website to be user-
friendly by providing clear navigation and
offering a course in addition to tests for
psychological assessment.
My role:
UX designer leading the PsyCT website design
Project overview
Responsibilities:
Conducting interviews, paper and digital
wireframing, low and high-fidelity prototyping,
conducting usability studies, accounting for
accessibility, iterating on designs and
responsive design.
Understanding
the user
●User research
●Personas
●Problem statements
●User journey maps
User research: summary
I conducted user interviews, which I then turned into empathy maps to better understand the target
user and their needs. I discovered that many target users surf online psychology tests and courses
when they seek self help for mental health well-being. However, many psychological courses and
tests websites are overwhelming and confusing to navigate, which frustrated many target users. This
caused a normally help seeking experience to become challenging for them, defeating the purpose
of help.
User research: pain points
Navigation
Psychology courses and
tests website designs are
often complex, which
results in confusing
navigation
Interaction
Small buttons on
psychological tests
websites make item
selection difficult, which
sometimes leads users
to make mistakes
1 2
Experience
Online pyschological
tests and courses
websites don’t provide
an engaging browsing
experience
3
Persona: Nutan
Problem statement:
Nutan is a busy medical
student who needs
intuitive website
navigation and search
filters because they want
psychological tests and
courses to help them to
be stress-free.
User journey map
I created a user journey
map of Nutan’s experience
using the site to help
identify possible pain points
and improvement
opportunities.
●Sitemap
●Paper wireframes
●Digital wireframes
●Low-fidelity prototype
●Usability studies
Starting
the design
Sitemap
Difficulty with website navigation
was a primary pain point for users,
so I used that knowledge to create
a sitemap.
My goal here was to make
strategic information architecture
decisions that would improve
overall website navigation. The
structure I chose was designed to
make things simple and easy.
Paper wireframes
Next, I sketched out paper
wireframes for each screen in
my app, keeping the user pain
points about navigation,
browsing, and test and course
flow in mind.
The home screen paper
wireframe variations to the
right focus on optimizing the
browsing experience for
users.
Stars were used to mark the elements of each sketch
that would be used in the initial digital wireframes.
Refined paper wireframe
Paper wireframe
screen size variations
Because PsyCT’ users
access the site on a variety
of different devices, I
started to work on designs
for additional screen sizes
to make sure the site would
be fully responsive.
Digital wireframes
Moving from paper to digital
wireframes made it easy to
understand how the redesign
could help address user pain
points and improve the user
experience.
Prioritizing useful button
locations and visual element
placement on the home page
was a key part of my strategy. Homepage is optimized for
easy browsing through the
tests items
Easy access to courses and
tests
Digital wireframe
screen size variation(s)
Low-fidelity prototype
To create a low-fidelity prototype, I
connected all of the screens involved in the
primary user flow of adding an item to the
course and taking a course.
At this point, I had received feedback on my
designs from members of my team about
things like placement of buttons and page
organization. I made sure to listen to their
feedback, and I implemented several
suggestions in places that addressed user
pain points.
View PsyCT low-fidelity prototype
Usability study: parameters
Study type:
Unmoderated usability study
Location:
Nepal, remote & physical
Participants:
5 participants
Length:
20-30 minutes
Usability study: findings
These were the main findings uncovered by the usability study:
Once at the Test screen,
users didn’t have a way to
edit the marked answers
in the test
Test Results Account
Users weren’t able to
easily correspond the
result information into the
courses provided
During the instructions
process, there wasn’t a
clear way for users to log
in to their account to view
their previous results
123
●Mockups
●High-fidelity prototype
●Accessibility
Refining
the design
Mockups
Based on the insights from the usability study, I made changes to improve the site’s test flow. One of
the changes I made was having less items which declutters the test selectitons.
Mockup 1 before
Before usability study After usability study
Mockups
To make the test flow even easier for users, I added a take test more prominent that allowed users
to use the same test during the course.
Before usability study After usability study
Mockups: Original screen size
Mockups: Screen size variations
I included considerations for additional
screen sizes in my mockups based on my
earlier wireframes. Because users tests
from a variety of devices, I felt it was
important to optimize the browsing
experience for a range of device sizes, such
as mobile so users have the smoothest
experience possible.
Accessibility considerations
I used headings with
different sized text for
clear visual hierarchy
I used landmarks to help
users navigate the site,
including users who rely
on assistive technologies
I designed the site with alt
text available on each
page for smooth screen
reader access
1 2 3
●Takeaways
●Next steps
Going forward
Takeaways
Impact:
Our target users shared that the design was
intuitive to navigate through, more engaging
with the images, and demonstrated a clear
visual hierarchy.
What I learned:
I learned that even a small design change can
have a huge impact on the user experience.
The most important takeaway for me is to
always focus on the real needs of the user
when coming up with design ideas and
solutions.
Next steps
Conduct follow-up
usability testing on the
new website
Identify any additional
areas of need and ideate
on new features
1 2
Let’s connect!
Thank you for reviewing my work on the PsyCT website !
If you’d like to see more, or would like to get in touch, my contact information is provided below:
Email: dhirendra@consultant.com
Website: https://paudeldhirendra.github.io/
