ISSIP Website Redesign
Optimizing the Digital Experience for a Professional Organization
University of California - Santa Cruz
MS Human-Computer Interaction Capstone Project
Team: Dylan Hardman & Derusha Baskaran
Role: UI/UX Designer and Researcher
Take a Look
Watch this sizzle reel to get a little preview at the final product and how each aspect of our redesigned website functions.
Some Context
The International Society of Service Innovation Professionals or ISSIP, is a non-profit professional organization dedicated to connecting people across industry and academia to drive service innovation through collaboration.
Problem Statement
How can my team redesign the ISSIP website in order to drive community engagement for its current members and make the organization more appealing to new members?
Research Participants
ISSIP has a wide range of members across several fields and industries. In conducting our research on the member population and its potential new members we narrowed down our research groups to these four to approximate the population in the limited time that we had.
Experienced Professionals
(ISSIP affiliated)
This participant group consisted of senior level professionals that were interviewed in order to understand what they value in professional organizations like ISSIP and what they believe brings new members in.
New/Recent ISSIP Members
(ISSIP affiliated)
This participant group consisted of new and recent members to ISSIP that were interviewed in order to understand their fresh perspective. They were also vital in understanding the reasons people are drawn to organizations like ISSIP.
Students
(non-ISSIP affiliated)
This participant group consisted of students who were not affiliated with ISSIP. They were interviewed in order to understand what value organizations like ISSIP could bring to a student population who are not in their careers yet.
ISSIP Ambassadors
(not limited to ISSIP members)
This participant group is unique as it is not limited to only ISSIP members. ISSIP Ambassadors are individuals who maintain communication and collaboration between ISSIP and other organizations. They were interviewed in order to understand how ISSIP compares to other organizations.
Formative Research Findings
After analyzing our data from our first round of research we were able to deduce the following themes that we uncovered about the ISSIP member population as well as some design recommendations.
1. Community Engagement
Our participants are willing and eager to share their knowledge and learn from others
Recommendation:
Create a digital space on platform to enable the community to engage with one another
2. Resource Accessibility
Our participants want to easily find, share, and contribute to resources on the platform with internal and external communities
Recommendation:
Including easy access to resources like a digital library, video playlists, and announcements of upcoming events
3. Digital Platform Experience
Our participants appreciate an efficient digital journey with less distracting visuals and unreliable access to important information
Recommendation:
Create an overall user friendly digital experience that allows for less friction and distractions while on the website
Design Direction
Based on our formative research my team and I decided to focus our redesigns on these 3 particular areas. These were chosen based on the themes we felt were most important to the organization as well as the interests of our company sponsors.
Homepage
The homepage is the landing space for the organization therefore it is important for both showing off ISSIP as well as making it easy for new people to explore. The current homepage design is visually out of date and cluttered with text and images that don’t have a clear sense of hierarchy.
Here are some quotes from our research participants:
“its visually cluttered”
“the navigation menu is too confusing”
“why does the twitter feed take up so much space?”
Events Page
The events page was chosen as the starting point for our redesign due to the amount of interactivity that would take place on the page. It was important to us to get the opinions of our participants on how to display events while simultaneously pitching a visually style that could translate to the rest of the site.
Here are some quotes from our research participants:
“Not really sure where to look when looking for new events”
“The list doesn’t feel current”
“Wished there were resources from the events”
Profile Page
The profile page is a unique page that most of ISSIP’s members don’t even know exists. It is underutilized and we felt it would be good to implement to drive community engagement as a place where members could show themselves off and see the achievements of others.
Here is a quote from one of our research participants:
“I didn’t know I had an ISSIP account…we have a profile page?”
Design Iterations and Evaluations
My team and I conducted three rounds of design evaluations where we did usability tests with our participants to validate the direction of our designs. At the end of each session the participant gave us a rating (out of 10) of how they felt the design was in comparison to the current website.
Evaluation Round 1
Above is one of the 8 sketches we tested with our 4 participants for this round. We used cognitive walkthroughs to gauge which directions to narrow down to. We found that users liked having event information in both a traditional list & calendar form
Avg. rating: 7/10
Evaluation Round 2
Above is one of our refined design ideas from lo-fi sketches to conduct cognitive walkthroughs with 4 participants on these mid-fidelity wireframes. From this round we found that while users liked having event information in both a traditional list & calendar form, many wished to see a larger list view
Avg. rating: 8/10
Evaluation Round 3
For this round we addressed insights collected from mid-fi designs to conduct a cognitive walkthrough with 5 participants on a high fidelity design shown above. Our participants appreciated the color codes, ability to collapse calendar & enlarge list view, and realistic details & images which validated the direction we took our design in.
Avg. rating: 9.5/10
Taking our work from idea
To final product
ISSIP Home Page
The landing page for all things ISSIP. Made for people to see what the organization is all about.
A refreshed navigation menu to simplify the experience of navigating through the site.
New nav bar shown on the top, old one on the bottom.
News and events present on the homepage so members and new visitors can immediately see what is currently happening in ISSIP.
Membership spotlight created for ISSIP members to be recognized in a more public way to celebrate their work.
Member Profile Page
A way for members to add some individualization to their web experience.
Awards & Recognitions
Members can showcase their ISSIP awards/recognitions and choose which ones they’d like to enable others to see on their profile page. It was made to built upon iSSIP’s existing digital badge system for recognizing their members.
My Upcoming Events
Users can see which upcoming ISSIP events they have signed up for.
Published Works
Users can showcase their published work if they have any and make it viewable for others to see.
This was a highly appreciated feature from our participants as many of them have are experienced writers and have published works in multiple conferences and loved the idea of also having a space for that on the ISSIP site.
Events Page
A revamped way to explore the different types of events ISSIP has to offer.
Flexible View Switcher
Collapse the calendar view when you don’t want to see it and it’s there whenever you do.
Conclusion
Constraints
In the 5 months I worked on this project I ran into many roadblocks mainly with participant recruitment due to time zone differences and delayed responses. There was also many logistical constraints that the organization placed on us that limited the design directions we could pursue.
Feedback from ISSIP (our client for this project)
“Demonstrated website improvement ideas in a clear and compelling way, and provided user feedback justification for their decisions. While truly implementing and maintaining all the good ideas would require more budget than is available at the moment, nevertheless there may be portions that can be used directly and soon, and second by having access to the working prototype, and a recording of the students demonstrating it, and the user feedback justification - this becomes a good mine for when more budget is available down the road.”
“Great communication in conveying project updates and goals each week. Ran each meeting well and left us knowing exactly what was coming next in terms of progress.”