APPIRIO - TOPCODER

My Role

I was brought into Appirio as a Sr. UX Designer on the R&D team that was being put together to completely rethink how the whole company was working. Appirio had recently purchase Topcoder and were looking to combine their enterprise consulting services with the Crowdsource community of Topcoder. I worked with the CTO, product managers and engineering team to create the product roadmap for 2015 and 2016.

Scenario

Topcoder is a global community of developers and designers that compete for pieces of work that are then assembled to create the final product. On the client side there was a need for an application that would allow clients to post jobs to the community, manage projects, communicate and handle all administrative business tasks as well. This was my focus.

Design Sprints

To truly wrap our heads around a solution we had several questions to answer.

1. How do several related systems come together into one app? At that time the Topcoder platform had several disparate apps that made up the Topcoder system.

2. What type of tools are needed to create a complete project management platform that works off a crowdsourcing model?

We conducted a week long design sprint where we identified the key problems, proposed possible solutions, voted on directions and prototyped possible solutions.

We realized that a huge factor for our clients success would be their ability to enter the specs of a project so that it would be digestible by the platform and translated to the Topcoder community. Another aspect of this was the ability for non technical marketers and project managers to easily enter the information so that employees of our clients would be comfortable adopting this crowdsourcing format of completing projects.

Customer Feedback

Our team attended Topcoder events and held work groups with clients and Topcoder community members. We wanted to hear how we could make the product better. We wanted to hear their thoughts about the solutions we had come up with and understand what tools they felt would make them more successful.

As a team we analyzed conversations and responses to help create the processes and tools that would become the Topcoder Connect platform.

Design Assets

Application Map

Creating an app map was a great way to understand the structure of the solution and make sure the entire team was on the same page. With the complexity of the app it was necessary to crete consensus around the solution

Project creation app map - internal user

Scenarios

Most UI elements had multiple states. Some had dozens. The application status panel was one of those. It was necessary to illustrate each possible state as well as spec out css and any animations that were to occur from user actions.

Project status cards

Personas

As part of the research process I researched users and created personas for all the users that we could forsee using our system. First I started with proto-personas, then expanding these through further research created real personas based on actual users.

I printed these out on large sheets an hung them in our product teams area. This helps everyone on the team to relate to the users and identify with their needs. Keeping the user in mind for everyone is a powerful tool to help create a user centered product.

UI Kit - Dark vs Light

We knew that in the near future our team would be getting larger and we would have the need to make sure our designs remained consistent and the team remained efficient. We created a comprehensive UI Kit that included all the elements, components and pages that currently existed. We had multiple states and a light and dark UI to account for.

The Product

For the duration of the project the team worked to bring multiple pieces of software together into one app that allowed for clients to enter and manage their projects. It allowed for Topcoder employees to manage their clients and the community. And it allowed the Topcoder community to compete on projects and mange their careers within the Topcoder community.

My main contributions and successes came from designing a project entry wizard, project management tools and messaging tools that allowed all of a projects stakeholders to easily participate in a successful completion of the clients project.

Project creation wizard

Recent Portfolios

Slink

Appirio-Topcoder

Adobe Social

FAMOUS INDUSTRIES

About Me

A curious product designer with a passion for technology and things that fly.