Psychology Today – UX/UI Design

I have always been a huge proponent of putting mental health first, whether that may be indulging in your favorite food you haven’t eaten in a while, rewatching your favorite movie, or just getting a sufficient amount of sleep. I do a lot of reading on Medium in my free time about opinions on self-care and psychology articles to make my life better, and it is actually one of the reasons I decided to go a therapist this year. For that, I am extremely thankful to have found a resource that makes my life better.

But people who aren’t familiar with this beautiful website probably aren’t aware of many places they can find help. More importantly, for people who are trying to find help, they are trying to do exactly that — find help. When you look up “therapists near me” on Google, Psychology Today is the leading forefront of finding licensed professionals that are able to help you with problems. But upon using the actual desktop website, I came across several issues.

Heuristic Evaluation of Psychology Today

I will be evaluating each of Jakob Nielsen’s 10 Heuristics, qualitatively measuring major usability issues on a severity rating scale of 1–3 (1 being a minor usability issue while 3 being a major usability issue).

#1 — Visibility of System Status

Severity Rating: 1

The website showcases a large header photo at the forefront (see above image), entitled “Top Posts” associated with a couple of articles beneath it. However, when hovering over the copy, the user would not be able to know if they were actually clicking on an article or not (it simply blends in with the other copy).

An easy fix would be a simple change of color, or highlighting the text (like above) when you hover over it. This would give the user appropriate feedback in real time that distinguishes the articles’ copy from one another.

For the most part, Psychology Today does an overall good job with this heuristic, especially in their “Find a therapist” search bar, which provides users a drop-down list of locations and zip codes that appear as they type.

#2 — Match between system and the real world

Severity Rating: 1

The language seen above in the “Basics” section of the website is intended to showcase a list of subcategories that users can access. Even taking into account that most of the categories are psychology-related terminology, some of these subcategories are far too complicated to understand for the general person. Acronyms like ‘HEXACO’ and words like ‘Hebaphilia’ aren’t necessarily common knowledge.

Still, the urgency of this problem isn’t too problematic, which is why I evaluated this heuristic with a severity rating of 1. The methodology of categorization is horrible and will further be discussed in heuristic #7.

#3 — User control and freedom

Severity Rating: 2

Psychology Today offers a pretty good job at ensuring that the user has control and freedom over exiting but fails to give users an easy undo action when it comes to clicking buttons and links. The majority of the buttons transfers the user to a different page rather than loading similar articles, which can be somewhat frustrating especially if the user is just browsing. In the example below, the “Look Inside” button takes the user to a completely different page, but this can be made more efficient by the utilization of a pop-up box of the magazine.

#4 — Consistency and standards

Severity Rating: 2

The website is fairly consistent in their usage of conventions, with the exception of their usage of buttons. For the entire website, all of the buttons are colored orange, while the buttons on the majority of their pages are grey.

In addition, their “See More” buttons are not consistent amongst all the different sections. The “See More News” section does not have a button while the “See More Experts” does.

Although the first example may be a stylistic decision, the latter is not consistent with the other buttons, which is why I deemed this heuristic with a severity rating of 2.

#5 — Error prevention

Severity Rating: 2

Psychology Today’s website does a good job in ensuring that during the user registration process for professionals, they make sure that the password is strong as you type the password.

Still, error prevention can be made better in the login process when the user inputs their username. Because the majority of websites tend to use either an email or ID for the identification part, it would be useful to state that Psychology Today’s website only accepts usernames. Instead, the current UI just pops up a “User not found” error regardless if the user inputted their email or ID.

#6 — Recognition rather than recall

Severity Rating: 1

Psychology Today does an amazing job of ensuring that they utilize recognition when it comes to finding health care professionals and therapists in your area. Inputting a zip code or city causes a drop-down list of locations that are affiliated with what the user is typing, minimizing the application of user memory.

However, in regards to searching topics, the website could do a better job in providing options as well, especially because they have so many subcategories in their Basics page. Searching “Healthcare” offers no suggestions, despite it being a specific subsection.

#7 — Flexibility and efficiency of use

Severity Rating: 3

I think the lack of a member profile just for common users make Psychology Today lag behind in comparison to other magazine websites, as it fails to provide users a more efficient experience when browsing. Because there are so many articles, it’s very simple to lose track of what a user has read, and without using an account system, the only thing that gives any indication that you have read an article is the literal web browser’s cache.

Implementing a user account system would make it more interactive and engaging, all the while containing all of the memory of what the user has accessed, especially for a website that focuses itself on making human life simpler. In addition, it creates a community where people can comment about articles, which in turn increases website traffic.

In the above example, there’s no way of knowing you have read an article even after you’ve read it. Utilizing an account system can allow users to access the articles more efficiently by giving them a “history” list of what they’ve read and such.

