IBM crowdsourcing platform

UX Design, Interaction Design, Front-end dev. 2017.

Overview

During the first months of my one-year internship at the IBM Center for Advanced Studies in Amsterdam, I researched and designed the look and feel of a new crowdsourcing platform called ECrowd. The department developed ECrowd as part of new and ongoing research projects. Within ECrowd, users can create their own crowdsourcing application and tasks, and generate an app for mobile phones out of this. Unfortunately, setting up a new crowdsourcing app was a very technical and complex process. Users were not able to get started on their own. I used IBM Design Thinking to design ECrowd and improve its usability. This was part of my graduation project and I was the only designer within the development team.

Research question

How can the interface and user assistance of ECrowd be designed in such a way that users can manage their own crowdsourcing application independently?

Visual explanation of ECrowd

Visual explanation of ECrowd

Final designs

ECrowd Dashboard
Knowledge base ECrowd Templates: Define custom variables

Old designs (my starting point)

Screenshot: Old ECrowd design
Screenshot: Old ECrowd design

The Design Process

The IBM Design Thinking Loop

The entire design project was a continuous loop of observing, reflecting and making - as illustrated by the 'IBM Design Thinking Loop'.

Stakeholder analysis

First of all, I mapped all stakeholders involved. For a succesful project it was important to understand who is affected by the project outcome and bring together various people. I also identified Sponsor Users: (potential) users I should reach out to during my project regularly to discuss progress.

Stakeholder map

User Research

Then, I started to conduct user research. I interviewed current and potential users and created personas and empathy maps - partly on my own and partly by involving team members during brainstorm sessions.

Empathy Maps brainstorm

Pain points

As a result of user research, I summarized pain points and processed them in several ways, such as mapping the current workflows into As-Is Scenarios to explore areas of improvement. These design artifacts helped me to identify user pain points.

First encounter Users don't know what to do after they are logged in. Users have no idea where to start.

Help! There is no knowledge base, FAQ, or support desk that can help with understanding ECrowd.

No templates ECrowd's flexibility is great, but users don't want to design their entire application from scratch.

As-Is Scenarios

Ideation

I organized an ideation workshop with the team and stakeholders. This resulted in many ideas on how to improve the platform.

Brainstorm

Idea prioritization

Based on the ideation workshop, a number of common themes emerged and similar ideas were grouped and presented to the development team. Together we prioritized ideas based on feasibility in terms of resources, time, and value brought to the user. Throughout the process, regular talks with other ECrowd team members were useful to see what was possible within the platform and what was realistic within the available time and resources.

Prioritized ideas

Literature research

Literature research and competitive analysis were useful to improve my understanding of the business context and relevant practices in designing the interface and user assistance.

Literature review

Design goals

Next, I created three Hills: an IBM Design Thinking approach for setting design goals. Hills serve as a good way to work on solutions seen from the persona's pain points. I made hills that focused on onboarding and assisting users and designing an easy way for non-technical users to manage ECrowd.

Hills

Prototyping and testing

I designed low-fidelity prototypes and implemented this into the platform. I tested the prototypes with three users to see how they responded and to find out what they liked and what they didn't like. Several parts of the prototype were changed according to their feedback (see below).

The designs

Global design

ECrowd was created because of the department's need for a crowdsourcing tool. In the beginning, there wasn't a focus on the interface, so I had the opportunity to define a global design for the platform. I based this on the IBM Design Language.

Global design

Create a new crowdsourcing app

Creating your first crowdsourcing app with ECrowd is improved with a set-up wizard with colorpickers, live preview, and other elements. This helps users to quickly set-up an application with pre-defined settings, while keeping advanced options available under tabs.

ECrowd: Create a new crowdsourcing app

Dashboard page

To simplify the application, I restructured the menu. Users said they were lost after accessing ECrowd for the first time, so I created a knowledge base and a Dashboard landing page with basic information and guidance.

ECrowd Dashboard

Create crowdsourcing tasks: Template page

Each crowdsourcing application consists of tasks: questions or small assignments to be completed by the end-user. The ECrowd user creates those tasks in ECrowd, but initially, they could only do this by coding templates in HTML and JavaScript. Surprisingly, the non-technical users said they did not find this to be the biggest problem; they liked the flexibility of ECrowd and said they could ask a colleague for help if they were stuck with coding. Their main concern, however, was that they didn’t know how to start at all. Experienced technical users said the same thing.

After the interviews, I found that the most important differentiator between the personas was related to their technical expertise. ECrowd could potentially deal with users with a wide range of technical backgrounds, so it was a challenge to find a solution without losing the flexibility of the platform and still keeping it modular. I chose to implement a drag-and-drop template builder. Users can drag pre-defined blocks and see a live preview, but also use the advanced code editor.

ECrowd Templates

Upon using the code editor, more experienced technical users are able to have extensive control over their application and task templates. They can use the editor and create custom variables if they feel they are limited by the drag-and-drop elements.

ECrowd Templates: Define custom variables

Iterations

After user testing, several parts of the prototype were changed according to feedback. Next to a few technical improvements, I changed the color pickers, the drag-and-drop blocks and a few other elements.

Some prototypes were changed according to user feedback

Implementation

After testing, I implemented the prototypes into the platform. For this, I used HTML, CSS, JavaScript and Java.

Conclusion

Working on ECrowd has definitely helped me to improve my UX design skills. I did a lot of research to inform design decisions, and I learned how I could apply IBM Design Thinking to build a better product. Because doing research was an important part of my thesis, I sometimes found myself putting too much emphasis on researching and analyzing the user situation, especially at the beginning of the project. Now, I would start prototyping much earlier. The complexity of the project was challenging, and working in a multidisciplinary team with people from different backgrounds was a great experience.

Other internship work

Besides working on ECrowd, I got the opportunity to extend my internship. I learned a lot more about IBM and worked on other projects too. For instance, I designed the interactions for this 'smart home' Internet-of-Things dashboard. It was used during multiple IBM client/partner events to show in an interactive way how IBM's IoT solutions can help clients.

IoT Dashboard for IBM client/partner events.