Patient Advisors Network Website
PAN's main website had switched platforms, had broken links, and irrelevant content. This caused confusion for new visitors and made it harder for members to access exclusive content.
3 months-2021
Features List
Content Plan
Medium Fidelity Mockup
Social Media and Communications Strategies
​
Project Cause
Timeframe & Deliverables
Roles & Team
​
​
(Team of 3)
My role was UX Designer and Social Media Consultant.
I worked with one of the organization's founders; Alies Maybee, and PAN's communications leader Maxime Lê. UI Design and development were by a separate team.
​
​
Methods used
​
​
User Journey Mapping
Moodboard
Wireframing
collaborative meetings
​
UX Process
Analysis
​
User research and surveys were done ahead of time by another co-worker. All findings and project suggestions were entailed in a content audit done by the communications team. This was super helpful in determining what the team wanted to move where and what I still needed to look into when it came to the user experience process. Here's what I gathered from the communications/content audit:
​
One of the most evident findings that the audit mentioned was reducing the size of the site's main menu. Given the web analytics of the site, we could also see that many of the pages we're being opened at all by users. With this, I had to figure out a way to restructure and reduce the data in different areas. It was hard for us to say goodbye to everything suggested, but with lots of tweaking and teamwork, the goal was reached.
As previously mentioned, it was hard for the general public to understand what PAN is really about and what it is exactly that they do. Even on the about us page, there wasn't really a clear explanation eve for the general public to learn more about the organization. This added a definite goal of changing some of the copy and terms to something that was more understandable among general visitors/users.
On multiple pages especially "home" and within the "partnering" and "members" tabs, lots of information was presented in an overwhelming kind of way. This was something that would clearly turn away users given the site's analytics, but it would also make it hard for users to find what they were looking for. The key here was to reduce and re-arrange content so that it was where it needed to be for it to be easily found.
Several times in the audit, the project leader mentioned needing some new images and visuals to represent pan and the themes for various pages. The home page specifically needed some sprucing up and new imagery. With Adobe images I was able to come up with some reference materials to put into my mockups to make it easier for our graphic design/ development team.
The group site/members' side of the website was previously using a different platform, so when everything was switched over to a new one, some of their key infrastructure and content were lost. There were many improvements to be made here, but our main focus was to mock up the public and main journey of the website. I was able to get as far as creating a journey and site map for the group site. However, I was more focused on finishing up the work for the public site first.
Definition on the Home Page
Content Density
Outdated Images & Visuals
A Clunky & Outdated Member Experience
Communications Audit Findings
Complex Menu
Below are the two journeys my team and I constructed that represented the website's two main types of users.
​
Design
​
After determining our goal and user journey changes, my task was to focus on visual elements, theme, and tone. Per my project lead's request, the tone and visuals would stay roughly the same. Bright colors and abstract images represent the diversity and unity of PAN's brand. The tone of copy and text was to stay informative and direct, yet simple so that any user would be able to understand and learn about what PAN does.
This was the final site map I came up with to fit the needed changes to the website.
-I minimized resource pages to shorten the journey.
-The insights tab was rearranged with a new blog section.
-Any irrelevant/ outdated information and links were removed
​
The spreadsheet below reflects how copy and content were to be rearranged. This helped our development team reuse existing content vs. where to insert new content.
Prototype
​
Last but not least was making the final prototype. Because this was a collaborative effort, I designed low-fidelity screens as a deliverable in place of a working prototype. Our developer team also had a part in how the final design looked and felt, so this gave them a brief reference of what steps to take before launch.
Rather than annotating the mockup, my project lead requested that I make another spreadsheet to work as a features list.
​
The best part of doing this was that I could constantly make adjustments outside the mockup.
​
The next diagram displays our search functions within the site. Users can access resources and more features once logged in as a member.
.png)
Along with the user experience design for PAN, I was also tasked with creating a new social media plan for the organization.
This would act as a reference point for all of their future social posting endeavors in the future. Increasing their social presence was a part of their overall goal to attract new users and community members.
I also came up with a communications strategy to further define how users could be interacting with the organization other than just viewing their website.
​
Review
End-Result
In all honesty, I wasn't super happy with my end result for the PAN website. Luckily there was another team helping out with the project's UI and graphics to turn it into the great website it is today. I learned so much about how I could further develop as a designer and how I can adapt to new tools and teams.
Challenges
I found it challenging to use Excel for developer notes and features lists. This was a tool that I hadn't used for this purpose before and it sharpened my skills.
Although research had already been done for the project via content audit, I wasn't sure how to learn user conventions and preferences other than web analytics. Qualitative research is definitely my go-to from now on, even if it makes the design process a bit longer.
What I learned
The importance of understanding the client or stakeholder's values and main goals is key. Moving forward I will take time to understand the goals for a project's theme and use of color in my mockups & prototypes.
​
