Physician Assistant Program
Know your audience
Landing page for the PA Program
Duration: 3 Months
Platform: Web
Team/Role: UX Designer/Developer
Website: Physician Assistant Program
Overview
I worked with the Directors of the UVU Physician Assistant Program for 3 months setting up a new site in preparation for the academic accreditation process. When I joined the project, the program was regrouping from the previous unsuccessful attempt to receive accreditation. Their previously designed website had been a huge part of failing to become accredited.
The Problem
The problem was two-fold:
1. The original site had been designed for the wrong audience.
2. The incredible quantities of data needing not only to be housed on the site, but also easliy located.
Solutions
Focus the new build on our actual audience, the accreditation committee.
Utilize progressive disclosure to minimize information overload and guide the user to the information they need.
Challenges
Wayfinding
The Department Committee required multiple navigation. Their research showed we “needed” these multiple navigation options and I unfortunately, was unable to convince them otherwise. I needed to find a way to show the user where they were within the site & provide guideposts to find their way around.
Signal to Noise Ratio
The shear volume of information would make avoiding a noisy interface difficult. I wanted to provide a clean intuitive interface to present the information in easy-to-read digestible pieces.
Results
This design provided the multiple navigation option the Stakeholders required and at the same time a clean colorful set of guideposts for users. In fact, after the initial review the accreditation committee informed the department, it was the best site they had seen.
Discovery
Observations
My discovery for this project consisted of a heuristic review of the failed site, a review of all the information required by the accreditation committee, and interviews with the department personal. During the process I discovered the focus was on the student visitors to the site as well as the prospective students. While this is important for the University to give students what they need, it is more important to give the accreditation committee what they need. The focus on students as the target audience was hindering the accreditation process.
Analysis
It became clear we needed a clear set of hierarchy to follow based on the accreditation committee’s needs. They I was presented with a list of all the required information. I sorted all of this information into four main sections:
1. About the program
2. Admission Process
3. Program Overview
4. The Student Handbook
For this article I will focus on the specifics of the Admissions Process page.
Ideation
Process
My ideation process always starts with hand sketching. I looked for ways to organize the content within the sections. I shared these sketches with the stakeholders, and we narrowed down the ideas.
At this point in the process, COVID-19 made it necessary for the project to continue remotely. So I moved to working in XD to share ideas and make changes as they gave feedback in our weekly Microsoft Teams meetings.
Eventually, we settled on a uniform sub-head navigation that would allow the committee user to seamlessly move through the steps of the first 3 sections and a single page version of the Student Handbook.
Design
Principles
1. Wayfinding
2. Signal to Noise Ratio
3. Iconic Representation
Features
Sub-Navigation
Each of our 4 sections consisted of multiple subsections. The goal is to have a sub navigation bar which gives the user control of seeing the admission process and at the same time can be utilized as a breadcrumb to guide them to specific information.
Side Navigation
Utilizing progressive disclosure, the side navigation allows the user to locate specific information under one of the subsections. In the screenshot below you an see the side navigation buttons match the color of the section box of the sub navigation bar.
Each of these buttons includes an icon as an additional guidepost. I created each of these icons in Adobe Illustrator to make sure they have a uniform look.
Iconography Guideposts
The technical standards information is presented in the block created by the two navigation bars. The icon is used in this area to guide the user as to their location within the site. All the information in this subsection, Admission Requirements, is laid out with the same shade of green. This is an additional guidepost. (Though not the best for accessibility)
Iterations
Getting to this point in the design process was a challenge. I was working with Department Stakeholders who wanted to design by committee. For every step forward if could often feel like we were taking so many steps back. In fact, during this process, I designed, received approval, and built 3 entire sites.
For this final design, the iterations were a matter of icon design, size and placement. We looked at placing them before as well as after the text on the buttons, as a colored icon on a white button and the final version of the white icon on the colored background.
Conclusion
The end results
In the end this project was extremely challenging. The project missed milestones and required more time than initially planned and I really don’t like missing deadlines. Though the Stakeholders were more concerned it was “right.” I learned how to pivot and see challenges as opportunities. The good news, the project is a success! The department has been granted Provisional Accreditation. Additionally, I received the following feedback from the Stakeholders:
“Our student handbook section is the envy of a lot of programs in the US! We get lots of compliments. Thank You!”-Karen
What I learned through the process
As for myself I learned the importance of listening with the goal of understanding. I started by listening to what they said they wanted and ended up with two versions that no one liked. When I stretched myself to listen for what they weren’t saying and identified their true desires is when we finally created the experience they didn’t know how to put into words.
What I would do differently
The project was a success, but if I were to do this project again, I would’ve spent more time defining the why at the start. I made the mistake of trying to use the brainstorming and sorting from the previous project. I now make sure we do at least one brainstorming activity with the new group, so we are all on the same page at the beginning. Additionally, I would do better at documenting the process.
While the project was a challenge, I am grateful for the growth in my process. I learned so much about what not to do. It made me a better project manager.
Thanks for reading! I’d love to hear your thoughts. Feedback and critiques are always welcome. Connect here or if you are interested in collaborating or just a brainstorming session reach out to me at TressaHopkinson@gmail.com!
All my Best,
- Tressa