Work : Online Communities
< BACK TO LIGHT-MOTIF.COM

Online Communities

User Research, Strategy, Design, + Design Direction

Key challenge: creating unique value to keep like-minded communities engaged and communicating with ease in closed or members-only social network platforms.

Slogan for The Restart Project, a nonprofit supporting community repair of consumer goods

Summary

I've worked with two nonprofit organizations and one startup who wanted their own custom online community social networks. The user experience challenge for these digital experiences is considerable, as there is a circular relationship between engagement and value: the more value you can provide, the more users engage; but users have to engage quite a bit for there to be a minimum level of value to bother using the platforms at all. Two of these projects were developed prior to larger social networks becoming as ubiquitous as they are today.

In the case of NetSquared, a division of TechSoup Global, the team envisioned a network to help connect tech organizers and innovators (often grassroots or self-funded) around the globe, with a focus on supporting digital projects, local happenings, and challenges (contests to win funding). I worked with them over two years to first rapid prototype, then complete the full interaction design, and finally, direct the visual design of the final platform to be built on Drupal. I also supported them with a number of other efforts, from creating animated tutorials to designing donor impact dashboards.

Red Rover was an early innovator in the social networking space who provided a custom closed platform for universities, with a mission of connecting like-minded college students and making the college years on campus—particularly the
first ones—less lonely.

The Restart Project is a small nonprofit organization based in the UK who brings communities together to repair consumer items—particularly electronics—that might otherwise end up in landfill. Repair happens through live events, but they wanted a members-only platform (built on Discourse) for organizers and expert "fixers" to communicate and upload repair data, which provided a number of benefits, including helping the organization to continue to secure funding.

Click the image or arrows below to browse through work samples.

NetSquared - overview

NetSquared, a division of the world's largest technical nonprofit organization, TechSoup global, hired me to work closely with their Product Manager and Program Manager on a number of initiatives and over several years. Our largest project together was a custom community platform highlighting projects, as shown here. I hired and directed a Visual Designer to finish final mocks such as the one shown here.

NetSquared - process

PROCESS: I created a rapid wireframe prototype based on the Product Manager's requirements, and we pitched this to the senior stakeholders to receive approval to design and build the larger platform. My Home page wireframe (unauthenticated) is shown here.

NetSquared - authenticated Home

Showing annotated wireframe of Home after user logs in.

NetSquared - Local

An important emphasis at NetSquared was the local experience of meeting up with innovators nearby.

NetSquared - demo/tutorial

The team also leveraged my instructional design background to storyboard a demo or tutorial of the platform.

NetSquared - Challenge video

A key offering to the community was their Challenge program, where entrants could win funding for their projects. I directed and produced an animated video explaining how to host a Challenge, hiring talent such as the animation team and voiceover artist.

NetSquared - impact dashboard

Another project I directed was an impact dashboard for donor partners such as SAP. The UI allows users to get details on their impact per region. Team was Product Manager, Visual Designer I hired, and me.

Red Rover - before redesign

Startup Red Rover's private networking system for universities needed some polishing in the UI, but budget was tight. Showing their People page before my redesign.

Red Rover - after redesign

One of the key improvements in my design was to eliminate the confusing percentages (meant to indicate percentage "alike") and instead simply surface the number of interests (tags) in common for each person. Another improvement was the right sidebar for browsing common campus interests.

Red Rover - redesign of unauthenticated Home

Red Rover - redesign of profile page

Red Rover - application flow

The Restart Project - before redesign

The Home page/Dashboard shown here is cluttered and the global nav lacks consistency and intuitiveness. Additionally, I knew from my experience with community platforms that usefulness is extremely important to get users to engage, and I wasn't sure how compelling the content was on this page.

The Restart Project - scope + team

SCOPE AND TEAM: Fortunately, the team was very willing to let me scope an effective project plan. Working primarily alone but coordinating with the Community Manager based in Belgium, I completed stakeholder interviews, conducted user research to uncover what was most useful in the platform, reviewed their Google analytics, created a findings report, and completed two sets of designs (wireframes) that their agency used for their high fidelity comps and build. An excerpt from user research is shown here.

The Restart Project - revised design

Key design improvements (This version shows the UI for a host who hasn't set up any events): 
• More intuitive global nav, ordered by most popular sections, with meaningful alerts
• Mobile-first design
• Simple and optional news/ special message section for anything that needs immediate member attention
• New feature for group chat (using a modified Talk module), easy access to Group page(s)
• Bold CTA for adding data, with easy contextual event/ group selection
• More useful Getting Started section that is a sidebar, not a central and distracting checklist 

The Restart Project - adding item at event

The Restart Project - adding unpowered item data

For my second engagement with Restart, I updated the designs to accommodate an additional feature of adding non-electrical ("unpowered") items to the Restart repair data, and making impact stats clearer with this new addition, as they couldn't previously calculate emissions for unpowered items. Adding unpowered items, such as clothes, jewelry, tools and more, was a commonly requested feature.

The Restart Project - Fixometer

A key task supported by the platform was adding repair data to the "Fixometer" - a searchable repair database with user-entered tips for fixing items, and a overall emissions saved calculator.