Star Behavioral Health Providers
Star Behavioral Health Providers (SBHP) is a resource for veterans, service members and their families to locate behavioral health professionals with specialized training in understanding and treating military service members and their families. It also allows for practicing professionals to receive specialized training required by the service, through application and passing on qualification.
Goals of the Project
I was part of a team of 6 UX Design students - we were tasked with redesigning the Provider Section of SBHP's website while keeping the following goals in mind:​
Relay SBHP's Mission
Reduce Number of Clicks
Improve Site Flow
Improve Information Architecture
Contribution
-
Website analysis and framing of content audit
-
Ideation sketching
-
Leading sponsorship meeting and desk critique sessions
-
Creating initial and final wireframe prototypes
Research​
When it came to research, our team engaged in different methods for different purposes to obtain insights to best lead our design process. The current website is designed in such a way that it has two different parts - one that the clients can use, and the other is the provider. Our project was a continuation of the modifications done by another team on the clients' side, so we had to follow the same style guide though the content would be completely different.
The first thing we did was perform a heuristic analysis of the existing website against Nielsen's Usability Heuristics in order to determine the major violations and identify opportunities of improvement. We also conducted a content audit alongside the analysis. This gave us a lot of insight into the concerns that arose during navigation, as well as of the content on the website itself.
​
​
​
​
Repetitive Links
Information Overload
Lack of Information Architecture
There were multiple links with similar names that led to different pages. There were also differently named links that led to the same page. This caused a lot of confusion and omission of information.
The website is very text-heavy, so it gets taxing for the user to have to read through.
The given information is just present up front with no real organization or arrangement, As a result, important information is not highlighted and gets lost, and some portions do not have clear context or explanation.
How do we create a seamless and comprehensive experience for the user?
We conducted a usability test of the current website to see how users navigated it when given tasks to accomplish. This was based on our conversations with our sponsors, who mentioned that most people who visited the site were those that were not too well-versed with technology, and not familiar with the goals and process of the purpose of the website. Taking this into account, we conducted testing with random students to see if they were able to process the information provided on the site and make sense of it solely on what was presented. We created the protocol with tasks centered around things that a provider would be required to do. The insights drawn from this contributed to our consideration for beginning ideation as well.
Ideation
As a team, we engaged in ideating for new screens and modifying old ones, while also incorporating the design structure of the project that we had to carry off of.
%20copy.jpg)
.jpg)
These are a few examples of the many different ideas we threw out.
1. This is the main landing page that every user sees, and we had to make it so that the purpose of the website and company as well as the distinctions between the client and provider side were clear.
​
2. This is the page that would spell out the process of going through applying and registering for training, and we had to find a way to condense all the information in a way that was comprehensive but still expandable, and linked to other portions of the site seamlessly.
1
2
Blue post-it notes represented design features that seemed to offer a more user-friendly experience.
Yellow post-it notes were used to mark sketches that seemed unclear or didn’t match the purpose of redesigning the website to benefit the users.
I took the lead when it came to deciding how to analyze our sketches - as a team, we took systematic notes on each of the collective sketches that we made according to color:
​
Prototyping
Moving forward, we used the takeaways from the analysis of our ideation to narrow down ​to certain screen designs that we wanted to focus on. We directly created mid/hi-fidelity screen designs since we had a model to follow. These were then iterated upon based on feedback we got from our usability testing with general users and our sponsor as well.
HOME PAGE
Original Site
Side Bar
Design 1
Design 2
The above design comparison is an example of how we went about changing the design of the website from what it was originally. We had several designs for each page in order to best decide which format to pursue. The screenshot of the original site is the second page that a user reaches after selecting the state that they are operating from. We decided to combine these two pages into one to adhere to the goal of reducing the number of clicks.
PROCESS PAGE
I was tasked along with another one of my teammates to create screens for the Process portion of the website. We had to condense and categorize information from the entire website to display it appropriately so that it is comprehensive to users. Bear in mind, these screens are created simply for the purpose of experimenting with our ideas and conducting testing before making final versions. Hence, the different shades of red are us playing around with colors to distinguish it from the client side of the website. This was not something to be set in stone, merely a way to suggest changes to our sponsors and give them free rein on the style guide when it came to colors they felt best represented their organization in the finalization process.
​
Site Map of the Redesign
Visual Guidelines and Final Designs
Typography
Aa
Raleway
Regular
Color Palette
#741A47
#D4D4D4
#928955
#F6F6F6
#000000
#FFFFFF
Landing Page
We had to find a way to make the landing page such that it provided a little background on the company as opposed to having no context for new users, as well as clearly make the distinction between the client and provider sides of the website.
We also included a way to make the search for providers simpler by adding a search bar to narrow the user's location down and directly take them to information corresponding to the state/closest state that they are in.
​
Overview of Services/Home Page
We decided to condense the large amounts of text and information across the original website into one page that allowed an overview of the different services that the organization provides under concise categories, as well as direct access links to the relevant parts of the website according to the user's intentions.
Overview of Services/Home Page
Information from multiple pages was rephrased and condensed to highlight the most important parts of the process and instruction, and arranged in a step-by-step manner to better the understanding of providers who might be interested in utilizing the service.
​
Icons were also used to add a more visual feel to the page and balance out the text.
We arranged the information about each tier under header tabs for easier access, and within these had further details under main headings so that the user has a general idea of what to expect but can still view extensive clarification by clicking the drop-down arrow,
​
We also included a link at the bottom for users to directly look for training locations for the particular tier they select. This came about as a result of our testing, where users were confused about the dates corresponding to the level of training due to it being on one page.
Training Location
We incorporated search filters for users to be able to easily view the nearest training locations according to the tiers - according to ZIP code, mile radius and tier.
​
This came about as a result of an insight we had through our interviews that through the current website, providers could not be informed of a location in the nearest state if there was none in the state they operated in. This way, we were able to focus our search function to operate by distance rather than state.
Tier Training Information
Reflection
Getting to work with my team was a wonderful opportunity, and with every new challenge comes undeniable growth. I was able to learn so much through collaborating with everyone on the team, as well as external sponsors and users, and it was a lesson in the importance of perspective, and having consideration for those valuable experiences and perspectives. It was a rewarding experience for our sponsor to be happy with the results, and I cannot wait to see it implemented soon!