Wesleyan University
Social Psychology Network: redesigning a platform connecting 2,000+ experts globally
A platform dedicated to connecting social psychology experts with millions of people worldwide, providing access to resources on peace, social justice, psychology, and sustainable living.
Summary
Mission
Social Psychology Network (SPN) is a platform that connects social psychology experts and millions of users worldwide, fostering collaboration and understanding on topics such as peace, social justice, and sustainable living. While the platform offers a vast array of resources and profiles, it needed a modern and user-friendly redesign to enhance its content management systems, search functionality, and overall user interface, ensuring its valuable content remains accessible and impactful.
Key Responsibilities
-
Organizing weekly meetings for design approvals
-
Creating paper and digital wireframes
-
Conducting a heuristic evaluation of the initial design to identify problems and pain points, and prioritizing them according to their criticality
-
Developing prototypes to visualize proposed changes
-
Ensuring designs were technically feasible within the project timeline
-
Following requirements and using an iterative design process for multiple sections
-
Designing both the public and editing interfaces for profile holders and site members
-
Documenting the process and adhering to the site's core values
-
Coding and developing changes while closely monitoring their impact on functionality
-
Collaborating with interns to test designs for various use cases
Products
Web
Team
Executive Director
Network’s Director of Technology
Designer + Web Developer (me)
Three student interns
Tools Used
Figma
Trello
Adobe Illustrator
HTML, CSS, JS, PHP
Services
User Interface Design
User Experience Design
User Research & User Flows
Wireframing
Prototyping
Web design
Web development
The Original vs Redesigned
Social Psychology Network
Social Psychology Network (SPN) is a global nonprofit platform dedicated to promoting peace, social justice, psychology, and sustainable living. Since its founding at Wesleyan University in 1996, SPN has connected over 1,500 members from more than 100 countries, featuring a database of 20,000+ resources and 2,000+ profiles of social scientists across 50 countries. The platform includes interactive maps showcasing expert profiles and graduate programs and operates a Psychology News Center, reaching over 600,000 users through social media and RSS feeds. With over 380 million page views, SPN continues to bridge the gap between experts and the global community, driving meaningful impact and collaboration.
My Role +
The Design Process
I was assigned to:
My design approach:
01
Redesign the Network's editing and public site to improve overall user experience
02
Develop and integrate the redesigned features with full functionality
RESEARCH
User Research
DEFINE
Business Goals
Problem Definition
Challenges
Deadlines
DESIGN
User Flow
Wireframes
Mockups
Prototyping
TEST & HANDOFF
Expert Feedback
Final Touches
And That’s Just a Sneak Peek!
This case study is currently being updated to showcase all the exciting work I’m doing to improve the user experience for Social Psychology Network (SPN).
The full case study will be up and running soon.
I worked closely with the Founder to understand project goals and organized weekly meetings with the developer, ensuring clarity during every step.
Research Steps
To review user feedback and support communications for an in-depth understanding of challenges encountered.
02 -
Observe and analyze user behavior during gameplay sessions for direct insights into user experiences.
03 -
To gather expert insights and documented issues for a broader perspective on user challenges.
To synthesize and analyze collected data for identifying recurring themes and actionable insights.
Key Insights
01 -
04 -
Users encountered difficulties in navigating the interface due to the overwhelming amount of elements. The presence of multiple icons and controls resulted in confusion regarding the appropriate click locations to access the desired information.
Result: The noisy interface with confusing click targets leads to user frustration and difficulty in accessing the necessary information, indicating a need for interface simplification and clearer visual hierarchy to enhance usability and ease of navigation.
Many users had preconceived expectations of greater interactivity and engagement when they encountered the terms "gaming" or "simulation." However, the website primarily exhibited a module-based e-learning approach, lacking a personalized touch. As the activity involved teamwork, users struggled to establish a sense of connection and engagement during gameplay.
Result: Users anticipate immersive and interactive experiences in gaming and simulation contexts. A design that incorporates visually engaging elements promotes longer user attention and fosters a stronger sense of connection during gameplay.
Despite the intention for the game to be played independently, users encountered challenges in navigation and understanding the next steps. Questions piled up regarding when to submit or save their work, as well as how to effectively interact with fellow team members. The lack of intuitive controls resulted in users seeking guidance through moderated sessions.
Result: Users face difficulties in navigating and comprehending the game flow and interaction elements without external help or clearly labeled controls. Providing intuitive cues and comprehensive instructions can promote a more Do-It-Yourself (DIY) approach.
User Persona
The research conducted helped identify common themes and patterns, leading to the creation of the following user persona.
Main goals to achieve
Goal 01 - Users can find the information they require with ease.
Goal 02 - Interactive elements to increase user engagement.
Goal 03 - Users can confidently navigate to completion without client moderation.
Goal 04 - Reduce support emails received by the client overall.
MOTOR
-
Placing primary buttons in the left panel to prevent moving around the screen.
-
Having multiple ways to navigate through course items.
MEMORY
-
Providing easy access for users to identify their progress in the course.
-
Labeling all buttons to reduce memorization of functionality and save time.
INTELLECTUAL
-
Having major buttons organized in one area so the user does not have to think much on where to look.
-
Efficiently colored CTA buttons for clear emphasis.
VISUAL
-
Reduce visual clutter by streamlining major buttons to the left panel.
-
Use spaced-out cards to hold individual questions.
-
Ensuring main content occupies the majority of screen space.
Design Concepts - The VIMM Model
Finally, let's get designing
paper & digital wireframes → mockups → hi-fidelity prototypes
Wireframes
Based on the user research and insights gathered, I jotted down multiple paper wireframes depicting various screens. Through iterative collaboration with both the founder and developer, we carefully assessed the elements within each design, determining which aspects were appealing and should be retained, while also identifying components that needed to be removed. I translated the selected design elements into a cohesive digital wireframe, integrating the chosen features.
.jpeg)
.jpeg)
Mockups
After we were happy with the wireframes, it was time to translate them into UI designs that would be handed over to the developer for implementation. I used the Figma design tool to bring the ideations to life while sticking to the brand's established color palette to maintain visual consistency and created mockups that provided a realistic representation of the final screens, while also following UI best practices.
Hi-fi Prototypes
Let's walk through the final design
Getting started.
Easy and visually engaging Login
-
Redesigned the login screen to enhance visual engagement and establish an emotional connection.
-
Integrated storytelling elements and illustrations to create an interactive experience.
-
Used white space strategically to guide users toward key actions, improving usability and focus.
Gaming instructions.
Clear guidance before the game begins
-
Addressed user challenges with overlooked gaming instructions and unclear icons.
-
Added a left panel with icons and text for better clarity and accessibility.
-
Used dynamic movement to highlight the importance of instructions.
-
Incorporated a blurred background to focus user attention on instructions.
Viewing details.
Left panel menu navigation
-
Combined essential elements into a single expandable left panel for easier navigation.
-
Reduced search time and streamlined the user journey.
-
Allowed flexible access to detailed information without disrupting gameplay.
-
Enabled a wider view for improved focus and engagement.
Bringing to a close.
Personalized gaming experience
-
Layout feature for a personalized interface was added in the bottom section of the left panel.
-
Enabled seamless switching between multiple layout options to suit user preferences.
-
Introduced a quick logout option for effortless session termination without accessing the user profile screen.