Forming an Open Data Platform to Power Global Social Impact

ImpactSpace is a global open database of the impact ecosystem that tracks investments in solutions to environmental and social challenges. The old interface while offering access to the vast resources for the impact investing market was overly complex, had diluted focus and lacked intuitive search mechanism. The challenge was to create a modern responsive solution offering all available impact information in a more structured and digestible way, especially where it involves measurements on social returns, along with a simplified and empowered search mechanism providing a time-saving benefit for both social entrepreneurs and investors. 

One of the essential goals for the website redesign was to improve visibility and positioning for social entrepreneurs and companies, connect them with impact investors and supporting organizations, as well as provide tailored informational resources depending on the needs of the particular group or stage they are at – be it to start, scale, or easily evaluate the impact of social investing.

I was responsible for leading both UX and UI efforts on this project along with delivering most of the HTML/CSS/JS screens to the development team in India who were responsible for the back-end programming tasks. The existing – at the time – site was highly technical and confusing, with a plentitude of resources in different formats added at different times that were time-consuming to locate and even harder to navigate. My initial instinct was to focus on finding a way to simplify the site structure and the navigation logic. To reduce the number of steps (and screens) for users to get to the information they would be looking for. To distill it down to an intuitive search-based interface that would make sense to busy people.  To make the content easier to digest and share across all media platforms.

Taxonomy-Driven UX

Considering the copious amounts of data already present in the database, we decided to make sure that its structure is sound enough to withstand the challenge of time. This called for a single managed taxonomy that would guarantee that the site could scale to large amounts of content and would ensure a consistent user experience throughout the site.

Introducing Card-Based Interface

After talking to the stakeholders and the team, we decided to create and test a new card format for each type of social investor or impact service, that would be easy to locate and even easier to embed into other sites or share on social media. Such a card format would become a new structure block for the new site.

Once we agreed on the elements and overall layout of the card, I started iterating its possible layouts. It was critical to figure out the types of information to include about each entity without overloading the small space with non-essential details but not disregarding its findability and ease of classification.

Contextual Onboarding

No one likes to waste time filling in long forms just to get to see what’s the site is about. We decided to give a try to a very contextual way for bringing users in – leading with meaningful content. So that the users would know what to expect once they are ready to add their impact entry to the database. Or edit it, if it’s already there. The challenge was to make the entire process as natural, quick and painless as possible.

Wireframing

Once we had the taxonomy down, stakeholders’ sign-off on using card-based presentation style for the impact entities and agreed to test the contextual onboarding, it was time to focus on the prototyping.

The old site was not a responsive one, and the need to replace it with a mobile-friendly solution was a very pressing one. The initial user testing confirmed that while they got used to the layout of the existing screens on the old site, their main trouble was in finding new content, as well as their inability to properly access the information on mobile devices. I suggested going with a Bootstrap framework as one of the most popular in the world responsive HTML/CSS/JS frameworks for a foundation of the new site’s front-end design.

With these considerations in mind, the wireframing has begun. To make the long story short, we tested many layouts of the homepage and the ones with the prominent search bars/search areas came out as winners every time. I also introduced the card-based entity presentation on the homepage as well, along with different treatments of the resources areas.

Another challenge was whether to keep the “card” itself on the company profile screen (to illustrate what an embed would look like). In the end, it came out as “confusing” to the users, so we moved the card directly to the modal window along with an actual embed code.