Overview
I actively participated in researching, testing, and designing social share links and jump links to enhance the user experience of a banking website. Additionally, I contributed to service design activities for the customer-facing website. This involved analyzing user needs, mapping customer journeys, and identifying areas for improvement. By incorporating service design principles, I helped create a more seamless and user-friendly experience for customers interacting with the website.
Problem Statement
The current social sharing functionality and navigation experience on the bank’s website for long articles pose significant challenges for users. The limited social sharing feature hinders users from easily sharing articles, impacting the bank’s ability to expand its social media presence and engage with customers effectively. Additionally, the absence of a convenient solution for navigating back to the top of lengthy articles frustrates users and disrupts their reading experience. These issues demand immediate attention and improvement to ensure a seamless and user-friendly experience for website visitors, ultimately enhancing the bank’s online presence and customer engagement.
Mobile view without social share UI
Original view without social share options

Without triggering
Original view without a back to top button

Goal of Redesign
The objective was to enhance the social sharing functionality for lengthy articles on the bank’s website and implement a solution for easy navigation back to the top. The existing social sharing feature had limitations, impeding users from easily sharing articles and impacting the bank’s social media presence. Furthermore, users encountered difficulties when attempting to quickly return to the top of lengthy articles.
Role
Project: Social share and jump to top links
Role: UX Designer
Timeline: 1 month
Platform: Figma, and Adobe Experience Manager
Methods
Tools
Understanding the Problem
Users need enhanced navigation to return to the top of articles and improved sharing capabilities on the website. We will know this to be true when validated through the observation of user testing results on the implementation of new designs.
User Research & Testing for Social Share Links
Based on my research, I proposed two different social share UI designs that would allow users to easily share long articles on their social networks. The first design showcased many social media icons, and the second design featured a universal icon that opened a modal view.
The inline version featured many social media icons, including Facebook, Twitter, LinkedIn, and more. Each icon was placed at the top of the article and provided users with the ability to share the article on their preferred social network. When a user clicked on an icon, a pop-up window would appear, pre-populated with a suggested post and the article’s URL. Users could edit the post as desired before sharing it on their social network.
Modal Version

Open View

The second design featured a universal modal icon version, which was placed at the top of the article. When a user clicked on the icon, a modal view would appear, showing the same pre-populated post and the article’s URL. The user could then select their preferred social network from a drop-down menu and share the post.
Social Share Conclusion
Through testing, we discovered that users preferred the visual appeal and functionality of the modal design. Key insights gathered from the testing indicated that users appreciated the simplicity and cleanliness of having just one icon, as it was easily understood and utilized. However, concerns were raised about the additional step required in the process with the modal option. In contrast, the inline design offered a faster user experience but appeared cluttered and less polished. Negative feedback regarding the inline design centered around users’ confusion due to the absence of text descriptions for the icons. Ultimately, we chose the modal version because once users decided to open it, the expanded view provided better accessibility, showcasing both the icon and accompanying text for improved comprehension.
User Research & Testing for Back-to-Top UI
I conducted extensive research on optimal UX practices and effective implementation techniques for triggering a back-to-top functionality. This research served as a guide for my design process, leading to the creation of a well-crafted and user-friendly back-to-top button.
In the desktop view mentioned earlier, the “back to top” button is activated when the user attempts to scroll back up on pages longer than four screens. This implementation aligns with the recommended best practice from the Nielsen Norman Group, as discovered during my research.
To improve accessibility, the “back to top” button is designed as a hover-expandable element, revealing an arrow and the text “Top” when activated. This implementation follows the recommendation outlined in the article “Back to Top Button Design Guidelines” by the Nielsen Norman Group, which I referenced during my research.
Activated Mobile View
Up arrow is activated when user attempts to scroll up

Pressed Back to Top

To improve accessibility, the “back to top” button is designed as a hover-expandable element, revealing an arrow and the text “Top” when activated. This implementation follows the recommendation outlined in the article “Back to Top Button Design Guidelines” by the Nielsen Norman Group, which I referenced during my research.
Back to Top UI Conclusion
In conclusion, thorough research and user testing resulted in an effective implementation of the “back to top” UI for the website. Users easily grasped the UI’s functionality, appreciating its simplicity and effectiveness. This emphasizes the importance of user-centered design and iterative testing in creating seamless and intuitive navigation experiences in service design.