Hand Society: Website Redesign and Benefits Reorganization
Restructuring Content and Easing Accessibility for Members
Problem Statement: ASSH users were having trouble completing membership applications and accessing their account resources. This led to discontent and frustrations with the entire association among most user types. What can ASSH do to ensure users can find and complete their tasks?
Reality: Due to previous technical limitations, ASSH had its member content and website split into two separate web portals. This divvied the experience and a lot of users became lost and couldn’t complete their tasks. My role in the project was to be the UX lead and ensure this experience was fixed and the portals became seamless.
Based off of the problem statement and extensive user research, I began my focus on the following:
-
Centralizing member resources and compartmentalizing user tasks
-
Streamlining the membership application process
-
Restructuring search content
These screens are the original home page and member resource page. As you can see they are in need of some UX work.
User Personas
I began collecting research 3 years ago from a variety of sources: Hotjar user recordings, usability tests, focus groups, surveys, and Google analytics. Using the findings I began creating a couple of personas.
These personas tackle ASSH’s largest groupings: established surgeon members and young residents/fellows. Each persona has specific goals when entering ASSH, either to complete a tasks relevant to their career or to continue some aspect of their education.
User Journey Maps and User Flows
I created two main user journeys; one with the goal of accessing a main member resource (CMEs) and one for the initial membership application. Then I created two flows to fill in the gaps in the IA for each function.
High Fidelity Concept Mockups
Normally I would have built low fidelity wireframes at this point but instead I was immediately tasked to create high fidelity concepts that were to establish a new “feel” for the website. These were to be presented in front of executive team for approval.
The executive team decided that this was not the right direction for the product and asked that we revise certain elements.
User Testing
We opted to show these designs to a team of surgeon users and see what changes we could infer. We found the following (highlighted in orange):
-
Issue 1: Change hero to include more content and user driven content
-
Issue 2: Increase the size of the login box on the homepage to entice users to login and begin their “personalized” journey of accessing member resources
-
Issue 3: Increase quick link sizes
-
Issue 4: Remove the testimonial section as it didn’t provide much content and took up too much space, leading to scroll fatigue
Reassessing Goals and Mobile First
With all of the feedback I received from both the executive team and surgeon users; I convinced leadership to slow things down and start a bit smaller I created some low fidelity wireframes of the two initial user flows for mobile, in order to focus on the most important tasks.
The above wireframe is for applying for membership, it was one of the most difficult tasks on ASSH's website.
The above wireframe is for CME claim, according to our research, it was the most important task for ASSH users.
High Fidelity Mockups
After receiving approval from the stakeholders I developed high fidelity mockups of the two main flows. I started with a mobile first approach and built a couple of desktop screens to give both our developers and executive team a "real feel" for what the site would be. The site used the style guide I developed as well.
Key Takeaways
This 6 month long project was one that really opened up my eyes to a few major things.
The importance of communication and persuasion is essential for designers. I ended up losing a ton of time in the design process due to management not being fully on board at first. Just try and remember to be patient
Know your audience and environment. We had the data that stated that most users were attempting to join from a desktop and were still having trouble doing so, this was instrumental in developing a shorter forms and restructuring flows