#8 — Aesthetic and minimalist design

Severity Rating: 2

Psychology Today is pretty consistent in being up-to-date with modern UI interfaces, utilizing flat colors as part of their visual identity branding system. Still, despite the nice aesthetic colors, the website fails to follow through with the latter: minimalism. The whole website is so cluttered and filled with miscellaneous information that really makes it difficult for users to pinpoint what to focus on.

The different sections are presented so horribly, as it fails to draw attention to any one section. Clustering these three sections together on one webpage is too much information to handle, and the overall layout currently is counterproductive and ironic given the implementation of the “See More” buttons.

#9 — Help users recognize, diagnose, and recover from errors

Severity Rating: 1

The website does an excellent job of fixing errors when they come up when it comes to user registration. When creating an account for psychology professionals, if the username is taken, it immediately turns the text box red, signifying that the username is not available. In addition, they added a hyperlink for logging in if you are already a member (utilizing Nielsen’s Heuristic #7).

In addition, when inputting a wrong password or username, it explicitly pops up what the issue is when logging in rather than making the user question if the ID or password was incorrect.

I decided to give this heuristic a severity rating of 1, primarily because of the minor issue mentioned in heuristic #5 about the failure of notifying users about whether usernames and/or emails were acceptable.

#10 — Help and documentation

Severity Rating: 2

When inserting a wrong city name when searching for therapists, Psychology Today provides a list of suggestions as to what the user might have done wrong to yield the “No results found” page. This help and documentation provides users with a list of options on what to do next, an excellent feature of their website.

Still, there is no help page, and for a website that has a section to signup and login, it feels misleading to the user that there is not a place to sign up for a regular account. Otherwise, just omit the sign-in button for therapists and place it somewhere not in the public view. There should be a help link at the bottom next to the “About,” “Privacy,” and “Terms” links providing a general synopsis of frequently asked questions (such as “Can regular members sign up, or is it exclusive to health care professionals?”).

Usability Testing

In general, the purpose of usability testing is to capture the real users voice and behavior while they actually use the product. By collecting data of their actual interactions with the product, we can improve the usability of the product by troubleshooting potential design issues as we see firsthand the user-friendliness of the website. With usability testing, user experience researchers are able to uncover more global usability issues that common users make and maximize satisfaction.

What I am testing

The usability test I decided to do was on Psychology Today, a magazine dedicated to making psychology accessible to the general public. The magazine’s website aims to showcase therapy and health care professional directories and psychologist-written articles about the self. I wanted to investigate how much more efficient the website could be for the user, especially when it comes to finding mental health. Already in my heuristic evaluation there were a list of usability issues that needed to be fixed, but in my experiment, I found even more problems, such as the search function being very difficult to navigate and the failure to compartmentalize information more cohesively.

The person who tested my app was a college student who is taking 19 units and doesn’t really have time to focus on mental health, despite wanting to. She was asked to use the prototype to complete three tasks surrounding the search section of Psychology Today: search “depression” for an overview, search your “zip code or city” for a therapist, and search for a “self test” for depression.

Finding from the tests

Psychology Today’s current model of search fails to provide individuals with topics or even guide users towards entering any query. According to the user, it wasn’t “fleshed out” enough to provide a search engine that she would prefer to use to find problems. Instead, the current search method just consolidates all information into its vast archive that include that keyword, rather than segregate them into compartments. Seeing that search is one of the most important features of Psychology Today and arguably the primary feature that lets individuals find articles and professional help on whatever they’re struggling with, I came up with a design challenge that takes into account all factors experienced in my heuristic evaluation and usability test.

Design Challenge

After careful review of Psychology Today’s desktop website, I realized that their main goal of providing accessibility to psychology resources was to help connect people struggling with licensed professionals. In a globalizing world, many individuals do not have time to sit down and really analyze their problems; everyone is on the go and will make time for themselves only if they can. As someone who is a big advocate of mental health myself, I knew the importance of feeling understood when reaching out for help and how important time is.

Being able to connect more people to these resources by developing a mobile version would undoubtedly improve user retention and make Psychology Today a forefront competitor in websites specializing in reading about psychology. More importantly, because Psychology Today is the highest bidder on the keyword “therapists near me” for Google Ads, they are the leading website to connect people to therapists. Given how convoluted and cluttered the desktop version is but still being such a forefront in the field of this led me to an overarching question: how can we integrate a mobile platform for users to read articles as well as be connected with professionals that are catered to each individual’s needs?

User Persona

I developed a user persona with Lovestruck Leo as my prime example. Personas help visualize scenarios that are able to help guide designers and developers on how to structure the app. His statistics are intended to resemble an individual who is far too preoccupied to his work but also is your common person seeking help in the 21st century.

I also developed a couple of scenarios below of how my mobile version of Psychology Today can really aid Leo in his pursuits for a better life.

Scenario 1: Finding a Therapist

Leo has just ended a 35-year relationship with his partner, Julio. It’s been rough for Leo for the past few weeks, and he’s been reading relationship articles from Psychology Today on his phone. After reading some articles about relationships and heavy analytical consideration, he’s finally built up the courage to reach out for help. He clicks on the “get help” button on the right and searches for therapists in Los Angeles. A list of results for therapists come up, but some of them are women and straight men, and Leo — a 64-year old gay man — feels like they wouldn’t understand him. He filters out individuals on gender and sexuality, only showing therapists who are gay men. A revised list of results pop up, and he stumbles across the third result of Harrison C. Smith, as he sees from the description that he specializes in depression and LGBT issues, which Leo personally feels like he is coping with at the moment. He clicks on his profile to view more, and after he sees a description about loneliness as well as a strong client focus for gay individuals, he’s sold. Leo finds his therapist and gives him a call to see if he can schedule an appointment to talk about his problems soon.

Scenario 2: Relationship Self-Test

After ending a 35-year long relationship with his old partner, 64-year old Leo is on the hunt for a new man. Now extremely insecure, Leo goes online to Psychology Today to read articles to find ways to get back in the game for relationships, as he strongly feels as if he needs to reanalyze himself. Once he gets on the app, he clicks on the magnifying search button to search for “relationships”. He finds a list of articles, but even better, he finds a self-test about relationship attachment. He reads a description of the test, which is intended to see what his relationship attachment style is. Because Leo is a big gamer, he decides to take the test since it feels like a game. He ends up getting a score of 21/100 when it comes to “avoidance of closeness.” He uses and absorbs this information, now on a quest to find someone who is on the same wavelength as him.

Scenario 3: Text Accessibility

Leo is so bothered by millennials and their ability to read small font sizes. As a 64-year old man, he finds himself squinting — even with his glasses — to decipher what some words say when he’s reading articles on his phone. He opens Psychology Today’s app for his daily dose of reading, clicking on the first essential read, entitled “If You Want a Long-Term Relationship, Beware of Professional Daters.” He finds that the current font size is far too small for him to read. Fortunately, on the top right-hand corner, there is a hamburger button that Leo is somewhat familiar with, as he uses other reading apps. The hamburger button reveals an option to lower his actual phone’s screen brightness, along with adjusting text size. He presses the larger A, and magically, the font size increases to something manageable that allows Leo to read with ease.

Scenario 4: Searching Relationship Articles

After talking with his therapist, Leo decides to get back into the relationship game, meeting another guy in his life named Rubio. Leo is sort of confused about how he feels towards Rubio because he doesn’t know whether or not Rubio is in the right headspace for a relationship, as Leo was told by Rubio that it’s Rubio’s 4th relationship in the past year. An avid reader, Leo goes onto the mobile app of Psychology Today to search for articles about relationships, particularly to find more information about whether or not Rubio would be a good match for him. He clicks the magnifying glass and searches “relationships,” which pops up a list of articles regarding relationship help. Leo is interested in the first article that appears, entitled “If You Want a Long-Term Relationship, Beware of Professional Daters.” He clicks on the article, and he finds that the article gave him the advice he needed to end things with Rubio. The search query of “relationships” was successful in helping him find articles that were able to give him clarity on the situation at hand.

Wireframe + Workflow

My wireframes below show the general structure of how the workflow is supposed to be, beginning from the 3rd row down to get help at the very end (view it from left to right). The screens above are merely versions of the screens below them, just with different tabs (as the back button with the fixed toolbar had to be changed in order for it to be logical.

My actual prototype is extremely complex and difficult to follow, as I wanted to make sure that this was an interactive prototype that was able to solve various scenarios, ranging from text accessibility to custom filters for finding the correct therapists.

Screen Design (High-Fidelity Prototype)

Here are the 4 main screens involved in my high-fidelity prototype, as well as all of the high-fidelity wireframes. My designs took into account WCAG guidelines, specifically color contrast ratios (4.5 to 1), and tried to gamify the experience with the implementation of self-tests so it doesn’t feel like a task finding out more about yourself.

Interactive Prototype

You can see my interactive prototype here. Try running through some scenarios above if you’d like!

Final Thoughts

This project was overall a great process for learning all about UX research and UX design. What I gained the most out of this project is creating one of my first interactive prototypes, and I am extremely grateful for the opportunity to learn with my professor, Sookie, who has been an amazing resource throughout the entire process. I think that being able to conduct usability tests and learn about heuristics really played a vital role in helping me further my knowledge on the topic, and I am grateful for the opportunity to delve more into product design, as I plan on going into it as a full-time career.

full-time student, full-time designer @ ucla