CivicTechHub: content strategy and interaction design for a database site
CivicTechHub’s goal was to become the largest database dedicated to COVID-19 initiatives. Working with the founder and a team of developers, I helped clarify the MVP and designed a website that would allow users to search for projects or discover recommendations.
The Challenge
When I joined CivicTechHub, the MVP was shifting. The developers had made major progress with crawlers that could use natural language processors to categorize and populate the database with projects from all over the world, rather than relying on project owners to post. The team realized this gave them a major competitive advantage over other platforms and they needed to pivot. I was tasked with advocating for the user, redesigning the existing pages, and writing content that reflected the new business and user goals.
My Role
Design Lead
User research
Content Strategy & UX Writing
Wireframes
User Interface
The Team
Founder
CTO
Operations Manager
Frontend Developers (5)
Data Analyst
Graphic Designer
The Constraints
2 weeks to launch
Working remotely across different timezones
Working with an existing style guide
Content problems reveal design problems
CivicTechHub started as a way to host groups and connect volunteers to project owners. The original designs reflected this mission, but our team agreed that the wording needed to be updated. For example, instead of matching volunteers to “groups,” we wanted to help people discover “projects.” As a writer, I saw several problems with the messaging: it was unclear, verbose, and it wasn’t in conversation with the user.
I suspected that the muddy writing reflected something deeper: a lack of clarity about our product. Even though we were on a tight timeline, I knew we needed to agree on fundamental questions about the MVP before I could make any revisions.
Research
“Like a nonprofit Netflix”: making recommendations accessible
When I joined CivicTechHub, the most important question was “who is the user?” The senior engineer’s perspective was that our typical user was a developer who wanted to join hackathon-type projects. Some stakeholders didn’t see the need to define the user, and one stakeholder created a document with 12 possible personas (which is a lot like not defining the user at all).
I conducted three user interviews and polled 50 people in my network to get a rough overview of our potential users. I identified the following user insights:
People want to feel useful in a crisis, but they don’t know how. 63% of participants I polled felt more motivated to help since the COIVD-19 pandemic. Still, several people I interviewed said they don’t have money to spare and don’t know how to volunteer during quarantine.
Out of the 63% helpers, 79% said that they have time or resources to give, but there are “too many options,” and they don’t know where to start. The amount of information is overwhelming.
Community matters. I heard over and over in my interviews: “I want to feel connected to my community and help the people around me.”
Based on my findings, I created three personas: the explorer, the helper, and the leader.
The Explorer
The Explorer primarily wants to gather information. Maybe they have time, skills, or money to donate, but they don’t know how they can help. They need to do some research to find the project that’s right for them before they make a commitment, or they need to be inspired by recommendations that are tailored to them. Using CivicTechHub could convert an Explorer into a Helper.
The Helper
The Helper is motivated to give and has some ideas about how to do it. They need a way to sort through all the options and discover where their resources would have the greatest impact.
The Leader
The Leader already has an idea or an initiative that they want to make discoverable to Explorers and Helpers (volunteers, developers, investors, partners, press, etc.)
Illustrations used with permission from Craftwork Design
I distilled these personas into three user goals:
Browse projects in a way that is engaging, not overwhelming
Find a specific project or specific kind of project
Make their projects more discoverable
“We’re trying to be like Netflix, not Google for COVID.”
One team member’s response to the Explorer persona was, “why wouldn’t they just use Google?” We decided that our strength was in content organization that links users to projects they might not have searched for independently. Comparing ourselves to Netflix was clarifying: how often do you find your next Netflix binge by clicking around versus searching for a specific title?
Netflix heavily prioritizes recommendations (“New Releases”) and browsing by category (“Documentaries”) over search, which is hidden in the top right corner of the navigation
Meetup has a similar emphasis on featuring relevant groups and categories - in fact, there’s no search function on the landing page at all.
There’s one thing these two services have in common: they’re completely inaccessible unless you have an account. Sure, you can scroll through the categories on Meetup’s landing page and even check out group pages, but to join a group, “discover groups,” or even search, you have to sign up.
Meetup’s website directs you to sign up at nearly every turn
Likely, Meetup knows that their users love personalization and user disclosure allows Meetup to make the best recommendations. Netflix relies on machine learning, but that learning isn’t very useful unless it’s attached to a specific account. The first question Netflix asks you: “Who’s Watching?”
CivicTechHub, on the other hand, is operating as a nonprofit. Our mission (for the MVP, at least) is to provide a service that connects people in a time of crisis. We didn’t want to force people to create an account, which meant we needed to make our site easily searchable and provide recommendations based on searches and clicks, not machine learning.
Feature Prioritization
What we can do versus what we should do
The engineers wanted the designs to highlight features that would set us apart from our competitors. Several stakeholders were excited about the advanced search and filter functions, like searching a JSON string.
But my research showed me that only a small percentage of our users (21%) would have a clear idea of what they were looking for. They wanted inspiration first, parameters second.
I returned to my interviews and asked some follow-up questions about their searching and browsing patterns on various sites. After my Netflix research, I was surprised to hear several users say they don’t care about featured content! They claimed it is often irrelevant, and some assumed that it’s sponsored. Users would rather see recommendations tailored to them - or browse by categories like “support local businesses” and “mental health.” I distilled my learnings and created a feature prioritization chart.
Blue features were in the previous designs, green features were proposed/planned features
This helped us to clarify and narrow the scope of the MVP. We agreed that our focus should be on building the features in the top right quadrant first. My job was to design an experience that gave 80% of users what they needed while leaving room for the other features to be incorporated later.
The biggest struggle was reconciling the tension between our goal of providing great recommendations and operating an open platform. How could we feature relevant content without user management? I returned to this user insight: community matters.
“I want to know who I’m helping and where they are. I’m more motivated to help people in my own community.” — User Interview
Our team had initially resisted making the search function location-specific because many of these projects weren't anchored to a particular place. I came up with a few solutions:
Flexible location search. I came up with the idea of making it an optional parameter by making the default location “Anywhere.”
Location-based suggestions. Since we can generally know even an anonymous user’s rough location, I changed “Featured Projects” to “Projects Near You”
Browse by category. Based on user preferences and the constraints of not having user management, I felt that our MVP’s strength would lie in the NLP software’s ability to categorize projects rather than suggest projects. I created a “Browse by Category” and positioned it above “Projects Near You.”
“Browse all groups” is in tiny text below the featured groups
I made a “Browse by Category” section, added spacing, and made the text bigger to improve readability
Writing for the User
We’re only as good as our content
Now that our team was more aligned on the big picture (what problem we were solving and who we were solving it for), I was ready to tackle the content. Instead of simply rewriting the language, I wanted to create a cohesive brand voice that would reflect our business goals and our user goals. Based on conversations with stakeholders, I identified our three core principles and created a style guide (I learned this format from Strategic Writing for UX by Torrey Podmajersk):
This was my guiding document as I crafted the content of the landing page. First I focused on frontlining concepts that would convey CivicTechHub’s principles: Community, Inspiring, and Direct. Then I fine-tuned the message using the vocabulary, verbosity, and grammar standards our team agreed on. Here’s what it looked like:
Concepts
Verbosity
Defining the most important concepts also helps eliminate unnecessary details and implement progressive disclosure. In the “About Us” section, I cut the mission statement in half while prioritizing the concepts and vocabulary that reflected our principles:
Vocabulary, Grammar, Capitalization
I created these directives based on the personas and user goals I identified through my research
Final Designs
Scroll through the landing page:
Reflections
What I Learned
Talking to users is essential. I didn’t think I had time to do user interviews on such a tight timeline, so I started out by polling 50 people in my network. I quickly realized this was not enough, and that I needed specific insights to advocate for the user. My user interviews challenged my assumptions about how people would use the site and infused my designs with greater meaning.
Feedback is fuel. Communication on this project was difficult because we were working remotely in different timezones, but the people who made the time to give feedback were invaluable to the process.
Next Steps
The MVP was built within two weeks! We will use it to do user testing, better understand the problem, and evaluate how well we’ve solved it. We’re currently testing for functionality and localization. Our learnings will determine the next steps, but these are a few planned improvements:
Make it easy to post a project: feature this on the landing page and make a navigation tab for organizations
User management: drive users to sign up for an account and state their preferences
Broaden our scope to other types of social initiatives once COVID-19 is less pressing