Project Types
UX Design | Team Project
Timeline
4 Weeks
Roles
UX Researcher
UX Designer
Project Manager
Action Design Network
Action Design Network is a national non-profit organization dedicated to promoting the use of insights from behavioral economics and psychology in policy and product design.
The website's goal was to create a sense of networking with people in the behavioral science field by giving users the opportunity to discover, connect and promote local events. All volunteer resources left little time for the website improvement, the site is not laid out in a way that users can easily understand and navigate, nor is it amenable to supporting their desired future state plans. Action Design Network wants improvement on site navigation and discoverability while providing a foundation for future growth.
The Challenge
The original website was built on Squarespace and does not display their mission and resources clearly. Although users are able to find their local meetup event through the site, connecting with the members or organization can be daunting. Accessing and providing other online resources is also completely reliant on the volunteers and community. The challenge is to design a website that provides a seamless web flow and design to help the organization grow and increase the discoverability.
Project Goals
Conduct interviews and testing to uncover issues and back up the assumptions with data
Understand the navigation and discoverability issues
Propose design solutions and validate them
What is the unique value that Action Design Network provides and is missing on the site?
With a better understanding of the Action Design Network’s goals, mission and resources from our client, we began research.
COMPETITIVE ANALYSIS
We looked at 5 direct competitors (People Science, Behavioraleconomics.com, Behavioral Science & Policy Association, BehavioralScientist.org, Behavioral Grooves) and 2 indirect competitors (Meetup, Eventbrite) to understand the competitive landscape and site architecture.
USER INTERVIEW
In order to identify potential design opportunities, we interviewed SME (subject-matter expert) and new users of the website. Experienced users are more likely to encounter issues with the interface due to their frequent use of the app. With interviewing new users, we are able to discover what information they are looking for on the site and help spread the organization.
The important findings that will impact the future design includes:
Due to the outbreak of COVID-19, more than half of the users mentioned migrating into the digital space would be a great way to operate at scale and engage audiences outside of existing city chapters. To learn more about the community aspects from users, we are going to test it out in our next stage of the process with some ideas.
Guiding Our Direction
PERSONA
We set the User Personas around the two major user groups we validated when interviewing users.
Tina is a driven designer who always want to extend her network with members in organization
Billy is a new user who is interested in learning more about behavioral science
PAIN POINTS
We combined all the findings from research and user interviews to support our assumptions and help us find the major and minor pain points.
Homepage revamping
Customized city chapter page
Community building
Sketching for the Best Idea
CONCEPTS
Homepage Revamping
The idea behind the homepage was to provide a centralized place for all of the key aspects of Action Design Network. We wanted the page to feel welcoming and community oriented, while quickly and clearly communicating what the organization did up-front.
Customized City Chapter Page
The idea behind the city chapter pages was to give users a way to interact with their local chapters online in addition to their in-person meetups. Ideally, we wanted to give users a reason to stay on the site and engage rather than sending them straight off the site to Meetup.com.
Community Building
In keeping with the existing organization Slack, we wanted to provide users a space to form a community outside of in-person events. One being a community forum and the other a Slack channel for individual chapters. Both options were given in order to determine what users felt was an avenue they would feel most comfortable using to connect to like minded individuals.
Findings to Solution
SITE MAP
After our first meeting with the client, they took the research findings into consideration and had an internal discussion. When we presented our concept testing findings on the community forum concept, the client mentioned that they are working on seeking another 3rd party platform to implement. So, we decided to focus on restructuring the homepage and city chapter page.
Before we could converge our concepts, we needed to understand our final product’s information architecture. Based on the concept testing results and client’s feedback, we constructed the information architecture and top navigation for the new sitemap with a future state tab where we are going to gather more feedback from users on usability testing.
MID-FI WIREFRAMES
I developed a preliminary style guide and design system for the rest of my team to use, which saved us a lot of time on refining the site to be consistent. We were also able to deliver a clear set of design for the future UI and developer teams easily. We created a clickable mid-fidelity prototype in Figma to form a multi-directional holistic experience.
Were users able to find the mission of the organization and satisfied with the experience of networking using prototype?
To evaluate the usability and visual hierarchy of the revamped design on the Action Design Network website, we relied on usage metrics in conjunction with 9 usability tests. This allowed us to gain deeper understanding through combining both qualitative and quantitative information.
USABILITY TESTING
Our prototype tested exceptionally well during our last round of testing, and our users were thrilled by such an accessible way to find relatable information. Our clients were also thrilled with our final product and we received unanimous praise on our efforts. But we uncovered several areas for further testing and refinement that we passed on to our client for future recommendations.
All users described Action Design Network with varying results of accuracy. Users generally felt the copy that was provided was not effective for clearly displaying what the organization does, so explaining the org was a challenge for some users.
9 out of 9 users were able to successfully navigate to the Boston city page
9 out of 9 participants were able to find the podcast either from the “media” in top navigation, icons in bottom navigation or the button on the homepage
All participants found a way to engage with the community through one of the varying approaches (Slack, forum, volunteer, online event)
9 out of 9 participants were able to find a way of further engaging with the Boston chapter members with varying approaches (Slack, forum, and volunteering)
Although users were able to find different ways to get involved easily, many users navigated to one or the other initially based on what they saw first. With Slack typically being the choice in this case because of its prominence in more locations throughout the site.
Next Step
Our short time frame inevitably left some areas untested. Here are a few of the critical points we discovered during our last round of testing that we passed on to our clients:
Online Meeting
Due to the outbreak of COVID-19, we received a lot of positive feedback on digital presentations and events throughout our testing. With the privacy concern from the meeting content, we recommended further examining the value of shifting in-person meetings into digital.
Community Forum or Slack Channel
We heard lots of feedback on both, with a generally pretty split opinion, but we did conclude that they serve different purposes. With Slack being more for immediate discussion, and the forum being more for topic based, more structured conversation. Due to inconclusive data, We recommended more extensive research and further examining the organization needs.
More images/video & Easy to understand content
We received some feedback on the copy and terminology used throughout the site and prototype. Users expressed their interest in having photos and videos to give them a better context of what Action Design Network is all about.
Donation Button/System
Currently, “Sponsorship” is one of the options under volunteering. Users expressed interest in wanting a Donate button or donate section. After receiving feedback from usability testing, we realized we missed researching and discussing this part. We recommended further examining the needs and value of this system.
Event Cards
In both concept and usability testing, users mentioned that they like being able to see what events are coming up directly on the homepage and city chapter page. We recommended more research on how to implement information and design from Meetup.com since the organization is in the process of deciding on changing the 3rd party event platform.
Overall, all of the changes were positively received by clients and users who were familiar with the original Action Design Network website. The final prototype yielded successful task completions and positive feedback about the revamped site structure. We will be heading off redlines to the client and potentially the UI team in the next cohort from Flatiron School.
What I Learned
The process of researching and revamping the site and strategy to help Action Design Network reach their goal on digital was extremely rewarding. Prior to working with Action Design Network, my projects leaned more towards understanding the user. This project required a healthy consideration of both user and product viability.
Here are a few lessons I took with me:
Push for a deeper understanding of user needs and client’s expectations.
While we understood what Action Design Network wanted after our kickoff meeting, we conducted user interviews and dug into the user needs of the community aspect through the site with more concept and usability testing. Our team was very glad that we took a step further to ensure Action Design Network success in the future.
Keep an open mind to all the changes and design for feasibility.
In the middle of the design process, the client confirmed with us about continuously using the Meetup.com. We had to keep in mind the feasibility of pulling the data from all the chapters and the design of the event information sections. Our design needs to fit into the whole system, including technical and organizational. Our team took some time searching on implementation of Meetup.com. In the end, we were pretty confident in annotating the wireframe for the event cards.